:root {
    /* Espaciado, base 4px */
    --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
    --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;

    /* Tipografía */
    --t-1: 0.75rem;   --t-2: 0.8125rem; --t-3: 0.875rem;
    --t-4: 1rem;      --t-5: 1.25rem;   --t-6: 1.5625rem;

    --p-normal: 400; --p-medio: 500; --p-fuerte: 600;

    /* Esquinas redondeadas controles y cajas grandes. */
    --radio: 0.5rem;
    --radio-caja: 1rem;
    --linea: 1px;

    /* Una sola familia sin serifa para toda la interfaz (la del sistema). */
    --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Code", Consolas, monospace;

    /* Tema claro: el de ChatGPT. Blanco, grises neutros y el negro como acento. */
    --fondo: #ffffff;
    --superficie: #f9f9f9;   /* barra lateral */
    --realce: #ececec;       /* opción señalada o bajo el ratón */
    --burbuja: #f4f4f4;      /* mensaje del usuario */
    --entrada: #ffffff;      /* cuadro de texto */
    --tinta: #0d0d0d;
    --gris: #5d5d5d;
    --borde: #e5e5e5;
    --acento: #0d0d0d;
    --marca: #a8492a;        /* color del logo: igual en los temas claros */
    --sobre-acento: #ffffff;
    --estado-error: #b42318;

    color-scheme: light;
}

/* Tema oscuro: el de Claude. Grises cálidos y el naranja arcilla como acento. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="claude"]) {
        --fondo: #262624;
        --superficie: #1f1e1d;
        --realce: #141413;
        --burbuja: #141413;
        --entrada: #30302e;
        --tinta: #faf9f5;
        --gris: #a6a39a;
        --borde: #3d3c38;
        --acento: #dc8062;
        --marca: #dc8062;  /* naranja de Claude, un punto más claro: 4.6:1 sobre el cuadro de texto */
        --sobre-acento: #1a1a18;
        --estado-error: #f97066;
        color-scheme: dark;
    }
}

/* Tema Claude: el claro de Claude, crema cálido con naranja arcilla. El naranja
   exacto (#c96442) da 3.7:1 sobre la crema; este, un punto más hondo, pasa 4.6:1. */
:root[data-theme="claude"] {
    --fondo: #faf9f5;
    --superficie: #f0eee6;
    --realce: #e8e6dc;
    --burbuja: #f0eee6;
    --entrada: #ffffff;
    --tinta: #141413;
    --gris: #5e5d59;
    --borde: #e3e0d4;
    --acento: #a8492a;
    --sobre-acento: #ffffff;
    --estado-error: #b42318;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --marca: #dc8062;
    --fondo: #262624;
    --superficie: #1f1e1d;
    --realce: #141413;
    --burbuja: #141413;
    --entrada: #30302e;
    --tinta: #faf9f5;
    --gris: #a6a39a;
    --borde: #3d3c38;
    --acento: #dc8062;  /* naranja de Claude, un punto más claro: 4.6:1 sobre el cuadro de texto */
    --sobre-acento: #1a1a18;
    --estado-error: #f97066;
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
    background: var(--fondo);
    color: var(--tinta);
    font: var(--p-normal) var(--t-3) / 1.55 var(--fuente);
}

[hidden] { display: none !important; }

h1, h2 { margin: 0; font-weight: var(--p-fuerte); }

.sutil { color: var(--gris); font-size: var(--t-2); }
.error { color: var(--estado-error); font-size: var(--t-2); margin: 0; }
/* Logo: el símbolo (los Andes que son una onda de voz) y el nombre con serifa */
.marca { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-5); }
.marca-texto { font-family: "Tiempos Headline", "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight: var(--p-normal); letter-spacing: -0.01em; }
.simbolo-andintia { width: 1.4em; height: 1.4em; flex: none; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.simbolo-andintia circle { stroke: var(--tinta); stroke-width: 3; }
.simbolo-andintia path { stroke: var(--marca); stroke-width: 3.5; }
/* Si el negocio subió su propio logo, reemplaza al símbolo de Andintia. */
.logo:not([hidden]) + .marca .simbolo-andintia { display: none; }
.espacio { flex: 1; }

svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Controles */
.boton {
    font: inherit;
    font-size: var(--t-2);
    font-weight: var(--p-medio);
    color: var(--tinta);
    background: var(--fondo);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
    padding: var(--e-2) var(--e-3);
    cursor: pointer;
}
.boton:hover { border-color: var(--gris); }
.boton:disabled { opacity: 0.5; cursor: default; }
.boton.primario {
    background: var(--acento);
    border-color: var(--acento);
    color: var(--sobre-acento);
}
.boton.icono {
    display: inline-grid;
    place-items: center;
    padding: var(--e-2);
}
.boton.icono svg { width: 1rem; height: 1rem; }
.boton[aria-pressed="true"] {
    border-color: var(--acento);
    color: var(--acento);
}

.enlace {
    font: inherit;
    font-size: var(--t-2);
    color: var(--acento);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.enlace.sutil { color: var(--gris); }
.enlace:hover { text-decoration: underline; }

input, select, textarea {
    font: inherit;
    color: var(--tinta);
    background: var(--fondo);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
}
input, select { padding: var(--e-2) var(--e-3); }
textarea { padding: var(--e-2) var(--e-3); resize: vertical; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

/* Menús desplegables */
.desplegable { position: relative; }
.menu {
    position: absolute;
    z-index: 20;
    min-width: 13rem;
    display: grid;
    padding: var(--e-2);
    background: var(--fondo);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio-caja);
}
.menu-arriba { bottom: calc(100% + var(--e-1)); left: 0; }
.menu-abajo { top: calc(100% + var(--e-1)); left: 0; }
.menu-derecha { left: auto; right: 0; }
.menu-ancho { min-width: 17rem; }
.menu > button,
#modelos-imagen > button {
    font: inherit;
    font-size: var(--t-2);
    color: var(--tinta);
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radio);
    padding: var(--e-2) var(--e-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--e-3);
}
.menu > button:hover,
#modelos-imagen > button:hover,
.menu > button:focus-visible,
#modelos-imagen > button:focus-visible { background: var(--superficie); outline: none; }
.menu > button:disabled { opacity: 0.5; cursor: default; }
.menu > button:disabled:hover { background: none; }
.menu hr {
    border: 0;
    border-top: var(--linea) solid var(--borde);
    margin: var(--e-1) 0;
}
.menu .opcion { flex: 1; display: grid; }
.menu .opcion .sutil { font-size: var(--t-1); }
.menu .lateral-dato { font-size: var(--t-1); color: var(--gris); font-variant-numeric: tabular-nums; }
.marca-check {
    margin-left: auto;
    width: 0.875rem;
    height: 0.875rem;
    border: var(--linea) solid var(--gris);
    border-radius: var(--radio);
    flex: none;
}
[aria-checked="true"] > .marca-check {
    background: var(--acento);
    border-color: var(--acento);
}
.marca-seleccion { margin-left: auto; color: var(--acento); flex: none; }

/* Menú de modelos y de modo */
.menu-modelos { width: min(22rem, calc(100vw - 2rem)); }
.menu-modelos > button { padding: var(--e-2) var(--e-3); align-items: flex-start; }
.menu-modelos .opcion > span:first-child { font-size: var(--t-3); }
.menu-modelos .opcion .sutil { font-size: var(--t-2); line-height: 1.4; }
.menu-modelos .marca-seleccion { align-self: center; }
.menu-modelos .fila-menu { align-items: center; }
.menu-modelos .fila-menu .sutil { margin-left: auto; }
.menu-modelos .fila-menu svg { width: 0.875rem; height: 0.875rem; color: var(--gris); flex: none; }
.menu-titulo {
    margin: 0;
    padding: var(--e-1) var(--e-3) var(--e-2);
    font-size: var(--t-2);
    font-weight: var(--p-medio);
    color: var(--gris);
}
.menu-nota {
    margin: 0;
    padding: var(--e-2) var(--e-3) var(--e-1);
    font-size: var(--t-2);
    color: var(--gris);
    line-height: 1.4;
}
.etiqueta-pro {
    font-size: var(--t-1);
    color: var(--acento);
    border: var(--linea) solid currentColor;
    border-radius: var(--radio);
    padding: 0 var(--e-1);
    margin-left: var(--e-2);
}

/* Acceso */
.acceso {
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: var(--e-4);
}
.acceso-form {
    width: 100%;
    max-width: 22rem;
    display: grid;
    gap: var(--e-4);
}
.acceso-form .marca { font-size: var(--t-6); }
.acceso-form .sutil { margin: calc(-1 * var(--e-3)) 0 0; }
.acceso-form .enlace-acceso { justify-self: center; }
.acceso-form .aviso-ok { color: var(--texto); }

.pestanas {
    display: flex;
    border-bottom: var(--linea) solid var(--borde);
}
.pestanas button {
    font: inherit;
    font-weight: var(--p-medio);
    background: none;
    border: 0;
    border-bottom: var(--linea) solid transparent;
    color: var(--gris);
    padding: var(--e-2) var(--e-3);
    margin-bottom: -1px;
    cursor: pointer;
}
.pestanas button[aria-selected="true"] {
    color: var(--tinta);
    border-bottom-color: var(--acento);
}

.campo { display: grid; gap: var(--e-1); }
.campo > span { font-size: var(--t-2); font-weight: var(--p-medio); }

/* Estructura */
.app {
    height: 100%;
    display: grid;
    grid-template-columns: 16.5rem 1fr;
}

/* Barra lateral */
.lateral {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--superficie);
    border-right: var(--linea) solid var(--borde);
}
.lateral-cabecera { padding: var(--e-4) var(--e-4) var(--e-3); }
.lateral-nav {
    display: grid;
    gap: var(--e-1);
    padding: 0 var(--e-2) var(--e-3);
    border-bottom: var(--linea) solid var(--borde);
}
.lateral-nav input {
    font-size: var(--t-3);
    margin: 0 var(--e-2) var(--e-2);
}
.nav-item {
    font: inherit;
    font-size: var(--t-3);
    color: var(--tinta);
    background: none;
    border: 0;
    border-radius: var(--radio);
    padding: var(--e-2);
    display: flex;
    align-items: center;
    gap: var(--e-3);
    cursor: pointer;
    text-align: left;
}
.nav-item svg { width: 1rem; height: 1rem; color: var(--gris); }
.nav-item:hover,
.nav-item[aria-current="true"] { background: var(--realce); }

.lateral-cuerpo {
    flex: 1;
    overflow-y: auto;
}
.seccion { padding: var(--e-3) 0; }
.seccion-cabecera { padding: 0 var(--e-4) var(--e-1); }
.seccion-cabecera h2 {
    font-size: var(--t-2);
    font-weight: var(--p-medio);
    color: var(--gris);
}
.vacio { padding: var(--e-1) var(--e-4); }

.item {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-4);
    color: var(--tinta);
    text-decoration: none;
    font-size: var(--t-3);
    border-left: var(--linea) solid transparent;
}
.item span {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.item:hover,
.item[aria-current="true"] { background: var(--realce); }
.item button {
    font: inherit;
    font-size: var(--t-1);
    color: var(--gris);
    background: none;
    border: 0;
    padding: 0 var(--e-1);
    cursor: pointer;
    visibility: hidden;
}
.item:hover button,
.item:focus-within button { visibility: visible; }

.cuenta {
    position: relative;
    padding: var(--e-2);
    border-top: var(--linea) solid var(--borde);
}
.cuenta .menu { left: var(--e-2); right: var(--e-2); }
.cuenta-boton {
    font: inherit;
    font-size: var(--t-3);
    color: var(--tinta);
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--e-2);
    background: none;
    border: 0;
    border-radius: var(--radio);
    padding: var(--e-2);
    cursor: pointer;
    text-align: left;
}
.cuenta-boton:hover { background: var(--realce); }
#cuenta-nombre { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#cuenta-plan::before { content: "· "; }
.inicial {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    font-size: var(--t-1);
    font-weight: var(--p-fuerte);
    background: var(--tinta);
    color: var(--fondo);
    border-radius: var(--radio);
}

/* Zona principal */
.principal {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.barra {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-5);
    border-bottom: var(--linea) solid var(--borde);
    min-height: 3.25rem;
}
.barra-titulo {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: var(--e-2);
}
.barra-titulo .enlace::after { content: " /"; }
.titulo {
    font-size: var(--t-3);
    font-weight: var(--p-medio);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.barra-acciones { display: flex; gap: var(--e-2); }
.solo-movil { display: none; }

/* Pantalla de inicio: saludo y composer centrados */
.saludo {
    text-align: center;
    padding: 0 var(--e-4) var(--e-5);
}
.saludo h1 {
    font-family: var(--fuente);
    font-size: var(--t-6);
    font-weight: var(--p-normal);
}
.principal.inicio { justify-content: center; }
.principal.inicio .barra,
.principal.inicio .mensajes { display: none; }

/* Mensajes */
.mensajes {
    flex: 1;
    overflow-y: auto;
    padding: var(--e-5);
}
.mensajes > * {
    max-width: 46rem;
    margin-inline: auto;
}

/* Mensajes sin líneas entre ellos; tu pregunta en una burbuja a la derecha. */
.mensaje { padding: var(--e-3) 0; }
.mensaje[data-rol="user"] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.mensaje[data-rol="user"] .adjuntos { justify-content: flex-end; }
.mensaje-autor {
    font-size: var(--t-2);
    font-weight: var(--p-fuerte);
    margin-bottom: var(--e-1);
}

/* Las respuestas de la IA: misma familia, un paso más grande para leer cómodo. */
.mensaje[data-rol="assistant"] .contenido {
    font-family: var(--fuente);
    font-size: var(--t-4);
    line-height: 1.65;
    font-variant-numeric: lining-nums;
}
.mensaje[data-rol="assistant"] .contenido table,
.mensaje[data-rol="assistant"] .contenido .codigo-barra { font-family: var(--fuente); }
.mensaje[data-rol="user"] .contenido {
    max-width: 80%;
    background: var(--burbuja);
    border-radius: var(--radio-caja);
    padding: var(--e-3) var(--e-4);
}

/* Acciones: iconos grises y la hora. En respuestas anteriores y en tus
   preguntas aparecen al pasar el ratón (o al enfocarlas con el teclado). */
.acciones {
    display: flex;
    align-items: center;
    gap: var(--e-1);
    margin-top: var(--e-2);
    min-height: var(--e-6);
}
.acciones-pregunta { flex-direction: row; }
.mensaje[data-rol="user"] .acciones,
.mensaje[data-rol="assistant"]:not(:last-child) .acciones { opacity: 0; }
.mensaje:hover .acciones,
.mensaje:focus-within .acciones { opacity: 1; }
.accion-icono {
    display: inline-grid;
    place-items: center;
    width: var(--e-6);
    height: var(--e-6);
    padding: 0;
    color: var(--gris);
    background: none;
    border: 0;
    border-radius: var(--radio);
    cursor: pointer;
}
.accion-icono svg { width: 1rem; height: 1rem; }
.accion-icono:hover { color: var(--tinta); background: var(--superficie); }
.acciones .hora {
    font-size: var(--t-2);
    color: var(--gris);
    padding: 0 var(--e-2);
    font-variant-numeric: tabular-nums;
}

.editor { width: 100%; display: grid; gap: var(--e-2); }
.editor textarea {
    width: 100%;
    border-radius: var(--radio-caja);
    padding: var(--e-3) var(--e-4);
    font-size: var(--t-4);
}
.editor-pie { display: flex; justify-content: flex-end; gap: var(--e-2); }
.nota-memoria, .estado-respuesta { font-size: var(--t-2); }

.contenido > :first-child { margin-top: 0; }
.contenido > :last-child { margin-bottom: 0; }
.contenido p, .contenido ul, .contenido ol, .contenido pre, .contenido .tabla { margin: 0 0 var(--e-3); }
.contenido h3 { font-size: var(--t-4); margin: var(--e-4) 0 var(--e-2); font-weight: var(--p-fuerte); }
.contenido ul, .contenido ol { padding-left: var(--e-5); }
.contenido a { color: var(--acento); }
.contenido code {
    font-family: var(--mono);
    font-size: var(--t-2);
    background: var(--superficie);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
    padding: 0 var(--e-1);
}
.codigo {
    overflow: hidden;
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio-caja);
    margin: 0 0 var(--e-3);
}
.codigo-barra {
    display: flex;
    justify-content: flex-end;
    padding: var(--e-1) var(--e-3);
    border-bottom: var(--linea) solid var(--borde);
}
.contenido .codigo pre {
    margin: 0;
    padding: var(--e-3);
    overflow-x: auto;
    background: var(--superficie);
}
.contenido pre code { border: 0; padding: 0; background: none; }
.contenido .tabla { overflow-x: auto; }
.contenido table {
    border-collapse: collapse;
    font-size: var(--t-2);
}
.contenido th, .contenido td {
    border: var(--linea) solid var(--borde);
    padding: var(--e-1) var(--e-3);
    text-align: left;
    vertical-align: top;
}
.contenido th { font-weight: var(--p-fuerte); background: var(--superficie); }
.contenido td.num { text-align: right; font-variant-numeric: tabular-nums; }
.contenido .cita {
    font-size: var(--t-1);
    vertical-align: super;
    text-decoration: none;
}

.escribiendo::after {
    content: "▍";
    color: var(--gris);
}

.fuentes {
    list-style: none;
    margin: var(--e-3) 0 0;
    padding: var(--e-2) 0 0;
    border-top: var(--linea) solid var(--borde);
    display: grid;
    gap: var(--e-1);
    font-size: var(--t-2);
}
.fuentes a { color: var(--gris); }
.fuentes .num {
    display: inline-block;
    min-width: 1.5rem;
    color: var(--gris);
    font-variant-numeric: tabular-nums;
}

/* Archivos adjuntos (en el mensaje y en el composer) */
.adjuntos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin-bottom: var(--e-2);
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    max-width: 16rem;
    font-size: var(--t-2);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
    padding: var(--e-1) var(--e-2);
    background: var(--fondo);
    color: var(--tinta);
}
.chip span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chip .sutil { flex: none; font-size: var(--t-1); }
.chip button {
    font: inherit;
    font-size: var(--t-1);
    color: var(--gris);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.mensaje .adjuntos { margin: 0 0 var(--e-2); }
.mensaje .chip { cursor: pointer; }

/* Proyectos */
.pagina {
    display: grid;
    gap: var(--e-5);
    padding-top: var(--e-2);
}
.pagina-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
}
.pagina-cabecera h1 {
    font-family: var(--fuente);
    font-size: var(--t-6);
    font-weight: var(--p-normal);
}
.proyecto-zona h3 {
    font-size: var(--t-3);
    font-weight: var(--p-fuerte);
    margin: 0 0 var(--e-1);
    padding-bottom: var(--e-2);
    border-bottom: var(--linea) solid var(--borde);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.proyecto-zona textarea { width: 100%; min-height: 7rem; }
.proyecto-zona .fila-acciones {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--e-3);
    margin-top: var(--e-2);
}
.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-2) 0;
    border-bottom: var(--linea) solid var(--borde);
    font-size: var(--t-3);
}
.lista li > :first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .sutil { font-variant-numeric: tabular-nums; }
.lista-proyectos li { padding: var(--e-3) 0; }
.lista-proyectos a { color: var(--tinta); font-size: var(--t-4); text-decoration: none; }
.lista-proyectos a:hover { color: var(--acento); }

/* Composer */
.zona-composer {
    padding: var(--e-3) var(--e-5) var(--e-4);
}
.zona-composer > * {
    max-width: 46rem;
    margin-inline: auto;
}
.composer {
    background: var(--entrada);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio-caja);
    padding: var(--e-4) var(--e-4) var(--e-3);
}
.composer:focus-within { border-color: var(--gris); }
.composer.arrastrando { background: var(--superficie); }
.composer textarea {
    display: block;
    width: 100%;
    resize: none;
    max-height: 12rem;
    border: 0;
    padding: var(--e-1);
    line-height: 1.5;
    font-size: var(--t-4);
    background: transparent;
}
.composer textarea:focus-visible { outline: none; }
.composer-pie {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin-top: var(--e-2);
}
.composer-pie .boton.icono:not(.primario) { border-color: transparent; color: var(--gris); }
.composer-pie .boton.icono:not(.primario):hover { border-color: var(--borde); color: var(--tinta); }
.composer-pie .boton[aria-pressed="true"] { border-color: var(--acento); color: var(--acento); }
#enviar .icono-detener { display: none; }
#enviar.detener .icono-enviar { display: none; }
#enviar.detener .icono-detener { display: block; }
.etiqueta {
    font: inherit;
    font-size: var(--t-1);
    background: none;
    cursor: pointer;
    color: var(--acento);
    border: var(--linea) solid currentColor;
    border-radius: var(--radio);
    padding: 0 var(--e-2);
}

.bajo-composer {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin-top: var(--e-2);
}
.selector-texto {
    font: inherit;
    font-size: var(--t-2);
    color: var(--gris);
    background: none;
    border: 0;
    border-radius: var(--radio);
    padding: var(--e-1) var(--e-2);
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    cursor: pointer;
}
.selector-texto:hover { color: var(--tinta); background: var(--superficie); }
.selector-texto svg { width: 0.875rem; height: 0.875rem; }
.selector-texto:disabled { cursor: default; }
.selector-texto:disabled:hover { background: none; color: var(--gris); }
.selector-texto:disabled svg { display: none; }
#modelo-actual { color: var(--tinta); font-weight: var(--p-medio); }

/* Opciones de una conversación en la barra lateral */
.item .item-opciones { display: grid; place-items: center; padding: var(--e-1); border-radius: var(--radio); }
.item .item-opciones svg { width: 1rem; height: 1rem; }
.item .item-opciones:hover { background: var(--superficie); color: var(--tinta); }
.menu-flotante { position: fixed; min-width: 12rem; }

/* Panel lateral de artefactos */
.app.con-panel { grid-template-columns: 16.5rem minmax(0, 1fr) minmax(22rem, 45%); }
.panel-artefacto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-left: var(--linea) solid var(--borde);
    background: var(--fondo);
}
.panel-cabecera {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-3) var(--e-4);
    border-bottom: var(--linea) solid var(--borde);
    min-height: 3.25rem;
}
.panel-datos { flex: 1; min-width: 0; display: grid; }
.panel-datos h2 {
    font-family: var(--fuente);
    font-size: var(--t-4);
    font-weight: var(--p-medio);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.panel-cuerpo { flex: 1; min-height: 0; overflow: auto; }
.panel-marco { width: 100%; height: 100%; border: 0; background: #ffffff; display: block; }
.panel-codigo {
    margin: 0;
    padding: var(--e-4);
    font-family: var(--mono);
    font-size: var(--t-2);
    line-height: 1.6;
    background: var(--superficie);
    min-height: 100%;
}
.panel-documento {
    padding: var(--e-5);
    font-family: var(--fuente);
    font-size: var(--t-4);
    line-height: 1.65;
    font-variant-numeric: lining-nums;
}

.artefacto-tarjeta {
    font: inherit;
    width: 100%;
    max-width: 26rem;
    display: grid;
    gap: var(--e-1);
    text-align: left;
    color: var(--tinta);
    background: var(--fondo);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio-caja);
    padding: var(--e-3) var(--e-4);
    margin: 0 0 var(--e-3);
    cursor: pointer;
}
.artefacto-tarjeta:hover { border-color: var(--gris); }
.artefacto-titulo { font-family: var(--fuente); font-size: var(--t-3); font-weight: var(--p-medio); }

/* Modo voz */
.principal { position: relative; }
.modo-voz {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--e-4);
    padding: var(--e-5);
    text-align: center;
    background: var(--fondo);
}
.voz-estado { margin: 0; font-family: var(--fuente); font-size: var(--t-6); }
.voz-detalle { margin: 0; max-width: 32rem; min-height: 3em; }
.voz-onda { display: flex; align-items: center; gap: var(--e-2); height: var(--e-7); }
.voz-onda span {
    width: var(--e-2);
    height: var(--e-5);
    background: var(--acento);
    border-radius: var(--radio);
    animation: onda 1.2s ease-in-out infinite;
}
.voz-onda span:nth-child(2) { animation-delay: 0.15s; }
.voz-onda span:nth-child(3) { animation-delay: 0.3s; }
.voz-onda span:nth-child(4) { animation-delay: 0.45s; }
.voz-onda span:nth-child(5) { animation-delay: 0.6s; }
@keyframes onda {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(1.6); }
}
@media (prefers-reduced-motion: reduce) {
    .voz-onda span { animation: none; }
}

/* Páginas: API, Programadas, Administración */
.fila-copiar { display: flex; gap: var(--e-2); }
.fila-copiar input { flex: 1; min-width: 0; font-family: var(--mono); font-size: var(--t-2); }
.aviso-clave {
    display: grid;
    gap: var(--e-2);
    padding: var(--e-3) var(--e-4);
    border: var(--linea) solid var(--acento);
    border-radius: var(--radio-caja);
}
.aviso-clave p { margin: 0; }
.lista code { font-family: var(--mono); font-size: var(--t-2); }

.cifras {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: var(--linea) solid var(--borde);
    border-bottom: var(--linea) solid var(--borde);
}
.cifras > div {
    display: grid;
    gap: var(--e-1);
    padding: var(--e-4);
}
.cifras > div + div { border-left: var(--linea) solid var(--borde); }
.cifras strong {
    font-size: var(--t-6);
    font-weight: var(--p-medio);
    font-variant-numeric: tabular-nums;
}
.tabla-datos { width: 100%; }
.tabla-datos th, .tabla-datos td {
    border: 0;
    border-bottom: var(--linea) solid var(--borde);
    padding: var(--e-2) var(--e-3) var(--e-2) 0;
    text-align: left;
    font-size: var(--t-2);
}
.tabla-datos th { background: none; color: var(--gris); font-weight: var(--p-medio); }
.tabla-datos .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-datos select { padding: var(--e-1) var(--e-2); font-size: var(--t-2); }

/* Administración: pestañas, usuarios y ficha */
.pestanas-admin { margin-top: calc(-1 * var(--e-3)); }
.admin-contenido { display: grid; gap: var(--e-5); }
.admin-herramientas { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: end; }
.admin-herramientas .campo { min-width: 11rem; }
.admin-herramientas .admin-buscar { flex: 1; min-width: 14rem; }
.admin-herramientas input, .admin-herramientas select, .form-admin input, .form-admin select { width: 100%; }
.tabla-usuarios tbody tr { cursor: pointer; }
.tabla-usuarios tbody tr:hover td { background: var(--superficie); }
.celda-usuario { font-size: var(--t-3); color: var(--tinta); font-weight: var(--p-medio); text-align: left; }
.admin-paginacion { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); }
.ficha-cabecera { display: grid; gap: var(--e-1); }
.ficha-cabecera h2 { font-size: var(--t-5); font-weight: var(--p-medio); }
.ficha-cabecera p { margin: 0; }
.aviso-suspendida { margin: 0; padding: var(--e-3) 0; border-top: var(--linea) solid var(--borde); border-bottom: var(--linea) solid var(--borde); color: var(--estado-error); font-size: var(--t-3); }
.form-admin { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: end; margin: var(--e-3) 0 var(--e-2); }
.form-admin .campo { min-width: 10rem; }
.form-admin .campo-ancho { flex: 1; min-width: 16rem; }
.lista-cuenta li { align-items: center; gap: var(--e-4); }
.lista-cuenta li > :first-child { white-space: normal; }
.estado-error { color: var(--estado-error); }
.estado-alerta { color: var(--estado-error); font-weight: var(--p-medio); }
.boton-peligro { color: var(--estado-error); border-color: var(--estado-error); }
@media (max-width: 720px) {
    .cifras { grid-template-columns: repeat(2, 1fr); }
    .cifras > div:nth-child(3) { border-left: 0; }
    .cifras > div:nth-child(n+3) { border-top: var(--linea) solid var(--borde); }
}

.lista-tareas li { align-items: flex-start; }
.tarea-datos { display: grid; gap: var(--e-1); }
.tarea-titulo { font-size: var(--t-4); }
.tarea-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: flex-end; }

.campos-fila { display: flex; gap: var(--e-3); flex-wrap: wrap; }
.campos-fila .campo { flex: 1 1 8rem; min-width: 0; }
/* Un campo de texto tiene un ancho mínimo propio: sin esto, en el celular se sale de su fila. */
.campo > input, .campo > select, .campo > textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.campo-check { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-2); }
.campo-check input { accent-color: var(--acento); }

/* Diálogo */
.dialogo {
    width: min(32rem, calc(100vw - 2rem));
    padding: 0;
    color: var(--tinta);
    background: var(--fondo);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio-caja);
}
.dialogo::backdrop { background: rgb(0 0 0 / 0.4); }
.dialogo form {
    display: grid;
    gap: var(--e-4);
    padding: var(--e-5);
}
.dialogo h2 { font-family: var(--fuente); font-size: var(--t-5); font-weight: var(--p-normal); }
.dialogo-pie {
    display: flex;
    justify-content: flex-end;
    gap: var(--e-2);
    padding-top: var(--e-4);
    border-top: var(--linea) solid var(--borde);
}

/* Móvil */
@media (max-width: 760px) {
    .app { grid-template-columns: 1fr; }
    .lateral {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(18rem, 85vw);
        z-index: 30;
        transform: translateX(-100%);
    }
    .lateral.abierto { transform: none; }
    .app.con-panel { grid-template-columns: 1fr; }
    .panel-artefacto { position: fixed; inset: 0; z-index: 25; }
    .cifras { grid-template-columns: repeat(2, 1fr); }
    .cifras > div:nth-child(3) { border-left: 0; }
    .cifras > div:nth-child(n+3) { border-top: var(--linea) solid var(--borde); }
    .solo-movil { display: inline-block; }
    .barra, .mensajes, .zona-composer { padding-inline: var(--e-4); }
    .barra-acciones .boton { padding: var(--e-1) var(--e-2); }
    .principal.inicio .barra {
        display: flex;
        position: absolute;
        top: 0;
        border: 0;
    }
}

/* Página pública de una conversación compartida */
.compartido { min-height: 100%; display: flex; flex-direction: column; }
.compartido .barra { justify-content: space-between; }
.compartido-titulo {
    font-family: var(--fuente);
    font-size: var(--t-6);
    font-weight: var(--p-normal);
    padding-bottom: var(--e-4);
    border-bottom: var(--linea) solid var(--borde);
}

/* Descargas y vistas previas de archivos de oficina */
.panel-descargas { display: flex; gap: var(--e-2); }
.laminas { display: grid; gap: var(--e-4); padding: var(--e-4); background: var(--superficie); min-height: 100%; }
.lamina { margin: 0; display: grid; gap: var(--e-1); }
.lamina > .contenido {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: var(--e-5) var(--e-6);
    background: var(--fondo);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
    font-size: var(--t-3);
}
.lamina h1, .lamina h3 { font-family: var(--fuente); font-weight: var(--p-normal); margin: 0 0 var(--e-3); }
.lamina h1 { font-size: var(--t-5); }
.lamina.portada > .contenido { display: grid; align-content: center; }
.lamina.portada h1 { font-size: var(--t-6); }
.panel-hoja { font-family: var(--fuente); font-size: var(--t-3); }
.panel-hoja h3 { font-family: var(--fuente); font-size: var(--t-3); color: var(--gris); }
@media (max-width: 760px) {
    .panel-cabecera { flex-wrap: wrap; }
    .panel-descargas { order: 3; width: 100%; }
}
.contenido hr { border: 0; border-top: var(--linea) solid var(--borde); margin: var(--e-4) 0; }

/* Agente de ventas, memoria, estados y marca */
.estado-respuesta { margin: 0 0 var(--e-2); }
.nota-memoria { margin: var(--e-2) 0 0; }
.acciones-zona { display: inline-flex; gap: var(--e-4); }
#titulo[data-incognito]:not([data-incognito=""])::after {
    content: " · " attr(data-incognito);
    color: var(--gris);
    font-weight: var(--p-normal);
}
.saludo #incognito { margin-top: var(--e-3); }
.saludo #incognito-nota { margin: var(--e-2) 0 0; }
.grupo-memoria { border: 0; padding: 0; margin: 0; }
.grupo-memoria legend { font-size: var(--t-2); font-weight: var(--p-medio); padding: 0; margin-bottom: var(--e-1); }
#lista-memoria { max-height: 10rem; overflow-y: auto; }
.lateral-cabecera { display: flex; align-items: center; gap: var(--e-2); }
.logo { height: var(--e-6); width: auto; max-width: 6rem; object-fit: contain; }
.logo-vista { max-height: var(--e-7); max-width: 12rem; object-fit: contain; margin-top: var(--e-2); }
.menu .menu-titulo + button, .menu hr + .menu-titulo { margin-top: 0; }

/* Mensajes fijados y ramas */
.accion-icono[aria-pressed="true"] { color: var(--acento); }
.mensaje[data-fijado="true"] .acciones { opacity: 1; }
.mensaje.resaltado .contenido { outline: 2px solid var(--acento); outline-offset: var(--e-2); border-radius: var(--radio); }
@media (prefers-reduced-motion: no-preference) {
    .mensaje .contenido { transition: outline-color 0.3s; }
}

/* Proyectos tarjetas, ventana de creación y dos columnas */
.pagina-herramientas { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.pagina-herramientas input, .pagina-herramientas select { font-size: var(--t-2); padding: var(--e-2) var(--e-3); }
.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--e-4);
}
.tarjeta {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--e-2);
    min-height: 9rem;
    padding: var(--e-4);
    color: var(--tinta);
    text-decoration: none;
    background: var(--fondo);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio-caja);
}
.tarjeta:hover { border-color: var(--gris); }
.tarjeta-titulo { font-weight: var(--p-medio); font-size: var(--t-4); }
.tarjeta-texto {
    color: var(--gris);
    font-size: var(--t-3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tarjeta .sutil { font-variant-numeric: tabular-nums; }

.proyecto-cabecera { display: grid; gap: var(--e-2); }
.proyecto-cabecera h1 { font-family: var(--fuente); font-size: var(--t-6); font-weight: var(--p-normal); }
.proyecto-cabecera p { margin: 0; }
.proyecto-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    gap: var(--e-6);
    align-items: start;
}
.proyecto-lateral { display: grid; gap: var(--e-5); }
.lista-conversaciones a { color: var(--tinta); text-decoration: none; font-size: var(--t-3); }
.lista-conversaciones a:hover { color: var(--acento); }
@media (max-width: 900px) {
    .proyecto-columnas { grid-template-columns: 1fr; }
}

.dialogo-cabecera { display: flex; align-items: center; justify-content: space-between; }
.dialogo-cabecera .boton.icono { border-color: transparent; }
.boton-contexto { justify-self: start; }
.proyecto-contexto {
    display: grid;
    gap: var(--e-3);
    padding: var(--e-3);
    background: var(--superficie);
    border-radius: var(--radio);
}

.lista-api li { flex-wrap: wrap; align-items: baseline; }
.lista-api li > code:first-child { flex: none; min-width: 13rem; }
.lista-api li > .sutil { flex: 1; min-width: 14rem; white-space: normal; }

/* Calificación de respuestas y privacidad */
.accion-icono[data-accion="bien"][aria-pressed="true"],
.accion-icono[data-accion="mal"][aria-pressed="true"] { color: var(--acento); }
.mensaje[data-calificacion] .acciones { opacity: 1; }
.opciones-opinion { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e-2); }
.fila-privacidad { display: flex; gap: var(--e-4); margin-top: var(--e-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Menú de la cuenta */
.menu-cuenta { min-width: 17rem; }
.menu-cuenta > button svg { width: 1rem; height: 1rem; color: var(--gris); flex: none; }
.menu-cuenta > button span { flex: 1; }
.menu-cuenta kbd { font-family: var(--fuente); font-size: var(--t-1); color: var(--gris); }
.menu-cuenta .flecha-sub { margin-left: auto; }
.menu-cuenta #mas-informacion[aria-expanded="true"] .flecha-sub { transform: rotate(90deg); }
.submenu { display: grid; padding-left: var(--e-6); }
.submenu > button {
    font: inherit;
    font-size: var(--t-2);
    color: var(--tinta);
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radio);
    padding: var(--e-2) var(--e-3);
    cursor: pointer;
}
.submenu > button:hover { background: var(--superficie); }

/* Ajustes por secciones */
.dialogo-ajustes { width: min(56rem, calc(100vw - 2rem)); height: min(40rem, calc(100vh - 2rem)); }
.dialogo-ajustes .ajustes {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 0;
    padding: 0;
    height: 100%;
}
.ajustes-nav {
    display: grid;
    align-content: start;
    gap: var(--e-1);
    padding: var(--e-4) var(--e-3);
    border-right: var(--linea) solid var(--borde);
    background: var(--superficie);
    overflow-y: auto;
}
.ajustes-nav > button {
    font: inherit;
    font-size: var(--t-3);
    color: var(--tinta);
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radio);
    padding: var(--e-2) var(--e-3);
    cursor: pointer;
}
.ajustes-nav > button:hover,
.ajustes-nav > button[aria-current="true"] { background: var(--realce); }
.ajustes-nav .menu-titulo { margin-top: var(--e-3); }
.ajustes-cuerpo { overflow-y: auto; padding: var(--e-3) var(--e-6) var(--e-6); }
.ajustes-barra { display: flex; justify-content: flex-end; align-items: center; gap: var(--e-3); position: sticky; top: 0; background: var(--fondo); padding: var(--e-1) 0; }
.ajustes-barra .boton.icono { border-color: transparent; }
.ajustes-panel { display: grid; gap: var(--e-4); max-width: 40rem; }
.ajustes-panel h2 { font-family: var(--fuente); font-size: var(--t-5); font-weight: var(--p-normal); }
.ajustes-panel h3 {
    font-size: var(--t-3);
    font-weight: var(--p-fuerte);
    margin: var(--e-3) 0 0;
    padding-bottom: var(--e-2);
    border-bottom: var(--linea) solid var(--borde);
}
.fila-dato, .fila-interruptor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    padding: var(--e-3) 0;
    border-bottom: var(--linea) solid var(--borde);
    font-size: var(--t-3);
}
.fila-interruptor { cursor: pointer; }
.interruptor-ajuste {
    appearance: none;
    flex: none;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: var(--e-5);
    background: var(--borde);
    border: 0;
    position: relative;
    cursor: pointer;
    padding: 0;
}
.interruptor-ajuste::after {
    content: "";
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--fondo);
}
.interruptor-ajuste:checked { background: var(--acento); }
.interruptor-ajuste:checked::after { left: 1.125rem; }
.fila-izquierda { justify-content: flex-start; }

/* Uso */
.uso-titular { font-size: var(--t-4); font-weight: var(--p-medio); margin: 0; padding-bottom: var(--e-3); border-bottom: var(--linea) solid var(--borde); }
.uso-filas { display: grid; }
.uso-fila {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) 2fr 6rem;
    align-items: center;
    gap: var(--e-4);
    padding: var(--e-3) 0;
    border-bottom: var(--linea) solid var(--borde);
    font-size: var(--t-3);
}
.barra-uso { height: var(--e-2); background: var(--superficie); border-radius: var(--radio); overflow: hidden; }
.barra-uso span { display: block; height: 100%; background: var(--acento); }
.uso-pct { text-align: right; font-variant-numeric: tabular-nums; }

/* Planes */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--e-4); }
.plan { display: grid; gap: var(--e-3); align-content: start; padding: var(--e-4); border: var(--linea) solid var(--borde); border-radius: var(--radio-caja); }
.plan-actual { border-color: var(--acento); }
.plan h3 { border: 0; padding: 0; margin: 0; font-size: var(--t-4); }

/* Ayuda y textos legales */
.pregunta { border-bottom: var(--linea) solid var(--borde); padding: var(--e-3) 0; }
.pregunta summary { cursor: pointer; font-weight: var(--p-medio); }
.pregunta p { margin: var(--e-2) 0 0; color: var(--gris); }
.texto-legal h3 { border: 0; margin-top: var(--e-4); padding: 0; }
.texto-legal p { margin: var(--e-2) 0 0; line-height: 1.6; }

@media (max-width: 760px) {
    .dialogo-ajustes .ajustes { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .ajustes-nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: var(--linea) solid var(--borde); }
    .ajustes-nav .menu-titulo { display: none; }
    .ajustes-nav > button { white-space: nowrap; }
    .ajustes-cuerpo { padding: var(--e-3) var(--e-4); }
    .uso-fila { grid-template-columns: 1fr; gap: var(--e-2); }
    .uso-pct { text-align: left; }
}

/* Imágenes generadas */
.formatos-imagen { display: flex; flex-wrap: wrap; gap: var(--e-1); padding: 0 var(--e-3) var(--e-2) var(--e-6); }
.formatos-imagen button {
    font: inherit;
    font-size: var(--t-1);
    color: var(--gris);
    background: none;
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
    padding: var(--e-1) var(--e-2);
    cursor: pointer;
}
.formatos-imagen button[aria-checked="true"] { color: var(--acento); border-color: var(--acento); }
.galeria { display: grid; gap: var(--e-3); margin-bottom: var(--e-2); }
/* La imagen se ve completa sin desplazarse: tope de ancho y de alto. */
.imagen-generada { position: relative; margin: 0; width: fit-content; max-width: 100%; }
.imagen-generada img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(32rem, 100%);
    /* Alto de la ventana menos la cabecera y el cuadro de texto: cabe completa a la vista. */
    max-height: max(12rem, calc(100dvh - 17rem));
    min-width: 12rem;
    min-height: 8rem;
    background: var(--superficie);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio-caja);
    cursor: zoom-in;
}
/* Botones encima de la imagen: aparecen al pasar el ratón; en pantallas táctiles, siempre. */
.imagen-acciones {
    position: absolute;
    left: var(--e-3);
    right: var(--e-3);
    bottom: var(--e-3);
    display: flex;
    align-items: center;
    gap: var(--e-2);
    opacity: 0;
    transition: opacity 0.15s;
}
.imagen-generada:hover .imagen-acciones,
.imagen-generada:focus-within .imagen-acciones { opacity: 1; }
@media (hover: none) { .imagen-acciones { opacity: 1; } }
.boton-imagen {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    height: 2rem;
    padding: 0 var(--e-3);
    border: var(--linea) solid var(--borde);
    border-radius: 999px;
    background: var(--fondo);
    color: var(--tinta);
    font: var(--p-medio) var(--t-2) var(--fuente);
    cursor: pointer;
}
.boton-imagen.icono { width: 2rem; padding: 0; justify-content: center; }
.boton-imagen svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.boton-imagen:hover { background: var(--superficie); }
.imagen-acciones .espacio { flex: 1; }

/* Menú +: opciones cortas con submenús laterales */
.menu-mas { min-width: 16rem; }
.menu-mas > button > svg:first-child,
.submenu-lateral > button > svg:first-child { width: 1rem; height: 1rem; color: var(--gris); flex: none; }
.menu-mas > button > span:not(.sutil) { flex: 1; }
.menu-mas kbd { font-family: var(--fuente); font-size: var(--t-1); color: var(--gris); }
.menu-mas .valor-submenu { font-size: var(--t-2); }
.menu-mas .flecha-sub { width: 0.875rem; height: 0.875rem; color: var(--gris); flex: none; }
.menu-mas .con-submenu[aria-expanded="true"] { background: var(--superficie); }
.menu-mas #modo-imagen.activo > span { color: var(--acento); }
.submenu-lateral {
    position: absolute;
    left: calc(100% + var(--e-1));
    bottom: auto;
    min-width: 15rem;
}
.submenu-lateral.hacia-izquierda { left: auto; right: calc(100% + var(--e-1)); }
.submenu-lateral > button > span { flex: 1; }
/* Marca de opción activa: un check */
svg.marca-check {
    visibility: hidden;
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    color: var(--acento);
    flex: none;
    border: 0;
    background: none;
}
[aria-checked="true"] > svg.marca-check { visibility: visible; background: none; }
@media (max-width: 760px) {
    /* En pantallas angostas el submenú se abre encima del menú. */
    .submenu-lateral, .submenu-lateral.hacia-izquierda { left: 0; right: 0; top: auto !important; bottom: 0; }
}

/* Ajustes › Conectores: una fila por servicio, separadas por una línea */
.lista-conectores { list-style: none; margin: var(--e-4) 0 0; padding: 0; border-top: var(--linea) solid var(--borde); }
.lista-conectores li {
    display: flex;
    align-items: center;
    gap: var(--e-4);
    padding: var(--e-3) 0;
    border-bottom: var(--linea) solid var(--borde);
}
.conector-texto { flex: 1; display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.conector-texto .sutil { font-size: var(--t-2); overflow-wrap: anywhere; }
.conector-acciones { display: flex; align-items: center; gap: var(--e-3); flex: none; }
.aviso-conectores { margin: var(--e-3) 0 0; padding: var(--e-2) var(--e-3); border: var(--linea) solid var(--borde); border-radius: var(--radio); font-size: var(--t-3); }
#lista-conectores-menu .menu-titulo { margin: 0; }

/* Visor de imágenes: ocupa toda la ventana, con barra arriba y edición abajo */
.visor-imagen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--tinta);
    background: var(--fondo);
}
.visor-imagen[open] { display: grid; grid-template-rows: auto 1fr auto; }
.visor-imagen::backdrop { background: var(--fondo); }
.visor-barra {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-4);
}
.visor-titulo { font-size: var(--t-3); font-weight: var(--p-medio); }
.visor-barra .espacio { flex: 1; }
.visor-barra .boton { display: inline-flex; align-items: center; gap: var(--e-1); }
.visor-barra .boton svg,
.visor-herramientas svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.visor-barra .boton.icono { border-color: transparent; }
.visor-barra .menu button,
.visor-herramientas .menu button { display: flex; align-items: center; gap: var(--e-2); }
#visor-zoom-valor { font-variant-numeric: tabular-nums; min-width: 2.75rem; text-align: right; }

.visor-lienzo {
    display: flex;
    min-height: 0;
    overflow: auto;
    /* Abajo queda sitio para la barra de herramientas, que flota sobre este borde. */
    padding: var(--e-1) var(--e-4) var(--e-7);
}
/* margin: auto centra la imagen y, si es más grande que el espacio, deja desplazarse. */
.visor-lienzo img { margin: auto; flex: none; height: auto; border: var(--linea) solid var(--borde); }
.visor-lienzo img.ajustada { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }

.visor-pie {
    position: relative;
    display: grid;
    justify-items: center;
    padding: 0 var(--e-4) var(--e-4);
}
/* La barra de herramientas flota entre la imagen y el cuadro de texto. */
.visor-pie .visor-herramientas {
    position: absolute;
    bottom: calc(100% + var(--e-2));
    left: 50%;
    transform: translateX(-50%);
}
.visor-herramientas {
    display: flex;
    align-items: center;
    gap: var(--e-1);
    padding: var(--e-1);
    background: var(--tinta);
    border-radius: var(--radio);
}
.visor-herramientas > button,
.visor-herramientas > .desplegable > button {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: var(--e-1) var(--e-3);
    border: 0;
    border-radius: var(--radio);
    background: none;
    color: var(--fondo);
    font: var(--p-medio) var(--t-2) var(--fuente);
    cursor: pointer;
}
.visor-herramientas > button:hover,
.visor-herramientas > .desplegable > button:hover,
.visor-herramientas [aria-expanded="true"] { background: color-mix(in srgb, var(--fondo) 18%, transparent); }
.visor-herramientas .menu { color: var(--tinta); }
.visor-entrada {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    width: min(40rem, 100%);
    padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
    background: var(--fondo);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio-caja);
}
.visor-entrada input { flex: 1; min-width: 0; border: 0; background: none; color: var(--tinta); font: inherit; font-size: var(--t-4); outline: none; }
.visor-entrada .boton.icono { border-radius: 999px; }
.visor-entrada svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
    .visor-compartir-texto, #visor-compartir span { display: none; }
}
#visor-menu-zoom { min-width: 15rem; white-space: nowrap; }

/* Selector de modelos: candado en los modelos de un plan superior */
.menu-modelos .candado { align-self: center; margin-left: auto; color: var(--gris); flex: none; }
.menu-modelos .etiqueta-pro { margin-left: var(--e-1); }
#modelos-imagen > button { align-items: flex-start; }
#modelos-imagen .opcion { display: grid; gap: var(--e-1); }
#modelos-imagen .opcion .sutil { font-size: var(--t-2); }
#modelos-imagen svg.marca-check { align-self: center; }
/* Ajustes › Uso: créditos por modelo */
.tabla-uso { width: 100%; border-collapse: collapse; margin: var(--e-4) 0; font-size: var(--t-3); }
.tabla-uso th, .tabla-uso td { padding: var(--e-2) 0; border-bottom: var(--linea) solid var(--borde); text-align: left; }
.tabla-uso th { font-weight: var(--p-medio); color: var(--gris); }
.tabla-uso th:not(:first-child), .tabla-uso td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
#modelos-imagen { display: grid; }
#formatos-imagen { min-width: 17rem; }
#modelos-imagen .candado { align-self: center; margin-left: auto; color: var(--gris); flex: none; }

/* Modo voz: escena 3D en un círculo (los Andes que hablan y el cóndor) */
.voz-escena { display: grid; place-items: center; width: 15rem; height: 15rem; }
.voz-escena.con-3d .voz-onda { display: none; }
.voz-lienzo-3d { width: 100%; height: 100%; border-radius: 50%; border: var(--linea) solid var(--borde); }
@media (max-width: 760px) { .voz-escena { width: 12rem; height: 12rem; } }

/* Mejora tu plan: tarjetas por plan, separadas por una línea, como ChatGPT */
.dialogo-planes { width: min(76rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: var(--e-5); overflow-y: auto; }
.dialogo-planes h2 { text-align: center; font-size: var(--t-6); margin: 0 0 var(--e-4); }
.planes-cabecera { display: flex; }
.planes-cabecera .boton.icono { border-color: transparent; }
.planes-pestanas { display: flex; width: fit-content; margin: 0 auto var(--e-5); padding: var(--e-1); gap: var(--e-1); background: var(--superficie); border-radius: 999px; }
.planes-pestanas button { font: inherit; font-size: var(--t-3); font-weight: var(--p-medio); padding: var(--e-2) var(--e-4); border: 0; border-radius: 999px; background: none; color: var(--gris); cursor: pointer; }
.planes-pestanas button[aria-selected="true"] { background: var(--fondo); color: var(--tinta); border: var(--linea) solid var(--borde); }
.planes-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--e-4); }
.plan-tarjeta { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); border: var(--linea) solid var(--borde); border-radius: var(--radio-caja); }
.plan-tarjeta.recomendado { border-color: var(--acento); }
.plan-tarjeta-cabecera { display: flex; align-items: center; justify-content: space-between; }
.plan-nombre { font-weight: var(--p-fuerte); }
.plan-tarjeta h3 { margin: 0; min-height: 2.6em; font-size: var(--t-5); font-weight: var(--p-medio); }
.plan-tarjeta .boton { width: 100%; padding: var(--e-3); border-radius: 999px; }
.plan-precio { margin: 0; font-variant-numeric: tabular-nums; }
.plan-precio strong { font-size: var(--t-6); font-weight: var(--p-medio); }
.plan-funciones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); font-size: var(--t-3); }
.plan-funciones li { display: flex; gap: var(--e-2); align-items: flex-start; }
.check-plan { width: 1rem; height: 1rem; flex: none; margin-top: 0.15rem; color: var(--acento); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.planes-contacto { margin-top: var(--e-4); padding: var(--e-4); border: var(--linea) solid var(--borde); border-radius: var(--radio); }
.planes-nota { text-align: center; margin: var(--e-4) 0 0; font-size: var(--t-2); }

/* Acceso: «Continuar con Google» y separador */
.boton-google { display: flex; align-items: center; justify-content: center; gap: var(--e-2); padding: var(--e-3); text-decoration: none; }
.logo-google { width: 1.125rem; height: 1.125rem; flex: none; }
.separador-acceso { display: flex; align-items: center; gap: var(--e-3); margin: 0; color: var(--gris); font-size: var(--t-2); }
.separador-acceso::before, .separador-acceso::after { content: ""; flex: 1; border-top: var(--linea) solid var(--borde); }

/* Pagos: métodos y pasos para pagar */
.metodos-pago { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--e-2); margin-top: var(--e-3); }
.metodos-pago .boton { display: flex; justify-content: space-between; gap: var(--e-2); padding: var(--e-3) var(--e-4); }
.form-comprobante { display: grid; gap: var(--e-3); margin-top: var(--e-3); }
.form-comprobante .error:empty { display: none; }
.pasos-pago { display: grid; gap: var(--e-2); padding-left: var(--e-5); line-height: 1.6; }
.planes-contacto .campo { margin-bottom: var(--e-3); }
.pago-resumen { display: flex; justify-content: space-between; gap: var(--e-3); margin: 0 0 var(--e-3); padding-bottom: var(--e-3); border-bottom: var(--linea) solid var(--borde); font-size: var(--t-4); }
.pago-resumen span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.planes-contacto .boton.primario { margin-top: var(--e-2); }
.titulo-pagos { margin: var(--e-5) 0 var(--e-2); font-size: var(--t-4); font-weight: var(--p-medio); }