/*
 * AiComex Web -- estilos base con la identidad de marca oficial
 * (ver Mi Agente/04_AICOMEX_MARCA.md y la skill voz-marca-aicomex).
 *
 * Paleta oficial -- usar SOLO estos colores, no agregar nuevos:
 *   Cyan Aicomex     #00D4FF  -- acento principal / gradiente inicio
 *   Magenta Aicomex  #CC44FF  -- acento secundario / gradiente fin
 *   Azul profundo    #0A0A2E  -- fondo oscuro principal
 *   Navy oscuro      #1A0A3E  -- fondo secundario / secciones alternas
 *   Blanco puro      #FFFFFF  -- texto sobre fondo oscuro
 *   Gris tech        #6B7280  -- texto secundario
 *   Gris claro       #F3F4F6  -- fondo de sección en versión clara
 *
 * El gradiente oficial (cyan -> violeta -> magenta) se reserva para el
 * logo, títulos principales o UN elemento de impacto por pieza -- nunca
 * como fondo general de una sección completa.
 */

:root {
    --ac-cyan: #00D4FF;
    --ac-magenta: #CC44FF;
    --ac-azul-profundo: #0A0A2E;
    --ac-navy: #1A0A3E;
    --ac-blanco: #FFFFFF;
    --ac-gris-tech: #6B7280;
    --ac-gris-claro: #F3F4F6;
    --ac-gradiente: linear-gradient(135deg, #00D4FF 0%, #8844FF 50%, #CC44FF 100%);
    --ac-font: 'Inter', Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

/* Fix de un gotcha real de CSS (06/09, encontrado al armar los pop-ups):
   el atributo `hidden` de HTML se implementa como [hidden]{display:none}
   en la hoja de estilos del navegador, pero cualquier regla propia que
   fije `display` (ej. ".ac-toolbar__mail{display:flex}", ".ac-modal
   {display:flex}") le gana a esa regla del navegador -- el origen
   "autor" pisa al origen "user-agent" sin importar la especificidad.
   Sin este !important, un elemento con `hidden` y una clase con
   display:flex/grid propio queda visible igual. Se resuelve una sola
   vez, para toda la web, en vez de acordarse de agregarlo elemento por
   elemento. Alternar visibilidad siempre con `el.hidden = true/false`,
   nunca con `el.style.display`. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: var(--ac-font);
    background-color: var(--ac-azul-profundo);
    color: var(--ac-blanco);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.ac-header {
    background-color: var(--ac-azul-profundo);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ac-header__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
}

.ac-logo {
    height: 108px;
    width: auto;
    display: block;
    border-radius: 10px; /* la imagen del logo trae su propio fondo oscuro cuadrado */
}

/* Hero */
.ac-hero {
    flex: 1;
    max-width: 780px;
    margin: 0 auto;
    padding: 96px 24px 64px;
    text-align: center;
}

.ac-hero__eyebrow {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ac-cyan);
    font-size: 13px;
    margin: 0 0 16px;
}

.ac-hero__title {
    font-weight: 800;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.2;
    margin: 0 0 24px;
}

.ac-gradient-text {
    background: var(--ac-gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ac-hero__subtitle {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6;
    color: var(--ac-gris-tech);
    margin: 0 auto 32px;
    max-width: 560px;
}

.ac-badge {
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 999px;
    background-color: var(--ac-navy);
    color: var(--ac-blanco);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Auth (login / registro) */
.ac-auth {
    max-width: 380px;
    margin: 0 auto;
    padding: 64px 24px;
}

.ac-auth__title {
    font-weight: 800;
    font-size: 28px;
    margin: 0 0 24px;
    text-align: center;
}

.ac-auth__error {
    background-color: rgba(204, 68, 255, 0.12);
    border: 1px solid var(--ac-magenta);
    color: var(--ac-blanco);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin: 0 0 16px;
}

.ac-auth__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ac-auth__form label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ac-gris-tech);
    margin-top: 12px;
}

.ac-auth__form input {
    font-family: var(--ac-font);
    font-size: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background-color: var(--ac-navy);
    color: var(--ac-blanco);
}

.ac-auth__form input:focus {
    outline: none;
    border-color: var(--ac-cyan);
}

/* 08/09, pedido explicito de Ernesto: boton "ojo" para mostrar/ocultar la
   contraseña en login/registro -mismo layout de fila (input + boton chico)
   que .ac-campo-con-boton del Catalogador/Clasificador, pero con estilo
   propio porque esto no es una accion destructiva (no usa el hover rojo de
   .ac-boton-quitar). */
.ac-campo-password {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.ac-campo-password input {
    flex: 1;
    min-width: 0;
}

.ac-boton-ver-clave {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background-color: transparent;
    color: var(--ac-gris-tech);
    cursor: pointer;
}

.ac-boton-ver-clave:hover {
    border-color: var(--ac-cyan);
    color: var(--ac-cyan);
}

.ac-auth__form button {
    margin-top: 24px;
    font-family: var(--ac-font);
    font-weight: 700;
    font-size: 16px;
    padding: 14px;
    border-radius: 8px;
    border: none;
    color: var(--ac-blanco);
    background: var(--ac-gradiente);
    cursor: pointer;
}

.ac-auth__form button:disabled {
    opacity: 0.6;
    cursor: default;
}

.ac-auth__switch {
    text-align: center;
    font-size: 14px;
    color: var(--ac-gris-tech);
    margin-top: 24px;
}

.ac-auth__switch a {
    color: var(--ac-cyan);
}

.ac-header__cta {
    margin-left: auto;
    color: var(--ac-blanco);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
}

/* Identidad en el header (avatar chico + email) -- ver Pendientes.md,
   "mostrar quien esta logueado". Es el primer elemento en llevarse el
   margin-left:auto, asi que empuja a este grupo (y a lo que venga
   despues, como "Mi cuenta"/"Cerrar sesion") contra el borde derecho. */
.ac-identidad {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ac-identidad__avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--ac-blanco);
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.ac-identidad__email {
    font-size: 14px;
    color: var(--ac-gris-tech);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    /* En el celular el espacio del header es chico -- se prioriza el
       avatar (identifica a quien esta logueado) y se esconde el email. */
    .ac-identidad__email {
        display: none;
    }
}

/* Avatar grande en Mi cuenta, con botones para cambiar/quitar la foto */
.ac-avatar-grande__cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
}

.ac-avatar-grande {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 34px;
    color: var(--ac-blanco);
    border: 2px solid rgba(255, 255, 255, 0.24);
}

.ac-avatar-acciones {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ac-avatar-boton {
    font-family: var(--ac-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--ac-cyan);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.ac-avatar-boton--quitar {
    color: var(--ac-gris-tech);
}

/* Cuenta (saldo, planes, historial) */
.ac-header__cta--boton {
    background: none;
    font-family: var(--ac-font);
    cursor: pointer;
}

.ac-badge--demo {
    display: block;
    text-align: center;
    max-width: 900px;
    margin: 24px auto 0;
}

.ac-cuenta {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 24px 64px;
}

.ac-cuenta__error {
    background-color: rgba(204, 68, 255, 0.12);
    border: 1px solid var(--ac-magenta);
    color: var(--ac-blanco);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    max-width: 900px;
    margin: 16px auto 0;
}

.ac-cuenta__error p {
    margin: 0 0 10px;
}

.ac-cuenta__error p:last-child {
    margin-bottom: 0;
}

/* 17/09: mismo tratamiento visual que .ac-cuenta__error pero en cyan en
   vez de magenta -- para avisos neutros/positivos (pago aprobado o
   pendiente de Mercado Pago), no errores. */
.ac-cuenta__aviso {
    background-color: rgba(0, 212, 255, 0.12);
    border: 1px solid var(--ac-cyan);
    color: var(--ac-blanco);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    max-width: 900px;
    margin: 16px auto 0;
}

/* 07/09, bug real encontrado por el reporte de Ernesto ("mail: no
   funciona, no lo envia" sin ningun aviso visible): .ac-modal es
   position:fixed, inset:0, z-index:1000 -tapa TODA la pantalla mientras
   el pop-up del dictamen esta abierto-, y "Enviar por mail"/"Generar
   infografia" viven DENTRO de ese pop-up. Si esa llamada fallaba (en este
   caso, un 500 real: faltan GMAIL_USER/GMAIL_APP_PASSWORD en el .env de
   AiComex Web, ver Pendientes.md), el aviso de error se mostraba en su
   lugar de siempre en la pagina -pero ese lugar queda TAPADO por el
   pop-up-, asi que el error existia pero era invisible: parecia que el
   click no hacia nada, y por eso Ernesto lo reintento varias veces. Se
   especifica por #ac-error puntual (no en toda la clase .ac-cuenta__error,
   que tambien usan catalogador.html/cuenta.html sin pop-ups) para que
   flote fijo arriba de todo, por encima de cualquier pop-up abierto. */
#ac-error {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    width: min(900px, calc(100vw - 32px));
    margin: 0;
}

.ac-cuenta__resumen {
    text-align: center;
    padding: 32px 0;
}

.ac-cuenta__email {
    color: var(--ac-gris-tech);
    font-size: 14px;
    margin: 0 0 8px;
}

.ac-cuenta__saldo {
    font-size: 40px;
    font-weight: 800;
    margin: 0;
}

.ac-cuenta__vencimiento {
    color: var(--ac-gris-tech);
    font-size: 14px;
    margin: 4px 0 0;
}

.ac-cuenta__seccion {
    margin-top: 40px;
}

.ac-cuenta__titulo {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
}

.ac-planes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

/* 08/09, pedido explicito de Ernesto (repetido dos veces -- el primer
   intento con "grid-auto-flow: dense" sobre un unico grid de 7 tarjetas
   no lo garantizaba en todos los anchos de pantalla): la seccion "Costo
   de las consultas" (#ac-planes, el <div> CON id, no el de arriba con las
   2 tarjetas de acceso directo que comparte la misma clase .ac-planes)
   deja de ser un unico grid y pasa a ser una pila vertical de GRUPOS
   independientes (acRenderizarPlanes en cuenta.js agrupa por
   "herramienta"): Clasificador (los 4 niveles juntos, u$s35 al lado de
   u$s50), Catalogador (solo, sin pareja) y Asistente/Consultor (uno al
   lado del otro) -- la adyacencia dentro de cada grupo ya no depende de
   cuantas columnas entren en una fila que mezcla las 7 tarjetas. */
#ac-planes {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ac-planes__grupo {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.ac-planes__grupo .ac-plan {
    flex: 1 1 200px;
    min-width: 200px;
}

.ac-plan {
    /* 08/09, pedido explicito de Ernesto ("que queden parejos los
       botones Ir al Clasificador e Ir al Catalogador"): en vez de forzar
       un salto de linea a mano despues de un texto puntual -que se
       desalinearia de nuevo si el texto de arriba vuelve a cambiar de
       largo (el tagline de Catalogador ya ocupa 2 lineas y el del
       Clasificador 1 sola, por eso el desnivel)-, se resuelve con flexbox:
       la tarjeta es una columna flex y el boton (ver .ac-plan__boton,
       margin-top:auto) siempre queda pegado abajo del todo, sin importar
       cuantas lineas ocupe el contenido de arriba.
       Requiere que las tarjetas de una misma fila ya tengan la misma
       altura -- align-items:stretch es el default tanto de grid (arriba,
       .ac-planes) como de flex-wrap (.ac-planes__grupo), asi que ya se
       cumple sin nada extra. */
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    padding: 18px;
    background-color: var(--ac-navy);
}

.ac-plan__nombre {
    font-size: 14px;
    color: var(--ac-gris-tech);
    margin: 0 0 4px;
}

/* 08/09, pedido explicito de Ernesto: cada herramienta refleja en su
   tarjeta la pregunta que responde (ver TAGLINE_HERRAMIENTA en
   creditos.py / acRenderizarPlanes en cuenta.js). */
.ac-plan__tagline {
    font-size: 12px;
    font-style: italic;
    color: var(--ac-blanco);
    margin: 0 0 8px;
}

/* Linea chica de palabras clave, solo para Consultor de Derecho Aduanero
   por ahora (ver PRODUCTOS["abogado_aduanero_individual"]["detalle"]). */
.ac-plan__detalle {
    font-size: 11px;
    color: var(--ac-cyan);
    margin: 0 0 8px;
}

/* Tarjeta mas ancha (mas espacio proporcional dentro de su grupo, ver
   .ac-planes__grupo arriba) para nombres/detalles mas largos que el
   resto -- hoy solo Consultor de Derecho Aduanero
   (PRODUCTOS[...]["ancho"] en creditos.py). */
/* 01/10: lanzamiento gratis -- aviso que reemplaza las tarjetas de precio
   en "Mi cuenta" mientras el servidor tenga MODO_PROMOCION_GRATIS=1. */
.ac-planes__promo {
    border: 2px solid #CC44FF;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}
.ac-planes__promo-titulo { font-size: 18px; font-weight: 700; margin: 0 0 8px; }

.ac-plan--ancho {
    flex: 2 1 320px;
}

.ac-plan__precio {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
}

.ac-plan__creditos {
    font-size: 13px;
    color: var(--ac-cyan);
    margin: 4px 0 16px;
}

.ac-plan__boton {
    margin-top: auto; /* lo empuja siempre al fondo de la tarjeta, ver .ac-plan arriba */
    width: 100%;
    font-family: var(--ac-font);
    font-weight: 700;
    font-size: 14px;
    padding: 10px;
    border-radius: 8px;
    border: none;
    color: var(--ac-blanco);
    background: var(--ac-gradiente);
    cursor: pointer;
}

.ac-plan__boton:disabled {
    opacity: 0.6;
    cursor: default;
}

.ac-historial {
    overflow-x: auto;
}

.ac-historial__tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ac-historial__tabla th {
    text-align: left;
    color: var(--ac-gris-tech);
    font-weight: 500;
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    white-space: nowrap;
}

.ac-historial__tabla td {
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: top;
}

.ac-historial__positivo {
    color: #4ade80;
}

.ac-historial__negativo {
    color: var(--ac-magenta);
}

.ac-historial__vacio {
    text-align: center;
    color: var(--ac-gris-tech);
}

/* Herramientas (Clasificador / Catalogador) */
.ac-herramienta {
    max-width: 700px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.ac-herramienta__titulo {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 8px;
}

.ac-herramienta__subtitulo {
    color: var(--ac-gris-tech);
    font-size: 14px;
    margin: 0 0 24px;
}

.ac-herramienta__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ac-herramienta__form label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ac-gris-tech);
    margin-top: 12px;
}

.ac-herramienta__form textarea,
.ac-herramienta__form input[type="text"],
.ac-herramienta__form input[type="file"],
.ac-herramienta__form select {
    font-family: var(--ac-font);
    font-size: 15px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background-color: var(--ac-navy);
    color: var(--ac-blanco);
}

.ac-herramienta__form textarea:focus,
.ac-herramienta__form input:focus,
.ac-herramienta__form select:focus {
    outline: none;
    border-color: var(--ac-cyan);
}

/* 08/09, pedido explicito de Ernesto: "un X al lado de la foto para
   eliminarla" y "un boton similar para quitar lo escrito" -- envuelve el
   textarea/input de archivo junto a un boton chico "✕" que limpia el
   campo (ver acEjecutarBorrarTexto/acEjecutarQuitarArchivo en
   catalogador.js/clasificador.js). */
.ac-campo-con-boton {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ac-campo-con-boton textarea,
.ac-campo-con-boton input[type="file"] {
    flex: 1;
    min-width: 0;
}

.ac-boton-quitar {
    flex-shrink: 0;
    font-family: var(--ac-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background-color: transparent;
    color: var(--ac-gris-tech);
    cursor: pointer;
}

.ac-boton-quitar:hover {
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.ac-herramienta__form button[type="submit"] {
    margin-top: 20px;
    font-family: var(--ac-font);
    font-weight: 700;
    font-size: 15px;
    padding: 12px;
    border-radius: 8px;
    border: none;
    color: var(--ac-blanco);
    background: var(--ac-gradiente);
    cursor: pointer;
}

.ac-confirmacion {
    margin-top: 20px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid var(--ac-cyan);
    background-color: var(--ac-navy);
}

.ac-confirmacion p {
    margin: 0 0 12px;
    font-size: 14px;
}

.ac-confirmacion__botones {
    display: flex;
    gap: 12px;
}

.ac-confirmacion__confirmar {
    font-family: var(--ac-font);
    font-weight: 700;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    color: var(--ac-blanco);
    background: var(--ac-gradiente);
    cursor: pointer;
}

.ac-confirmacion__confirmar:disabled {
    /* 06/09: Ernesto pidió que el boton "de una señal de que cliqueo" --
       antes quedaba disabled=true en JS pero sin ningun cambio visual
       (el fondo con gradiente tapaba el estilo disabled por default del
       navegador), asi que parecia que el click no habia hecho nada. */
    opacity: 0.6;
    cursor: default;
}

.ac-confirmacion__cancelar {
    font-family: var(--ac-font);
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: none;
    color: var(--ac-blanco);
    cursor: pointer;
}

.ac-resultado {
    margin-top: 32px;
    padding: 20px;
    border-radius: 10px;
    background-color: var(--ac-navy);
}

.ac-resultado h2 {
    font-size: 18px;
    margin: 0 0 12px;
}

.ac-resultado__texto {
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.6;
}

.ac-seccion-chat {
    margin-top: 32px;
}

.ac-seccion-chat h2 {
    font-size: 18px;
    margin: 0 0 4px;
}

.ac-chat__lista {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ac-chat__turno {
    padding: 12px 14px;
    border-radius: 8px;
    background-color: var(--ac-navy);
    font-size: 14px;
    line-height: 1.5;
}

.ac-chat__turno .ac-markdown,
.ac-chat__turno p {
    margin: 6px 0 0;
}

/* 07/09: "Discutir este dictamen" se mudó adentro del pop-up del dictamen
   (ver clasificador.html) -- vive DENTRO de .ac-modal__cuerpo, que ya
   tiene su propio scroll, asi que no hace falta nada especial acá, solo
   un poco de aire respecto del texto del dictamen que queda arriba. */
.ac-modal__cuerpo .ac-seccion-chat {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Clasificador -- pagina un poco mas ancha que el resto de las
   herramientas (06/09, pedido de Ernesto comparando con Portal Personal:
   "el texto se aplica mas ancho lo cual lo hace menos largo"). Modifica
   SOLO donde se usa esta clase (clasificador.html), no toca el resto de
   .ac-herramienta (formularios de cuenta/catalogador siguen angostos). */
.ac-herramienta--ancho {
    max-width: 880px;
}

/* Render de markdown del dictamen/infografia/triangulacion (06/09): antes
   se mostraba el texto crudo de Gemini con .textContent -se veian los
   "##"/"**" literales en pantalla, que era buena parte de por que Ernesto
   lo sintio "muy largo" comparado con Portal, que si lo renderiza. Los
   backticks de "## " que arma cada prompt (PROMPT_PASO2, PROMPT_INFOGRAFIA_DICTAMEN,
   PROMPT_TRIANGULACION, ver clasificador.py) se convierten aca en <h2>. */
.ac-markdown h2 {
    color: var(--ac-cyan);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.24);
}

.ac-markdown p {
    margin: 0 0 12px;
}

.ac-markdown ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.ac-markdown li {
    margin-bottom: 6px;
}

.ac-markdown strong {
    color: var(--ac-blanco);
}

.ac-markdown a {
    color: var(--ac-cyan);
}

.ac-markdown hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    margin: 16px 0;
}

/* Tabla de la Ficha Tecnica del Catalogador (08/09) -- el bloque 3 del
   Super Prompt (SUPER_PROMPT_CATALOGADOR en catalogador.py) siempre pide
   una tabla Markdown real ("| Atributo | Valor |"), a diferencia del
   dictamen del Clasificador, que nunca trae tablas -por eso esta regla
   vive en .ac-markdown junto al resto del render de markdown, para que
   se vea igual de prolija que el resto de la ficha (ver acTablaAHtml en
   catalogador.js). */
.ac-markdown table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: 14px;
}

.ac-markdown th {
    text-align: left;
    color: var(--ac-cyan);
    font-weight: 700;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.24);
}

.ac-markdown td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: top;
}

/* Barra de acciones sobre el dictamen (PDF, mail, infografia, catalogador,
   triangulacion, nueva consulta) -- Ernesto encontro que faltaban
   comparando con Portal Personal. */
.ac-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.ac-toolbar__boton {
    font-family: var(--ac-font);
    font-size: 13px;
    font-weight: 500;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: none;
    color: var(--ac-blanco);
    cursor: pointer;
}

.ac-toolbar__boton:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Funciones todavia no desarrolladas (06/09: "Buscar precedentes en la
   web" queda apagado a pedido de Ernesto hasta que se desarrolle bien,
   ver Pendientes.md) -- se ve mas tenue para marcar que no esta
   plenamente activa, pero sigue siendo clickeable (avisa "Proximamente"
   en vez de no responder). */
.ac-toolbar__boton--proximamente {
    opacity: 0.55;
}

.ac-toolbar__mail {
    display: flex;
    gap: 10px;
    margin: 0 0 16px;
}

.ac-toolbar__mail input {
    flex: 1;
    font-family: var(--ac-font);
    font-size: 14px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background-color: var(--ac-navy);
    color: var(--ac-blanco);
}

.ac-toolbar__estado {
    font-size: 13px;
    color: var(--ac-cyan);
    margin: 0 0 16px;
}

/* Selector Dictamen Completo / Resumen Express + paginado natural del
   dictamen largo (06/09, pedido explicito: "una forma natural de pasar
   paginas para ir leyendolo pero siempre dentro de la pagina web"). */
.ac-pager__modos {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
}

.ac-pager__modo {
    font-family: var(--ac-font);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: none;
    color: var(--ac-gris-tech);
    cursor: pointer;
}

.ac-pager__modo--activo {
    color: var(--ac-blanco);
    border-color: transparent;
    background: var(--ac-gradiente);
}

.ac-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ac-pager__boton {
    font-family: var(--ac-font);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: none;
    color: var(--ac-blanco);
    cursor: pointer;
}

.ac-pager__boton:disabled {
    opacity: 0.4;
    cursor: default;
}

.ac-pager__estado {
    font-size: 13px;
    color: var(--ac-gris-tech);
}

/* Pop-up del dictamen / infografía / triangulación (06/09, pedido
   explícito de Ernesto: mismo estilo que el pop-up de la infografía en
   Portal Personal -tarjeta centrada sobre un fondo oscurecido-, pero con
   más aire arriba y abajo que un modal chico, SIN tapar toda la
   pantalla, y con el paginado del dictamen adentro). */
.ac-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    /* 07/09: antes "center" -- centrado verticalmente, el panel abria mas
       arriba o mas abajo segun cuanto contenido tuviera (Resumen Express
       corto vs. Dictamen Completo largo), y Ernesto lo noto como
       inconsistente. Con flex-start el panel arranca siempre en el mismo
       lugar (el padding de aca abajo) y crece hacia abajo con su propio
       contenido, hasta su max-height. */
    align-items: flex-start;
    justify-content: center;
    /* 06/09: agrandado a pedido de Ernesto ("hacelo mas grande, mas alto
       y mas abajo, mas ancho tambien") -- menos aire alrededor del panel,
       para que el panel mismo ocupe casi toda la pantalla disponible sin
       taparla del todo. 07/09: pedido "hace mas largo el pop up" -- se
       achica un poco mas el aire vertical (2vh -> 1vh). */
    padding: 1vh 16px;
}

.ac-modal__fondo {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 46, 0.72);
}

.ac-modal__panel {
    position: relative;
    z-index: 1;
    width: min(980px, 96vw);
    /* 07/09: 94vh -> 97vh, mismo pedido de "hace mas largo el pop up". */
    max-height: 97vh;
    display: flex;
    flex-direction: column;
    background-color: var(--ac-navy);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.ac-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ac-modal__header .ac-pager__modos {
    margin: 0;
}

.ac-modal__titulo {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.ac-modal__cerrar {
    font-family: var(--ac-font);
    font-size: 16px;
    line-height: 1;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--ac-blanco);
    cursor: pointer;
    padding: 6px 11px;
    border-radius: 999px;
}

.ac-modal__cerrar:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Barra de acciones DENTRO del pop-up (06/09: "Descargar como PDF",
   "Enviar por mail" y "Generar infografía" se mudaron acá adentro,
   arriba del dictamen, a pedido explícito de Ernesto -antes vivían en
   la página, afuera del pop-up-). */
.ac-modal__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ac-modal .ac-toolbar__mail {
    margin: 0;
    padding: 0 24px 16px;
}

.ac-modal .ac-toolbar__estado {
    margin: 0;
    padding: 0 24px 16px;
}

/* "Resultado / Producto: X" arriba del contenido, dentro del pop-up
   (07/09, pedido explicito de Ernesto -mismo texto que ya se ve afuera y
   en el PDF impreso, ahora tambien ahi adentro-). */
.ac-modal__producto {
    padding: 0 24px 12px;
}

.ac-modal__producto-etiqueta {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ac-gris-tech);
}

.ac-modal__producto-nombre {
    margin: 4px 0 0;
    font-size: 18px;
    color: var(--ac-cyan);
}

.ac-modal__cuerpo {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

@media (max-width: 640px) {
    .ac-modal {
        padding: 1vh 8px;
    }
    .ac-modal__panel {
        max-height: 98vh;
    }
}

/* 23/09: indicador de espera visible (spinner + segundos en vivo) para
   la consulta y para el chat "Discutir este dictamen" -- a pedido de
   Ernesto: mientras se espera el dictamen, más allá del texto, tiene que
   notarse que el sistema sigue funcionando y no se colgó (antes era un
   <p> estático que no cambiaba en 30-50s de espera real, ver
   TROUBLESHOOTING.md #31). El spinner gira con CSS puro (sin JS); el
   contador de segundos lo actualiza clasificador.js con setInterval. */
.ac-espera {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}

.ac-espera p {
    margin: 0;
    color: var(--ac-gris-tech);
}

.ac-espera__spinner {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid rgba(0, 212, 255, 0.25);
    border-top-color: var(--ac-cyan);
    animation: ac-espera-girar 0.8s linear infinite;
}

@keyframes ac-espera-girar {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ac-espera__spinner {
        animation: none;
        border-top-color: rgba(0, 212, 255, 0.25);
    }
}

/* "Descargar como PDF" (06/09) es window.print() -mismo criterio ya
   documentado en catalogador.py para el Catalogador: gratis, sin
   generar el archivo en el servidor. Esto oculta todo lo que no es el
   dictamen en si al mandar a imprimir. */
@media print {
    .ac-header,
    .ac-footer,
    .ac-herramienta__form,
    .ac-herramienta__subtitulo,
    .ac-confirmacion,
    #ac-cargando-consulta,
    .ac-toolbar,
    .ac-toolbar__mail,
    .ac-toolbar__estado,
    .ac-pager,
    .ac-pager__modos,
    .ac-modal__fondo,
    .ac-modal__header,
    .ac-modal__toolbar,
    .ac-modal__cerrar {
        display: none !important;
    }

    /* 19/10, pedido explicito de Ernesto: si en "Discutir este dictamen"
       se corrige la conclusion (ej. cambia la posicion SIM final), esa
       correccion tiene que verse en el PDF -antes el PDF imprimia
       SIEMPRE el dictamen original del Paso 2, sin nada de lo discutido
       despues, porque .ac-seccion-chat estaba en la lista de arriba y se
       ocultaba entera al imprimir (ver Pendientes.md 19/10). Ahora se
       imprime el chat completo debajo del dictamen -excepto cuando
       todavia no se discutio nada, caso en el que clasificador.js le
       agrega la clase de aca abajo al boton "Descargar como PDF" para no
       imprimir un titulo "Discutir este dictamen" con una lista vacia. */
    .ac-seccion-chat--vacia-en-impresion {
        display: none !important;
    }

    .ac-seccion-chat {
        padding-top: 16px;
        margin-top: 16px;
        border-top: 2px solid #000000;
    }

    /* Los globos del chat tienen fondo oscuro (--ac-navy) pensado para
       pantalla -en el PDF, con el texto forzado a negro mas abajo
       (.ac-markdown h2, .ac-modal__panel), quedaban ilegibles (negro
       sobre azul oscuro). En el PDF se imprimen con fondo blanco y un
       borde fino en vez del fondo de color. */
    .ac-chat__turno {
        background-color: #FFFFFF;
        border: 1px solid #000000;
    }

    /* El dictamen vive en el pop-up (ver ac-boton-pdf en clasificador.js,
       que lo abre antes de llamar a window.print() si estaba cerrado) --
       para imprimir hace falta que .ac-modal deje de ser un overlay de
       pantalla completa y pase a fluir como contenido normal de la hoja. */
    .ac-modal {
        position: static;
        display: block;
        padding: 0;
    }

    .ac-modal__panel {
        max-height: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
    }

    .ac-modal__cuerpo {
        overflow: visible;
        padding: 0;
    }

    body,
    .ac-resultado,
    .ac-modal__panel {
        background: #FFFFFF;
        color: #000000;
    }

    .ac-markdown h2 {
        color: #000000;
        border-bottom-color: #000000;
    }

    .ac-markdown a {
        color: #000000;
    }
}

/* Bloque de marca (logo + bajada) y pie de pagina, SOLO para el PDF
   impreso del Clasificador y del Catalogador (08/09, pedido explicito de
   Ernesto: "debe haber un encabezado y un pie de pagina igual al del
   email que se envia" -- copia EXACTA de los colores/medidas/textos de
   _construir_html_mail() en clasificador.py/catalogador.py, no una
   version "parecida". El pop-up ya muestra su propio titulo en pantalla,
   asi que este bloque vive oculto por default y unicamente @media print
   lo activa). */
.ac-print-marca,
.ac-print-pie {
    display: none;
}

@media print {
    .ac-print-marca {
        display: block;
        text-align: center;
        padding: 28px 32px;
        margin: 0 0 16px;
        background-color: #0A0A2E;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .ac-print-marca img {
        display: block;
        width: 72px;
        margin: 0 auto 12px;
        border-radius: 12px;
    }

    .ac-print-marca__bajada {
        margin: 0;
        font-size: 13px;
        line-height: 1.4;
        color: #FFFFFF;
    }

    .ac-print-pie {
        display: block;
        text-align: center;
        padding: 22px 32px;
        margin: 24px 0 0;
        background-color: #F3F4F6;
        border-top: 1px solid #E5E7EB;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .ac-print-pie__generado {
        margin: 0 0 8px;
        font-size: 12px;
        color: #6B7280;
    }

    .ac-print-pie__contacto {
        margin: 0;
        font-size: 13px;
        color: #0A0A2E;
    }

    .ac-print-pie__contacto a {
        color: #0A0A2E;
        text-decoration: none;
    }

    .ac-print-pie__sitio,
    .ac-print-pie__whatsapp {
        font-weight: bold;
    }

    .ac-print-pie__contacto img {
        width: 14px;
        height: 14px;
        vertical-align: middle;
        margin-right: 4px;
    }

    .ac-print-pie__separador {
        color: #9CA3AF;
        margin: 0 6px;
    }
}

/* Footer */
.ac-footer {
    text-align: center;
    padding: 24px;
    font-size: 13px;
    color: var(--ac-gris-tech);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ac-footer__disclaimer {
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.85;
}

.ac-footer__disclaimer strong {
    color: var(--ac-gris-tech);
    opacity: 1;
}


/* =====================================================================
   Home (18/09) -- index.html: alta directa con mail + CUIT, sin secciones
   de venta. Prefijo .ac-home-*. Colores oficiales (04_AICOMEX_MARCA.md):
   gradiente solo en el título y en el botón principal.
   ===================================================================== */

.ac-home {
    flex: 1;
}

.ac-home-hero {
    max-width: 860px;
    margin: 0 auto;
    padding: 64px 24px 56px;
    text-align: center;
}

.ac-home-hero .ac-hero__title {
    margin-bottom: 20px;
}

.ac-home-hero .ac-hero__subtitle {
    color: rgba(255, 255, 255, 0.75);
    max-width: 620px;
    margin-bottom: 32px;
}

.ac-home-prueba {
    max-width: 440px;
    margin: 0 auto;
    padding: 28px 24px;
    text-align: left;
    background-color: var(--ac-navy);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
}

.ac-home-prueba .ac-auth__form label {
    color: rgba(255, 255, 255, 0.75);
}

.ac-home-prueba .ac-auth__form input {
    background-color: var(--ac-azul-profundo);
}

.ac-home-prueba__titulo {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
}

.ac-home-prueba__nota {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}

.ac-home-prueba__modo {
    margin: 12px 0 0;
    font-size: 14px;
}

.ac-home-prueba__modo a {
    color: var(--ac-cyan);
}

.ac-home-error {
    margin: 14px 0 0;
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 8px;
    background-color: rgba(204, 68, 255, 0.12);
    border: 1px solid var(--ac-magenta);
}

.ac-home-enviado {
    text-align: center;
}

.ac-home-enviado p {
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

.ac-home-enviado a {
    color: #00D4FF;
    font-weight: 700;
}

.ac-home-enviado__titulo {
    font-size: 20px !important;
    font-weight: 800;
    color: var(--ac-blanco) !important;
}

.ac-home-boton {
    font-family: var(--ac-font);
    font-size: 15px;
    font-weight: 700;
    padding: 12px 22px;
    border: none;
    border-radius: 999px;
    background: var(--ac-gradiente);
    color: var(--ac-blanco);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.ac-home-boton:hover,
.ac-home-boton:focus-visible {
    filter: brightness(1.1);
}

.ac-home-boton--secundario {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.ac-home-puntos {
    list-style: none;
    max-width: 440px;
    margin: 32px auto 0;
    padding: 0;
    text-align: left;
    display: grid;
    gap: 12px;
}

.ac-home-puntos li {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    padding-left: 18px;
    position: relative;
}

.ac-home-puntos li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ac-cyan);
}

.ac-home-puntos strong {
    color: var(--ac-blanco);
}

.ac-footer__contacto a {
    color: var(--ac-cyan);
    text-decoration: none;
}

@media (max-width: 640px) {
    .ac-home-hero {
        padding: 44px 16px 40px;
    }

    .ac-home-prueba {
        padding: 22px 18px;
    }
}

/* Entrar por enlace / login (18/09) */
.ac-entrar__texto {
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 8px;
}

.ac-auth__clave {
    margin-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 16px;
}

.ac-auth__clave summary {
    cursor: pointer;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

/* Prueba gratuita en Clasificador / Catalogador (18/09) */
.ac-prueba-banner {
    margin: 0 0 20px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 10px;
    background-color: var(--ac-navy);
    border: 1px solid rgba(0, 212, 255, 0.4);
}

.ac-prueba-banner strong {
    color: var(--ac-cyan);
}

.ac-prueba-oferta {
    margin: 16px 0;
    padding: 16px 18px;
    border-radius: 12px;
    background-color: var(--ac-navy);
    border: 1px solid var(--ac-magenta);
}

.ac-prueba-oferta p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.55;
}

.ac-prueba-oferta a {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--ac-gradiente);
    color: var(--ac-blanco);
    font-weight: 700;
    text-decoration: none;
}

.ac-prueba-teaser {
    margin: 12px 0;
    font-size: 15px;
    line-height: 1.55;
}

.ac-prueba-teaser strong {
    font-size: 28px;
    font-weight: 800;
}

#ac-home-campo-cuit {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ac-modal .ac-prueba-oferta {
    margin: 16px 24px;
}

.ac-prueba-banner a {
    color: var(--ac-cyan);
}

/* Casilla de consentimiento para novedades (Home). Sin tildar de antemano. */
.ac-home-prueba .ac-auth__form label.ac-home-consentimiento {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.45;
    cursor: pointer;
}

.ac-home-prueba .ac-auth__form label.ac-home-consentimiento input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    padding: 0;
    accent-color: var(--ac-cyan);
}

/* Administración (admin.html) */
.ac-admin { max-width: 1100px; margin: 0 auto; padding: 32px 16px; }
.ac-admin__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.ac-admin__resumen { color: rgba(255, 255, 255, 0.75); font-size: 14px; }
.ac-admin__tabla-caja { overflow-x: auto; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; }
.ac-admin table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ac-admin th, .ac-admin td { padding: 8px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ac-admin th { color: var(--ac-cyan); font-weight: 700; }

/* Casilla de novedades en la pantalla de compra (cuenta.html) */
.ac-cuenta__novedades {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
}

.ac-cuenta__novedades input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--ac-cyan);
}

.ac-cuenta__novedades-estado {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--ac-cyan);
}


/* Íconos de redes en el pie de página (09/10) */
.ac-redes {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin: 12px 0 4px;
}

.ac-redes a {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: color 0.2s, border-color 0.2s;
}

.ac-redes a:hover,
.ac-redes a:focus-visible {
    color: var(--ac-cyan);
    border-color: var(--ac-cyan);
}

.ac-redes svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}