/* ═══════════════════════════════════════════════════════════════════════
   Componentes base (línea de diseño v3 · S06)
   ═══════════════════════════════════════════════════════════════════════

   Botones, formularios, validación, badges de estado, tablas y modales.

   ── Cómo está hecho, y por qué así ─────────────────────────────────────

   Esta hoja NO introduce clases nuevas. Reescribe las que el ERP ya usa —las
   de Bootstrap 3 y las que emite YiiBooster— sobre los tokens del sistema.

   Es deliberado. El ERP tiene 337 controladores y miles de vistas; una capa
   de componentes que exija cambiar el marcado se aplicaría en las pantallas
   nuevas y dejaría las viejas como estaban, que es exactamente el resultado
   que un rediseño no puede permitirse. Reescribiendo `.btn-primary` cambian
   las 337 a la vez, hoy.

   El precio es la cascada: Bootstrap y las hojas viejas del ERP declaran
   varias de estas propiedades con `!important` (`.btn-primary` estaba en
   `#FF6B00 !important` en us-grid-view.css). Donde hay que ganar esa pelea se
   usa `!important` y se dice por qué en el sitio; donde no hace falta, no se
   usa.

   ORDEN DE REGISTRO: después de styles.css y us-grid-view.css. Lo garantiza
   SIANAssets::registerCoreCss(), y si alguien la reordena, esto deja de
   aplicarse sin dar ningún error. Es la única dependencia frágil del fichero.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── BOTONES ───────────────────────────────────────────────────────────
   Alto 36 (`--sian-control`), radio 6, y una jerarquía de cuatro:

     primaria    la acción de la pantalla, en naranja de marca. UNA por
                 pantalla; si hay dos, una de las dos no lo es.
     secundaria  superficie con borde. Cancelar, volver, lo reversible.
     fantasma    sin caja hasta el hover. Ver detalle, acciones de fila.
     destructiva ROJO PLENO, nunca el naranja de marca. La línea lo dice
                 expresamente para el modal de anulación, y la razón es que
                 anular un comprobante y registrarlo no pueden parecerse.
   ------------------------------------------------------------------- */
.btn {
    height: var(--sian-control, 36px);
    padding: 0 18px;
    border-radius: var(--sian-r-boton, 6px);
    font-family: var(--sian-sans, "IBM Plex Sans", system-ui, sans-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: calc(var(--sian-control, 36px) - 2px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Un botón dentro de una celda de grilla o de una barra de herramientas no
   puede medir 36: la fila entera mide 32 en densidad compacta. */
.btn.btn-xs,
.btn-group-xs > .btn {
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 24px;
}
.btn.btn-sm,
.btn-group-sm > .btn {
    height: 30px;
    padding: 0 14px;
    font-size: 12.5px;
    line-height: 28px;
}

/* El foco SIEMPRE visible: anillo de 3px al 18%. Es requisito de la línea y
   de cualquier navegación por teclado. Bootstrap 3 lo apagaba con
   `outline: none` en varios sitios. */
.btn:focus,
.btn:focus-visible,
.btn.active:focus,
.btn:active:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--sian-foco, rgba(30, 127, 160, 0.18));
}

/* Primaria. El `!important` es para ganarle a us-grid-view.css, que fijaba
   `.btn-primary` en el naranja viejo #FF6B00 con `!important`. */
.btn-primary,
.btn-primary:focus {
    background-color: var(--sian-accion, #B84E12) !important;
    border: 1px solid var(--sian-accion, #B84E12) !important;
    color: var(--sian-accion-texto, #fff) !important;
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:active:hover,
.btn-primary.active {
    background-color: var(--sian-accion-hover, #D45C16) !important;
    border-color: var(--sian-accion-hover, #D45C16) !important;
    color: var(--sian-accion-texto, #fff) !important;
}

/* Secundaria. */
.btn-default,
.btn-default:focus {
    background-color: var(--sian-superficie, #fff);
    border: 1px solid var(--sian-borde, #E3E8EF);
    color: var(--sian-texto, #1B1F26);
}
.btn-default:hover,
.btn-default:active,
.btn-default:active:hover {
    background-color: var(--sian-superficie, #fff);
    border-color: var(--sian-seleccion, #1E7FA0);
    color: var(--sian-seleccion, #1E7FA0);
}

/* Fantasma. */
.btn-link {
    height: var(--sian-control, 36px);
    padding: 0 14px;
    border: none;
    background: transparent;
    color: var(--sian-texto-2, #5B6675);
    text-decoration: none;
}
.btn-link:hover,
.btn-link:focus {
    background-color: var(--sian-fila-alterna, #EEF1F6);
    color: var(--sian-texto, #1B1F26);
    text-decoration: none;
}

/* Destructiva. ROJO SOBRE SU TINTE, no rojo pleno.
   Punto 06 del documento de línea («Anular»). El sólido lo tenía antes, y un
   botón rojo lleno pesa lo mismo que la acción principal de la pantalla:
   anular no es la acción principal de ninguna. El rojo se mantiene porque
   anular y registrar no pueden parecerse. */
.btn-danger,
.btn-danger:focus {
    background-color: hsl(var(--destructive) / 0.1) !important;
    border: 1px solid hsl(var(--destructive) / 0.45) !important;
    color: var(--sian-error, #C4362F) !important;
    font-weight: 600;
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger:active:hover {
    background-color: hsl(var(--destructive) / 0.18) !important;
    border-color: hsl(var(--destructive) / 0.6) !important;
    color: var(--sian-error, #C4362F) !important;
}

/* `btn-success` y `btn-info` NO existen como variante de botón en la línea.
   El documento define cinco: primaria, secundaria, fantasma, destructiva y
   la del asistente. Ninguna es verde ni azul.

   Y el verde tiene dueño: es el «Sí» y el «Aceptado SUNAT» de las celdas. Un
   botón verde al lado de un dato verde le roba el significado al dato. Antes
   aquí se les daba «forma de secundaria con la tinta de éxito», que era el
   paso intermedio; ahora son secundarias a secas. */
.btn-success,
.btn-success:focus,
.btn-info,
.btn-info:focus {
    background-color: var(--sian-fondo, #F5F7FA) !important;
    border: 1px solid var(--sian-borde, #E3E8EF) !important;
    color: var(--sian-texto, #1B1F26) !important;
}
.btn-success:hover,
.btn-success:active,
.btn-success:active:hover,
.btn-info:hover,
.btn-info:active,
.btn-info:active:hover {
    background-color: var(--sian-fila-alterna, #EEF1F6) !important;
    border-color: var(--sian-borde, #E3E8EF) !important;
    color: var(--sian-texto, #1B1F26) !important;
}

/* El icono blanco sobre el botón que ya no es de color.

   772 botones del ERP llevan el icono con la clase `.white`, que es
   `color:#fff !important` — de cuando el botón era verde, azul o naranja y el
   icono tenía que ir en blanco encima. Al apagar `btn-success` y `btn-info`
   arriba, el fondo pasó a ser casi blanco y el icono se quedó blanco: medido
   en el «Abrir» de Periodos, contraste 1.07:1. No desaparece del DOM, no da
   error y no se ve.

   Se dice al revés de como se rompió: el blanco solo es correcto DENTRO de un
   botón relleno, y en esta línea los rellenos son dos —el primario naranja y
   el destructivo rojo—. En cualquier otro, el icono toma el color del texto
   del botón, sea cual sea. Así también quedan cubiertos los botones que
   todavía no he mirado. */
.btn:not(.btn-primary):not(.btn-danger) .white {
    color: inherit !important;
}
/* Confirma la pulsación antes de que llegue la respuesta, que es justo cuando
   el usuario duda de si llegó a pulsar. */
.btn:active:not(:disabled) {
    transform: translateY(1px);
}
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── FORMULARIOS ───────────────────────────────────────────────────────
   Rótulo SOBRE el campo. Alto 36, radio 4. El error vive BAJO el campo,
   nunca solo en un aviso flotante: un toast se va solo y el campo que lo
   provocó se queda ahí, sin decir nada.
   ------------------------------------------------------------------- */
.form-control {
    height: var(--sian-control, 36px);
    padding: 0 12px;
    border: 1px solid var(--sian-borde, #E3E8EF);
    border-radius: var(--sian-r-input, 4px);
    background-color: var(--sian-superficie, #fff);
    box-shadow: none;
    color: var(--sian-texto, #1B1F26);
    font-family: var(--sian-sans, "IBM Plex Sans", system-ui, sans-serif);
    font-size: 13px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea.form-control {
    height: auto;
    padding: 8px 12px;
    line-height: 20px;
}
.form-control:focus {
    border-color: var(--sian-seleccion, #1E7FA0);
    box-shadow: 0 0 0 3px var(--sian-foco, rgba(30, 127, 160, 0.18));
    outline: none;
}
.form-control::placeholder {
    color: var(--sian-texto-2, #5B6675);
    opacity: 0.7;
}

/* «Campos calculados con fondo hundido»: se ve de un vistazo que ese número
   no se escribe, se calcula. Cubre los tres modos en que el ERP los marca. */
.form-control[readonly],
.form-control:disabled,
.form-control.sian-calculado {
    background-color: var(--sian-fila-alterna, #EEF1F6);
    border-color: var(--sian-borde, #E3E8EF);
    color: var(--sian-texto-2, #5B6675);
    cursor: default;
}

/* Importes, RUC, series y correlativos en ancho fijo. Se marca por tipo de
   campo y no a mano: `number` ya lo declara el propio formulario. */
input.form-control[type="number"],
.form-control.sian-mono,
.form-control.sian-cifra {
    font-family: var(--sian-mono, ui-monospace, Consolas, monospace);
    font-variant-numeric: tabular-nums;
}

.control-label {
    margin-bottom: var(--sian-e2, 8px);
    color: var(--sian-texto-2, #5B6675);
    font-size: 13px;
    font-weight: 500;
}
.form-group {
    margin-bottom: var(--sian-e4, 16px);
}

/* Validación. El campo se marca en rojo y el motivo va debajo, en el mismo
   sitio siempre. */
.has-error .form-control,
.form-control.error {
    border-color: var(--sian-error, #C4362F);
}
.has-error .form-control:focus,
.form-control.error:focus {
    border-color: var(--sian-error, #C4362F);
    box-shadow: 0 0 0 3px rgba(196, 54, 47, 0.18);
}
.has-error .control-label {
    color: var(--sian-texto-2, #5B6675);
}
.help-block,
.errorMessage,
.has-error .help-block {
    margin: 6px 0 0;
    color: var(--sian-error, #C4362F);
    font-size: 12px;
    line-height: 18px;
}
/* La ayuda del campo NO es un error, aunque comparta clase en Bootstrap 3. */
.form-group:not(.has-error) > .help-block.sian-ayuda {
    color: var(--sian-texto-2, #5B6675);
}

/* ── BADGES DE ESTADO ──────────────────────────────────────────────────
   «Ningún estado se comunica solo por color: color + etiqueta o icono.» Por
   eso son píldoras CON TEXTO y no puntos. El color acompaña la palabra.
   ------------------------------------------------------------------- */
.sian-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--sian-r-badge, 9999px);
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
.sian-badge-exito {
    background-color: var(--sian-exito-fondo, #E8F1EA);
    border-color: rgba(46, 122, 76, 0.45);
    color: var(--sian-exito, #2E7A4C);
}
.sian-badge-alerta {
    background-color: var(--sian-alerta-fondo, #FDF3E0);
    border-color: rgba(164, 95, 0, 0.45);
    color: var(--sian-alerta, #A45F00);
}
.sian-badge-error {
    background-color: var(--sian-error-fondo, #FCEAE8);
    border-color: rgba(196, 54, 47, 0.45);
    color: var(--sian-error, #C4362F);
}
.sian-badge-info {
    background-color: var(--sian-info-fondo, #E8F0FC);
    border-color: rgba(38, 104, 196, 0.45);
    color: var(--sian-info, #2668C4);
}
/* Borrador y anulado son AUSENCIA de estado, no un estado más: van en neutro
   para que no compitan con lo que sí exige atención. */
.sian-badge-neutro {
    background-color: var(--sian-fila-alterna, #EEF1F6);
    border-color: var(--sian-borde, #E3E8EF);
    color: var(--sian-texto-2, #5B6675);
}
/* «Leído por SIA»: lima, y solo aquí. Nunca en verde, que se leería como
   "aceptado por SUNAT" — que es justo la confusión que la línea prohíbe. */
.sian-badge-sia {
    background-color: rgba(168, 204, 53, 0.14);
    border-color: rgba(168, 204, 53, 0.55);
    color: #4E6E2C;
}
.sian-badge-sia img {
    display: block;
    height: 10px;
    width: auto;
}

/* ── TABLA DE DATOS ────────────────────────────────────────────────────
   OJO: lo de abajo ya NO pinta la grilla del ERP. Desde el rediseño de la
   grilla, `USGridView` emite `class="items sian-tabla"` y la pinta
   `css/sian-shell.css`, la hoja que comparten el ERP y SIAN 2 — el mismo
   fichero, no dos copias parecidas.

   Las reglas se quedan porque `.table` sigue vistiendo las tablas que NO son
   grilla: detalles de un documento, resúmenes dentro de un formulario. Lo que
   se retiró de cada selector es la parte `.grid-view table.items`, que ganaba
   por especificidad a la hoja compartida y dejaba la grilla con el aspecto
   anterior sin dar ningún error.

   «Cabecera fija, cebra sutil, números a la derecha en mono, sin bordes
   verticales. La fila total se ancla al pie y usa el neutro de hover para no
   competir con los datos.»

   Los bordes verticales son lo primero que se va: en una tabla de veinte
   columnas dibujan una rejilla que compite con los propios datos. Alinear a
   la derecha y separar por espacio hace el mismo trabajo sin tinta.
   ------------------------------------------------------------------- */
.table {
    border-collapse: collapse;
    font-size: 13px;
}
.table > thead > tr > th {
    /* El relleno horizontal es el MISMO que el de la celda de datos: sin él
       el encabezado no queda alineado con su columna, y en las numéricas
       —alineadas a la derecha— el rótulo se pega al de la columna siguiente.
       Se vio renderizando: "TOTAL S/" y "ESTADO" salían juntos. */
    padding: 8px var(--sian-e3, 12px);
    border: none;
    border-bottom: 1px solid var(--sian-borde, #E3E8EF);
    background-color: var(--sian-superficie, #fff);
    color: var(--sian-texto-2, #5B6675);
    font-family: var(--sian-sans, "IBM Plex Sans", system-ui, sans-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--sian-txt-columna-espaciado, 0.12em);
    text-transform: uppercase;
    white-space: nowrap;
}
/* El encabezado ORDENABLE es un <a>, y Bootstrap le pone su azul de enlace.
   Resultado: la columna por la que se puede ordenar salía azul y el resto
   gris, o sea que el encabezado cambiaba de color según la columna. Hereda.
   El hover sí se marca: ahí sigue siendo un enlace y hay que poder verlo. */
.table > thead > tr > th a {
    color: inherit;
    text-decoration: none;
}
.table > thead > tr > th a:hover {
    color: var(--sian-texto, #1B1F26);
    text-decoration: none;
}
.table > tbody > tr > td {
    height: var(--sian-fila, 40px);
    padding: 0 var(--sian-e3, 12px);
    border: none;
    border-bottom: 1px solid var(--sian-borde, #E3E8EF);
    color: var(--sian-texto, #1B1F26);
    vertical-align: middle;
}
/* Cebra sutil: una veladura del neutro, no un gris plano. */
.table-striped > tbody > tr:nth-child(even) {
    background-color: var(--sian-fila-alterna, #EEF1F6);
}
.table-hover > tbody > tr:hover {
    background-color: var(--sian-fila-alterna, #EEF1F6);
}
/* Los números a la derecha y en mono, que es lo que permite compararlos
   columna a columna sin leerlos uno por uno. */
.table td.sian-num,
.table th.sian-num,
td.numeric,
th.numeric {
    text-align: right;
    font-family: var(--sian-mono, ui-monospace, Consolas, monospace);
    font-variant-numeric: tabular-nums;
}
/* La fila de totales, anclada al pie y en el neutro de hover. */
.table > tfoot > tr > td {
    height: var(--sian-fila, 40px);
    padding: 0 var(--sian-e3, 12px);
    border: none;
    border-top: 1px solid var(--sian-borde, #E3E8EF);
    background-color: var(--sian-fila-alterna, #EEF1F6);
    font-weight: 600;
}

/* Paginación. Estaba en el naranja viejo con `!important`. */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: var(--sian-accion, #B84E12) !important;
    border-color: var(--sian-accion, #B84E12) !important;
    color: #fff !important;
}
.pagination > li > a,
.pagination > li > span {
    color: var(--sian-texto-2, #5B6675);
}

/* ── MODAL ─────────────────────────────────────────────────────────────
   Anchos 480 / 640 / 880. Acción destructiva a la derecha y en rojo pleno.
   ------------------------------------------------------------------- */
.modal-content {
    border: 1px solid var(--sian-borde, #E3E8EF);
    border-radius: var(--sian-r-card, 10px);
    background-color: var(--sian-superficie, #fff);
    box-shadow: var(--sian-sombra-2, 0 12px 32px rgba(8, 10, 14, 0.18));
}
.modal-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--sian-borde, #E3E8EF);
}
.modal-title {
    color: var(--sian-texto, #1B1F26);
    font-size: 16px;
    font-weight: 600;
}
.modal-body {
    padding: 18px 20px;
    color: var(--sian-texto, #1B1F26);
    font-size: 13px;
    line-height: 20px;
}
.modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--sian-borde, #E3E8EF);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sian-e2, 8px);
}
/* Bootstrap 3 separa los botones del pie con `margin-left` sobre el hermano,
   y con `gap` eso deja un hueco de más. */
.modal-footer .btn + .btn {
    margin-left: 0;
}
.sian-modal-sm .modal-dialog { width: 480px; max-width: 94vw; }
.sian-modal-md .modal-dialog { width: 640px; max-width: 94vw; }
.sian-modal-lg .modal-dialog { width: 880px; max-width: 94vw; }

/* ── DENSIDAD ──────────────────────────────────────────────────────────
   «La densidad es preferencia del usuario, no del módulo: una sola opción
   global para todo SIAN.» El atributo lo pone sian-navbar-settings.js en
   <html>, desde el menú de la cuenta, y desde ahí gobierna TODAS las tablas
   sin que ninguna vista sepa nada.
   ------------------------------------------------------------------- */
html[data-density="compact"] {
    --sian-fila: 32px;
    --sian-control: 32px;
}
html[data-density="comfortable"] {
    --sian-fila: 48px;
    --sian-control: 40px;
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .form-control {
        transition: none !important;
    }
    .btn:active:not(:disabled) {
        transform: none !important;
    }
}