/* ──────────────────────────────────────────────────────────────────────────────
   ESTÁNDAR DE CONTROLES — inputs, selects y botones de todo el sistema
   ──────────────────────────────────────────────────────────────────────────────
   Una sola definición de tamaño, borde, radio, foco y tipografía. Si un control
   se ve distinto al de al lado, el error está en una regla local: se corrige acá
   o se borra la regla local; no se parcha pantalla por pantalla.

   Se carga DESPUÉS de style.css, style_as.css y select_sistema.css, y ANTES de
   los CSS propios de cada pantalla (dashboard_*.css).

   TAMAÑOS
     Normal  .form-control · .form-select · .btn            34 px
     Pequeño .form-control-sm · .form-select-sm · .btn-sm   28 px
   El selector propio (js/select_sistema.js) usa los mismos tokens, de modo que
   input, select y botón alineados en una fila miden exactamente lo mismo.

   BOTONES (roles)
     Primaria     btn btn-primary-custom [btn-sm]
     Neutra       btn btn-light border   [btn-sm]
     Destructiva  btn btn-light border text-danger
     Modal        btn btn-primary / btn btn-secondary (dentro de .form-modal)
   No usar colores crudos de Bootstrap (btn-success, btn-danger, btn-outline-*…).
   ────────────────────────────────────────────────────────────────────────────── */

:root {
    --as-alto: 34px;
    --as-alto-sm: 28px;
    --as-radio: 8px;

    --as-borde: #d9e2ec;
    --as-borde-hover: #b9c7d8;
    --as-foco: 0 0 0 4px rgba(2, 83, 172, .12);

    --as-texto: #1e293b;
    --as-texto-suave: #475569;
    --as-placeholder: #94a3b8;
    --as-fondo-hover: rgba(2, 83, 172, .07);

    --as-fuente: .9rem;
    --as-fuente-sm: .8rem;

    /* Los botones llevan letra y relleno más compactos que los campos */
    --as-btn-fuente: .8rem;
    --as-btn-fuente-sm: .75rem;
    --as-btn-pad: 14px;
    --as-btn-pad-sm: 10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   CAMPOS: input, textarea, select
   ══════════════════════════════════════════════════════════════════════════ */
.form-control,
.form-select {
    height: var(--as-alto);
    padding: 0 12px;
    border: 1px solid var(--as-borde);
    border-radius: var(--as-radio);
    background-color: #fff;
    color: var(--as-texto);
    font-size: var(--as-fuente);
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* style.css reserva este espacio para la flecha del <select> nativo */
.form-select { padding-right: 2.25rem; }

.form-control-sm,
.form-select-sm {
    height: var(--as-alto-sm);
    padding: 0 10px;
    border-radius: var(--as-radio);
    font-size: var(--as-fuente-sm);
}

.form-select-sm { padding-right: 2rem; }

.form-control::placeholder { color: var(--as-placeholder); }

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--as-borde-hover); }

.form-control:focus,
.form-select:focus {
    border-color: #0253ac !important;
    box-shadow: var(--as-foco) !important;
    outline: 0;
}

/* Deshabilitado: atenuado. Solo lectura: fondo gris pero texto LEGIBLE (claves, enlaces y
   valores que el usuario tiene que leer o copiar). */
.form-control:disabled,
.form-select:disabled {
    background-color: #f1f5f9;
    color: #94a3b8;
}

.form-control[readonly]:not(:disabled) {
    background-color: #f8fafc;
    color: var(--as-texto);
}

.form-control.is-invalid,
.form-select.is-invalid { border-color: #dc3545 !important; }
.form-control.is-valid,
.form-select.is-valid { border-color: #198754 !important; }

/* Los de varias líneas y los de archivo crecen con su contenido */
textarea.form-control {
    height: auto;
    min-height: calc(var(--as-alto) * 2);
    padding: 8px 12px;
}

input[type="file"].form-control {
    height: auto;
    padding: 0;
    line-height: calc(var(--as-alto) - 2px);
}

input[type="file"].form-control::file-selector-button {
    height: calc(var(--as-alto) - 2px);
    margin: 0 12px 0 0;
    padding: 0 14px;
    border: 0;
    border-right: 1px solid var(--as-borde);
    background: #f8fafc;
    color: var(--as-texto-suave);
    font-weight: 600;
}

input[type="color"].form-control { padding: 4px; }

/* Fecha y hora: mismo alto que el resto y calendario discreto */
input[type="date"].form-control,
input[type="time"].form-control,
input[type="month"].form-control,
input[type="datetime-local"].form-control {
    display: block;
    min-width: 0;
    color-scheme: light;
}

input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="time"].form-control::-webkit-calendar-picker-indicator,
input[type="month"].form-control::-webkit-calendar-picker-indicator,
input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s ease;
}

input[type="date"].form-control::-webkit-calendar-picker-indicator:hover,
input[type="time"].form-control::-webkit-calendar-picker-indicator:hover,
input[type="month"].form-control::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Grupo de input: el texto lateral toma la misma altura y borde */
.input-group > .form-control,
.input-group > .form-select { height: var(--as-alto); }
.input-group-sm > .form-control,
.input-group-sm > .form-select { height: var(--as-alto-sm); }

/* Un botón dentro del grupo (copiar, buscar, mostrar contraseña) mide lo mismo que el campo.
   Antes un .btn normal (34 px) junto a un campo -sm (28 px) quedaba descuadrado. */
.input-group > .btn { min-height: var(--as-alto); height: var(--as-alto); }
.input-group-sm > .btn { min-height: var(--as-alto-sm); height: var(--as-alto-sm); padding-inline: 10px; }

.input-group-text {
    height: var(--as-alto);
    padding: 0 12px;
    border: 1px solid var(--as-borde);
    background: #f8fafc;
    color: var(--as-texto-suave);
    font-size: var(--as-fuente);
}

.input-group-sm > .input-group-text {
    height: var(--as-alto-sm);
    padding: 0 10px;
    font-size: var(--as-fuente-sm);
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > :not(:last-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   SELECTOR PROPIO (js/select_sistema.js): mismos tokens que los campos
   ══════════════════════════════════════════════════════════════════════════ */
.as-sel-btn {
    min-height: var(--as-alto);
    border-color: var(--as-borde);
    border-radius: var(--as-radio);
    color: var(--as-texto);
    font-size: var(--as-fuente);
}

.as-sel-sm .as-sel-btn {
    min-height: var(--as-alto-sm);
    border-radius: var(--as-radio);
    font-size: var(--as-fuente-sm);
}

.as-sel-btn:hover { border-color: var(--as-borde-hover); }

.as-sel-btn[aria-expanded="true"],
.as-sel-btn:focus-visible {
    border-color: #0253ac;
    box-shadow: var(--as-foco);
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════════════════════════════════════ */
.btn:not(.btn-link):not(.btn-close) {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: var(--as-btn-pad);
    --bs-btn-font-size: var(--as-btn-fuente);
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--as-radio);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--as-alto);
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn.btn-sm:not(.btn-link) {
    --bs-btn-padding-x: var(--as-btn-pad-sm);
    --bs-btn-font-size: var(--as-btn-fuente-sm);
    min-height: var(--as-alto-sm);
}

/* style.css fija un tamaño propio con !important; se iguala al estándar */
.btn.btn-primary-custom,
.btn.btn-secondary-custom { font-size: var(--as-btn-fuente) !important; }
.btn.btn-sm.btn-primary-custom,
.btn.btn-sm.btn-secondary-custom { font-size: var(--as-btn-fuente-sm) !important; }

/* Primaria: sin saltos al pasar el mouse */
.btn.btn-primary-custom { box-shadow: none; transform: none; }

/* Neutra y destructiva: la misma superficie en todos lados */
.btn.btn-light.border {
    background-color: #fff;
    border-color: var(--as-borde) !important;
    color: var(--as-texto-suave);
}

.btn.btn-light.border:hover:not(:disabled) {
    background-color: var(--as-fondo-hover);
    border-color: rgba(2, 83, 172, .35) !important;
    color: #0253ac;
}

.btn.btn-light.border.text-danger:hover:not(:disabled) {
    background-color: rgba(220, 53, 69, .07);
    border-color: rgba(220, 53, 69, .4) !important;
    color: #dc3545 !important;
}

.btn:disabled,
.btn.disabled { opacity: .55; cursor: not-allowed; }

/* Foco visible solo con teclado, con el mismo halo que los campos */
.btn:focus-visible {
    outline: 0;
    box-shadow: var(--as-foco) !important;
}

/* ── Modales: el botón primario y el secundario siguen el mismo estándar ───── */
.form-modal .btn-primary,
.form-modal .btn-secondary {
    min-height: var(--as-alto);
    padding: 0 18px;
    border-radius: var(--as-radio);
    font-size: var(--as-btn-fuente);
    font-weight: 600;
}

.form-modal .btn-primary { box-shadow: none; }
.form-modal .btn-primary:hover { transform: none; box-shadow: none; }

.form-modal .btn-secondary {
    background: #fff;
    border: 1px solid var(--as-borde);
    color: var(--as-texto-suave);
}

.form-modal .btn-secondary:hover,
.form-modal .btn-secondary:focus {
    background: var(--as-fondo-hover);
    border-color: rgba(2, 83, 172, .35);
    color: #0253ac;
}

/* ══════════════════════════════════════════════════════════════════════════
   PESTAÑAS (.nav-tabs) — subrayado, sin cajas
   ══════════════════════════════════════════════════════════════════════════
   Para formularios largos (p. ej. el de Horarios): General / Turnos / Tolerancias.
   La pestaña activa se marca con el subrayado azul del sistema. */
.nav-tabs {
    gap: 4px;
    border-bottom: 1px solid #e8edf2;
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    font-size: var(--as-btn-fuente);
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: color .15s ease, border-color .15s ease;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus-visible {
    border-bottom-color: rgba(2, 83, 172, .3);
    color: #0253ac;
}

.nav-tabs .nav-link.active {
    border-bottom-color: #0253ac;
    background: transparent;
    color: #0253ac;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODALES — una sola anatomía en todo el sistema
   ══════════════════════════════════════════════════════════════════════════
   Todos los modales salen de #modalGlobal (abrirModal() en js/utils.js lo clona) o
   siguen la misma estructura: .modal-header / .modal-body / .modal-footer.

     Cabecera   24 px de margen lateral, título 1.05rem 700, icono opcional en azul,
                línea inferior suave, botón cerrar de 32 px.
     Cuerpo     24 px lateral, 20 px vertical. Bloques separados por 16 px.
     Pie        fondo gris muy claro, botones a la derecha, separados 8 px, TODOS
                del mismo alto (componentes .btn). Primario a la derecha.
     Tamaños    sm 420 · md 560 · lg 800 · xl 1140 (el contenido manda, no al revés).

   REGLAS
   - Botones del pie: aceptar = btn-primary-custom, cancelar = btn btn-light border.
     No usar clases px-N, py-N ni rounded-N, ni font-size en línea: rompen la altura común.
   - Un campo con botón (copiar, buscar) va en .input-group: el botón toma la altura del campo.
   - Varios bloques en el cuerpo: envolverlos en .as-modal-pila (16 px entre bloques).
   - Avisos dentro del modal: .alert con icono; nada de cajas con bordes propios.
   - No apilar más de un modal salvo confirmaciones cortas (tamaño sm).
*/
:root {
    --as-modal-radio: 16px;
    --as-modal-pad-x: 24px;
}

.modal-content {
    border: 0;
    border-radius: var(--as-modal-radio);
    box-shadow: 0 24px 64px rgba(15, 23, 42, .22);
    overflow: hidden;
}

.modal-header {
    padding: 16px var(--as-modal-pad-x);
    border-bottom: 1px solid #eef1f5;
    gap: 12px;
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--as-texto);
    line-height: 1.3;
}

/* El icono del título (si lo hay) va en azul y en una pastilla, alineado al texto */
.modal-title > .bi:first-child {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    border-radius: 10px;
    background: rgba(2, 83, 172, .1);
    color: #0253ac;
    font-size: 1rem;
}

/* Tono del icono para modales de peligro, aviso o éxito: <i class="bi bi-trash text-danger"> */
.modal-title > .bi.text-danger:first-child  { background: rgba(220, 53, 69, .1); }
.modal-title > .bi.text-warning:first-child { background: rgba(255, 193, 7, .16); }
.modal-title > .bi.text-success:first-child { background: rgba(25, 135, 84, .1); }

.modal-header .btn-close {
    width: 32px;
    height: 32px;
    margin: 0 0 0 auto;
    padding: 0;
    border-radius: 8px;
    background-size: 12px;
    opacity: .55;
}

.modal-header .btn-close:hover { opacity: 1; background-color: #f1f5f9; }

.modal-body {
    padding: 20px var(--as-modal-pad-x);
    color: var(--as-texto);
    font-size: .9rem;
}

.modal-body > :last-child { margin-bottom: 0; }

/* Contenido de varios bloques (aviso, campo, tabla…): envolverlo en .as-modal-pila para que
   queden separados 16 px sin márgenes sueltos (mb-2, mb-3…) en cada bloque. */
.as-modal-pila { display: flex; flex-direction: column; gap: 16px; }
.as-modal-pila > * { margin-bottom: 0 !important; }
.as-modal-pila .form-label { margin-bottom: 6px; }

.modal-footer {
    padding: 12px var(--as-modal-pad-x);
    border-top: 1px solid #eef1f5;
    background: #f8fafc;
    gap: 8px;
}

.modal-footer > * { margin: 0; }

/* Botones del pie: misma altura, sin depender de clases sueltas */
.modal-footer .btn {
    min-width: 96px;
    min-height: var(--as-alto);
    padding-inline: 18px;
}

/* Alertas dentro del modal: compactas y con el icono alineado */
.modal-body .alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .85rem;
}

.modal-body .alert > .bi:first-child { margin: 1px 0 0 !important; }

/* Tamaños */
.modal-sm { --bs-modal-width: 420px; }
.modal-md { --bs-modal-width: 560px; }
@media (min-width: 992px) {
    .modal-lg { --bs-modal-width: 800px; }
}

/* Teléfono: el modal ocupa el ancho con 12 px de margen */
@media (max-width: 575.98px) {
    .modal-dialog { margin: 12px; }
    :root { --as-modal-pad-x: 16px; }

    /* Pie: los botones comparten la fila a partes iguales. style.css pone
       .btn-primary-custom a width:100% en móvil y lo dejaba en otra línea, más grande que el resto. */
    .modal-footer { flex-wrap: nowrap; }
    .modal-footer .btn { flex: 1 1 0; min-width: 0; width: auto !important; }
}