/* ==========================================================================
   Sistema Contable - estilos propios
   Complementa Bootstrap 5; no lo reemplaza.

   LA IDEA DEL DISEÑO

   Indigo electrico sobre lavanda clara. La barra lateral es un degradado violeta profundo
   que ancla la pantalla por la izquierda; el area de trabajo queda clara y aireada.

   El color se usa con intencion, no de relleno:

    - El INDIGO es la marca y la accion. Botones principales, la opcion activa del menu, el
      foco de los campos. Donde hay indigo, hay algo que hacer.

    - Los ESTADOS conservan su color de siempre —verde aceptado, rojo rechazado, ambar por
      vencer— pero pintados como pastillas de fondo tenue y texto saturado, no como bloques
      macizos. Se leen de lejos sin gritar.

    - Las FICHAS de cifras llevan una barra de color arriba. Es lo unico decorativo, y sirve:
      distingue de un vistazo un tablero de otro.

   Los combos usan la flecha del sistema reemplazada por una propia, con sitio de sobra a la
   derecha: con la del navegador, un nombre largo se metia por debajo de ella.
   ========================================================================== */

:root {
    /* ---- Lienzo ---- */
    --sc-fondo: #f4f4fb;
    --sc-superficie: #ffffff;
    --sc-superficie-2: #f8f8fd;

    /* ---- Marca ---- */
    --sc-primario: #5b3ff2;
    --sc-primario-claro: #8b5cf6;
    --sc-primario-oscuro: #4527d4;
    --sc-primario-tenue: #ede9ff;
    --sc-acento: #06b6d4;

    /* ---- Texto ---- */
    --sc-texto: #16132e;
    --sc-texto-2: #514c73;
    --sc-texto-3: #837da3;
    --sc-texto-4: #a9a4c4;

    /* ---- Lineas ---- */
    --sc-borde: #e7e5f4;
    --sc-borde-fuerte: #d8d5ec;

    /* ---- Estados. El color aqui SIGNIFICA algo. ---- */
    --sc-exito: #0a9d5c;
    --sc-exito-tenue: #e3f7ed;
    --sc-peligro: #e0334b;
    --sc-peligro-tenue: #fdeaed;
    --sc-aviso: #d97706;
    --sc-aviso-tenue: #fdf2e2;
    --sc-info: #0284c7;
    --sc-info-tenue: #e6f3fd;

    /* ---- Barra lateral ---- */
    --sc-lateral-1: #241c4d;
    --sc-lateral-2: #16123a;
    --sc-lateral-texto: #b9b3dd;
    --sc-lateral-activo: rgba(255, 255, 255, .08);

    --sc-ancho-lateral: 262px;

    --sc-sombra: 0 1px 2px rgba(22, 19, 46, .04), 0 2px 8px rgba(22, 19, 46, .045);
    --sc-sombra-alta: 0 24px 50px rgba(22, 19, 46, .22);
    --sc-sombra-indigo: 0 3px 10px rgba(91, 63, 242, .28);

    --sc-fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --sc-radio: 14px;
}

/* Bootstrap se pinta con sus propias variables. Se le cambian aqui para que botones,
   enlaces y focos hereden la paleta sin reescribir cada componente. */
:root {
    --bs-body-font-family: var(--sc-fuente);
    --bs-body-color: var(--sc-texto);
    --bs-body-bg: var(--sc-fondo);
    --bs-border-color: var(--sc-borde);
    --bs-link-color: var(--sc-primario);
    --bs-link-hover-color: var(--sc-primario-oscuro);
    --bs-border-radius: .6rem;
    --bs-primary: #5b3ff2;
    --bs-primary-rgb: 91, 63, 242;
}

html {
    /* Las cifras se leen en columna: los digitos tienen que ocupar todos lo mismo o la
       coma de los miles baila de una fila a otra. */
    font-variant-numeric: tabular-nums;
}

body {
    background: var(--sc-fondo);
    color: var(--sc-texto);
    font-family: var(--sc-fuente);
    font-size: 0.9rem;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    letter-spacing: -0.018em;
    font-weight: 700;
}

.font-monospace { font-family: var(--sc-mono) !important; }

::selection { background: var(--sc-primario-tenue); color: var(--sc-primario-oscuro); }

/* ---------------- Estructura ---------------- */

.sc-app {
    display: flex;
    min-height: 100vh;
}

.sc-barra-lateral {
    width: var(--sc-ancho-lateral);
    flex-shrink: 0;
    background: linear-gradient(170deg, var(--sc-lateral-1) 0%, var(--sc-lateral-2) 100%);
    color: var(--sc-lateral-texto);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.sc-contenido {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sc-principal {
    flex: 1;
    padding: 1.5rem 1.75rem 2.5rem;
    max-width: 1560px;
    width: 100%;
}

.sc-pie {
    padding: 0.85rem 1.75rem;
    border-top: 1px solid var(--sc-borde);
    font-size: 0.76rem;
    color: var(--sc-texto-4);
    background: transparent;
}

/* ---------------- Marca ---------------- */

.sc-marca {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.2rem 1rem 1rem;
}

.sc-marca-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(140deg, var(--sc-primario-claro), var(--sc-primario));
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    box-shadow: var(--sc-sombra-indigo);
}

.sc-marca-icono.grande {
    width: 52px;
    height: 52px;
    font-size: 1.15rem;
    border-radius: 15px;
}

.sc-marca-texto { min-width: 0; }

.sc-marca-texto strong {
    display: block;
    font-size: 0.96rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.sc-marca-texto small {
    display: block;
    font-size: 0.72rem;
    color: var(--sc-lateral-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------- Menu ---------------- */

.sc-menu { padding: 0.35rem 0.65rem 2rem; }

.sc-menu-grupo {
    padding: 1.2rem 0.65rem 0.35rem;
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(185, 179, 221, .62);
    font-weight: 700;
}

.sc-menu-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.52rem 0.7rem;
    border-radius: 9px;
    color: var(--sc-lateral-texto);
    text-decoration: none;
    font-size: 0.855rem;
    font-weight: 500;
    margin-bottom: 2px;
    transition: background-color .13s ease, color .13s ease;
}

.sc-menu-item:hover {
    background: var(--sc-lateral-activo);
    color: #fff;
}

/* La opcion activa se llena de indigo. Es el unico bloque de color saturado de la barra,
   asi que no hay forma de perder de vista donde se esta. */
.sc-menu-item.activo {
    background: linear-gradient(120deg, var(--sc-primario), var(--sc-primario-claro));
    color: #fff;
    font-weight: 600;
    box-shadow: var(--sc-sombra-indigo);
}

/* Los iconos son SVG en linea (ver IconosMenu.cs). No encogen cuando el nombre de la
   opcion es largo, por eso el flex-shrink en cero: si no, "Clientes y proveedores"
   aplasta su propio icono. */
.sc-menu-icono {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    opacity: 0.7;
}

.sc-menu-item:hover .sc-menu-icono,
.sc-menu-item.activo .sc-menu-icono { opacity: 1; }

/* Modulos aun no construidos: visibles pero claramente inactivos. */
.sc-menu-pendiente { opacity: 0.4; cursor: not-allowed; }

.sc-menu-pendiente em {
    font-size: 0.63rem;
    font-style: normal;
    margin-left: auto;
    background: rgba(255, 255, 255, .12);
    padding: 1px 6px;
    border-radius: 10px;
}

/* ---------------- Encabezado ---------------- */

.sc-encabezado {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.75rem;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sc-borde);
    position: sticky;
    top: 0;
    z-index: 20;
}

/* El boton "Volver" del encabezado. No se encoge: es de los que siempre tiene que estar
   accesible, aunque el titulo sea largo o la pantalla angosta. */
.sc-boton-volver {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sc-primario);
    background: var(--sc-primario-tenue);
    border: 1px solid transparent;
    border-radius: 0.55rem;
    text-decoration: none;
    transition: background-color .13s ease, color .13s ease;
}

.sc-boton-volver:hover,
.sc-boton-volver:focus-visible {
    background: var(--sc-primario);
    color: #fff;
}

.sc-encabezado-titulo { flex: 1; min-width: 0; }

.sc-encabezado-titulo h1 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    color: var(--sc-texto);
    line-height: 1.2;
    text-wrap: balance;
}

.sc-encabezado-titulo p {
    margin: 0.08rem 0 0;
    font-size: 0.79rem;
    color: var(--sc-texto-3);
}

.sc-encabezado-acciones {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.sc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--sc-primario-claro), var(--sc-primario));
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    margin-right: 0.35rem;
}

.sc-boton-menu {
    display: none;
    border: 1px solid var(--sc-borde);
    background: var(--sc-superficie);
    border-radius: 9px;
    padding: 0.25rem 0.6rem;
    font-size: 1.1rem;
    line-height: 1;
}

/* ---------------- Tarjetas ---------------- */

.sc-tarjeta {
    background: var(--sc-superficie);
    border: 1px solid var(--sc-borde);
    border-radius: var(--sc-radio);
    padding: 1.2rem 1.3rem;
    margin-bottom: 0;
    box-shadow: var(--sc-sombra);
}

.sc-tarjeta-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.95rem;
}

/* El formulario de filtros que vive dentro del encabezado ocupa el espacio que sobra.
   Sin esta linea el navegador le daba apenas el ancho de su primer control: el resto de
   los filtros se iba a un segundo renglon y el boton de la derecha quedaba flotando a
   media altura entre los dos. Pasaba en clientes, proveedores y varias listas mas. */
.sc-tarjeta-encabezado > form { flex: 1 1 auto; }

.sc-tarjeta-encabezado h2 {
    font-size: 1.02rem;
    font-weight: 700;
    margin: 0;
    color: var(--sc-texto);
}

/* La ficha de una cifra, con su barra de color arriba. */
.sc-indicador {
    position: relative;
    background: var(--sc-superficie);
    border: 1px solid var(--sc-borde);
    border-radius: var(--sc-radio);
    padding: 1.05rem 1.15rem 1rem;
    height: 100%;
    box-shadow: var(--sc-sombra);
    overflow: hidden;
}

.sc-indicador::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sc-primario), var(--sc-primario-claro), var(--sc-acento));
}

/* La cifra se encoge con la pantalla. En pesos colombianos un egreso del año pasa
   facilmente de los ocho digitos, y a tamaño fijo "$ 25.080.356" se parte en dos lineas
   dentro de una ficha angosta. */
.sc-indicador .valor {
    font-size: clamp(1.15rem, 0.72rem + 1.05vw, 1.72rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--sc-texto);
    letter-spacing: -0.03em;
}

.sc-indicador .etiqueta,
.etiqueta {
    font-size: 0.66rem;
    color: var(--sc-texto-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

/* ---------------- Grupo de opciones excluyentes ----------------
   Un radio corriente obliga a leer tres renglones sueltos para entender que son
   alternativas. Presentadas como tarjetas, la eleccion se ve de un vistazo y el area
   pulsable es toda la tarjeta, no el circulito. */

.sc-modo { display: grid; gap: 0.5rem; }

.sc-opcion {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    border: 1px solid var(--sc-borde);
    border-radius: 11px;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    background: var(--sc-superficie);
    transition: border-color .13s, background-color .13s;
}

.sc-opcion:hover { border-color: var(--sc-borde-fuerte); background: var(--sc-superficie-2); }

.sc-opcion input { margin-top: 0.2rem; flex-shrink: 0; }

.sc-opcion:has(input:checked) {
    border-color: var(--sc-primario);
    background: var(--sc-primario-tenue);
}

.sc-opcion:has(input:focus-visible) {
    outline: 2px solid var(--sc-primario);
    outline-offset: 2px;
}

/* ---------------- Tablas ---------------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sc-texto);
    --bs-table-border-color: var(--sc-borde);
    --bs-table-hover-bg: var(--sc-primario-tenue);
    margin-bottom: 0;
}

.table > :not(caption) > * > * { padding: 0.65rem 0.75rem; }

.table thead th {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sc-texto-3);
    font-weight: 700;
    border-bottom: 1px solid var(--sc-borde-fuerte);
    white-space: nowrap;
}

.sc-vacio { text-align: center; padding: 3rem 1rem; color: var(--sc-texto-4); }

/* ---------------- Graficos ---------------- */

/* Los rankings: nombre, barra, cifra y una nota corta. En rejilla y no en tabla, para que
   las cuatro columnas se alineen solas sin importar el largo de los nombres. */
.sc-ranking { display: grid; gap: 0.45rem; }

.sc-ranking-fila {
    display: grid;
    grid-template-columns: minmax(6rem, 1fr) minmax(3rem, 2fr) auto auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
}

.sc-ranking-nombre {
    color: var(--sc-texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-ranking-barra {
    background: var(--sc-superficie-2);
    border-radius: 999px;
    height: 11px;
    overflow: hidden;
}

.sc-ranking-barra > span {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.sc-ranking-valor { font-weight: 700; color: var(--sc-texto-2); white-space: nowrap; }

.sc-ranking-nota {
    color: var(--sc-texto-4);
    font-size: 0.73rem;
    white-space: nowrap;
    min-width: 2.5rem;
    text-align: right;
}

/* En pantalla angosta el nombre se lleva su propio renglon: aplastarlo en cuatro columnas
   lo dejaria en dos letras y unos puntos suspensivos. */
@media (max-width: 575.98px) {
    .sc-ranking-fila {
        grid-template-columns: 1fr auto auto;
    }

    .sc-ranking-nombre { grid-column: 1 / -1; }
}

/* El punto de color de la leyenda, que dice cual barra es cual. */
.sc-punto {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 0.3rem;
    vertical-align: baseline;
}

/* Los reportes se imprimen y se llevan al banco o al contador. Al imprimir sobran el menu,
   el encabezado y los botones; lo que importa es que las cifras quepan en la hoja. */
@media print {
    .sc-barra-lateral,
    .sc-encabezado,
    .sc-pie,
    .btn,
    form .form-select { display: none !important; }

    .sc-principal { padding: 0; max-width: none; }

    .sc-tarjeta, .sc-indicador {
        box-shadow: none;
        border-color: #ccc;
        break-inside: avoid;
    }

    body { background: #fff; font-size: 11px; }

    /* Cada nota entera en la misma pagina siempre que quepa: una nota partida a la mitad
       obliga a quien la lee a pasar la hoja para saber a que rubro pertenece la tabla. */
    .sc-notas section { break-inside: avoid-page; }
}

/* ---------------- Formularios ---------------- */

.form-label {
    /* En bloque, no en linea: como elemento de linea la etiqueta arrastraba el espacio
       de la caja de texto que la contiene —dos pixeles de mas— y entonces su alto real
       no coincidia con el que se le calcula abajo para bajar los botones a su nivel. */
    display: block;
    font-size: 0.79rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--sc-texto-2);
    margin-bottom: 0.3rem;
}

/* Todas las etiquetas de un formulario reservan el alto de dos renglones.

   Una etiqueta larga —"Numero de identificacion", "Identificacion del representante"— se
   parte en dos lineas y empuja su campo 19 px hacia abajo, mientras el campo de al lado,
   con etiqueta corta, se queda arriba. Se ve como un escalon, y aparece o desaparece segun
   el ancho de la ventana, que es lo que lo hacia dificil de perseguir pantalla por pantalla.

   Reservando el mismo alto para todas, los campos de una fila arrancan parejos siempre,
   se parta la etiqueta o no. Cuesta un renglon en blanco sobre las etiquetas cortas; a
   cambio, la reja de campos se lee alineada en cualquier tamaño de pantalla.

   Solo aplica a las rejas de campos, y no a la etiqueta chica: esa la usan las barras de
   filtros, con etiquetas de una palabra que nunca se parten y donde el renglon de mas solo
   estorbaria. */
form .row .form-label:not(.small) {
    min-height: calc(0.79rem * 1.5 * 2);

    /* El texto se apoya abajo del hueco reservado, pegado a su campo. Arriba queda el aire
       que separa un campo del de la fila anterior, que es donde ese espacio hace falta. */
    display: flex;
    align-items: flex-end;
}

/* ---------------- Altura pareja de los controles ----------------

   Un campo de texto, un combo y un boton se escriben distinto y por eso Bootstrap les da
   alturas distintas: unos pocos pixeles de diferencia. Puestos en la misma fila de filtros,
   esa diferencia se ve como un escaloncito, y era el origen de casi toda la desalineacion
   del sistema —entre 6 y 9 pixeles segun la pantalla—.

   Fijandoles la misma altura minima quedan alineados sin importar como se alinee la fila,
   por arriba o por abajo. Es una linea de CSS que arregla treinta pantallas a la vez. */

.form-control, .form-select, .btn { min-height: 2.45rem; }
.form-control-sm, .form-select-sm, .btn-sm { min-height: 2rem; }
.form-control-lg, .form-select-lg, .btn-lg { min-height: 2.9rem; }

/* El texto del boton se centra solo dentro de la altura que le toque. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

/* ---------------- Boton de dos renglones ----------------

   Hay botones que no son un boton de una linea sino una opcion de menu: un titulo y,
   debajo, una frase que explica a donde lleva. Se usan en los accesos de nomina, de
   contabilidad y de documentos electronicos.

   La regla de arriba los rompia. Al volver flex a todo .btn, el titulo y la descripcion
   dejaron de ser bloques y pasaron a ser dos elementos de la fila, uno al lado del otro y
   centrados: el "d-block" de la descripcion ya no partia el renglon y el "text-start" no
   servia de nada, porque quien manda es justify-content. La lista se veia despareja, con
   cada descripcion arrancando en un sitio distinto.

   Aqui se les devuelve la forma: en columna, pegados a la izquierda. Se engancha a
   text-start porque esa clase es justamente la que dice "este boton alinea a la izquierda",
   asi que no hay que marcar nada nuevo en las vistas. */
.btn.text-start {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.1rem;
    text-align: left;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/* La descripcion ocupa el ancho completo para que se parta sola y no empuje el titulo. */
.btn.text-start > .d-block {
    width: 100%;
    line-height: 1.35;
}

/* El area de texto crece por renglones; la altura minima no le aplica. */
textarea.form-control { min-height: 0; }

.form-control, .form-select {
    border-color: var(--sc-borde-fuerte);
    border-radius: 0.6rem;
    padding: 0.46rem 0.75rem;
    font-size: 0.885rem;
    color: var(--sc-texto);
    background-color: var(--sc-superficie);
    transition: border-color .13s ease, box-shadow .13s ease;
}

/* La variante pequeña hay que redefinirla, no heredarla.
   Al fijar el tamaño en .form-control, esa regla vence a la .form-control-sm de Bootstrap
   —misma especificidad, pero esta hoja carga despues—, asi que el campo pequeño se quedaba
   con el tamaño grande: 38 px contra los 32 de un combo. Ese era el escalon de 6 px que
   aparecia en casi todas las filas de filtros. */
.form-control-sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.815rem;
    border-radius: 0.5rem;
}

.form-control-lg {
    padding: 0.62rem 0.95rem;
    font-size: 0.95rem;
    border-radius: 0.7rem;
}

.form-control:hover, .form-select:hover { border-color: var(--sc-primario-claro); }

.form-control:focus, .form-select:focus {
    border-color: var(--sc-primario);
    box-shadow: 0 0 0 3px rgba(91, 63, 242, .16);
}

.form-control::placeholder { color: var(--sc-texto-4); }

/* ---------------- Combos ----------------

   La flecha del navegador se cambia por una propia, y se le reserva sitio de verdad a la
   derecha. Con la de serie, un nombre largo —"001 - Sede Principal"— se metia por debajo
   de la flecha y se leia cortado. */

.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b3ff2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 15px 15px;
    padding-right: 2.4rem;
    text-overflow: ellipsis;
}

.form-select-sm {
    padding: 0.3rem 2.1rem 0.3rem 0.65rem;
    font-size: 0.815rem;
    background-position: right 0.6rem center;
    background-size: 13px 13px;
    border-radius: 0.5rem;
}

/* El selector de sucursal del encabezado: se adapta al nombre pero con techo, y nunca
   deja que el texto se meta debajo de la flecha. */
.sc-selector {
    width: auto;
    min-width: 11rem;
    max-width: 17rem;
}

.form-check-input:checked {
    background-color: var(--sc-primario);
    border-color: var(--sc-primario);
}

.form-check-input:focus {
    border-color: var(--sc-primario);
    box-shadow: 0 0 0 3px rgba(91, 63, 242, .16);
}

.form-text { font-size: 0.75rem; color: var(--sc-texto-3); }

/* ---------------- Filas de filtros ----------------

   El problema que resuelve: una fila de filtros alineada por abajo (align-items-end) se
   desalinea en cuanto UNO de los campos lleva texto de ayuda. Ese texto crece hacia abajo,
   asi que al pegar los bloques por su base, el campo con ayuda sube y los demas quedan
   corridos respecto a el. Se veia en Medios magneticos: el combo del año quedaba mas abajo
   que el de cuantia minima.

   La solucion es alinear por ARRIBA. Como todas las etiquetas ocupan un renglon, alinear los
   bloques por su tope alinea las etiquetas entre si y, con ellas, los campos. El texto de
   ayuda cuelga debajo sin arrastrar nada.

   Los botones no llevan etiqueta, asi que se les baja lo que mide una: es la unica forma de
   que queden a la misma altura de los campos y no pegados al techo de la fila. */

:root {
    /* Lo que ocupa una etiqueta: 0.79rem x 1.5 de interlinea = 18,96 px, mas su margen
       inferior de 0.3rem = 4,8 px. En total 23,76 px. Es lo que hay que bajar un boton
       —que no lleva etiqueta— para que quede al mismo nivel que un campo que si la lleva. */
    --sc-alto-etiqueta: 1.485rem;
}

.sc-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
}

.sc-filtros > .btn,
.sc-filtros > button,
.sc-filtros > .sc-filtros-accion {
    margin-top: var(--sc-alto-etiqueta);
}

/* Un texto suelto dentro de la fila —un contador, una aclaracion— tambien baja, para que
   se lea a la altura de los campos y no flotando arriba. */
.sc-filtros > .sc-filtros-nota {
    margin-top: calc(var(--sc-alto-etiqueta) + 0.42rem);
}

/* Con la fila en columna, el margen que alinea los botones sobra y los separa de mas. */
@media (max-width: 575.98px) {
    .sc-filtros > .btn,
    .sc-filtros > button,
    .sc-filtros > .sc-filtros-accion,
    .sc-filtros > .sc-filtros-nota {
        margin-top: 0;
    }
}

/* ---------------- Botones ---------------- */

.btn {
    border-radius: 0.6rem;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.46rem 1rem;
    transition: transform .08s ease, box-shadow .13s ease, background-color .13s ease;
}

.btn:active { transform: translateY(1px); }

.btn-lg { font-size: 0.95rem; padding: 0.62rem 1.4rem; border-radius: 0.7rem; }
.btn-sm { font-size: 0.79rem; padding: 0.3rem 0.65rem; border-radius: 0.5rem; }

.btn-primary {
    --bs-btn-bg: var(--sc-primario);
    --bs-btn-border-color: var(--sc-primario);
    --bs-btn-hover-bg: var(--sc-primario-oscuro);
    --bs-btn-hover-border-color: var(--sc-primario-oscuro);
    --bs-btn-active-bg: var(--sc-primario-oscuro);
    --bs-btn-active-border-color: var(--sc-primario-oscuro);
    --bs-btn-focus-shadow-rgb: 91, 63, 242;

    /* Un boton apagado tiene que seguir leyendose. "Cobrar" pasa la mayor parte del tiempo
       deshabilitado en el punto de venta, y el cajero necesita saber que dice sin acercarse
       a la pantalla: se apaga bajando el contraste, no borrandolo. */
    --bs-btn-disabled-bg: #d5d2e8;
    --bs-btn-disabled-border-color: #d5d2e8;
    --bs-btn-disabled-color: #66618a;
    --bs-btn-disabled-opacity: 1;

    background-image: linear-gradient(120deg, var(--sc-primario), var(--sc-primario-claro));
    border: 0;
    box-shadow: var(--sc-sombra-indigo);
}

.btn-primary:hover:not(:disabled) {
    background-image: linear-gradient(120deg, var(--sc-primario-oscuro), var(--sc-primario));
    box-shadow: 0 5px 16px rgba(91, 63, 242, .34);
}

.btn-primary:disabled { background-image: none; box-shadow: none; }

.btn-outline-secondary {
    --bs-btn-color: var(--sc-texto-2);
    --bs-btn-border-color: var(--sc-borde-fuerte);
    --bs-btn-bg: var(--sc-superficie);
    --bs-btn-hover-bg: var(--sc-primario-tenue);
    --bs-btn-hover-border-color: var(--sc-primario);
    --bs-btn-hover-color: var(--sc-primario-oscuro);
    --bs-btn-active-bg: var(--sc-primario-tenue);
    --bs-btn-active-border-color: var(--sc-primario);
    --bs-btn-active-color: var(--sc-primario-oscuro);
}

.btn-success { --bs-btn-bg: var(--sc-exito); --bs-btn-border-color: var(--sc-exito); }
.btn-danger  { --bs-btn-bg: var(--sc-peligro); --bs-btn-border-color: var(--sc-peligro); }

/* ---------------- Avisos y pastillas ---------------- */

/* El color aqui SI significa algo. Fondo tenue, barra a la izquierda saturada: se lee de
   lejos sin volverse un bloque macizo. */
.alert {
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: 11px;
    padding: 0.8rem 1rem;
    font-size: 0.86rem;
    color: var(--sc-texto);
}

.alert-success { background: var(--sc-exito-tenue);  border-left-color: var(--sc-exito); }
.alert-danger  { background: var(--sc-peligro-tenue); border-left-color: var(--sc-peligro); }
.alert-warning { background: var(--sc-aviso-tenue);  border-left-color: var(--sc-aviso); }
.alert-info    { background: var(--sc-info-tenue);   border-left-color: var(--sc-info); }
.alert-secondary { background: var(--sc-superficie-2); border-left-color: var(--sc-texto-4); }

/* El resumen de validacion se pinta SIEMPRE, con errores o sin ellos: ASP.NET solo le
   cambia la clase. Sin esta regla, cada formulario limpio abre con una franja roja vacia
   arriba, como si algo hubiera fallado antes de escribir nada. */
.validation-summary-valid { display: none !important; }

.field-validation-error,
.validation-summary-errors { color: var(--sc-peligro); }

.input-validation-error {
    border-color: var(--sc-peligro) !important;
    box-shadow: 0 0 0 3px rgba(224, 51, 75, .14);
}

.badge {
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.015em;
    padding: 0.34em 0.65em;
    border-radius: 999px;
}

/* Pastillas de estado: fondo tenue y texto saturado. */
.badge.text-bg-success   { background: var(--sc-exito-tenue) !important;   color: #077a47 !important; }
.badge.text-bg-danger    { background: var(--sc-peligro-tenue) !important; color: #b71f35 !important; }
.badge.text-bg-warning   { background: var(--sc-aviso-tenue) !important;   color: #a35a05 !important; }
.badge.text-bg-info      { background: var(--sc-info-tenue) !important;    color: #0369a1 !important; }
.badge.text-bg-primary   { background: var(--sc-primario-tenue) !important; color: var(--sc-primario-oscuro) !important; }
.badge.text-bg-secondary { background: #eeecf7 !important; color: var(--sc-texto-2) !important; }
.badge.text-bg-light     { background: var(--sc-superficie-2) !important;  color: var(--sc-texto-2) !important; }

/* Los colores de texto de Bootstrap, alineados con la paleta. */
.text-success { color: var(--sc-exito) !important; }
.text-danger  { color: var(--sc-peligro) !important; }
.text-warning { color: var(--sc-aviso) !important; }
.text-muted   { color: var(--sc-texto-3) !important; }

.progress { background: var(--sc-borde); border-radius: 999px; height: 6px; }
.progress-bar { background: linear-gradient(90deg, var(--sc-primario), var(--sc-primario-claro)); }

/* ---------------- Permisos ---------------- */

.sc-modulo-permisos {
    border: 1px solid var(--sc-borde);
    border-radius: 12px;
    margin-bottom: 0.85rem;
    overflow: hidden;
    background: var(--sc-superficie);
}

.sc-modulo-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--sc-superficie-2);
    border-bottom: 1px solid var(--sc-borde);
}

.sc-modulo-encabezado h3 { font-size: 0.93rem; font-weight: 700; margin: 0; }

.sc-modulo-cuerpo {
    padding: 0.85rem 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.35rem 1rem;
}

/* Permisos que mueven dinero, costos o salarios: se marcan para que el
   administrador los conceda a conciencia. */
.sc-permiso-sensible label { color: var(--sc-aviso); font-weight: 600; }
.sc-permiso-sensible label::after { content: " *"; color: var(--sc-aviso); }

/* ---------------- Pantalla de acceso ---------------- */

.sc-acceso {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(1100px 520px at 12% -10%, rgba(139, 92, 246, .55), transparent 60%),
        radial-gradient(900px 480px at 92% 108%, rgba(6, 182, 212, .38), transparent 60%),
        linear-gradient(160deg, #241c4d 0%, #16123a 100%);
}

.sc-acceso-tarjeta {
    width: 100%;
    max-width: 420px;
    background: var(--sc-superficie);
    border-radius: 20px;
    padding: 2.25rem;
    box-shadow: var(--sc-sombra-alta);
}

.sc-acceso-marca { text-align: center; margin-bottom: 1.75rem; }

.sc-acceso-marca h1 {
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0.9rem 0 0.15rem;
    letter-spacing: -0.025em;
}

.sc-acceso-marca p { font-size: 0.83rem; color: var(--sc-texto-3); margin: 0; }

/* ---------------- Responsivo ---------------- */

@media (max-width: 991.98px) {
    .sc-boton-menu { display: block; }

    .sc-barra-lateral {
        position: fixed;
        left: calc(var(--sc-ancho-lateral) * -1);
        top: 0;
        z-index: 1050;
        transition: left 0.2s ease;
        box-shadow: 0 0 40px rgba(22, 19, 46, .45);
    }

    .sc-barra-lateral.abierta { left: 0; }

    .sc-principal { padding: 1rem; }
    .sc-encabezado { padding: 0.8rem 1rem; }
    .sc-encabezado-titulo h1 { font-size: 1.1rem; }
}

/* Las tablas anchas se desplazan solas en lugar de romper la pagina. */
.tabla-desplazable { overflow-x: auto; }

/* ---------------- Dialogo de confirmacion ---------------- */

/*
   Reemplaza el confirm() del navegador. Ese decia "localhost:8088 dice" encima del mensaje,
   se veia distinto en cada sistema operativo y no habia forma de darle jerarquia al texto:
   la accion peligrosa y la inofensiva salian iguales.
*/

.sc-dialogo {
    border: 0;
    border-radius: 18px;
    padding: 0;
    max-width: 27rem;
    width: calc(100% - 2rem);
    box-shadow: var(--sc-sombra-alta);
    color: inherit;
    background: var(--sc-superficie);
}

.sc-dialogo::backdrop { background: rgba(22, 19, 46, .55); backdrop-filter: blur(2px); }

.sc-dialogo-cuerpo {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    padding: 1.4rem 1.45rem 1.2rem;
}

/* El icono ancla el tono del mensaje antes de que se lea una palabra. */
.sc-dialogo-icono {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sc-primario-tenue);
    color: var(--sc-primario);
    flex-shrink: 0;
}

.sc-dialogo-icono svg { width: 1.3rem; height: 1.3rem; }

.sc-dialogo[data-tono="peligro"] .sc-dialogo-icono {
    background: var(--sc-peligro-tenue);
    color: var(--sc-peligro);
}

.sc-dialogo[data-tono="aviso"] .sc-dialogo-icono {
    background: var(--sc-aviso-tenue);
    color: var(--sc-aviso);
}

.sc-dialogo-texto h2 { font-size: 1.08rem; font-weight: 700; margin: 0.3rem 0 0.35rem; }
.sc-dialogo-texto p { margin: 0; color: var(--sc-texto-2); line-height: 1.5; }

/* Un aviso puede traer varias frases —la causa, el detalle y que hacer— y sin aire entre
   ellas se leen como un solo bloque. */
.sc-dialogo-texto p + p { margin-top: 0.6rem; }

/* Los botones arrancan bajo el texto, no bajo el icono: la columna del icono es margen. */
.sc-dialogo-acciones {
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.2rem;
}

.sc-dialogo[data-tono="peligro"] .btn-primary {
    background-image: none;
    --bs-btn-bg: var(--sc-peligro);
    --bs-btn-border-color: var(--sc-peligro);
    --bs-btn-hover-bg: #b71f35;
    --bs-btn-hover-border-color: #b71f35;
    box-shadow: 0 3px 10px rgba(224, 51, 75, .3);
}

.sc-dialogo[data-tono="peligro"] .btn-primary:hover:not(:disabled) { background-image: none; }

/* En pantalla angosta los botones ocupan el ancho completo: son objetivos de dedo. */
@media (max-width: 30rem) {
    .sc-dialogo-cuerpo { grid-template-columns: 1fr; }
    .sc-dialogo-icono { display: none; }

    .sc-dialogo-acciones {
        grid-column: 1;
        flex-direction: column-reverse;
    }

    .sc-dialogo-acciones .btn { width: 100%; }
}

/* ---------------- Movimiento ---------------- */

/* Quien pidio menos movimiento no lo pidio en broma: hay gente a la que el desplazamiento
   de una animacion le produce mareo. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ---------------- Ocultar de verdad ---------------- */

/*
   El atributo hidden de HTML lo pierde cualquier clase de Bootstrap que fije display:
   d-flex y row lo ganan por especificidad, asi que un elemento con hidden se seguia viendo.
   Paso justo aqui: la insignia "Cliente listo" del punto de venta aparecia sin haber cliente.

   Con esto, hidden significa oculto, que es lo que dice la norma.
*/
[hidden] { display: none !important; }

/* ==========================================================================
   CATALOGO DE PLANES

   Esta pantalla es de superadmin, pero se dibuja como la pagina de precios que
   algun dia va a ver el cliente: la reja de tres columnas, la cifra grande, la
   lista con visto y cruz, y el plan destacado un poco por encima de los otros.
   Cuando exista el sitio de promocion, el bloque se lleva tal cual.

   Cada plan trae su color en la variable --plan (y sus canales sueltos en
   --plan-rgb, para los fondos translucidos). Asi el color viaja desde la vista
   y sirve para cualquier plan que se cree despues, no solo para los tres de hoy.
   ========================================================================== */

.sc-planes {
    display: grid;
    gap: 1.15rem;
    /* auto-fit reparte lo que haya: tres planes quedan en fila, cuatro pasan a dos
       filas de dos, y en un telefono caen uno debajo de otro sin tocar nada. */
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    align-items: stretch;
}

.sc-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--sc-superficie);
    border: 1px solid var(--sc-borde);
    border-radius: var(--sc-radio);
    box-shadow: var(--sc-sombra);
    padding: 1.6rem 1.4rem 1.2rem;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease;
}

/* La cinta de color arriba. Es lo unico que distingue un plan de otro a un metro
   de distancia, y por eso ocupa el ancho completo. */
.sc-plan::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--plan), rgb(var(--plan-rgb) / .55));
}

.sc-plan:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgb(var(--plan-rgb) / .18);
}

/* ---- El destacado ----
   No se elige a dedo: es el que mas empresas tienen contratado. Se levanta un
   escalon y se pinta el borde de su color, que es como lo hace cualquier pagina
   de precios con el plan que quiere vender. */
.sc-plan-destacado {
    border-color: rgb(var(--plan-rgb) / .45);
    box-shadow: 0 10px 30px rgb(var(--plan-rgb) / .16);
}

.sc-plan-cinta {
    position: absolute;
    top: 5px;
    right: 0;
    background: var(--plan);
    color: #fff;
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-bottom-left-radius: 10px;
}

/* ---- Encabezado ---- */

.sc-plan-codigo {
    font-family: var(--sc-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--plan);
}

.sc-plan-nombre {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0.15rem 0 0;
    color: var(--sc-texto);
    text-wrap: balance;
}

/* Tres renglones reservados: el texto de venta de cada plan es de largo distinto,
   y sin esto la cifra de cada tarjeta arrancaba a distinta altura. */
.sc-plan-pitch {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--sc-texto-2);
    margin: 0.7rem 0 1.1rem;
    min-height: calc(0.85rem * 1.55 * 3);
}

/* ---- La cifra ---- */

.sc-plan-precio {
    background: rgb(var(--plan-rgb) / .07);
    border: 1px solid rgb(var(--plan-rgb) / .16);
    border-radius: 12px;
    padding: 0.95rem 1rem;
    text-align: center;
}

.sc-plan-cifra {
    display: block;
    font-size: clamp(1.9rem, 1.3rem + 1.7vw, 2.45rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--sc-texto);
    font-variant-numeric: tabular-nums;
}

.sc-plan-periodo {
    display: block;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sc-texto-3);
    margin-top: 0.3rem;
}

/* Los otros dos ciclos, en chico. Son productos que tambien se venden, no letra
   pequeña: por eso la cifra va en monoespaciada y el ahorro en la pastilla verde. */
.sc-plan-ciclos {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.sc-plan-ciclo {
    /* Tres columnas: el ciclo, la cifra y el ahorro. Con la reja, las cifras quedan
       una debajo de otra y las pastillas de ahorro tambien, en vez de bailar segun el
       largo del numero. */
    display: grid;
    grid-template-columns: 1fr auto 3.5rem;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--sc-texto-2);
}

.sc-plan-ciclo strong {
    font-family: var(--sc-mono);
    font-weight: 700;
    color: var(--sc-texto);
    font-variant-numeric: tabular-nums;
}

.sc-plan-ahorro {
    font-size: 0.68rem;
    font-weight: 700;
    color: #077a47;
    background: var(--sc-exito-tenue);
    border-radius: 999px;
    padding: 0.14em 0.55em;
    text-align: center;
}

.sc-plan-ahorro:empty { background: none; }

/* ---- Que trae ---- */

.sc-plan-limites {
    list-style: none;
    margin: 1.15rem 0 0;
    padding: 0.9rem 0 0;
    border-top: 1px dashed var(--sc-borde-fuerte);
    display: grid;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--sc-texto-2);
}

.sc-plan-limites strong { color: var(--sc-texto); font-weight: 700; }

.sc-plan-modulos {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.34rem;
}

.sc-plan-modulo {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    color: var(--sc-texto);
}

/* La misma lista en los tres planes, con visto o con raya. Asi se comparan de un
   vistazo leyendo en horizontal, que es para lo que sirve una pagina de precios. */
.sc-plan-marca {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
    background: rgb(var(--plan-rgb) / .13);
    color: var(--plan);
}

.sc-plan-modulo-no { color: var(--sc-texto-4); }

.sc-plan-modulo-no .sc-plan-marca {
    background: var(--sc-superficie-2);
    color: var(--sc-texto-4);
}

/* ---- El pie de administracion ----

   Editar, retirar y borrar no son parte de la pagina de precios: van abajo, detras
   de una linea, en gris, para que no compitan con lo comercial. */
.sc-plan-admin {
    margin-top: auto;
    padding-top: 0.95rem;
    border-top: 1px solid var(--sc-borde);
}

.sc-plan-cuenta {
    font-size: 0.75rem;
    color: var(--sc-texto-3);
    margin-bottom: 0.6rem;
}

/* Los botones van de ultimos y a la misma altura en las tres tarjetas: el renglon
   de arriba puede tener una linea de mas y antes eso los desnivelaba. */
.sc-plan-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ---- Retirado del catalogo ----
   Pierde el color: un plan que ya no se vende no tiene por que competir por la
   mirada con los que si. */
.sc-plan-retirado {
    --plan: #837da3;
    --plan-rgb: 131 125 163;
    background: var(--sc-superficie-2);
}

.sc-plan-retirado .sc-plan-nombre,
.sc-plan-retirado .sc-plan-cifra { color: var(--sc-texto-2); }

@media (max-width: 575.98px) {
    .sc-plan { padding: 1.3rem 1.1rem 1rem; }
}

/* ---- Todo a la misma altura de una tarjeta a otra ----

   Una pagina de precios se lee en horizontal: la cifra de los tres planes en el mismo
   renglon, la lista de modulos empezando a la misma altura, los botones al mismo nivel.
   Con descripciones de largo distinto —una de tres lineas y otra de cuatro— eso se
   rompia y las tarjetas quedaban desfasadas.

   Subgrid lo resuelve de raiz: la tarjeta no arma sus propios renglones, sino que usa
   los de la reja de afuera, asi que cada bloque de las tres tarjetas cae en el mismo
   renglon. Donde el navegador no lo soporte, queda el reparto de arriba, que ya deja
   los botones abajo y reserva tres lineas para la descripcion. */
@supports (grid-template-rows: subgrid) {
    .sc-plan {
        display: grid;
        grid-row: span 7;
        grid-template-rows: subgrid;
        row-gap: 0;
    }

    /* El hueco entre bloques lo pone cada bloque con su propio margen, no el gap de la
       reja: el gap de la reja separa tarjetas, y aqui se comparte con los renglones. */
    .sc-plan-cabeza { align-self: start; }
    .sc-plan-pitch { min-height: 0; margin-bottom: 0; align-self: start; }
    .sc-plan-precio { margin-top: 0.9rem; }
    .sc-plan-ciclos { align-self: start; }
    .sc-plan-limites { align-self: start; }
    .sc-plan-modulos { align-self: start; margin-bottom: 1rem; }
    .sc-plan-admin { margin-top: 0; align-self: end; }
}

/* ==========================================================================
   LA COTIZACION VISTA POR EL CLIENTE

   Esta es la unica pantalla del sistema que ve alguien de afuera: el cliente que
   abre el enlace que le mandaron por WhatsApp. Casi siempre entra desde el
   telefono, en la calle, y con una sola pregunta en la cabeza —cuanto vale—.

   Por eso no hay menu, ni barra lateral, ni nada del programa: solo la
   cotizacion, el total grande y el boton del PDF. Y por eso el ancho maximo es
   de lectura y no de tablero.
   ========================================================================== */

.sc-publica-cuerpo {
    background: var(--sc-fondo);
    margin: 0;
    padding: 1.2rem;
    font-family: var(--sc-fuente);
    color: var(--sc-texto);
}

.sc-publica {
    max-width: 46rem;
    margin: 0 auto;
    background: var(--sc-superficie);
    border: 1px solid var(--sc-borde);
    border-radius: var(--sc-radio);
    box-shadow: var(--sc-sombra);
    padding: 1.8rem;
}

.sc-publica-cabeza {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.2rem;
    flex-wrap: wrap;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--sc-borde);
}

.sc-publica-cabeza h1 {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
}

.sc-publica-nit,
.sc-publica-contacto {
    font-size: 0.8rem;
    color: var(--sc-texto-3);
    margin: 0.15rem 0 0;
}

.sc-publica-numero {
    text-align: right;
    display: grid;
    gap: 0.1rem;
}

.sc-publica-tipo {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sc-texto-3);
}

.sc-publica-numero strong {
    font-size: 1.15rem;
    font-family: var(--sc-mono);
    color: var(--sc-primario);
}

.sc-publica-fecha { font-size: 0.78rem; color: var(--sc-texto-3); }

/* La vigencia es el dato por el que existe este documento: va en su propia franja. */
.sc-publica-aviso {
    background: var(--sc-primario-tenue);
    border-radius: 10px;
    padding: 0.7rem 0.95rem;
    margin: 1.1rem 0;
    font-size: 0.85rem;
    color: var(--sc-primario-oscuro);
}

.sc-publica-aviso-vencida {
    background: var(--sc-peligro-tenue);
    color: #b71f35;
}

.sc-publica-cliente {
    display: grid;
    gap: 0.12rem;
    margin-bottom: 1.2rem;
}

.sc-publica-etiqueta {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--sc-texto-3);
}

.sc-publica-cliente strong { font-size: 1rem; }

.sc-publica-tabla { overflow-x: auto; }

.sc-publica-tabla table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.87rem;
}

.sc-publica-tabla th {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sc-texto-3);
    padding: 0.5rem 0.4rem;
    border-bottom: 1px solid var(--sc-borde-fuerte);
}

.sc-publica-tabla td {
    padding: 0.6rem 0.4rem;
    border-bottom: 1px solid var(--sc-borde);
    vertical-align: top;
}

.sc-publica-tabla .der { text-align: right; font-variant-numeric: tabular-nums; }
.sc-publica-tabla .fuerte { font-weight: 700; }

.sc-publica-producto { display: block; font-weight: 600; }

.sc-publica-codigo {
    display: block;
    font-family: var(--sc-mono);
    font-size: 0.68rem;
    color: var(--sc-texto-3);
}

.sc-publica-totales {
    margin: 1.1rem 0 0;
    display: grid;
    gap: 0.3rem;
    justify-content: end;
}

.sc-publica-totales > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2.2rem;
    font-size: 0.85rem;
    color: var(--sc-texto-2);
    font-variant-numeric: tabular-nums;
}

.sc-publica-total {
    border-top: 2px solid var(--sc-texto);
    padding-top: 0.45rem;
    margin-top: 0.3rem;
    font-size: 1.25rem !important;
    font-weight: 800;
    color: var(--sc-texto) !important;
}

.sc-publica-nota {
    margin-top: 1.3rem;
    font-size: 0.87rem;
    white-space: pre-line;
}

.sc-publica-condiciones {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--sc-borde);
}

.sc-publica-condiciones p {
    font-size: 0.8rem;
    color: var(--sc-texto-2);
    white-space: pre-line;
    margin: 0.35rem 0 0;
}

.sc-publica-acciones {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.sc-publica-boton {
    background: var(--sc-primario);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.75rem 1.4rem;
    border-radius: 10px;
    display: inline-block;
}

.sc-publica-boton:hover { background: var(--sc-primario-oscuro); color: #fff; }

.sc-publica-boton-suave {
    background: var(--sc-superficie-2);
    color: var(--sc-texto);
    border: 1px solid var(--sc-borde-fuerte);
}

.sc-publica-boton-suave:hover { background: var(--sc-borde); color: var(--sc-texto); }

.sc-publica-pie {
    margin-top: 1.6rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sc-borde);
    font-size: 0.72rem;
    color: var(--sc-texto-3);
}

.sc-publica-vacia { text-align: center; padding: 2.5rem 0; }
.sc-publica-vacia h1 { font-size: 1.2rem; font-weight: 800; }
.sc-publica-vacia p { font-size: 0.9rem; color: var(--sc-texto-2); }

@media (max-width: 575.98px) {
    .sc-publica-cuerpo { padding: 0.6rem; }
    .sc-publica { padding: 1.15rem; }
    .sc-publica-numero { text-align: left; }
    .sc-publica-acciones .sc-publica-boton { flex: 1; text-align: center; }
}

/* ---------------- Notas a los estados financieros ---------------- */

/* El texto de una nota se guarda tal cual lo escribio el contador, con sus saltos de linea
   y sus parrafos en blanco. Se respeta al pintarlo en vez de reflujarlo: la separacion que
   le dio es parte de como se lee, y unir todo en un bloque convierte tres politicas
   contables en un solo parrafo ilegible. */
.sc-nota-texto {
    white-space: pre-wrap;
    max-width: 90ch;
    line-height: 1.6;
    margin-bottom: 0.9rem;
}