* {
    margin: 0;
    padding: 0;
    max-width:100%;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    max-width: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background-color:#000;
    font-family: Dubai, Verdana, Geneva, Tahoma, sans-serif;
    color: #ffffff;
    line-height: 1.6em;
    box-sizing: border-box;
    /* Texto de usuario (mensajes, resúmenes de chat) puede traer palabras
       largas sin espacios (URLs, etc.) que si no se desbordaban fuera de
       las burbujas/tarjetas en vez de partirse. */
    overflow-wrap: break-word;
}

header {
    /* Sin height fijo: el logo mide 43px y con padding no cabía en 30px,
       así que se desbordaba fuera de la cabecera. */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
    padding: 0.5rem 1rem;
}
#app {
  /* Alto FIJO (no min-height) + overflow-y propio: así #app es el que
     scrollea, no el body. Sin esto, .chat-messages con flex:1 no tenía un
     padre de alto definido donde encajar, así que en vez de scrollear por
     dentro crecía sin límite con cada mensaje nuevo — en una conversación
     larga el cuadro de texto acababa enterrado muy abajo de la página. */
  display: flex;
  flex-direction: column;
  height: calc(100vh - 90px); /* deja espacio para el footer */
  overflow-y: auto;
}


.logo {
    /* El SVG es de 44x43px. Sin width se dibujaba a tamaño real, diminuto.
       display:flex, flex-direction y gap no hacían nada aquí: un <img> no
       tiene hijos que colocar. Y float:left anulaba el margin:0 auto. */
    width: 64px;
    height: auto;
    flex-shrink: 0;
}

.container {
    display: flex;
    flex-direction: column;
    margin: 0 auto 1.5rem;
    gap: 1.5rem;
    padding: 1.6rem;
}
div #contador {
    display:inline-flex;
    flex-direction: column;
    font-family: dubai, Verdana, Geneva, Tahoma, sans-serif;
    margin:0 auto 1.6rem;
    align-items: center;
}

#visitas {
    display:flex;
    justify-content: center;
    color: #8b8b8b;
    font-size: 2.5rem;
}
h1{
    display: flex;
    gap: 10px;
    padding: 0;
    background: inherit;
    color: #8b8b8b;
    font-size: 1.5rem;
    font-weight: 100;
}
strong{
    color: white;
    font-size: 2.5rem;
}
h3 {
    color:#8b8b8b;
    text-align: center;
    font-size: x-large;
    font-weight: 400;
    margin-bottom: 1rem;
}
.descript{
    /* display:block es necesario para que margin:auto centre la caja: un
       <input> es inline-block por defecto, y los márgenes automáticos solo
       centran cajas de bloque. Sin esto, dentro de un formulario que no es
       flex (como #pensamiento-form) el input quedaba pegado a la izquierda
       en vez de centrado en su columna. */
    display: block;
    background-color:#11121a;
    color:#8b8b8b;
    height:3rem;
    width: 100%;
    max-width: 19rem;
    text-align: center;
    font-size: large;
    font-weight: 400;
    border-style:none;
    border-radius:8px;
    margin: 1.5rem auto 0;
    padding: 0.2rem;
}

/* ===== Sesión: login/registro (vista `login`) y cabecera de home ===== */

/* Sin sesión no hay nada a lo que navegar todavía. */
.sin-sesion .menu-inferior,
.sin-sesion .sidebar-top,
.sin-sesion .ayuda-flotante {
    display: none;
}

/* Icono de ayuda flotante (28/08/2026): pequeño, semitransparente, en el
   mismo gris apagado que el resto de texto secundario (.perfil-etiqueta,
   .radar-label...) — a propósito NO usa el cian de acento, para que "no
   destaque" como pidió Ana. Fijo en la esquina superior derecha en todas
   las pantallas; ver el ajuste de .chat-header más abajo para que no se
   solape con el botón "+" de la vista `ia`, el único sitio donde había
   algo más en esa misma esquina.

   `right: 1.6rem` (no 0.8rem, valor inicial): #app tiene su propio scroll
   interno (overflow-y: auto, ver la regla de #app más arriba) y su barra
   ocupa la franja derecha del viewport en escritorio — con 0.8rem el icono
   quedaba pegado a esa barra en cualquier vista con contenido largo
   (gráfico, mis chats...), no solo en Ayuda. Con 1.6rem queda despejado de
   la barra de scroll en cualquier pantalla, la tenga o no. */
.ayuda-flotante {
    position: fixed;
    top: 0.8rem;
    right: 1.6rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: rgba(17, 18, 26, 0.75);
    border: 1px solid #2a2a35;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
    z-index: 50;
    transition: opacity 0.15s;
}

.ayuda-flotante:hover,
.ayuda-flotante:focus-visible {
    opacity: 1;
}

/* En la propia pantalla de Ayuda no tiene sentido un atajo a ella misma
   (28/08/2026, pedido de Ana — además se veía apretado contra el borde del
   scroll ahí). `body[data-route]` lo pone app.js en cada navegación. */
body[data-route="ayuda"] .ayuda-flotante {
    display: none;
}

.ayuda-flotante img {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}

.auth-tagline {
    text-align: center;
    color: #38d0e1;
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    margin: 0 auto 1rem;
    padding: 0 1rem;
    max-width: 22rem;
}

.auth-container {
    align-items: center;
}

.auth-container form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.auth-submit {
    background-color: #00eeff;
    color: #000;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    width: 100%;
    max-width: 19rem;
    height: 3rem;
    margin: 1rem auto 0;
    cursor: pointer;
}

.auth-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.auth-error {
    color: #ff6b6b;
    text-align: center;
    min-height: 1.2em;
    margin-top: 0.8rem;
    font-size: 0.9rem;
}

.auth-toggle {
    background: none;
    border: none;
    color: #8b8b8b;
    text-decoration: underline;
    margin-top: 1rem;
    cursor: pointer;
    font-size: 0.9rem;
}

/* Casillas de mayoría de edad / política, y aviso de que la IA no es un
   profesional médico — solo se ven al registrarse (25/08/2026). */
.auth-consent {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    max-width: 19rem;
    margin: 1rem auto 0;
}

/* El atributo `hidden` (usado en JS para ocultar esto al iniciar sesión,
   solo se pide al registrarse) pone display:none en la hoja de estilos del
   navegador, pero con la misma especificidad que .auth-consent de arriba
   — como .auth-consent es una regla de autor, gana ella y el bloque se
   quedaba visible aunque tuviera el atributo. Hace falta esta regla propia
   para que "hidden" siga funcionando. */
.auth-consent[hidden] {
    display: none;
}

.auth-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: #8b8b8b;
    font-size: 0.85rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.auth-checkbox input {
    flex-shrink: 0;
    margin-top: 0.2rem;
    accent-color: #00eeff;
}

.auth-checkbox a {
    color: #00eeff;
}

/* ===== Asistente de registro: elegir plan / idioma-región / legal ===== */
/* Reutiliza el mismo layout ancho y centrado que .auth-container (login) —
   ver 'sin-sesion' en app.js, que aplica ese mismo tratamiento visual
   durante los tres pasos del asistente. */

.onboarding-container {
    align-items: center;
    text-align: center;
}

.onboarding-paso {
    color: #8b8b8b;
    font-size: 0.85rem;
    margin: -0.5rem 0 1.2rem;
}

.planes-lista {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 19rem;
    margin: 0 auto;
}

.plan-card {
    background: #11121a;
    border-radius: 14px;
    padding: 1.2rem;
    text-align: left;
    border: 1px solid transparent;
}

.plan-card-destacada {
    border-color: #38d0e1;
}

/* Modo Mi cuenta del selector de planes (28/08/2026, ESPECIFICACION.md §9):
   tarjeta del plan activo marcada, sin botón de acción. */
.plan-card-actual {
    border-color: #00eeff;
}

/* :not([hidden]) — mismo motivo que .checklist-sentimientos:not([hidden])
   en la sección de arriba: una regla con `display` y la especificidad de
   una clase gana siempre a la regla del navegador para [hidden], y sin
   esto el atributo `hidden` no ocultaría nada aquí (probado: pasaba de
   verdad). */
.plan-actual-badge:not([hidden]) {
    display: inline-block;
    background: #00eeff;
    color: #000;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}

.plan-card h4 {
    color: #fff;
    font-weight: 400;
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.plan-precio {
    color: #38d0e1;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.plan-card ul {
    list-style: none;
    color: #b8b8b8;
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
}

.plan-card li {
    margin-bottom: 0.2rem;
}

.plan-elegir-btn {
    width: 100%;
    padding: 0.7rem;
    background-color: #00eeff;
    color: #000;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.plan-elegir-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.onboarding-campo {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    max-width: 19rem;
    margin: 0 auto 1rem;
    text-align: left;
    color: #8b8b8b;
    font-size: 0.9rem;
}

.onboarding-campo select {
    padding: 0.7rem;
    border-radius: 8px;
    border: none;
    background: #11121a;
    color: #fff;
    font-size: 0.95rem;
}

.auth-disclaimer {
    color: #8b8b8b;
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: left;
    font-style: italic;
    margin: 0;
}

/* ===== "Mi cuenta" (vista `perfil`) ===== */

.perfil-container {
    align-items: center;
}

.perfil-datos {
    width: 100%;
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 0.5rem;
}

.perfil-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #11121a;
    border-radius: 8px;
    padding: 0.8rem 1rem;
}

.perfil-etiqueta {
    color: #8b8b8b;
    font-size: 0.85rem;
}

.perfil-valor {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
}

.perfil-plan {
    color: #8b8b8b;
}

.perfil-plan.plan-premium {
    color: #00eeff;
}

.perfil-plan-btn {
    margin-top: 1.5rem;
}

.perfil-nota {
    color: #8b8b8b;
    font-size: 0.8rem;
    text-align: center;
    max-width: 30rem;
    margin: 0.6rem auto 0;
}

.perfil-legal {
    width: 100%;
    max-width: 30rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #2a2b35;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Selector de idioma/región en Mi cuenta (27/08/2026): mismo patrón visual
   que .perfil-legal (separador arriba, contenido centrado); los <select> y
   el aviso reutilizan .onboarding-campo/.auth-disclaimer del asistente de
   registro tal cual, sin duplicar estilos. */
.perfil-idioma {
    width: 100%;
    max-width: 30rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #2a2b35;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.perfil-idioma-estado {
    color: #00eeff;
    font-size: 0.85rem;
    min-height: 1.2em;
    margin: 0.4rem 0 0;
}

.perfil-idioma-estado-error {
    color: #ff6b6b;
}

.perfil-doc {
    color: #00eeff;
    font-size: 0.9rem;
    margin-top: 0.6rem;
}

/* Botón con el mismo aspecto que .perfil-doc (un enlace), para cuando el
   elemento tiene que ser <button data-route> en vez de <a href> — reset de
   los estilos por defecto de <button> que .perfil-doc no necesita en un <a>. */
.perfil-doc-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    display: block;
}

/* ===== Vista `ayuda` (28/08/2026, ESPECIFICACION.md §10) ===== */
.ayuda-container {
    align-items: center;
}

.ayuda-bloque {
    width: 100%;
    max-width: 30rem;
}

.ayuda-bloque h3 {
    color: #8b8b8b;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.6rem;
}

.ayuda-bloque p {
    color: #cfcfcf;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.ayuda-destacado {
    background-color: #1a1210;
    border-left: 3px solid #ff6b6b;
    padding: 1rem;
    border-radius: 8px;
}

.ayuda-destacado ul {
    padding-left: 1.2rem;
    margin-bottom: 0.6rem;
    color: #e8c4c4;
    font-size: 0.9rem;
}

.ayuda-destacado li {
    margin-bottom: 0.3rem;
}

.ayuda-pregunta {
    background-color: #11121a;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.7rem;
}

.ayuda-pregunta:last-child {
    margin-bottom: 0;
}

.ayuda-pregunta-texto {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

.ayuda-pregunta-respuesta {
    color: #b8b8b8;
    font-size: 0.85rem;
    margin: 0;
}

/* .sidebar-top/.sidebar-brand/.sidebar-usuario: logo+título y
   usuario+cerrar-sesión, ahora globales (25/08/2026) en vez de vivir solo
   dentro de home.html. En móvil se comportan EXACTAMENTE igual que antes
   (una fila, solo visible en la vista home); en escritorio/tablets grandes
   pasan a la columna izquierda — ver el bloque @media más abajo. */
.sidebar-top {
    display: none;
}

body[data-route="home"] .sidebar-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
    padding: 0.5rem 1rem;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sidebar-usuario {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body[data-route="home"] .sidebar-usuario {
    margin-left: auto;
}

.usuario-actual {
    /* Es un <button> (lleva a "Mi cuenta"), no un <span>: hay que anular
       el estilo por defecto del navegador para que se vea igual que
       antes, solo un texto. */
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #8b8b8b;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
}

.usuario-actual:hover,
.usuario-actual:focus-visible {
    color: #00eeff;
}

.cerrar-sesion {
    background: #11121a;
    color: #8b8b8b;
    border: none;
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    cursor: pointer;
}

/* Comparador de periodos (28/08/2026, ESPECIFICACION.md §5, exclusivo de
   Max): mismo estilo de pastilla que .btn-mas-sentimientos, centrado como
   el resto de contenido de esta vista. */
.periodo-select {
    align-self: center;
    margin: 1rem auto 0;
    padding: 0.5rem 1rem;
    width: auto;
    max-width: 14rem;
    background: #11121a;
    color: #00eeff;
    border: 1px solid #00eeff;
    border-radius: 1.2rem;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    cursor: pointer;
}

/* ===== Radar de emociones (vista `grafico`) ===== */
.radar-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0;
    padding: 0 1rem;
}

#radarChart {
    width: 100%;
    max-width: 460px;
    height: auto;
    /* Refuerzo para móvil: algunos navegadores no calculan bien el alto de
       un <svg> solo con viewBox + height:auto (se quedaba en 0 y el radar
       desaparecía). El width/height del propio <svg> ya lo arregla, esto
       es cinturón y tirantes. */
    aspect-ratio: 460 / 280;
}

.radar-grid {
    fill: none;
    stroke: #2a2a35;
    stroke-width: 1;
}

.radar-axis {
    stroke: #2a2a35;
    stroke-width: 1;
}

/* Eje de una familia marcada en el checklist de sentimientos (28/08/2026,
   ESPECIFICACION.md §5) — más visible que el resto para que se note cuáles
   están activas cuando hay 2 o más a la vez (Premium/Max). */
.radar-axis-activo {
    stroke: #4a4a5a;
    stroke-width: 1.5;
}

.radar-label {
    fill: #8b8b8b;
    font-size: 9px;
}

/* Forma tenue de referencia (28/08/2026): ya no lleva un color propio, solo
   marca la intensidad máxima de cada eje detrás de los puntos de colores.
   Los puntos (.radar-point) llevan su color por familia puesto en línea
   desde JS (punto.style.fill), así que aquí no se declara `fill` — si se
   declarara, la regla de esta hoja de estilos ganaría siempre al color en
   línea y todos los puntos se verían del mismo color sin importar la familia. */
.radar-shape {
    fill: rgba(255, 255, 255, 0.06);
    stroke: rgba(255, 255, 255, 0.35);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.radar-point {
    stroke: rgba(0, 0, 0, 0.35);
    stroke-width: 0.5;
    fill-opacity: 0.85;
}

.radar-center {
    fill: #444;
}

.radar-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    color: #fff;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}

.radar-selector button {
    background: #11121a;
    color: #8b8b8b;
    border: none;
    border-radius: 50%;
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.3rem;
    cursor: pointer;
}

/* Checklist de sentimientos (28/08/2026, ESPECIFICACION.md §5): botón
   "Mostrar más sentimientos" (Premium/Max) + lista de casillas para ver
   varias familias a la vez en el mapa. */
.btn-mas-sentimientos {
    margin-top: 0.75rem;
    padding: 0.5rem 1.2rem;
    background: transparent;
    color: #00eeff;
    border: 1px solid #00eeff;
    border-radius: 1.2rem;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    cursor: pointer;
}

/* :not([hidden]) — sin esto, esta regla (con la especificidad de una clase)
   ganaría siempre a la regla por defecto del navegador para [hidden], que
   tiene la especificidad más baja posible, y el atributo `hidden` dejaría
   de ocultar nada mientras el checklist siga en el DOM (probado: pasaba de
   verdad, no es solo una precaución teórica). */
.checklist-sentimientos:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 1rem;
    width: 100%;
    max-width: 20rem;
    box-sizing: border-box;
    background: #11121a;
    border-radius: 0.6rem;
}

.checklist-sentimiento {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #d0d0d0;
    font-size: 0.95rem;
    cursor: pointer;
}

.checklist-sentimiento input[type="checkbox"] {
    accent-color: #00eeff;
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

.checklist-sentimiento input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.checklist-sentimiento-color {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.checklist-sentimientos-aviso {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: #8b8b8b;
}

/* Tendencia semanal de la familia seleccionada */
.weekly-summary {
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
}

#weekIntensityChart {
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 200;
    box-sizing: content-box;
}

.week-days text {
    fill: #8b8b8b;
    font-size: 11px;
}

.week-line {
    fill: none;
    stroke: #84deee;
    stroke-width: 2;
}

.week-point {
    fill: #00eeff;
}

/* insights*/
.insights-box {
    padding: 0 1rem 1rem;
}

.insights-box h3{
    background: inherit;
    border: 2px solid #00eeff;
    margin: 0.5rem 0;
    padding: 0.5rem 12px;
    text-align: center;
    border-radius: 8px;
}

.insights-box li {
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    color: #ccc;
    list-style: none;
}

/* ===== Lista de chats (vista `conversaciones`) ===== */
.chat-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0 1rem;
    list-style: none;
}

/* ===== Autoinforme EMA (home) — checklist paso 13 =====
   Tarjeta discreta bajo el contador de visitas, no un modal bloqueante: se
   puede ignorar sin más pulsando "Ahora no". Mismo fondo/radio que
   .chat-card para que se lea como una tarjeta más de la app, sin gritar en
   la pantalla de inicio. */
#emaCard {
    background: #11121a;
    border-radius: 14px;
}

/* .container/.ema-emociones fijan display:flex; sin este override el
   atributo `hidden` no hace nada (una regla de autor con la misma o mayor
   especificidad siempre gana al display:none del user-agent para [hidden],
   sea cual sea el orden en la hoja de estilos) — la tarjeta se vería
   siempre, sin importar lo que diga mostrarPromptEmaSiCorresponde() en
   app.js. Detectado probando en Chrome real, no algo teórico. */
#emaCard[hidden],
.ema-emociones[hidden] {
    display: none;
}

.ema-emociones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.ema-emocion-btn {
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--color-emocion, #8b8b8b);
    background: none;
    color: #ddd;
    font-size: 0.85rem;
    cursor: pointer;
}

.ema-emocion-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.ema-emocion-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.ema-acciones {
    display: flex;
    justify-content: center;
}

.ema-ahora-no-btn {
    background: none;
    border: none;
    color: #8b8b8b;
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.3rem;
}

.ema-gracias {
    text-align: center;
    color: #8b8b8b;
    font-size: 0.9rem;
}

.chat-card {
    position: relative;
    background: #11121a;
    border-radius: 14px;
    padding: 1rem;
    border-left: 4px solid var(--color-emocion, #8b8b8b);
    cursor: pointer;
}

.chat-card-borrar {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: none;
    border: none;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
}

.chat-card-borrar:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 100;
}

.modal-caja {
    background: #11121a;
    border-radius: 14px;
    padding: 1.2rem;
    max-width: 30rem;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    color: #ddd;
}

.modal-caja h2 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 0.6rem;
}

.modal-caja p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    color: #b8b8b8;
}

.modal-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.modal-borrar-btn {
    margin-top: 0.5rem;
    padding: 0.4rem 0.8rem;
    background-color: #e53935;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Confirmación de bajada de plan (28/08/2026, ESPECIFICACION.md §9). */
.modal-botones {
    display: flex;
    gap: 0.8rem;
    margin-top: 0.5rem;
}

.modal-confirmar-btn {
    flex: 1;
    padding: 0.6rem;
    background-color: #00eeff;
    color: #000;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.modal-cancelar-btn {
    flex: 1;
    padding: 0.6rem;
    background: transparent;
    color: #b8b8b8;
    border: 1px solid #333;
    border-radius: 8px;
    cursor: pointer;
}

.chat-card-vacio {
    color: #8b8b8b;
    text-align: center;
    cursor: default;
    border-left: none;
}

.chat-card-cabecera {
    color: #8b8b8b;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.chat-card-resumen {
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

.chat-card-meta {
    color: #8b8b8b;
    font-size: 0.75rem;
}

/* ===== CHAT IA ===== */

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* padding-right ampliado (28/08/2026): dentro de las vistas es el único
       sitio con algo en la esquina superior derecha (el botón "+"), justo
       donde vive .ayuda-flotante (right: 1.6rem, ancho 2rem) — sin este
       hueco extra se solapaban. */
    padding: 1.5rem 3.6rem 0.5rem 1rem;
    background: inherit;
    color: white;
}

.chat-header h1 {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 400;
}

.btn-nueva-conversacion {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    border-radius: 50%;
    background-color: #00eeff;
    color: #000;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.chat-header-acciones {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-shrink: 0;
}

/* ===== Medidor de uso (gris -> cian, como el logo) ===== */

.gasto-gauge {
    transform: rotate(-90deg);
}

.gasto-gauge-fondo {
    fill: none;
    stroke: #2a2b35;
    stroke-width: 4;
}

.gasto-gauge-relleno {
    fill: none;
    stroke: #38d0e1;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s ease;
}

.gasto-gauge-mini {
    width: 2rem;
    height: 2rem;
}

.gasto-gauge-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gasto-gauge-grande {
    width: 3.6rem;
    height: 3.6rem;
}

.gasto-gauge-texto {
    position: absolute;
    font-size: 0.7rem;
    color: #ddd;
}

.gasto-gauge-texto-mini {
    font-size: 0.5rem;
}

/* ===== Indicador de uso — Gratuito (contador) y Max (insignia), 27/08/2026,
   ver pintarIndicadorUso() en app.js. El círculo de arriba se reserva para
   Premium. ===== */

.uso-contador {
    font-size: 0.7rem;
    color: #ddd;
    white-space: nowrap;
}

.uso-contador-grande {
    font-size: 0.85rem;
}

.uso-ilimitado-badge {
    font-size: 0.65rem;
    font-weight: 600;
    color: #38d0e1;
    white-space: nowrap;
    border: 1px solid #38d0e1;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}

.uso-ilimitado-badge-grande {
    font-size: 0.8rem;
    padding: 0.25rem 0.8rem;
}

.chat-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem;
    overflow-y: auto;
    background: inherit;
}

.message {
    max-width: 80%;
    margin-bottom: 0.6rem;
    padding: 0.6rem 0.8rem;
    border-radius: 14px;
    font-size: 0.95rem;
    line-height: 1.4em;
}

.message.user {
    background: #0d5c66;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.message.ia {
    background: #11121a;
    color: #ddd;
    align-self: flex-start;
    border-bottom-left-radius: 2px;
}

.message-texto {
    margin: 0;
}

.feedback-botones {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.feedback-btn {
    background: none;
    border: none;
    padding: 0.1rem 0.3rem;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    border-radius: 6px;
    filter: grayscale(1);
}

.feedback-btn.activo {
    opacity: 1;
    filter: none;
    background: rgba(255, 255, 255, 0.08);
}

.chat-input {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.5rem 1rem;
    padding: 0.8rem;
    background: #11121a;
    border-radius: 14px;
}

.chat-input textarea {
    width: 100%;
    resize: none;
    background-color: inherit;
    color: #ddd;
    font-size: 0.9rem;
    border: none;
    border-radius: 8px;
}

.chat-input textarea:focus {
    outline: none;
}

.chat-input button {
    padding: 0.8rem;
    width: 100%;
    cursor: pointer;
    background-color: #00eeff;
    color: #000;
    font-weight: 600;
    text-align: center;
    border: none;
    border-radius: 10px;
}

/* Menu inferior*/
.menu-inferior {
    position: fixed;
    bottom: 0;
    left: 20px;
    width: 90%;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: #11121a;
    border-top: 2px solid #11121a;
    box-sizing: border-box;
    z-index: 9999;
    pointer-events: auto;
}

.menu-inferior button {
    background: none;
    border: none;
    padding: 0;
    /* Sin esto los <img> se quedaban sin tamaño resuelto (el SVG solo trae
       viewBox, no width/height) y el navegador caía en su tamaño por
       defecto de 300x150 escalado al viewBox: los 4 iconos salían enormes,
       desbordando la barra de 90px y montándose sobre el contenido.
       70px dentro de una barra de 90px deja exactamente 10px arriba y abajo
       (align-items: center los reparte solo), a juego con el gap de 10px. */
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 10000;
}

.menu-inferior img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.menu-inferior button.activo img {
    filter: invert(20%) sepia(40%) saturate(90%) hue-rotate(190deg);
}

.menu-inferior button {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.menu-inferior button:focus-visible,
.menu-inferior button.activo {
    transform: translateY(-20px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* ============================================================
 * Escritorio / tablets grandes (≥768px): columna izquierda fija
 * (logo+título arriba, menú en medio, usuario+salir abajo del todo) +
 * columna derecha (contenido). El móvil no cambia nada — todo lo de aquí
 * abajo son overrides.
 *
 * Los selectores `body[data-route] .sidebar-top` (sin valor, matchea
 * cualquier ruta) tienen la MISMA especificidad que el
 * `body[data-route="home"] .sidebar-top` de más arriba (pensado solo para
 * móvil), así que para que gane aquí basta con que aparezca después en el
 * archivo — no hace falta !important. Es a propósito: si se reordenara el
 * CSS y este bloque quedara antes que el de arriba, dejaría de funcionar.
 * ============================================================ */
@media (min-width: 768px) {
    body {
        display: grid;
        grid-template-columns: 260px 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "top app"
            "nav app"
            "usuario app";
        height: 100vh;
    }

    /* Pantalla de login: no hay menú ni usuario que mostrar, así que no
       hace falta reservar la columna izquierda. Hay que redefinir
       grid-template-areas también, no solo columns: si se deja con dos
       "celdas" por fila ("top app") pero solo una columna explícita, el
       navegador crea una columna implícita extra para la segunda celda
       — así que "app" acababa en una columna estrecha ajustada a su
       contenido, con todo el hueco de "1fr" en blanco a la izquierda
       (donde iría la barra lateral, aunque estuviera oculta). Con una
       sola área ("app") ocupando toda la rejilla, #app pasa a ocupar de
       verdad el ancho completo de la pantalla. */
    body.sin-sesion {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "app";
    }

    /* .sidebar-top (logo+título y usuario+salir juntos) es una sola caja
       pensada para el móvil, donde van en fila. En escritorio se pidió
       usuario+salir DEBAJO del menú, no encima — pero mover ese <div> en
       el HTML cambiaría también el móvil. display:contents saca la caja
       de en medio sin tocar el DOM: sus hijos (.sidebar-brand y
       .sidebar-usuario) pasan a comportarse como si fueran hijos directos
       del grid de aquí abajo, cada uno con su propia grid-area. */
    body[data-route] .sidebar-top {
        display: contents;
    }

    /* Sin sesión (pantalla de login) el display:contents de arriba anula
       el display:none de `.sin-sesion .sidebar-top` de la sección de
       sesión (body[data-route] suma un selector de atributo que esa regla
       no tiene, así que gana en especificidad) — sin esto el logo y
       "Salir" se colaban en la columna izquierda incluso sin sesión
       iniciada. Este selector añade esa misma especificidad extra (con
       .sin-sesion) para que gane y los oculte también aquí; display:none
       en un padre oculta a sus hijos aunque sean display:contents. */
    body[data-route].sin-sesion .sidebar-top {
        display: none;
    }

    body[data-route] .sidebar-brand {
        grid-area: top;
        padding: 2.5rem 1.5rem 1rem;
    }

    body[data-route] .sidebar-usuario {
        grid-area: usuario;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
        margin-left: 0;
        padding: 1rem 1.5rem 1.5rem;
    }

    .cerrar-sesion {
        width: 100%;
    }

    .menu-inferior {
        grid-area: nav;
        position: static;
        left: auto;
        bottom: auto;
        width: auto;
        height: auto;
        align-self: start;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        gap: 1.5rem;
        padding: 1rem 1.5rem;
        background-color: inherit;
    }

    .menu-inferior button {
        width: 90px;
        height: 90px;
    }

    /* En horizontal (móvil) el botón activo sube; en vertical, sobresale
       un poco hacia la derecha, hacia el contenido. */
    .menu-inferior button:focus-visible,
    .menu-inferior button.activo {
        transform: translateX(15px);
    }

    #app {
        grid-area: app;
        height: 100vh;
    }

    /* `home` es la única vista con poco contenido y mucho alto libre (un
       contador y un input) — se centra verticalmente en su columna. El
       resto de vistas (chat, gráfico, lista de conversaciones) necesitan
       quedarse ancladas arriba, por eso esto solo aplica a home. */
    body[data-route="home"] #app {
        justify-content: center;
    }

    /* .descript/.auth-submit/.auth-consent se quedan a 19rem (pensado
       para que quepan en una pantalla de móvil) incluso en la columna
       ancha de escritorio, donde se ven pequeños y perdidos en medio de
       tanto espacio vacío. Se ensanchan un poco más aquí, sin llegar a
       ocupar todo el ancho de la columna (un input de inicio de sesión
       a pantalla completa se vería raro). */
    .descript,
    .auth-submit,
    .auth-consent {
        max-width: 30rem;
    }

    #contador h3 {
        font-size: 1.3rem;
    }

    #visitas {
        font-size: 3.5rem;
    }

    /* El resto de vistas (gráfico, chats, reflexión, mi cuenta, login) no
       tenían ningún tope de ancho: en la columna ancha de escritorio el
       contenido (mensajes de chat, tarjetas de conversaciones, el
       segundo gráfico, el título de cada página) se estiraba a lo ancho
       de toda la columna en vez de quedarse contenido y centrado como el
       resto. header/.chat-header/.chat-messages/.chat-input/.chat-list/
       .weekly-summary/.insights-box son todos hijos directos de #app
       (un flex column), así que `align-self: center` los centra a cada
       uno sin tocar `#app` (que sí debe seguir estirando en el resto de
       casos, como .sidebar-top). */
    header,
    .chat-header,
    .chat-messages,
    .chat-input,
    .chat-list,
    .insights-box {
        width: 100%;
        max-width: 40rem;
        align-self: center;
    }

    /* Ajuste de tamaños de `grafico` en la columna de escritorio
       (ESPECIFICACION.md §5, pedido de Ana, 28/08/2026): el mapa emocional
       (radar) es el protagonista de la pantalla y debe verse más grande que
       el resto del contenido — más incluso que el tope de 40rem de arriba.
       La intensidad semanal, en cambio, se reduce un 20% (30rem → 24rem)
       para no competir en tamaño con el mapa. En móvil no cambia nada: el
       radar sigue con su tope de 460px de la regla base (más ancho que
       cualquier móvil, así que ahí no se nota), y no existe la noción de
       "columna" fuera de esta media query. */
    #radarChart {
        max-width: 48rem;
    }

    .weekly-summary {
        width: 100%;
        max-width: 24rem;
        align-self: center;
    }
}

footer {
    background-color: #5d5d5d;
}
/* Animación nav*/
/* Animaciones */
.fade-in { animation: fadeIn .3s ease; }
.fade-out { animation: fadeOut .15s ease; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}