/*
 * Estilos propios del AOSA CRM.
 *
 * CSS PLANO, sin Tailwind y sin compilar nada: es la única personalización
 * visual que permite la regla de cero Node (arquitectura, apdo. 5.6).
 *
 * Motivo por el que existe este fichero: Filament distribuye su hoja de
 * estilos ya construida, y esa hoja contiene SOLO las utilidades que usan sus
 * propios componentes. Escribir `grid-cols-4` o `text-4xl` en una vista propia
 * no falla ni avisa: simplemente no se aplica, y la pantalla queda maquetada a
 * medias. Se descubrió mirando una captura, no ejecutando tests.
 *
 * Los colores salen de las variables de Filament, así que el modo oscuro y el
 * color de marca se mantienen solos.
 */

/* --- Rejillas ---------------------------------------------------------- */

.aosa-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .aosa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aosa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aosa-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .aosa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Filtros ----------------------------------------------------------- */

.aosa-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: .25rem;
}

/*
 * Las fechas exactas del periodo, al lado de los desplegables.
 *
 * «Este mes» no es una fecha: cuando alguien compara el informe con un papel
 * de contabilidad necesita ver el día de inicio y el de fin, o acaba
 * comparando periodos distintos sin darse cuenta.
 */
.aosa-filtro__pie {
    margin-left: auto;
    padding-bottom: .5rem;
    font-size: .75rem;
    color: var(--gray-500);
}

.aosa-filtro__etiqueta {
    display: block;
    margin-bottom: .25rem;
    font-size: .75rem;
    color: var(--gray-500);
}

.aosa-filtro select {
    border: 1px solid var(--gray-300);
    border-radius: .5rem;
    background: var(--gray-50);
    color: var(--gray-950);
    font-size: .875rem;
    padding: .375rem 2rem .375rem .625rem;
}

.dark .aosa-filtro select {
    border-color: var(--gray-700);
    background: var(--gray-900);
    color: var(--gray-50);
}

/* --- Cifra destacada --------------------------------------------------- */

.aosa-stat__label {
    font-size: .8125rem;
    color: var(--gray-500);
}

.aosa-stat__value {
    margin-top: .25rem;
    font-size: 2.25rem;
    line-height: 1.1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gray-950);
}

.dark .aosa-stat__value { color: #fff; }

.aosa-stat__meta {
    margin-top: .5rem;
    font-size: .75rem;
    color: var(--gray-400);
}

/*
 * Estado siempre con ICONO y TEXTO, nunca solo por color: un daltónico o una
 * impresión en blanco y negro deben poder leerlo igual.
 */
.aosa-estado {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-top: .5rem;
    font-size: .8125rem;
    font-weight: 500;
}

.aosa-estado svg { width: 1rem; height: 1rem; flex: none; }
.aosa-estado--ok   { color: var(--success-500); }
.aosa-estado--aviso { color: var(--warning-500); }
.aosa-estado--mal  { color: var(--danger-500); }

/* --- Embudo ------------------------------------------------------------ */

.aosa-embudo { display: flex; flex-direction: column; gap: .875rem; }

.aosa-embudo__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .3125rem;
    font-size: .875rem;
}

.aosa-embudo__etiqueta { color: var(--gray-700); }
.dark .aosa-embudo__etiqueta { color: var(--gray-300); }

.aosa-embudo__cifra {
    font-variant-numeric: tabular-nums;
    color: var(--gray-500);
    white-space: nowrap;
}

.aosa-embudo__pista {
    height: .5rem;
    width: 100%;
    border-radius: 9999px;
    background: var(--gray-100);
    overflow: hidden;
}

.dark .aosa-embudo__pista { background: var(--gray-800); }

/* Extremo redondeado, anclado al origen: la barra nace del borde izquierdo. */
.aosa-embudo__relleno {
    height: 100%;
    border-radius: 9999px;
    background: var(--primary-500);
    min-width: .25rem;
}

/* --- Aviso ------------------------------------------------------------- */

.aosa-nota {
    display: flex;
    gap: .5rem;
    margin-top: 1.25rem;
    padding: .75rem;
    border-radius: .5rem;
    background: var(--warning-50, #fffbeb);
    color: var(--warning-700, #b45309);
    font-size: .8125rem;
    line-height: 1.5;
}

.dark .aosa-nota {
    background: color-mix(in srgb, var(--warning-500) 12%, transparent);
    color: var(--warning-400);
}

.aosa-nota svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: .0625rem; }

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

.aosa-tabla-wrap { overflow-x: auto; }

.aosa-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.aosa-tabla th {
    padding: 0 .75rem .5rem 0;
    text-align: left;
    font-size: .75rem;
    font-weight: 500;
    color: var(--gray-500);
    white-space: nowrap;
}

.aosa-tabla td {
    padding: .5rem .75rem .5rem 0;
    border-top: 1px solid var(--gray-100);
    color: var(--gray-800);
}

.dark .aosa-tabla td { border-top-color: var(--gray-800); color: var(--gray-200); }

.aosa-tabla th:last-child,
.aosa-tabla td:last-child { padding-right: 0; }

.aosa-tabla .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--gray-500);
}

.aosa-tabla .vacio { color: var(--gray-400); padding: .75rem 0; }

/* --- Bloques de dato pequeños ------------------------------------------ */

.aosa-dato__label { font-size: .75rem; color: var(--gray-500); }

.aosa-dato__valor {
    margin-top: .25rem;
    font-size: 1.375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gray-950);
}

.dark .aosa-dato__valor { color: #fff; }

/*
 * Una cifra que exige actuar se pinta en rojo, y no solo en rojo: el color por
 * sí solo no llega a quien no lo distingue, así que va acompañado del signo de
 * admiración que añade el ::before.
 */
.aosa-dato__valor--alerta { color: var(--danger-600, #dc2626); }
.dark .aosa-dato__valor--alerta { color: var(--danger-400, #f87171); }
.aosa-dato__valor--alerta::before { content: "! "; font-weight: 700; }

.aosa-dato__valor small {
    font-size: .875rem;
    font-weight: 400;
    color: var(--gray-400);
}

.aosa-pie {
    margin-top: 1rem;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--gray-400);
}

/* --- Contenido crudo (correos, informes) ------------------------------- */

.aosa-crudo {
    max-height: 24rem;
    overflow: auto;
    border-radius: .5rem;
    background: var(--gray-50);
    padding: 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .75rem;
    line-height: 1.6;
    color: var(--gray-800);
    white-space: pre-wrap;
    word-break: break-word;
}

.dark .aosa-crudo { background: var(--gray-900); color: var(--gray-200); }

/* --- Salud del sistema -------------------------------------------------- */

.aosa-control {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.aosa-control__cuerpo { display: flex; align-items: flex-start; gap: .75rem; }
.aosa-control__icono { width: 1.5rem; height: 1.5rem; flex: none; }
.aosa-control__nombre { font-weight: 500; color: var(--gray-950); }
.dark .aosa-control__nombre { color: #fff; }
.aosa-control__detalle { font-size: .875rem; color: var(--gray-500); }
.aosa-control__edad { flex: none; font-size: .75rem; color: var(--gray-400); }

.aosa-icono--ok   { color: var(--success-500); }
.aosa-icono--aviso { color: var(--warning-500); }
.aosa-icono--mal  { color: var(--danger-500); }
.aosa-icono--gris { color: var(--gray-400); }

.aosa-incidencia {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.dark .aosa-incidencia { border-bottom-color: var(--gray-800); }
.aosa-incidencia:last-child { border-bottom: 0; }

.aosa-severidad {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.aosa-severidad--critical { color: var(--danger-500); }
.aosa-severidad--warning  { color: var(--warning-500); }
.aosa-severidad--info     { color: var(--gray-400); }

.aosa-incidencia__texto { margin-left: .5rem; font-size: .875rem; color: var(--gray-700); }
.dark .aosa-incidencia__texto { color: var(--gray-300); }
.aosa-incidencia__fecha { flex: none; font-size: .75rem; color: var(--gray-400); }

/* --- Pasos numerados (mantenimiento) ----------------------------------- */

.aosa-pasos { margin: 0; padding-left: 1.25rem; font-size: .875rem; line-height: 1.7; }
.aosa-pasos li { margin-bottom: .35rem; color: var(--gray-700); }
.dark .aosa-pasos li { color: var(--gray-300); }

/*
 * Botones de acción en una fila de tabla. Se envuelven a propósito: en un
 * móvil de 400 px tres botones no caben en línea, y sin `wrap` el último se
 * sale de la pantalla en vez de bajar.
 */
.aosa-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    justify-content: flex-end;
}

/*
 * Visor de registros. Plano y monoespaciado: aquí no hay que decorar nada, hay
 * que poder leer una traza sin que se reajuste sola.
 */
.aosa-campo {
    display: block;
    width: 100%;
    margin-top: .25rem;
    padding: .5rem;
    border: 1px solid var(--gray-300);
    border-radius: .375rem;
    background: #fff;
    font-size: .95rem;
}

.dark .aosa-campo {
    background: var(--gray-900);
    border-color: var(--gray-700);
    color: var(--gray-100);
}

.aosa-registro__linea {
    padding: .6rem 0;
    border-top: 1px solid var(--gray-200);
}

.dark .aosa-registro__linea { border-top-color: var(--gray-800); }

.aosa-registro__cabecera {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.aosa-nivel {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: .1rem .4rem;
    border-radius: .25rem;
}

.aosa-nivel--mal { background: #fee2e2; color: #b91c1c; }
.aosa-nivel--aviso { background: #fef3c7; color: #b45309; }
.aosa-nivel--info { background: #e7e5e4; color: #57534e; }

.dark .aosa-nivel--mal { background: #7f1d1d; color: #fecaca; }
.dark .aosa-nivel--aviso { background: #78350f; color: #fde68a; }
.dark .aosa-nivel--info { background: var(--gray-800); color: var(--gray-300); }

.aosa-registro__mensaje {
    margin: .2rem 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85rem;
    word-break: break-word;
}

.aosa-registro__detalle {
    margin: .4rem 0 0;
    padding: .5rem;
    background: var(--gray-100);
    border-radius: .375rem;
    font-size: .75rem;
    overflow-x: auto;
}

.dark .aosa-registro__detalle { background: var(--gray-900); }

/* --- Historial del contacto -------------------------------------------- */

/*
 * Hilo de mensajes y gestiones. Una sola columna incluso en escritorio: es una
 * conversación, y partirla en dos columnas rompe el orden de lectura, que aquí
 * es el dato principal.
 */
.aosa-hilo {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aosa-hilo__item {
    display: flex;
    gap: .75rem;
    padding: .75rem 0;
    border-top: 1px solid var(--gray-100);
}

.dark .aosa-hilo__item { border-top-color: var(--gray-800); }
.aosa-hilo__item:first-child { border-top: 0; padding-top: 0; }

.aosa-hilo__icono {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    margin-top: .125rem;
    color: var(--primary-500);
}

/*
 * Doble clase a propósito. Los modificadores `aosa-icono--*` se declaran más
 * arriba en esta misma hoja, así que con un solo nivel de especificidad ganaba
 * el color de `.aosa-hilo__icono` por ir después, y todos los iconos del hilo
 * salían del color de marca: el contacto efectivo dejaba de distinguirse del
 * intento fallido.
 */
.aosa-hilo__icono.aosa-icono--ok { color: var(--success-500); }
.aosa-hilo__icono.aosa-icono--aviso { color: var(--warning-500); }
.aosa-hilo__icono.aosa-icono--mal { color: var(--danger-500); }
.aosa-hilo__icono.aosa-icono--gris { color: var(--gray-400); }

.aosa-hilo__cuerpo { min-width: 0; flex: 1; }

.aosa-hilo__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
}

/* Sentido en palabras, no solo en color: «Recibido» o «Enviado». */
.aosa-hilo__marca {
    flex: none;
    padding: .05rem .375rem;
    border-radius: .25rem;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.dark .aosa-hilo__marca { background: var(--gray-800); color: var(--gray-300); }

.aosa-hilo__marca--entrante {
    background: color-mix(in srgb, var(--info-500, #0ea5e9) 15%, transparent);
    color: var(--info-700, #0369a1);
}

.dark .aosa-hilo__marca--entrante { color: var(--info-400, #38bdf8); }

/* Historial del lead (v1.39.0): el cliente dice que nadie le atendió. */
.aosa-hilo__marca--alerta {
    background: color-mix(in srgb, var(--danger-500, #ef4444) 15%, transparent);
    color: var(--danger-700, #b91c1c);
}

.dark .aosa-hilo__marca--alerta { color: var(--danger-400, #f87171); }

.aosa-hilo__titulo {
    font-weight: 500;
    color: var(--gray-950);
    word-break: break-word;
}

.dark .aosa-hilo__titulo { color: #fff; }

/* A la derecha en escritorio; en móvil baja sola por el wrap de la cabecera. */
.aosa-hilo__fecha {
    margin-left: auto;
    flex: none;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    color: var(--gray-400);
}

.aosa-hilo__meta {
    margin: .125rem 0 0;
    font-size: .75rem;
    color: var(--gray-500);
    word-break: break-word;
}

.aosa-hilo__meta a { color: var(--primary-600); text-decoration: underline; }
.dark .aosa-hilo__meta a { color: var(--primary-400); }

.aosa-hilo__texto {
    max-height: 12rem;
    overflow: auto;
    margin: .5rem 0 0;
    padding: .5rem .625rem;
    border-radius: .375rem;
    background: var(--gray-50);
    font-family: inherit;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--gray-700);
    white-space: pre-wrap;
    word-break: break-word;
}

.dark .aosa-hilo__texto { background: var(--gray-900); color: var(--gray-300); }

/* --- Identidades del contacto ------------------------------------------ */

.aosa-identidades {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.aosa-identidad {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .5rem;
    border: 1px solid var(--gray-200);
    border-radius: .5rem;
    font-size: .875rem;
    color: var(--gray-800);
    text-decoration: none;
}

.dark .aosa-identidad { border-color: var(--gray-700); color: var(--gray-200); }
.aosa-identidad:hover { border-color: var(--primary-500); }
.aosa-identidad svg { width: 1rem; height: 1rem; flex: none; color: var(--gray-400); }
.aosa-identidad__vacio { color: var(--gray-400); font-size: .875rem; }

.aosa-identidad__marca {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--gray-400);
}

/* Respuestas de una opinión, en el modal de «Respuestas». */
.aosa-respuestas { display: grid; gap: .9rem; }
.aosa-respuestas dt { font-size: .875rem; color: var(--gray-500, #6b7280); }
.aosa-respuestas dd { margin: .15rem 0 0; }

/* --- Resultados de las encuestas --------------------------------------- */

/*
 * Paleta divergente del NPS: rojo (detractores) y azul (promotores) con un
 * gris neutro en medio. Validada para daltonismo sobre fondo claro y oscuro;
 * el oscuro tiene sus propios tonos, no es el claro invertido. El gris de los
 * pasivos contrasta poco en oscuro, por eso toda cifra va también escrita.
 */
:root {
    --aosa-detractores: #e34948;
    --aosa-pasivos: #8f8d86;
    --aosa-promotores: #2a78d6;
    --aosa-serie: #2a78d6;
    --aosa-pista: #eef3fb;
    --aosa-superficie: #fff;
}

.dark {
    --aosa-detractores: #e66767;
    --aosa-pasivos: #5a5954;
    --aosa-promotores: #3987e5;
    --aosa-serie: #3987e5;
    --aosa-pista: #1b2433;
    --aosa-superficie: var(--gray-900, #18181b);
}

.aosa-dato__ayuda { margin-top: .375rem; font-size: .8125rem; color: var(--gray-500); }
.aosa-stat__de { font-size: 1rem; font-weight: 400; color: var(--gray-400); }

.aosa-reparto { margin-top: 1.5rem; }

.aosa-nps-barra {
    display: flex;
    gap: 2px;
    height: .625rem;
    min-width: 6rem;
    border-radius: 4px;
    overflow: hidden;
    background: var(--aosa-pista);
}

.aosa-nps-barra--grande { height: 1.5rem; }
.aosa-nps-barra__tramo { flex-basis: 0; min-width: 2px; }
.aosa-nps-barra__tramo--detractores { background: var(--aosa-detractores); }
.aosa-nps-barra__tramo--pasivos { background: var(--aosa-pasivos); }
.aosa-nps-barra__tramo--promotores { background: var(--aosa-promotores); }

.aosa-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: .75rem;
    font-size: .8125rem;
    color: var(--gray-600);
}

.dark .aosa-leyenda { color: var(--gray-300); }
.aosa-leyenda li { display: flex; align-items: center; gap: .375rem; }
.aosa-leyenda strong { color: var(--gray-950); font-variant-numeric: tabular-nums; }
.dark .aosa-leyenda strong { color: #fff; }
.aosa-leyenda__marca { width: .75rem; height: .75rem; border-radius: 2px; flex: none; }
.aosa-leyenda__marca--detractores { background: var(--aosa-detractores); }
.aosa-leyenda__marca--pasivos { background: var(--aosa-pasivos); }
.aosa-leyenda__marca--promotores { background: var(--aosa-promotores); }

.aosa-evolucion svg { display: block; width: 100%; height: auto; overflow: visible; }
.aosa-evolucion__rejilla { stroke: var(--gray-200); stroke-width: 1; }
.dark .aosa-evolucion__rejilla { stroke: var(--gray-800); }
.aosa-evolucion__cero { stroke: var(--gray-400); }
.dark .aosa-evolucion__cero { stroke: var(--gray-500); }
.aosa-evolucion__eje { font-size: 11px; fill: var(--gray-500); }
.aosa-evolucion__linea { fill: none; stroke: var(--aosa-serie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.aosa-evolucion__punto { fill: var(--aosa-serie); stroke: var(--aosa-superficie); stroke-width: 2; }
.aosa-evolucion__valor { font-size: 12px; font-weight: 600; fill: var(--gray-950); }
.dark .aosa-evolucion__valor { fill: #fff; }
.aosa-evolucion__zona { fill: transparent; }
.aosa-evolucion__zona:hover { fill: color-mix(in srgb, var(--gray-500) 8%, transparent); }

.aosa-detalle { margin-top: 1rem; font-size: .8125rem; }
.aosa-detalle summary { cursor: pointer; color: var(--gray-500); margin-bottom: .5rem; }

.aosa-tabla--nps .aosa-tabla__barra { width: 30%; min-width: 7rem; }
.aosa-tabla__fuerte { font-weight: 600; color: var(--gray-950) !important; }
.dark .aosa-tabla__fuerte { color: #fff !important; }
.aosa-poca { color: var(--gray-400); cursor: help; }

.aosa-pregunta {
    padding: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: .75rem;
}

.dark .aosa-pregunta { border-color: var(--gray-800); }
.aosa-pregunta__texto { font-weight: 500; color: var(--gray-950); }
.dark .aosa-pregunta__texto { color: #fff; }
.aosa-pregunta__meta { font-size: .75rem; color: var(--gray-500); }
.aosa-pregunta__cifra { margin: .75rem 0 .5rem; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gray-950); }
.dark .aosa-pregunta__cifra { color: #fff; }
.aosa-pregunta__cifra small { font-size: .8125rem; font-weight: 400; color: var(--gray-500); }

.aosa-barras { display: grid; gap: .25rem; margin-top: .5rem; }
.aosa-barras__fila { display: grid; grid-template-columns: 2rem 1fr 2.5rem; align-items: center; gap: .5rem; font-size: .8125rem; }
.aosa-barras--anchas .aosa-barras__fila { grid-template-columns: minmax(6rem, 35%) 1fr 2.5rem; }
.aosa-barras__etiqueta { color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .aosa-barras__etiqueta { color: var(--gray-300); }
.aosa-barras__pista { height: .75rem; border-radius: 4px; background: var(--aosa-pista); overflow: hidden; }
.aosa-barras__barra { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--aosa-serie); }
.aosa-barras__cifra { text-align: right; font-variant-numeric: tabular-nums; color: var(--gray-500); }

.aosa-textos { display: grid; gap: .5rem; margin-top: .75rem; font-size: .875rem; color: var(--gray-700); }
.dark .aosa-textos { color: var(--gray-300); }
.aosa-textos__vacio { color: var(--gray-400); }

.aosa-comentarios { display: grid; }
.aosa-comentario { display: flex; gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--gray-100); }
.aosa-comentario:first-child { border-top: 0; padding-top: 0; }
.dark .aosa-comentario { border-top-color: var(--gray-800); }

/* La nota lleva el color de su grupo en el borde, y la cifra escrita: el color no va solo. */
.aosa-comentario__nota {
    flex: none;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 2px solid var(--gray-300);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--gray-950);
}

.dark .aosa-comentario__nota { color: #fff; }
.aosa-comentario__nota--detractores { border-color: var(--aosa-detractores); }
.aosa-comentario__nota--pasivos { border-color: var(--aosa-pasivos); }
.aosa-comentario__nota--promotores { border-color: var(--aosa-promotores); }
.aosa-comentario__texto { font-size: .875rem; color: var(--gray-800); white-space: pre-line; }
.dark .aosa-comentario__texto { color: var(--gray-200); }
.aosa-comentario__meta { margin-top: .125rem; font-size: .75rem; color: var(--gray-500); }

/* Selector de empresa en la cabecera (v1.25.0) */
.aosa-empresa {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .625rem;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
    background: #fff;
    margin-inline-end: .5rem;
}
.aosa-empresa:hover { background: var(--gray-50); }
.aosa-empresa--fija:hover { background: #fff; }
.dark .aosa-empresa { color: var(--gray-200); border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .05); }
.aosa-empresa__icono { width: 1.125rem; height: 1.125rem; color: var(--primary-600); }
.aosa-empresa__flecha { width: 1rem; height: 1rem; color: var(--gray-400); }
.aosa-empresa__razon { display: block; font-size: .75rem; font-weight: 400; color: var(--gray-500); }

/* --- Versiones del stack (Sistema → Mantenimiento → Versiones) ---------- */

.aosa-versiones__cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
}

.aosa-versiones__fecha { margin-top: .25rem; font-size: 1.125rem; font-weight: 600; color: var(--gray-950); }
.dark .aosa-versiones__fecha { color: #fff; }
.aosa-versiones__alcance { max-width: 28rem; }
.aosa-versiones__vacio { font-size: .875rem; color: var(--gray-600); }
.dark .aosa-versiones__vacio { color: var(--gray-300); }

.aosa-versiones__filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: .75rem;
}

.aosa-versiones__campo { display: flex; flex-direction: column; gap: .25rem; min-width: 10rem; }
.aosa-versiones__campo--ancho { flex: 1 1 14rem; }

.aosa-versiones__enlace {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--primary-600);
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.dark .aosa-versiones__enlace { color: var(--primary-400); }
.aosa-versiones__enlace:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; border-radius: 2px; }

.aosa-versiones__tabla td { vertical-align: top; }
.aosa-versiones__version { font-variant-numeric: tabular-nums; white-space: nowrap; }
.aosa-versiones__detalle { background: var(--gray-50); padding: .75rem !important; }
.dark .aosa-versiones__detalle { background: color-mix(in srgb, var(--gray-800) 50%, transparent); }

.aosa-versiones__motivos { margin: 0 0 .75rem; padding-left: 1.125rem; list-style: disc; font-size: .8125rem; line-height: 1.5; }

.aosa-versiones__datos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: .5rem 1rem;
    font-size: .8125rem;
}
.aosa-versiones__datos dt { color: var(--gray-500); font-size: .75rem; }
.aosa-versiones__datos dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 640px) {
    .aosa-versiones__opcional { display: none; }
}
.aosa-versiones__estado { min-width: 12.5rem; }
.aosa-versiones__estado .fi-badge,
.aosa-versiones__estado .fi-badge * { overflow: visible; text-overflow: clip; white-space: nowrap; max-width: none; }

/* --- Lista de leads: columnas que solo caben en pantallas anchas --------- */
/* Por debajo de 1880 px, con el menú lateral, no caben sin barra horizontal. */
@media (max-width: 1879px) {
    .fi-ta-table .aosa-col-amplia { display: none; }
}

/* --- Analítica web (Marketing → Analítica web) ---------------------------- */

.aosa-analitica__vacio { font-size: .875rem; color: var(--gray-600); }
.dark .aosa-analitica__vacio { color: var(--gray-300); }

.aosa-analitica__filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
}
.aosa-analitica__fechas { flex: 1 1 18rem; margin: 0; }

.aosa-analitica__lecturas { display: grid; gap: .75rem; margin-top: 1rem; }

/* Dirección (v1.38.0): la frase del resumen ejecutivo, para quien solo lee una. */
.aosa-direccion__titular { font-size: 1.0625rem; line-height: 1.55; font-weight: 600; color: var(--gray-950); }
.dark .aosa-direccion__titular { color: #fff; }

.aosa-analitica__lectura {
    border: 1px solid var(--gray-200);
    border-left-width: 4px;
    border-radius: .5rem;
    padding: .75rem 1rem;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--gray-700);
}
.dark .aosa-analitica__lectura { border-color: var(--gray-700); color: var(--gray-200); }
.aosa-analitica__lectura--alerta { border-left-color: var(--danger-500); }
.aosa-analitica__lectura--oportunidad { border-left-color: var(--warning-500); }
.aosa-analitica__lectura--aviso { border-left-color: var(--gray-400); }
.aosa-analitica__lectura--bien { border-left-color: var(--success-500); }

.aosa-analitica__lectura-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.aosa-analitica__lectura h3 { font-weight: 600; color: var(--gray-950); }
.dark .aosa-analitica__lectura h3 { color: #fff; }
.aosa-analitica__accion { margin-top: .375rem; }

.aosa-analitica__fuente { color: var(--gray-400); }
.aosa-analitica__sube { color: var(--success-600); font-weight: 600; }
.aosa-analitica__baja { color: var(--danger-600); font-weight: 600; }
.dark .aosa-analitica__sube { color: var(--success-400); }
.dark .aosa-analitica__baja { color: var(--danger-400); }

.aosa-analitica__clave { max-width: 22rem; overflow-wrap: anywhere; }
.aosa-analitica__resumen { margin-bottom: 1rem; font-size: 1rem; font-weight: 500; color: var(--gray-950); }
.dark .aosa-analitica__resumen { color: #fff; }

.aosa-analitica__fecha { min-width: 9.5rem; }
.aosa-analitica__historico .fi-btn { margin-left: .5rem; vertical-align: middle; }

/* --- Imprimir (o «Guardar como PDF» en el navegador) ----------------------- */

.aosa-solo-impresion { display: none; }

.aosa-analitica__impreso { margin-bottom: .5rem; font-size: .875rem; color: #374151; }
.aosa-analitica__impreso-titulo { font-size: 1.125rem; font-weight: 700; color: #030712; margin-bottom: .25rem; }
.aosa-analitica__publico { font-size: 1rem; font-weight: 700; margin-top: .75rem; color: #030712; }

@media print {
    @page { size: A4; margin: 12mm; }

    html, body, .fi-body, .fi-layout, .fi-main-ctn, .fi-main { background: #fff !important; }

    /* Solo el informe: sin menús, botones, filtros ni avisos flotantes. */
    .fi-sidebar, .fi-sidebar-close-overlay, .fi-topbar, .fi-topbar-ctn, .fi-header-actions-ctn,
    .fi-layout-sidebar-toggle-btn-ctn, .fi-no, .aosa-no-imprimir { display: none !important; }

    .aosa-solo-impresion { display: block !important; }

    .fi-main-ctn, .fi-main, .fi-page, .fi-page-content {
        margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important;
    }

    .fi-section, .aosa-analitica__lectura, .aosa-tabla tr, .aosa-analitica__impreso { break-inside: avoid; }
    .fi-section { box-shadow: none !important; border: 1px solid #e5e7eb !important; }
    .aosa-tabla-wrap { overflow: visible !important; }
    .aosa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    /* En A4 no caben dos tablas lado a lado: una debajo de otra, y más pequeñas. */
    .aosa-grid--2 { grid-template-columns: minmax(0, 1fr) !important; }
    .aosa-tabla { font-size: 8.5pt !important; width: 100% !important; }
    .aosa-tabla th { white-space: normal !important; }
    .aosa-tabla th, .aosa-tabla td { padding: .25rem .375rem !important; }
    .aosa-analitica__clave { max-width: none; }

    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- Mantenimiento: actualizaciones desde GitHub (v1.36.0) ------------------- */

.aosa-github {
    margin-top: 1rem;
    padding: .875rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: .75rem;
}
.dark .aosa-github { border-color: var(--gray-700); }
.aosa-github__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.aosa-github__estado { font-size: .875rem; color: var(--gray-700); margin-top: .125rem; }
.dark .aosa-github__estado { color: var(--gray-300); }
.aosa-github__acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.aosa-github__datos { display: grid; gap: .25rem; margin-top: .75rem; font-size: .8125rem; color: var(--gray-700); }
.dark .aosa-github__datos { color: var(--gray-300); }
.aosa-github__datos span { display: inline-block; min-width: 10.5rem; color: var(--gray-500); }
.aosa-github__alerta { color: var(--danger-600) !important; }
.dark .aosa-github__alerta { color: var(--danger-400) !important; }

.aosa-notas-version {
    margin-top: .75rem;
    max-height: 18rem;
    overflow: auto;
    padding: .75rem 1rem;
    border-radius: .5rem;
    background: var(--gray-50);
    font-size: .8125rem;
    line-height: 1.5;
    text-align: left;
}
.dark .aosa-notas-version { background: color-mix(in srgb, var(--gray-900) 60%, transparent); }
.aosa-notas-version h2, .aosa-notas-version h3 { font-weight: 600; margin: .5rem 0 .25rem; }
.aosa-notas-version ul { list-style: disc; padding-left: 1.25rem; }

/* --- Pantalla de entrada (v1.36.0) --------------------------------------------
 * La marca a un lado (logo, nombre y eslogan de Configuración → Marca) y el
 * formulario al otro. En el móvil, la marca es una franja arriba.
 */

.aosa-entrada {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100dvh;
    background: #fff;
}
.dark .aosa-entrada { background: var(--gray-950); }

@media (min-width: 1024px) {
    .aosa-entrada { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.aosa-entrada__marca {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem 1.5rem 2rem;
    color: #fff;
    background: linear-gradient(150deg, var(--primary-600) 0%, var(--primary-800) 48%, var(--primary-950) 100%);
}

@media (min-width: 1024px) {
    .aosa-entrada__marca {
        position: sticky;
        top: 0;
        height: 100dvh;
        justify-content: space-between;
        gap: 2rem;
        padding: 3rem 3.5rem;
    }
}

/* Luz y una retícula muy suave: profundidad sin distraer. */
.aosa-entrada__fondo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(38rem 28rem at 88% 8%, rgb(255 255 255 / .16), transparent 62%),
        radial-gradient(32rem 26rem at -5% 105%, rgb(56 189 248 / .28), transparent 64%),
        linear-gradient(rgb(255 255 255 / .055) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgb(255 255 255 / .055) 1px, transparent 1px) 0 0 / 44px 44px;
}

/* El logo va sobre blanco: así se lee sea del color que sea. */
.aosa-entrada__logo {
    display: inline-flex;
    align-items: center;
    padding: .625rem .875rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 12px 32px -12px rgb(2 6 23 / .55);
}
.aosa-entrada__logo img { display: block; height: 2.25rem; width: auto; max-width: 12rem; object-fit: contain; }

/*
 * Logo grande (v1.39.0): el que ya lleva el nombre y el lema ocupa el sitio
 * del nombre. Ancho, no alto: es una tarjeta apaisada y tiene que leerse el
 * lema pequeño de debajo.
 */
/* Sin relleno: si la imagen trae su propio margen claro, no queda un marco dentro de otro. */
.aosa-entrada__logo--grande { display: block; width: min(100%, 17rem); padding: 0; overflow: hidden; border-radius: 1.25rem; }
.aosa-entrada__logo--grande img { width: 100%; height: auto; max-width: none; }

.aosa-entrada__oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.aosa-entrada__monograma {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: .875rem;
    border: 1px solid rgb(255 255 255 / .28);
    background: rgb(255 255 255 / .14);
    font-weight: 700;
    letter-spacing: .02em;
}

.aosa-entrada__nombre {
    font-size: clamp(1.5rem, 1.1rem + 2.4vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.025em;
    text-wrap: balance;
}
.aosa-entrada__eslogan {
    max-width: 30rem;
    margin-top: .625rem;
    font-size: 1rem;
    line-height: 1.55;
    color: rgb(255 255 255 / .84);
    text-wrap: pretty;
}
.aosa-entrada__pie { display: none; font-size: .8125rem; color: rgb(255 255 255 / .62); }

@media (min-width: 1024px) {
    .aosa-entrada__logo img { height: 2.75rem; max-width: 15rem; }
    .aosa-entrada__logo--grande { border-radius: 1.75rem; box-shadow: 0 28px 60px -24px rgb(2 6 23 / .6); }
    .aosa-entrada__logo--grande { width: min(100%, 30rem); }
    .aosa-entrada__logo--grande img { width: 100%; height: auto; max-width: none; }
    .aosa-entrada__monograma { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; }
    .aosa-entrada__eslogan { margin-top: 1rem; font-size: 1.25rem; }
    .aosa-entrada__pie { display: block; }
}

.aosa-entrada__principal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.25rem 1.25rem 3rem;
}
@media (min-width: 1024px) { .aosa-entrada__principal { padding: 3rem; } }

.aosa-entrada__formulario { width: 100%; max-width: 25rem; }

@media (prefers-reduced-motion: no-preference) {
    .aosa-entrada__formulario { animation: aosa-aparecer .45s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes aosa-aparecer {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.aosa-entrada__cabecera { margin-bottom: 1.75rem; }
.aosa-entrada__titulo { font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--gray-950); }
.dark .aosa-entrada__titulo { color: #fff; }
.aosa-entrada__subtitulo { margin-top: .375rem; color: var(--gray-600); }
.dark .aosa-entrada__subtitulo { color: var(--gray-400); }

.aosa-entrada__aviso { margin: -0.5rem 0 1.5rem; padding: .75rem 1rem; border-radius: .75rem; font-size: .875rem; line-height: 1.45; background: var(--warning-50); color: var(--warning-800); border: 1px solid var(--warning-200); }
.dark .aosa-entrada__aviso { background: color-mix(in oklab, var(--warning-500) 12%, transparent); color: var(--warning-300); border-color: color-mix(in oklab, var(--warning-500) 30%, transparent); }
.aosa-entrada__ayuda { margin-top: 1.5rem; font-size: .8125rem; line-height: 1.5; text-align: center; color: var(--gray-500); }
.dark .aosa-entrada__ayuda { color: var(--gray-400); }
.aosa-entrada__version { margin-top: 2.5rem; font-size: .75rem; text-align: center; color: var(--gray-400); }
.dark .aosa-entrada__version { color: var(--gray-500); }