/*
 * 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;
}

/* 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). */
.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;
    }
}

/* "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-seccion-chat,
    .ac-modal__fondo,
    .ac-modal__header,
    .ac-modal__toolbar,
    .ac-modal__cerrar {
        display: none !important;
    }

    /* 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;
}