/* ============================================================================
   preicfes-panel-alignment.css
   ----------------------------------------------------------------------------
   Capa de alineación visual del panel Vue/Inertia (QwikTest) con el sistema de
   estilo del home de Preicfes App (inicio.php), SIN recompilar los bundles.

   public/css/app.css y public/js/* están compilados y no existen sus fuentes
   (.vue), por lo que un rebuild con purge de Tailwind los rompería. Este
   archivo se carga DESPUÉS de css/app.css desde resources/views/app.blade.php
   y sobreescribe (con !important donde hace falta) los selectores reales del
   compilado:

   - Azul PrimeVue #2196f3 / hover #0d89ec  -> violeta #5B3DF5 / hover #4C30D4
   - Highlights suaves #e3f2fd / focus #a6d5fa -> violeta translúcido
   - Header admin #3d4858 -> navy marca #07143A
   - Opciones de pregunta rgba(99,208,242,*) -> rgba(91,61,245,*)
   - Tipografía PrimeVue -> Manrope (via --custom-font)
   - .card, .qt-btn*, .bg-gray-100, NProgress -> tokens del home

   Tokens de referencia: navy #07143A, violeta #5B3DF5, hover #4C30D4,
   violeta suave #8B7CFF, gris #666A82, fondo #F7F8FC, borde #E6E8F0.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens raíz: color primario y tipografía de PrimeVue
   (mismo selector :root que el compilado; al cargar después, gana)
--------------------------------------------------------------------------- */
:root {
    --primary-color: #5B3DF5;
    --font-family: var(--custom-font, "Manrope"), ui-sans-serif, system-ui,
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol";
}

.p-component,
.p-inputtext,
.p-link,
.p-editor-container .ql-editor {
    font-family: var(--custom-font, "Manrope"), ui-sans-serif, system-ui,
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif !important;
}

/* ---------------------------------------------------------------------------
   2. Fondos sólidos azules (#2196f3) -> violeta
--------------------------------------------------------------------------- */
.p-button,
.p-badge,
.p-tag,
.p-checkbox .p-checkbox-box.p-highlight,
.p-input-filled .p-checkbox .p-checkbox-box.p-highlight,
.p-radiobutton .p-radiobutton-box.p-highlight,
.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight,
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider,
.p-selectbutton .p-button.p-highlight,
.p-togglebutton.p-button.p-highlight,
.p-slider .p-slider-range,
.p-progressbar .p-progressbar-value,
.p-datatable .p-column-resizer-helper,
.p-treetable .p-column-resizer-helper,
.p-overlaypanel .p-overlaypanel-close,
.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button,
.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button,
.fc .fc-toolbar .fc-button,
.fc .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active,
.fc .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active,
.fc .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active {
    background: var(--primary-color, #5B3DF5) !important;
    border-color: var(--primary-color, #5B3DF5) !important;
}

.p-slider .p-slider-handle,
.p-timeline .p-timeline-event-marker {
    border-color: var(--primary-color, #5B3DF5) !important;
}

.p-slider:not(.p-disabled) .p-slider-handle:hover {
    background: var(--primary-color, #5B3DF5) !important;
    border-color: var(--primary-color, #5B3DF5) !important;
}

/* Hovers/darken (#0d89ec) -> violeta oscuro */
.p-button:enabled:hover,
.p-button:not(:disabled):hover,
.p-selectbutton .p-button.p-highlight:hover,
.p-togglebutton.p-button.p-highlight:hover,
.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider,
.p-overlaypanel .p-overlaypanel-close:enabled:hover,
.p-fileupload-choose:not(.p-disabled):hover,
.fc .fc-toolbar .fc-button:enabled:hover,
.fc .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover,
.fc .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover,
.fc .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover,
.fc .fc-view-harness .fc-event,
.fc .fc-view-harness .fc-event-main {
    background: #4C30D4 !important;
    border-color: #4C30D4 !important;
}

/* Botones outlined / text: color azul -> violeta y fondos translúcidos */
.p-button.p-button-outlined,
.p-button.p-button-text,
.p-button .p-badge {
    color: var(--primary-color, #5B3DF5) !important;
}

.p-button.p-button-outlined:enabled:hover,
.p-button.p-button-text:enabled:hover {
    background: rgba(91, 61, 245, .06) !important;
    color: #4C30D4 !important;
}

.p-button.p-button-outlined:enabled:active,
.p-button.p-button-text:enabled:active {
    background: rgba(91, 61, 245, .16) !important;
    color: #4C30D4 !important;
}

/* ---------------------------------------------------------------------------
   3. Acentos de texto/iconos azules -> violeta
--------------------------------------------------------------------------- */
.p-rating .p-rating-icon.pi-star,
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover,
.p-datatable .p-sortable-column.p-highlight,
.p-datatable .p-sortable-column.p-highlight:hover,
.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon,
.p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon,
.p-treetable .p-sortable-column.p-highlight,
.p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon,
.p-editor-container .ql-snow.ql-toolbar button.ql-active,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label {
    color: var(--primary-color, #5B3DF5) !important;
}

.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
    stroke: var(--primary-color, #5B3DF5) !important;
}

.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill {
    fill: var(--primary-color, #5B3DF5) !important;
}

/* Tabs activas (tabview / tabmenu) */
.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link,
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
    border-color: var(--primary-color, #5B3DF5) !important;
    color: var(--primary-color, #5B3DF5) !important;
}

/* ---------------------------------------------------------------------------
   4. Highlights suaves (#e3f2fd) -> violeta translúcido
   (ítems seleccionados de listas, dropdowns, calendario, paginador, steps...)
--------------------------------------------------------------------------- */
.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight,
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight,
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight,
.p-listbox .p-listbox-list .p-listbox-item.p-highlight,
.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight,
.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight,
.p-picklist .p-picklist-list .p-picklist-item.p-highlight,
.p-organizationchart .p-organizationchart-node-content.p-highlight,
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight,
.p-datepicker table td > span.p-highlight,
.p-datepicker table td.p-datepicker-today > span.p-highlight,
.p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight,
.p-datatable .p-datatable-tbody > tr.p-highlight,
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(2n).p-highlight,
.p-treetable .p-treetable-tbody > tr.p-highlight,
.p-datatable .p-sortable-column .p-sortable-column-badge,
.p-treetable .p-sortable-column .p-sortable-column-badge,
.p-paginator .p-paginator-pages .p-paginator-page.p-highlight,
.p-steps .p-steps-item.p-highlight .p-steps-number {
    background: rgba(91, 61, 245, .12) !important;
    border-color: rgba(91, 61, 245, .12) !important;
    color: #4C30D4 !important;
}

/* ---------------------------------------------------------------------------
   5. Bordes hover y anillos de focus (#2196f3 / #a6d5fa) -> violeta
--------------------------------------------------------------------------- */
.p-inputtext:enabled:hover,
.p-dropdown:not(.p-disabled):hover,
.p-multiselect:not(.p-disabled):hover,
.p-cascadeselect:not(.p-disabled):hover,
.p-chips .p-chips-multiple-container:not(.p-disabled):hover,
.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover,
.p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
    border-color: var(--primary-color, #5B3DF5) !important;
}

.p-inputtext:enabled:focus,
.p-dropdown:not(.p-disabled).p-focus,
.p-multiselect:not(.p-disabled).p-focus,
.p-cascadeselect:not(.p-disabled).p-focus,
.p-chips .p-chips-multiple-container:not(.p-disabled).p-focus,
.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus,
.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus,
.p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
    border-color: var(--primary-color, #5B3DF5) !important;
    box-shadow: 0 0 0 .2rem rgba(91, 61, 245, .25) !important;
}

.p-button:enabled:focus,
.p-link:focus {
    box-shadow: 0 0 0 .2rem rgba(91, 61, 245, .25) !important;
}

/* ---------------------------------------------------------------------------
   6. Header del admin: hover/activo #3d4858 -> navy marca
--------------------------------------------------------------------------- */
#admin-header .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover,
#admin-header .p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link {
    background: #07143A !important;
}

/* ---------------------------------------------------------------------------
   7. Opciones de pregunta (qt-option): celeste rgba(99,208,242,*) -> violeta
--------------------------------------------------------------------------- */
.bg-qt-option {
    background-color: rgba(91, 61, 245, .12) !important;
}

.q-radio .q-options .q-option input:checked ~ label,
.q-radio .q-options .q-option label.answered,
.q-inputs .answered input {
    border-color: #5B3DF5 !important;
}

/* El círculo con la letra de la opción lleva texto blanco: violeta sólido */
.q-radio .q-options .q-option input:checked ~ label span.o-id,
.q-radio .q-options .q-option label.answered span.o-id,
.q-inputs .answered .i-id label {
    background-color: #5B3DF5 !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
   8. Tarjetas: radio 20px, borde y sombra del home
--------------------------------------------------------------------------- */
.card {
    border: 1.5px solid #E6E8F0 !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 12px rgba(7, 20, 58, .06) !important;
}

/* ---------------------------------------------------------------------------
   9. Botones qt-btn*: pill, weight 700, sin uppercase
--------------------------------------------------------------------------- */
.qt-btn,
.qt-btn-lg,
.qt-btn-sm,
.qt-btn-outline-sm {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Primario: violeta con hover más oscuro (anula el opacity:.9 del compilado) */
.qt-btn-primary {
    background-color: var(--primary-color, #5B3DF5) !important;
    color: #fff !important;
}

.qt-btn-primary:hover {
    background-color: #4C30D4 !important;
    opacity: 1 !important;
}

.qt-btn-outline-sm {
    border-color: var(--primary-color, #5B3DF5) !important;
}

.qt-btn-outline-sm:hover {
    background-color: #4C30D4 !important;
    color: #fff !important;
}

/* Success y danger conservan su semántica (verde/rojo del compilado);
   solo heredan la forma pill definida arriba. */

/* ---------------------------------------------------------------------------
   10. Fondo general del panel: bg-gray-100 (#f3f4f6) -> fondo suave del home
--------------------------------------------------------------------------- */
.bg-gray-100 {
    background-color: #F7F8FC !important;
}

/* ---------------------------------------------------------------------------
   11. NProgress (barra de carga Inertia): #29d -> violeta
--------------------------------------------------------------------------- */
#nprogress .bar {
    background: #5B3DF5 !important;
}

#nprogress .peg {
    box-shadow: 0 0 10px #5B3DF5, 0 0 5px #5B3DF5 !important;
}

#nprogress .spinner-icon {
    border-top-color: #5B3DF5 !important;
    border-left-color: #5B3DF5 !important;
}