/* ============================================================
   IO Ventas — override de paleta Syncfusion Material 3
   Debe cargarse DESPUÉS de material3.css (último <link> de index.html),
   si no, el morado default de M3 pisa estos valores.
   Formato RGB por comas (así lo exige M3; hex NO funciona aquí).
   Un solo lugar: cambia --color-sf-primary y aplica a TODOS los
   componentes Syncfusion (botones, grids, inputs, tabs, etc.).

   Ventas usa el TEAL del sistema "Marea", no el naranja de marca:
   el naranja vive únicamente en el logo.
   ============================================================ */

/* ── Tema claro ── */
:root {
    /* ── Tipografía ──────────────────────────────────────────────────────
       M3 fija --e-font-family en Roboto, que esta app no carga: TODO
       componente Syncfusion (botones, grid, inputs, tabs) caía al sans del
       sistema mientras el resto de la pantalla va en Public Sans. Era lo que
       hacía que una fila de botones no se leyera como el texto de al lado.
       Debe seguir igual al stack del body en app.css. */
    --e-font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Principal = teal #0e766d (--primary) */
    --color-sf-primary: 14, 118, 109;
    --color-sf-on-primary: 255, 255, 255; /* blanco sobre teal: 5.0:1 */
    --color-sf-primary-container: 220, 239, 236; /* --primary-soft */
    --color-sf-on-primary-container: 10, 95, 87; /* --primary-strong */
    --color-sf-surface-tint-color: 14, 118, 109;
    --color-sf-inverse-primary: 10, 95, 87;

    /* Secundario = gris azulado (quita el tinte morado del default M3) */
    --color-sf-secondary: 82, 98, 113; /* --text-2 */
    --color-sf-on-secondary: 255, 255, 255;
    --color-sf-secondary-container: 233, 238, 243; /* --surface-2 */
    --color-sf-on-secondary-container: 26, 35, 44; /* --text */

    /* ── Neutros ────────────────────────────────────────────────────────────
       Los grises de M3 traen tinte lavanda (outline 121,116,126; superficie
       231,224,236) y se notan al lado de los neutros azulados del sistema:
       el borde de un SfTextBox salía malva junto a un .form-control azulado.
       Se remapean a nuestros tokens para que TODO el borde y el texto tenue
       de Syncfusion sean el mismo gris. */
    --color-sf-outline: 195, 205, 216; /* --border-strong: borde de inputs */
    --color-sf-outline-variant: 217, 225, 233; /* --border: separadores */
    --color-sf-surface: 255, 255, 255; /* --surface */
    --color-sf-background: 255, 255, 255;
    --color-sf-on-surface: 26, 35, 44; /* --text */
    --color-sf-on-background: 26, 35, 44;
    --color-sf-on-surface-variant: 82, 98, 113; /* --text-2: etiquetas flotantes */
    --color-sf-surface-variant: 233, 238, 243; /* --surface-2 */
}

/* ── Tema oscuro (Syncfusion lo activa con .e-dark-mode en <body>) ── */
.e-dark-mode {
    /* M3 REDECLARA --e-font-family dentro de .e-dark-mode, y como esa clase
       vive en el <body> le gana por herencia a la del :root de arriba: sin
       esta línea el tema oscuro se quedaba en Roboto. Repetir, no borrar. */
    --e-font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --color-sf-primary: 53, 179, 165; /* --primary dark #35b3a5 */
    --color-sf-on-primary: 5, 36, 32; /* texto oscuro sobre el teal claro */
    --color-sf-primary-container: 21, 48, 44; /* --primary-soft dark */
    --color-sf-on-primary-container: 90, 204, 191; /* --primary-strong dark */
    --color-sf-surface-tint-color: 53, 179, 165;
    --color-sf-inverse-primary: 14, 118, 109;

    --color-sf-secondary: 160, 174, 186; /* --text-2 dark */
    --color-sf-on-secondary: 15, 21, 26;
    --color-sf-secondary-container: 28, 36, 44; /* --surface-2 dark */
    --color-sf-on-secondary-container: 232, 238, 242; /* --text dark */

    /* Neutros del sistema, no los morados de M3 (ver nota del tema claro) */
    --color-sf-outline: 57, 69, 79; /* --border-strong dark */
    --color-sf-outline-variant: 40, 50, 60; /* --border dark */
    --color-sf-surface: 22, 29, 36; /* --surface dark */
    --color-sf-background: 22, 29, 36;
    --color-sf-on-surface: 232, 238, 242; /* --text dark */
    --color-sf-on-background: 232, 238, 242;
    --color-sf-on-surface-variant: 160, 174, 186; /* --text-2 dark */
    --color-sf-surface-variant: 28, 36, 44; /* --surface-2 dark */
}

/* ============================================================
   Grid (e-grid) — hover de fila legible en claro y oscuro
   M3 pinta el hover con rgba(var(--color-sf-secondary-container)) !important;
   ese valor puede quedar demasiado claro en oscuro (texto ilegible). Forzamos
   fondo Y texto con nuestros tokens, que siguen data-theme de forma fiable.
   El prefijo :root eleva la especificidad para ganarle al !important de M3.
   ============================================================ */
:root .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover
  .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
}

/* ── Fila seleccionada (checkbox o clic) ──────────────────────────────────
   M3 la pinta con rgba(--color-sf-primary-container, .65) y el texto con
   --color-sf-on-surface-variant: en oscuro queda un tono claro con letra
   clara encima (ilegible). Se fuerza el teal tenue del sistema + texto
   normal, que ya siguen data-theme.
   Se cubren las tres marcas que usa el grid (td.e-active, e-selectionbackground
   y la clase a nivel de fila) porque cambian según el modo de selección. */
:root .e-grid td.e-active,
:root .e-grid td.e-active .e-icons,
:root .e-grid .e-rowcell.e-selectionbackground,
:root .e-grid .e-rowcell.e-cellselectionbackground,
:root .e-grid tr.e-row.e-active > .e-rowcell,
:root .e-grid tr.e-row.e-selectionbackground > .e-rowcell {
    background: var(--primary-soft) !important;
    color: var(--text) !important;
}

/* Hover sobre una fila YA seleccionada: mismo teal, un punto más marcado,
   para que se distinga del hover normal sin perder legibilidad.
   Si el navegador no soporta color-mix, la declaración se ignora y queda el
   teal tenue de la regla de arriba: legible igual. */
:root .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover td.e-active,
:root .e-grid.e-gridhover tr.e-row.e-active:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover > .e-rowcell {
    background: color-mix(in srgb, var(--primary-soft) 82%, var(--primary)) !important;
    color: var(--text) !important;
}

/* ── Grid: encabezado y bordes con los tokens del sistema ────────────────
   Sin esto el header del grid usa el gris neutro de M3 y desentona con las
   tablas propias (.tabla-montos), que llevan encabezado tenue en mayúsculas. */
:root .e-grid .e-headercell {
    background: var(--surface-2);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 11px;
    font-weight: 600;
}

:root .e-grid .e-headercelldiv { font-size: 11px; }

/* Montos y fechas dentro del grid: mono tabular, igual que fuera de él */
:root .e-grid .e-rowcell.e-rightalign { font-variant-numeric: tabular-nums; }

/* ── Celda de cliente a dos líneas: alias arriba, razón social abajo ──────
   El alias es como el equipo conoce al cliente; la razón social queda debajo
   como referencia fiscal, y solo aparece cuando difiere del alias.
   Vive aquí y no en un .razor.css porque lo que hay que vencer son el
   line-height y la altura fija que M3 le impone a .e-rowcell. */
:root .e-grid .e-rowcell .celda-cliente {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
    min-width: 0;
    padding: .2rem 0;
}

:root .e-grid .e-rowcell .celda-cliente-alias {
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --text-2 y no --text-3: a 11px el --text-3 se queda corto de contraste AA. */
:root .e-grid .e-rowcell .celda-cliente-razon {
    color: var(--text-2);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Botón CTA de Syncfusion (IsPrimary) = acento aquamarine ──────────────
   M3 pinta e-primary con --color-sf-primary (teal). El handoff reserva el
   acento para la acción principal, así que el botón primario de Syncfusion
   se alinea con .btn-primary del sistema. */
:root .e-btn.e-primary, :root .e-css.e-btn.e-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
}

    :root .e-btn.e-primary:hover, :root .e-btn.e-primary:focus,
    :root .e-btn.e-primary:active, :root .e-btn.e-primary.e-active {
        background-color: var(--accent-strong);
        border-color: var(--accent-strong);
        color: var(--on-accent);
    }

/* ── Botones semánticos (e-success / e-danger / e-warning) ────────────────
   M3 los pinta con SU paleta, no con la del sistema: e-success salía verde
   olivo #205107 y e-danger rojo #b3261e. Remapear tokens no alcanza —
   M3 ni siquiera define --color-sf-danger, el botón cae en --color-sf-error—
   así que las reglas se escriben aquí.

   Se copia el patrón que ya usa .btn-danger en app.css: en reposo el botón
   es transparente con borde y texto del color semántico, y el hover lo
   rellena con el tinte (--x-bg). Así la fila "Aprobada / Rechazada /
   Vencida" comparte silueta con el botón normal y el color solo informa,
   en vez de dos bloques macizos junto a uno blanco.

   Ojo con el hover: --x sobre --x-bg da 4.55:1, justo encima de AA, así que
   el tinte NO se puede oscurecer de más (mezclarlo al 82% con el color
   semántico lo bajaba a 3.8:1). Por eso hover, focus y active comparten el
   mismo fondo en vez de ir escalando.

   background-image:none es necesario: M3 encima mete un degradado blanco al
   8% en hover que sobre un fondo tenue ACLARA en vez de marcar.
   ============================================================ */
:root .e-btn.e-success, :root .e-css.e-btn.e-success,
:root .e-btn.e-danger, :root .e-css.e-btn.e-danger,
:root .e-btn.e-warning, :root .e-css.e-btn.e-warning {
    background-color: transparent;
    background-image: none;
    font-weight: 600;
}

:root .e-btn.e-success, :root .e-css.e-btn.e-success {
    border-color: var(--success);
    color: var(--success);
}

    :root .e-btn.e-success:hover, :root .e-btn.e-success:focus,
    :root .e-btn.e-success:active, :root .e-btn.e-success.e-active {
        background-color: var(--success-bg);
        background-image: none;
        border-color: var(--success);
        color: var(--success);
    }

:root .e-btn.e-danger, :root .e-css.e-btn.e-danger {
    border-color: var(--danger);
    color: var(--danger);
}

    :root .e-btn.e-danger:hover, :root .e-btn.e-danger:focus,
    :root .e-btn.e-danger:active, :root .e-btn.e-danger.e-active {
        background-color: var(--danger-bg);
        background-image: none;
        border-color: var(--danger);
        color: var(--danger);
    }

:root .e-btn.e-warning, :root .e-css.e-btn.e-warning {
    border-color: var(--warning);
    color: var(--warning);
}

    :root .e-btn.e-warning:hover, :root .e-btn.e-warning:focus,
    :root .e-btn.e-warning:active, :root .e-btn.e-warning.e-active {
        background-color: var(--warning-bg);
        background-image: none;
        border-color: var(--warning);
        color: var(--warning);
    }

/* ── Conceptos del listado de facturas ────────────────────────────────────
   Uno por línea (el API los une con \n y pre-line respeta el salto), en la
   misma letra chica que la razón social de .celda-cliente-razon. Tres líneas
   caben en el alto que ya tiene el renglón; lo que sobra se corta con
   elipsis y queda completo en el tooltip. */
:root .e-grid .e-rowcell .celda-conceptos {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    white-space: pre-line;
    overflow-wrap: anywhere;
    font-size: 11px;
    line-height: 1.3;
    color: var(--text-2);
}

/* ── Celdas de cobranza del listado de facturas ───────────────────────────
   Mismo motivo que .celda-cliente: lo que hay que vencer es el line-height y
   la altura fija que M3 le impone a .e-rowcell, así que viven aquí y no en un
   .razor.css scopeado. */

/* Cobro a dos renglones: etiqueta arriba, el dato que importa abajo — el saldo
   si debe, la fecha del depósito si ya pagó. */
:root .e-grid .e-rowcell .celda-cobro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.25;
    padding: .2rem 0;
    min-width: 0;
}

/* Flex y no texto suelto: Razor colapsa el espacio antes de un @if y la fecha se
   quedaba pegada a la etiqueta ("05/08/2026por confirmar"). */
:root .e-grid .e-rowcell .cobro-det {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    font-family: "IBM Plex Mono", monospace;
    font-variant-numeric: tabular-nums;
    font-size: .74rem;
    color: var(--text-2);
    white-space: nowrap;
}

/* Lo que pasó de 30 días deja de ser un dato y pasa a ser un aviso */
:root .e-grid .e-rowcell .cobro-det.atrasado {
    color: var(--danger);
    font-weight: 600;
}

/* Pagada pero sin depósito atrás: el borde punteado dice "todavía no está probado"
   sin gastar otra columna. */
:root .e-grid .e-rowcell .badge-aprobada.sin-confirmar {
    background: transparent;
    border: 1px dashed var(--success);
}

/* ── UUID completo, recortado por CSS ─────────────────────────────────────
   Va entero en la celda: así ensanchar la columna revela más, que es justo lo
   que no pasaba cuando el corte estaba en el código (Uuid[..8] + "…"). */
:root .e-grid .e-rowcell .celda-uuid {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

:root .e-grid .e-rowcell .celda-uuid code {
    font-family: "IBM Plex Mono", monospace;
    font-size: .75rem;
    color: var(--text-2);
    background: transparent;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:root .e-grid .e-rowcell .uuid-copiar {
    flex: none;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 1;
    font-size: 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-3);
    cursor: pointer;
}

:root .e-grid .e-rowcell .uuid-copiar:hover {
    background: var(--surface-2);
    color: var(--primary);
    border-color: var(--primary);
}

/* ── Liga a la cotización (abre en otra pestaña) ──────────────────────────
   Punteada en reposo y sólida al pasar el mouse: se ve clicable sin gritar. */
:root .e-grid .e-rowcell .liga-cot {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--primary);
}

:root .e-grid .e-rowcell .liga-cot:hover {
    color: var(--primary-strong);
    border-bottom-style: solid;
    text-decoration: none;
}

:root .e-grid .e-rowcell .celda-acciones {
    display: flex;
    gap: .3rem;
    justify-content: flex-end;
}