/*
    Puente entre Bootstrap 5.1 (y SweetAlert2 / Quill) y el tema de MudBlazor (TemaContro).

    Bootstrap 5.1 no conoce el modo oscuro (data-bs-theme llegó en 5.3) y trae blancos y grises fijos
    en .card, .table, .modal-content, .form-control, etc. Estas reglas los apuntan a las variables de
    la paleta de MudBlazor, que el MudThemeProvider cambia solo al conmutar claro/oscuro.

    El componente ProveedorTemaContro marca <html data-tema="claro|oscuro">. Las reglas bajo
    html[data-tema] valen en ambos modos (el fondo del body, que Bootstrap pisa en blanco porque se
    carga después de MudBlazor); las de html[data-tema="oscuro"] solo en oscuro.
*/

/* Deslizar hacia abajo en el móvil ya no recarga la página (pull-to-refresh nativo de Chrome Android):
   el usuario lo hacía sin querer y perdía lo que estaba haciendo (Diego, 2026-09-17). El scroll normal
   de la página sigue igual; solo se corta el "rebote" del borde superior. */
html, body { overscroll-behavior-y: contain; }

/* ── Ambos modos: el body sigue a la paleta, no al blanco de Bootstrap ───────────────────────── */
html[data-tema] body {
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

/* Burbujas de la conversación del CRM (notas de la gestión): un tinte del color de estado sobre la
   superficie de la tarjeta. Las variables *-hover de MudBlazor (6 % de opacidad) no se distinguen,
   sobre todo en oscuro; acá el tinte se dosifica por modo. Lo que dijo el CONTACTO = verde (success);
   lo que dijo el USUARIO = celeste (info). Las usa NuevoEditarGestion.razor. */
:root {
    --contro-nota-contacto: color-mix(in srgb, var(--mud-palette-success) 14%, var(--mud-palette-surface));
    --contro-nota-usuario: color-mix(in srgb, var(--mud-palette-info) 14%, var(--mud-palette-surface));
    /* Chat de clientes (2026-10-24): lo que escribió el cliente por el chat web o se le mandó. Violeta de la marca. */
    --contro-nota-cliente-web: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    --contro-nota-cliente-web-borde: var(--mud-palette-primary);
    /* Nota PRIVADA (solo la ve quien la escribió, Diego 2026-09-09): violeta, un color que no usa nadie más en el CRM. */
    --contro-nota-privada: color-mix(in srgb, #7E57C2 16%, var(--mud-palette-surface));
    --contro-nota-privada-borde: #7E57C2;
    /* Mensaje de AVERÍA (registrada o anulada; Diego 2026-10-13: "cuando es avería debería salir de otro color"):
       ámbar, el mismo color del rayo del bloque Averías de la gestión. */
    --contro-nota-averia: color-mix(in srgb, var(--mud-palette-warning) 20%, var(--mud-palette-surface));
    --contro-nota-averia-borde: var(--mud-palette-warning);
    /* Estado "En programación" (Diego 2026-09-17): UN solo color en tablero, kanban y chips (la gestión ya no depende
       del usuario). Gris pizarra (Diego 2026-09-21: el violeta anterior no le gustó): es un color "en pausa", sin
       alarma, que dice "esto no está en tus manos". Además el violeta se confundía con el color primario del tema
       (medido: separación 13 sobre un mínimo de 15, y 6 sobre 8 para quien tiene daltonismo). Este tono se midió
       contra el ámbar, el verde, el primario y el rojo del tema y se distingue de todos, en claro y en oscuro. */
    --contro-programacion: #475569;
}

/* ── Solo oscuro ──────────────────────────────────────────────────────────────────────────────── */
html[data-tema="oscuro"] {
    color-scheme: dark; /* scrollbars, selects nativos y campos de fecha del navegador en oscuro */

    /* SIN DESTELLO BLANCO al abrir/F5: el script inline del <head> pone data-tema="oscuro" ANTES del
       primer pintado, y estas variables (los mismos valores de PaletteDark en TemaContro.cs) valen
       desde ese instante, sin esperar a que Blazor cargue y el MudThemeProvider emita las suyas.
       html[data-tema] le gana en especificidad al :root del MudThemeProvider; en modo claro no aplica. */
    /* El texto sobre el color PRIMARIO (pastillas activas y botones rellenos de los tableros compartidos) en oscuro: el primario
       es un azul claro (#63AFE0) y el blanco encima da 2,4:1; tinta carbon = DarkContrastText del tema (~7,6:1). Cada aplicacion
       define esta variable; el tablero no nombra el selector de tema. */
    --shk-tinta-sobre-primario: #10161D;
    --mud-palette-primary: #63AFE0;
    --mud-palette-secondary: #00EEB8;
    --mud-palette-tertiary: #00AFFF;
    /* Texto sobre los colores rellenos (los *ContrastText de PaletteDark en TemaContro.cs): tinta carbón, no blanco. */
    --mud-palette-primary-text: #10161D;
    --mud-palette-secondary-text: #10161D;
    --mud-palette-tertiary-text: #10161D;
    --mud-palette-info-text: #10161D;
    --mud-palette-success-text: #10161D;
    --mud-palette-warning-text: #10161D;
    --mud-palette-error-text: #10161D;
    --mud-palette-background: #10161D;
    --mud-palette-background-grey: #1B2531;
    --mud-palette-surface: #171F29;
    --mud-palette-appbar-background: #10161D;
    --mud-palette-appbar-text: #E8EEF4;
    --mud-palette-drawer-background: #171F29;
    --mud-palette-drawer-text: #E8EEF4;
    --mud-palette-text-primary: #E8EEF4;
    --mud-palette-text-secondary: #9FB0BE;
    --mud-palette-action-default: #9FB0BE;
    --mud-palette-lines-default: #283645;
    --mud-palette-divider: #283645;
    --mud-palette-table-lines: #223040;
    /* Pista del MudSwitch (lo único que usa --mud-palette-black); el #27272f por defecto se fundía
       con el fondo y los interruptores no se veían. Mismo valor que Black en PaletteDark. */
    --mud-palette-black: #9FB0BE;

    /* Burbujas del CRM: en oscuro el tinte tiene que ser más franco para separarse de la tarjeta. */
    --contro-nota-contacto: color-mix(in srgb, var(--mud-palette-success) 28%, var(--mud-palette-surface));
    --contro-nota-usuario: color-mix(in srgb, var(--mud-palette-info) 28%, var(--mud-palette-surface));
    --contro-nota-cliente-web: color-mix(in srgb, var(--mud-palette-primary) 26%, var(--mud-palette-surface));
    --contro-nota-cliente-web-borde: var(--mud-palette-primary);
    --contro-nota-privada: color-mix(in srgb, #9575CD 30%, var(--mud-palette-surface));
    --contro-nota-privada-borde: #B39DDB;
    --contro-nota-averia: color-mix(in srgb, var(--mud-palette-warning) 30%, var(--mud-palette-surface));
    /* Pizarra un punto más clara para leerse sobre el carbón. No más clara que esto: se acercaría al azul acero
       del primario en oscuro (#63AFE0) y volverían a parecerse. */
    --contro-programacion: #6E7F96;
}

/* En claro el verde relleno lleva texto en tinta (SuccessContrastText de la paleta clara): el blanco daba 3,5:1. */
html[data-tema="claro"] {
    --mud-palette-success-text: #10161D;
}

/* ── Barra de botones (BotonBarra.razor; ESTANDAR_PANTALLAS § Barra de botones) ──────────────────────────────
   Diego 2026-10-13: "esto no parecen botones y están muy pequeños… esto en todas las páginas". Antes eran texto
   plano (Variant.Text, Size.Small) separados por un margin de 3 px. Ahora: UNA principal rellena, las demás con
   contorno y un fondo tenue de su propio color, Cerrar neutro con el icono en rojo, y 8 px entre botones.
   El fondo tenue se mezcla con currentColor (el color del botón: primario, o Error si una secundaria avisa), así
   sirve en claro y en oscuro sin repetir valores. Vive acá y no en el componente porque la barra se pinta en
   cientos de pantallas y un <style> adentro se repetiría en cada botón. */
.btn-container { gap: .5rem; }

/* Diego 2026-10-20: como todos los botones de la barra miden lo mismo (parejos_1.js), el ícono y el texto van a la
   IZQUIERDA del botón y no centrados: así los íconos quedan en columna y se lee ordenado. */
.btn-container > .mud-button-root:not(.mud-icon-button),
.btn-container > .mud-button-root:not(.mud-icon-button) > .mud-button-label,
.mud-button-root[data-parejos],
.mud-button-root[data-parejos] > .mud-button-label { justify-content: flex-start; }

.shk-barra-secundario.mud-button-outlined {
    background-color: color-mix(in srgb, currentColor 8%, var(--mud-palette-background));
}

.shk-barra-secundario.mud-button-outlined:hover {
    background-color: color-mix(in srgb, currentColor 16%, var(--mud-palette-background));
}

/* Cerrar: contorno gris (texto secundario), texto en tinta; solo el icono dice "salir" en rojo. */
.shk-barra-cerrar.mud-button-outlined {
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-text-secondary);
    background-color: transparent;
}

.shk-barra-cerrar.mud-button-outlined:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.shk-barra-cerrar:not(:disabled) .mud-button-icon-start {
    color: var(--mud-palette-error);
}

/* Apagado (MudBlazor 6.21 marca el botón con :disabled, no con una clase): sin fondo tenue y con el borde gris de
   "apagado", para que no se vea activo. El texto ya lo atenúa MudBlazor con !important. */
.shk-barra-secundario.mud-button-outlined:disabled,
.shk-barra-cerrar.mud-button-outlined:disabled {
    background-color: transparent;
    border-color: var(--mud-palette-action-disabled-background);
}

/* Tarjetas */
html[data-tema="oscuro"] .card {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

html[data-tema="oscuro"] .card-header,
html[data-tema="oscuro"] .card-footer {
    background-color: var(--mud-palette-background-grey);
    border-color: var(--mud-palette-lines-default);
}

/* Tablas */
html[data-tema="oscuro"] .table {
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-table-lines);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--mud-palette-background-grey);
    --bs-table-striped-color: var(--mud-palette-text-primary);
    --bs-table-hover-bg: var(--mud-palette-table-hover);
    --bs-table-hover-color: var(--mud-palette-text-primary);
}

html[data-tema="oscuro"] .table > :not(caption) > * > * {
    border-bottom-color: var(--mud-palette-table-lines);
}

/* Modales (los propios de la app: CustomModal, MenuVertical) */
html[data-tema="oscuro"] .modal-content {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

html[data-tema="oscuro"] .modal-header,
html[data-tema="oscuro"] .modal-footer {
    border-color: var(--mud-palette-lines-default);
}

/* Campos de formulario nativos que aún usan clases de Bootstrap */
html[data-tema="oscuro"] .form-control,
html[data-tema="oscuro"] .form-select,
html[data-tema="oscuro"] .input-group-text {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

html[data-tema="oscuro"] .form-control:focus,
html[data-tema="oscuro"] .form-select:focus {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 0.25rem var(--mud-palette-primary-hover);
}

html[data-tema="oscuro"] .form-control::placeholder {
    color: var(--mud-palette-text-secondary);
}

/* ── Botón "ir arriba" (BodyMainLayout.razor, Diego 2026-10-18: "flotando a la derecha, discreto, cuando salga el scroll").
   MudScrollToTop lo fija abajo a la derecha y lo esconde arriba de la página; acá solo se le baja el tono: medio
   transparente, sobre la superficie del tema y con el borde de las líneas, para que no compita con los botones de la
   pantalla. Al pasar el mouse toma el color primario. Colores de la paleta: sirve en claro y en oscuro. */
.contro-ir-arriba .mud-button-root {
    opacity: .6;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    transition: opacity .2s, color .2s;
}

.contro-ir-arriba .mud-button-root:hover,
.contro-ir-arriba .mud-button-root:focus-visible {
    opacity: 1;
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

/* ── Etiqueta flotante de DOS renglones (Diego 2026-10-18: "cuando hay varios renglones queda muy ajustado, se ve pegado").
   MudBlazor pone la etiqueta en posición ABSOLUTA sobre la caja y le deja 16 px fijos: si el rótulo no cabe en una línea
   ("Máximo de clientes por búsqueda (0 = sin tope)", "Regalías de licencias talonarios") el segundo renglón se monta sobre
   el valor. Acá, cuando la etiqueta ya SUBIÓ (hay valor o foco: .mud-shrink / :focus-within), pasa a ocupar su lugar de
   verdad ARRIBA de la caja (position static + order -1 en el contenedor, que ya es flex en columna) y la caja pierde los
   16 px que le reservaban: con un renglón mide lo mismo que antes, con dos empuja la caja hacia abajo. Solo la variante
   Text (la de los componentes de fábrica); Filled y Outlined siguen como vienen. Sin :has() el navegador degrada a un
   hueco de 16 px entre etiqueta y caja, nada se monta. */
.mud-input-control > .mud-input-control-input-container > .mud-shrink ~ label.mud-input-label-inputcontrol:not(.mud-input-label-outlined):not(.mud-input-label-filled),
.mud-input-control > .mud-input-control-input-container > .mud-input:focus-within ~ label.mud-input-label-inputcontrol:not(.mud-input-label-outlined):not(.mud-input-label-filled) {
    position: static;
    order: -1;
    transform: none;
    font-size: .75rem;
    line-height: 1.25;
    padding-top: 1.5px;
    white-space: normal;
}

.mud-input-control > .mud-input-control-input-container:has(> .mud-shrink ~ label.mud-input-label-inputcontrol:not(.mud-input-label-outlined):not(.mud-input-label-filled)) > div.mud-input.mud-input-text,
.mud-input-control > .mud-input-control-input-container:has(> .mud-input:focus-within ~ label.mud-input-label-inputcontrol:not(.mud-input-label-outlined):not(.mud-input-label-filled)) > div.mud-input.mud-input-text {
    margin-top: 1px;
}

/* Utilidades de color de Bootstrap que asumen fondo claro */
html[data-tema="oscuro"] .text-muted,
html[data-tema="oscuro"] .text-secondary {
    color: var(--mud-palette-text-secondary) !important;
}

html[data-tema="oscuro"] .text-dark,
html[data-tema="oscuro"] .text-black {
    color: var(--mud-palette-text-primary) !important;
}

html[data-tema="oscuro"] .bg-white,
html[data-tema="oscuro"] .bg-light {
    background-color: var(--mud-palette-surface) !important;
}

html[data-tema="oscuro"] .border,
html[data-tema="oscuro"] .border-top,
html[data-tema="oscuro"] .border-bottom,
html[data-tema="oscuro"] .border-start,
html[data-tema="oscuro"] .border-end {
    border-color: var(--mud-palette-lines-default) !important;
}

html[data-tema="oscuro"] .list-group-item {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

html[data-tema="oscuro"] .dropdown-menu {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

html[data-tema="oscuro"] .dropdown-item {
    color: var(--mud-palette-text-primary);
}

html[data-tema="oscuro"] .dropdown-item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

html[data-tema="oscuro"] .page-link {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-lines-default);
}

html[data-tema="oscuro"] .btn-secondary {
    background-color: var(--mud-palette-background-grey);
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

html[data-tema="oscuro"] hr {
    border-color: var(--mud-palette-divider);
    opacity: 1;
}

/* SweetAlert2 (confirmaciones y avisos) */
html[data-tema="oscuro"] .swal2-popup {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

html[data-tema="oscuro"] .swal2-title,
html[data-tema="oscuro"] .swal2-html-container {
    color: var(--mud-palette-text-primary);
}

html[data-tema="oscuro"] .swal2-input,
html[data-tema="oscuro"] .swal2-textarea,
html[data-tema="oscuro"] .swal2-select {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

/* Quill (editor de texto de notas de versión) */
html[data-tema="oscuro"] .ql-toolbar.ql-snow,
html[data-tema="oscuro"] .ql-container.ql-snow {
    border-color: var(--mud-palette-lines-default);
}

html[data-tema="oscuro"] .ql-editor {
    color: var(--mud-palette-text-primary);
}

html[data-tema="oscuro"] .ql-editor.ql-blank::before {
    color: var(--mud-palette-text-secondary);
}

html[data-tema="oscuro"] .ql-snow .ql-stroke {
    stroke: var(--mud-palette-text-primary);
}

html[data-tema="oscuro"] .ql-snow .ql-fill {
    fill: var(--mud-palette-text-primary);
}

html[data-tema="oscuro"] .ql-snow .ql-picker,
html[data-tema="oscuro"] .ql-snow .ql-picker-options {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
}

/* ── Landing (Home.razor + landingPage.css) ───────────────────────────────────────────────────────
   La landing trae su propia paleta en variables (--background-color, --default-color, --heading-color,
   --surface-color, --accent-color) definidas en :root y en .light-background. En oscuro se re-apuntan a
   la paleta de MudBlazor; .dark-background (el hero azul) ya es oscuro y se deja como está. */
html[data-tema="oscuro"],
html[data-tema="oscuro"] .light-background {
    --background-color: var(--mud-palette-background);
    --surface-color: var(--mud-palette-surface);
    --default-color: var(--mud-palette-text-primary);
    --heading-color: var(--mud-palette-text-primary);
    --accent-color: var(--mud-palette-primary);
    --contrast-color: var(--mud-palette-primary-text);
}

html[data-tema="oscuro"] .light-background {
    --background-color: var(--mud-palette-background-grey);
}

/* ── Interruptores de estado Sí/No (CheckboxNuevoComponent, TrbBuscarComponent) ──────────────────
   Pedido de Diego 2026-09-08: que el estado se distinga de un vistazo. La pista se pinta del color
   del ESTADO (verde = Sí, rojo = No) y más gruesa (18 px en vez de 14); el botón queda blanco para
   que el ícono ✓/✕ encima se lea. Vale en claro y en oscuro. Se aplica con Class="contro-sw-estado"
   en el MudSwitch (la clase cae en la etiqueta raíz .mud-switch). */
.contro-sw-estado .mud-switch-span.mud-switch-span-medium {
    padding: 10px 12px;
}

.contro-sw-estado .mud-switch-track {
    border-radius: 10px;
}

.contro-sw-estado .mud-switch-base {
    color: #FFFFFF;
}

.contro-sw-estado .mud-switch-base.mud-checked + .mud-switch-track {
    background-color: var(--mud-palette-success);
    opacity: .9;
}

.contro-sw-estado .mud-switch-base:not(.mud-checked) + .mud-switch-track {
    background-color: var(--mud-palette-error);
    opacity: .9;
}

.contro-sw-estado .mud-switch-base.mud-switch-disabled + .mud-switch-track {
    opacity: .35 !important;
}


/* ── Páginas legales (políticas, términos, preguntas frecuentes) ─────────────────────────────── */
/* landingPage.css pinta .privacy-policy-section con colores FIJOS (fondo #f9f9f9, h2 #333, p #555),
   pero NO estiliza h3/h4: esos caen en la regla global de encabezados, que sí sigue al tema y en
   oscuro los pone blancos. Resultado: "Datos personales" (h3) salía blanco sobre la tarjeta clara,
   invisible (Diego, 2026-09-21). Se apunta toda la tarjeta a la paleta para que fondo y texto
   cambien juntos; en claro se ve igual que antes. */
html[data-tema="oscuro"] .privacy-policy-section {
    background-color: var(--mud-palette-surface);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .35);
}

html[data-tema="oscuro"] .privacy-policy-section h2,
html[data-tema="oscuro"] .privacy-policy-section h3,
html[data-tema="oscuro"] .privacy-policy-section h4,
html[data-tema="oscuro"] .privacy-policy-section strong,
html[data-tema="oscuro"] .privacy-policy-section ul li strong {
    color: var(--mud-palette-text-primary);
}

html[data-tema="oscuro"] .privacy-policy-section p,
html[data-tema="oscuro"] .privacy-policy-section ul li {
    color: var(--mud-palette-text-secondary);
}

/* El título de la página va FUERA de la tarjeta (<h1> suelto, justo ANTES de ella), sobre el fondo del
   body. Se lo toma por el hermano que lo precede para no pisar los h1 del resto del sitio. */
html[data-tema="oscuro"] h1:has(+ .privacy-policy-section) {
    color: var(--mud-palette-text-primary);
}
/* ── "Cargando…" (CargandoComponent.razor): barra fina en el lugar del contenido, sin cuadro ni fondo (2026-09-29).
   Antes era una caja fija de media ventana con fondo blanco al 10 %: en oscuro, un cuadrado gris que iba y venía. */
.contro-cargando { padding: .5rem 0 .75rem; }
.contro-cargando-texto { display: block; margin-top: .35rem; font-size: .8125rem; color: var(--mud-palette-text-secondary); }

/* ── Ficha por secciones (SeccionFicha.razor, ESTANDAR_PANTALLAS §3; publicista 2026-09-29) ──────────────
   Lo que separa las secciones es el BORDE y la FRANJA del encabezado: en oscuro la sombra no se ve (fondo
   #10161D, superficie #171F29), así que no se confía en ella. */
.contro-seccion { background: var(--mud-palette-surface); border-color: var(--mud-palette-lines-default); overflow: hidden; }
.contro-seccion-encabezado {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    padding: .75rem 1rem;
    background: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.contro-seccion-icono {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
}
.contro-seccion-titulos { flex: 1 1 14rem; min-width: 0; }
.contro-seccion-titulos .mud-typography-h6 { line-height: 1.25; }
.contro-seccion-subtitulo { display: block; color: var(--mud-palette-text-secondary); font-size: .8125rem; }
.contro-seccion-estado { display: flex; flex-wrap: wrap; gap: .5rem; }
.contro-seccion-cuerpo { padding: 1rem; }

/* Números de una sección que se comparan de un vistazo (beta del cliente vs. publicada). */
.contro-seccion-datos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 2rem; margin-bottom: 1rem; }
.contro-seccion-dato { display: flex; flex-direction: column; min-width: 8.5rem; }
.contro-seccion-dato-rotulo { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.contro-seccion-dato-valor { font-size: 1.4rem; font-weight: 400; letter-spacing: .01em; line-height: 1.2;
                             font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); }
.contro-seccion-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Ficha del cobrador > Licencias: "Lo que paga al mes" (Diego 2026-10-19). Concepto a la izquierda, monto alineado a la
   derecha con cifras de ancho fijo; el subtotal con una raya arriba y el total en grande. */
.licencias-cobrador-pago table { border-collapse: collapse; min-width: min(100%, 26rem); }
.licencias-cobrador-pago td { padding: .2rem 0; color: var(--mud-palette-text-primary); }
.licencias-cobrador-pago td.monto { text-align: right; padding-left: 2rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.licencias-cobrador-pago tr.linea-subtotal td { border-top: 1px solid var(--mud-palette-lines-default); padding-top: .4rem; color: var(--mud-palette-text-secondary); }
.licencias-cobrador-pago tr.linea-total td { font-size: 1.15rem; font-weight: 600; }

@media (max-width: 599.98px) {
    .contro-seccion-encabezado { padding: .75rem; }
    .contro-seccion-cuerpo { padding: .75rem; }
    .contro-seccion-estado { width: 100%; }
    .contro-seccion-acciones > .mud-button-root { flex: 1 1 100%; }
}

/* ── Pastilla de estado (PastillaEstado.razor): relleno tenue + texto en tinta (ESTANDAR_PANTALLAS §5 Contraste).
   El color lo llevan el fondo y el borde; el icono y el texto dicen el significado (el color nunca es la única señal). */
.contro-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .7rem; border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
    font-size: .8125rem; font-weight: 600; line-height: 1.4;
}
.contro-pill .mud-icon-root { font-size: 1rem; }
.contro-pill.ok    { border-color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 16%, var(--mud-palette-surface)); }
.contro-pill.aviso { border-color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 16%, var(--mud-palette-surface)); }
.contro-pill.error { border-color: var(--mud-palette-error);   background: color-mix(in srgb, var(--mud-palette-error)   16%, var(--mud-palette-surface)); }
html[data-tema="oscuro"] .contro-pill.ok    { background: color-mix(in srgb, var(--mud-palette-success) 24%, var(--mud-palette-surface)); }
html[data-tema="oscuro"] .contro-pill.aviso { background: color-mix(in srgb, var(--mud-palette-warning) 24%, var(--mud-palette-surface)); }
html[data-tema="oscuro"] .contro-pill.error { background: color-mix(in srgb, var(--mud-palette-error)   24%, var(--mud-palette-surface)); }

/* Archivos de una conversación (Diego 2026-10-13, "tipo WhatsApp"; ESTANDAR_PANTALLAS § 6). .crmadj- = dentro de la
   burbuja (AdjuntosDeNota.razor); .crmadjp- = los que se van a enviar, bajo la caja (AdjuntosPorEnviar.razor). Viven
   acá y no en esos componentes para que cualquier pantalla que los reuse salga con su aspecto, y porque la burbuja se
   pinta muchas veces y un style adentro se repetiría en cada una. Solo colores de la paleta: sirven en claro y oscuro. */
.crmadj { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.crmadj-fotos { display: flex; flex-wrap: wrap; gap: 6px; }
.crmadj-fotos img { max-height: 220px; max-width: 100%; border-radius: 6px; cursor: zoom-in; display: block; }
.crmadj-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crmadj-item audio { width: 320px; max-width: 100%; height: 40px; }
.crmadj-item video { max-width: 100%; max-height: 260px; border-radius: 6px; background: #000; }
.crmadj-ficha { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; padding: 4px 10px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); text-decoration: none; font-size: .875rem; }
.crmadj-ficha:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-text-primary); }
.crmadj-fila { display: flex; align-items: center; gap: 4px; min-width: 0; }
.crmadj-fila .crmadj-ficha { min-width: 0; }
.crmadj-bajar { display: inline-flex; align-items: center; flex: none; padding: 5px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); }
.crmadj-bajar:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-text-primary); }
.crmadj-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crmadj-peso { color: var(--mud-palette-text-secondary); font-size: .78rem; white-space: nowrap; }
.crmadj-vencido { font-size: .78rem; color: var(--mud-palette-text-secondary); }

.crmadjp { margin-top: 6px; }
.crmadjp-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crmadjp-fichas { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.crmadjp-ficha { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; }
.crmadjp-ficha.error { border-color: var(--mud-palette-error); }
.crmadjp-ficha img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; }
.crmadjp-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crmadjp-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
.crmadjp-peso { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.crmadjp-error { font-size: .78rem; color: var(--mud-palette-error); }
/* Mientras se arrastra un archivo encima de la caja: se marca dónde va a caer. */
.crmadjp-soltar { outline: 2px dashed var(--mud-palette-primary); outline-offset: 2px; border-radius: 8px; }