:root {
    --rosa: #F6D9D3;
    --lavanda-fondo: #DDE3FB;
    --menta: #A9DDC9;
    --sage: #C7E3A0;
    --lavanda-blob: #C9B8ED;
    --indigo: #7B80E8;
    --indigo-oscuro: #6165D1;
    --magenta: #C6437A;
    --texto-oscuro: #2E2B3D;
    --texto-secundario: #6B6780;
    --blanco: #FFFFFF;
    --borde: #E4DCF5;

    --fuente-display: 'Fraunces', Georgia, serif;
    --fuente-cuerpo: 'DM Sans', -apple-system, sans-serif;
}

[data-theme="green"] {
    --rosa: #EAF6EE;
    --lavanda-fondo: #DCF0E2;
    --menta: #8FD1AC;
    --sage: #BFE0A0;
    --lavanda-blob: #A0D9BE;
    --indigo: #3A9670;
    --indigo-oscuro: #2C7857;
    --magenta: #C05A3E;
    --texto-oscuro: #1F3A2C;
    --texto-secundario: #5C7A68;
    --blanco: #FFFFFF;
    --borde: #D3ECDC;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ===== MODO TRANQUILO (accesibilidad) =====
   No apaga TODO el movimiento (eso deja la app sin vida) — solo lo que se
   repite sin parar o puede sentirse caotico: los globos flotando para
   siempre, el confeti, y el rebote del logo/carita. Las animaciones de
   entrada normales (pantallas, tarjetas, notificaciones) se quedan,
   porque son breves y le dan onda a la app sin abrumar. */

[data-tranquilo] .blob,
[data-tranquilo] .logo-marca--flota,
[data-tranquilo] .hero-animo--rebote,
[data-tranquilo] .celebracion-caja {
    animation: none !important;
}

[data-tranquilo] .celebracion-confeti {
    display: none !important;
}

/* Feedback tactil universal: todo lo que se toca "responde" un poco, para que la app
   se sienta viva e interactiva en vez de estatica. */
button:not(:disabled),
a,
.tarjeta-inicio,
.tarjeta-paciente,
.opcion-rol,
.dia-cal:not(.dia-cal--vacio),
.chip-emocion,
.punto-escala10,
.entrada-animo-resumen {
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.12s ease;
}

button:not(:disabled):active,
.tarjeta-inicio:active,
.tarjeta-paciente:active,
.opcion-rol:active,
.dia-cal:not(.dia-cal--vacio):active,
.chip-emocion:active,
.punto-escala10:active,
.entrada-animo-resumen:active {
    transform: scale(0.94);
}

body {
    font-family: var(--fuente-cuerpo);
    color: var(--texto-oscuro);
    background: var(--rosa);
}

.oculta {
    display: none !important;
}

body.alarma-activa {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* ===== DARK MODE ===== */

[data-theme="dark"] {
    --rosa: #1E1B2E;
    --lavanda-fondo: #211F35;
    --blanco: #2A2740;
    --texto-oscuro: #F1EEFB;
    --texto-secundario: #A9A3C4;
    --borde: #3A375A;
    --lavanda-blob: #4B4470;
    --menta: #2C5346;
    --sage: #3A4A2A;
}

[data-theme="dark"] body {
    background: var(--rosa);
}

[data-theme="dark"] .pantalla {
    background: #17151F;
}

[data-theme="green"] body {
    background: var(--rosa);
}

[data-theme="green"] .pantalla {
    background: #F3FAF5;
}

[data-theme="dark"] .tarjeta-auth input,
[data-theme="dark"] .tarjeta input,
[data-theme="dark"] .tarjeta textarea,
[data-theme="dark"] .tarjeta select,
[data-theme="dark"] .modal-caja input,
[data-theme="dark"] .item-historial {
    background: #221F35;
    color: var(--texto-oscuro);
}

[data-theme="dark"] .acciones button {
    background: #322F4D;
    color: var(--texto-oscuro);
}

[data-theme="dark"] .btn-borrar {
    background: #4A2434 !important;
    color: #F4A6C0 !important;
}

[data-theme="dark"] .badge-recurrencia {
    background: #2C2A45;
    color: #C6C4FF;
}

[data-theme="dark"] .blob {
    opacity: 0.35;
}

[data-theme="dark"] .dropdown-item:hover {
    background: #2C2A45;
}

[data-theme="dark"] .tarjeta-inicio--indigo .tarjeta-inicio-badge { background: #2C2A45; color: #A8AEFF; }
[data-theme="dark"] .tarjeta-inicio--menta .tarjeta-inicio-badge { background: #1F3A2E; color: #7DCBA5; }
[data-theme="dark"] .tarjeta-inicio--lavanda .tarjeta-inicio-badge { background: #2E2A47; color: #C4B0F5; }
[data-theme="dark"] .tarjeta-inicio--rosa .tarjeta-inicio-badge { background: #3A2530; color: #E88FA6; }

[data-theme="dark"] .tabs-paciente {
    background: #221F35;
}

[data-theme="dark"] .tab-paciente--activo {
    background: #34304F;
    color: #C6C4FF;
}

[data-theme="dark"] .item-diario {
    background: #221F35;
}

[data-theme="dark"] .item-logro,
[data-theme="dark"] .item-ejercicio {
    background: #221F35;
}

[data-theme="dark"] .stat-card {
    background: #221F35;
}

[data-theme="dark"] .dia-calendario {
    background: #2C2A45;
}

[data-theme="dark"] .dia-calendario--activo {
    background: var(--menta);
    color: var(--blanco);
}

[data-theme="dark"] .anillo-progreso-fondo {
    stroke: #2C2A45;
}

[data-theme="dark"] .opcion-rol {
    background: #221F35;
    border-color: #3A375A;
}

[data-theme="dark"] .opcion-rol-icono {
    background: #2C2A45;
    color: #A8AEFF;
}

[data-theme="dark"] .input-con-icono input {
    background: #221F35;
}

[data-theme="dark"] .estado-vacio-icono {
    background: #2C2A45;
}

[data-theme="dark"] .faq-icono {
    background: #2C2A45;
    color: #A8AEFF;
}

[data-theme="dark"] .burbuja-mensaje {
    background: #221F35;
}

[data-theme="dark"] .burbuja-mensaje--propia {
    background: var(--indigo);
    color: var(--blanco);
}

[data-theme="dark"] .lista-mensajes {
    background: rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .fotos-del-dia {
    border-top-color: #3A375A;
}

[data-theme="dark"] .foto-del-dia-item {
    background: #221F35;
}

[data-theme="dark"] .btn-editar-item {
    background: #2C2A45;
    color: #A8AEFF;
}

[data-theme="dark"] .archivo-info {
    background: #2C2A45;
}

[data-theme="dark"] .badge-estado-tarea {
    background: #2C2A45;
    color: var(--texto-secundario);
}

[data-theme="dark"] .badge-estado-tarea--hecha,
[data-theme="dark"] .btn-toggle-tarea--hecho {
    background: #1F3A2E;
    color: #7DCBA5;
}

[data-theme="dark"] .btn-toggle-tarea {
    background: #2C2A45;
    color: #A8AEFF;
}

[data-theme="dark"] .form-chat {
    background: #221F35;
}

[data-theme="dark"] .form-chat input {
    color: var(--texto-oscuro);
}

[data-theme="dark"] .btn-chat-mini {
    background: #2C2A45;
    color: #A8AEFF;
}

[data-theme="dark"] .btn-cal-nav {
    background: #2C2A45;
    color: #A8AEFF;
}

[data-theme="dark"] .dia-cal:hover {
    background: #2C2A45;
}

[data-theme="dark"] .tarjeta-apoyo {
    background: linear-gradient(135deg, #221F35, #2E2A1F);
    border-color: #4A3E20;
}

[data-theme="dark"] .faq-icono--dorado {
    background: #3A331F;
    color: #E0B65C;
}

[data-theme="dark"] .tarjeta-invitacion {
    background: linear-gradient(135deg, #221F35, #2C2A45);
}

[data-theme="dark"] .invitacion-icono {
    background: #2C2A45;
    color: #A8AEFF;
}

[data-theme="dark"] .codigo-caja {
    background: #1A1826;
}

[data-theme="dark"] .tarjeta-inicio--dorado .tarjeta-inicio-badge {
    background: #3A331F;
    color: #E0B65C;
}

/* ===== BOTON FLOTANTE DE CAMBIO DE TEMA ===== */

.btn-toggle-tema {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--blanco);
    box-shadow: 0 8px 20px rgba(46, 43, 61, 0.18);
    font-size: 20px;
    cursor: pointer;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.btn-toggle-tema:hover {
    transform: scale(1.08);
}

.btn-flotante-cafe {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F3C455, #C08A1E);
    box-shadow: 0 8px 20px rgba(192, 138, 30, 0.35);
    font-size: 20px;
    cursor: pointer;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.btn-flotante-cafe:hover {
    transform: scale(1.08);
}

@media (max-width: 380px) {
    .btn-flotante-cafe {
        width: 42px;
        height: 42px;
        bottom: 14px;
        left: 14px;
    }
}

.btn-toggle-idioma {
    position: fixed;
    bottom: 20px;
    right: 78px;
    height: 48px;
    padding: 0 16px;
    border-radius: 24px;
    border: none;
    background: var(--blanco);
    box-shadow: 0 8px 20px rgba(46, 43, 61, 0.18);
    font-size: 13px;
    font-weight: 700;
    color: var(--texto-oscuro);
    cursor: pointer;
    z-index: 50;
    transition: transform 0.15s ease;
}

.btn-toggle-idioma:hover {
    transform: scale(1.05);
}

@media (max-width: 380px) {
    .btn-toggle-idioma {
        right: 64px;
        padding: 0 12px;
        font-size: 12px;
    }
}

/* ===== MENU HAMBURGUESA FLOTANTE ===== */

.menu-hamburguesa-flotante {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 60;
}

.btn-hamburguesa {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--blanco);
    box-shadow: 0 8px 20px rgba(46, 43, 61, 0.18);
    font-size: 20px;
    cursor: pointer;
    color: var(--texto-oscuro);
    transition: transform 0.12s ease;
}

.btn-hamburguesa:hover {
    transform: scale(1.06);
}

.dropdown-menu {
    position: absolute;
    top: 58px;
    right: 0;
    background: var(--blanco);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(46, 43, 61, 0.2);
    padding: 8px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: fade-in-pantalla 0.15s ease;
}

.dropdown-item {
    background: none;
    border: none;
    text-align: left;
    padding: 12px 14px;
    border-radius: 10px;
    font-family: var(--fuente-cuerpo);
    font-size: 14px;
    font-weight: 600;
    color: var(--texto-oscuro);
    cursor: pointer;
}

.dropdown-item:hover {
    background: var(--lavanda-fondo);
}

.dropdown-item--peligro {
    color: var(--magenta);
}

.dropdown-item--peligro:hover {
    background: #FADADD;
}

/* ===== ESTADO VACIO ===== */

.estado-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 16px;
    gap: 12px;
    animation: item-aparece 0.3s ease both;
}

.estado-vacio-icono {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--lavanda-fondo);
    color: var(--texto-secundario);
    display: flex;
    align-items: center;
    justify-content: center;
}

.estado-vacio-icono svg {
    width: 26px;
    height: 26px;
}

.estado-vacio p {
    max-width: 260px;
}

/* ===== TARJETAS DE AYUDA (FAQ) ===== */

.tarjeta-faq {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.faq-icono {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: var(--lavanda-fondo);
    color: var(--indigo);
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-icono svg {
    width: 20px;
    height: 20px;
}

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

.contenedor-chat {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding-bottom: 84px;
}

.header-detalle-paciente {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 20px 58px 16px 0;
}

.btn-chat-mini {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: none;
    background: var(--lavanda-fondo);
    color: var(--indigo);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.btn-chat-mini svg {
    width: 18px;
    height: 18px;
}

.btn-chat-mini:hover {
    background: var(--indigo);
    color: var(--blanco);
    transform: scale(1.08);
}

.lista-mensajes {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    margin-bottom: 12px;
}

.lista-mensajes .estado-vacio {
    margin: auto;
}

.fila-mensaje {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    align-self: flex-start;
    max-width: 85%;
}

.fila-mensaje--propia {
    align-self: flex-end;
    max-width: 78%;
    justify-content: flex-end;
}

.avatar-chat {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    overflow: hidden;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-inicial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fuente-display);
    font-weight: 600;
    color: var(--blanco);
    font-size: 12px;
}

/* ===== FOTO DE PERFIL PROPIA ===== */

.tarjeta-foto-perfil {
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.avatar-perfil-propio {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(46, 43, 61, 0.1);
}

.avatar-perfil-propio .avatar-inicial {
    font-size: 28px;
}

.acciones-foto-perfil {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.acciones-foto-perfil .btn-indigo {
    width: auto;
    padding: 10px 18px;
    font-size: 13px;
}

.burbuja-mensaje {
    min-width: 0;
    background: var(--blanco);
    border-radius: 16px 16px 16px 4px;
    padding: 10px 14px;
    box-shadow: 0 4px 14px rgba(46, 43, 61, 0.06);
    animation: item-aparece 0.2s ease both;
}

.burbuja-mensaje p {
    font-size: 14px;
    word-break: break-word;
}

.burbuja-mensaje small {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: var(--texto-secundario);
}

.burbuja-mensaje--propia {
    background: var(--indigo);
    color: var(--blanco);
    border-radius: 16px 16px 4px 16px;
    align-self: flex-end;
}

.burbuja-mensaje--propia small {
    color: rgba(255, 255, 255, 0.75);
}

.form-chat {
    display: flex;
    gap: 8px;
    background: var(--blanco);
    border-radius: 26px;
    padding: 6px 6px 6px 18px;
    box-shadow: 0 8px 24px rgba(46, 43, 61, 0.08);
}

.form-chat input {
    flex: 1;
    border: none;
    background: none;
    font-family: var(--fuente-cuerpo);
    font-size: 16px;
    color: var(--texto-oscuro);
}

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

.btn-enviar-mensaje {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    border: none;
    background: var(--indigo);
    color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.btn-enviar-mensaje svg {
    width: 18px;
    height: 18px;
}

.btn-enviar-mensaje:hover {
    background: var(--indigo-oscuro);
}

.btn-enviar-mensaje:active {
    transform: scale(0.92);
}

.tarjeta-apoyo {
    background: linear-gradient(135deg, var(--blanco), #FFFBF0);
    border: 1px solid #F3E4B8;
}

.faq-icono--dorado {
    background: #FBF0D9;
    color: #C08A1E;
}

.btn-apoyo {
    display: inline-block;
    width: auto;
    text-decoration: none;
    background: #C08A1E;
    padding: 10px 18px;
    font-size: 14px;
}

.btn-apoyo:hover {
    background: #A3730F;
}

/* ===== PANTALLA DE INICIO ===== */

.pantalla-inicio {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #FDEAF0 0%, #F0EBFB 40%, #E9F5F0 100%);
}

[data-theme="dark"] .pantalla-inicio {
    background: linear-gradient(160deg, #241B29 0%, #1E1B33 50%, #191E2E 100%);
}

.fondo-indigo {
    background: linear-gradient(160deg, #EEF0FE 0%, #F7F5FC 100%);
}

.fondo-menta {
    background: linear-gradient(160deg, #EAF7F0 0%, #F5FBF7 100%);
}

.fondo-dorado {
    background: linear-gradient(160deg, #FDF4E3 0%, #FBF8F0 100%);
}

.fondo-lavanda {
    background: linear-gradient(160deg, #F2ECFB 0%, #F8F5FC 100%);
}

[data-theme="dark"] .fondo-indigo,
[data-theme="dark"] .fondo-menta,
[data-theme="dark"] .fondo-dorado,
[data-theme="dark"] .fondo-lavanda {
    background: linear-gradient(160deg, #1C1A2C 0%, #17151F 100%);
}

.pantalla-inicio .contenedor-app {
    position: relative;
    z-index: 1;
}

.header-inicio {
    margin-bottom: 28px;
    padding-top: 12px;
}

.header-inicio h1 {
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: 30px;
    color: var(--texto-oscuro);
    margin-bottom: 6px;
}

.subtitulo-inicio {
    color: var(--texto-secundario);
    font-size: 15px;
}

.badge-racha-inicio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    background: linear-gradient(135deg, #FDF0E4, #FCE4E9);
    color: #C0577D;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 20px;
}

.banner-proxima-cita {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 16px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-oscuro);
    position: relative;
    z-index: 1;
}

.banner-proxima-cita svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    color: var(--indigo);
}

[data-theme="dark"] .banner-proxima-cita {
    background: rgba(34, 31, 53, 0.7);
}

.tarjeta-cita {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0;
    flex-wrap: wrap;
}

.acciones-cita {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cita-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--texto-secundario);
    flex: 1;
}

.cita-info svg {
    color: var(--indigo);
    min-width: 20px;
}

.badge-racha-inicio svg {
    width: 16px;
    height: 16px;
    color: #E3813E;
}

[data-theme="dark"] .badge-racha-inicio {
    background: linear-gradient(135deg, #362a20, #362026);
    color: #E88FA6;
}

.grid-inicio {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.tarjeta-inicio {
    background: var(--blanco);
    border: none;
    border-radius: 20px;
    padding: 18px 20px;
    box-shadow: 0 8px 30px rgba(46, 43, 61, 0.07);
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    animation: item-aparece 0.35s ease both;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tarjeta-inicio:nth-child(2) { animation-delay: 0.06s; }
.tarjeta-inicio:nth-child(3) { animation-delay: 0.12s; }
.tarjeta-inicio:nth-child(4) { animation-delay: 0.18s; }
.tarjeta-inicio:nth-child(5) { animation-delay: 0.24s; }
.tarjeta-inicio:nth-child(6) { animation-delay: 0.30s; }
.tarjeta-inicio:nth-child(7) { animation-delay: 0.36s; }

.tarjeta-inicio:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(46, 43, 61, 0.13);
}

.tarjeta-inicio-badge {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.tarjeta-inicio-badge svg {
    width: 24px;
    height: 24px;
}

.tarjeta-inicio--indigo .tarjeta-inicio-badge { background: var(--lavanda-fondo); color: var(--indigo); box-shadow: 0 6px 14px rgba(123, 128, 232, 0.25); }
.tarjeta-inicio--menta .tarjeta-inicio-badge { background: #E3F3EC; color: #3E8E6C; box-shadow: 0 6px 14px rgba(62, 142, 108, 0.2); }
.tarjeta-inicio--lavanda .tarjeta-inicio-badge { background: #EFE8FB; color: #8B6FD9; box-shadow: 0 6px 14px rgba(139, 111, 217, 0.22); }
.tarjeta-inicio--dorado .tarjeta-inicio-badge { background: #FBF0D9; color: #C08A1E; box-shadow: 0 6px 14px rgba(192, 138, 30, 0.2); }
.tarjeta-inicio--rosa .tarjeta-inicio-badge { background: #FCE4E9; color: var(--magenta); box-shadow: 0 6px 14px rgba(198, 67, 122, 0.22); }

.tab-paciente svg {
    width: 20px;
    height: 20px;
}

.item-logro-icono svg {
    width: 22px;
    height: 22px;
    color: #C08A1E;
}

.tarjeta-inicio-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.tarjeta-inicio-titulo {
    font-family: var(--fuente-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--texto-oscuro);
}

.tarjeta-inicio-desc {
    font-size: 13px;
    color: var(--texto-secundario);
}

.tarjeta-inicio-flecha {
    font-size: 20px;
    color: var(--texto-secundario);
    flex-shrink: 0;
}

/* ===== ANIMACIONES ===== */

@keyframes fade-in-pantalla {
    from { opacity: 0; transform: translateY(14px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.pantalla-entrando {
    animation: fade-in-pantalla 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes item-aparece {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

#listaRecordatorios li,
#listaRecordatoriosPaciente li,
#detalleDiaCalendario li,
.tarjeta-paciente {
    animation: item-aparece 0.3s ease both;
}

.btn-indigo:active:not(:disabled) {
    transform: scale(0.98);
}

.tarjeta-paciente,
.btn-toggle-tema {
    transition: transform 0.12s ease, background 0.15s ease;
}

/* ===== ICONOS INLINE (dentro de botones y badges) ===== */

.icono-inline {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: -3px;
    margin-right: 6px;
}

.icono-racha {
    width: 20px;
    height: 20px;
    vertical-align: -4px;
    color: #E3813E;
}

.badge-recurrencia {
    display: inline-flex;
    align-items: center;
}

.dropdown-item {
    display: flex;
    align-items: center;
}

/* ===== SPINNER DE CARGA ===== */

.spinner-carga {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px 10px;
    color: var(--texto-secundario);
    font-size: 14px;
}

.spinner-circulo {
    width: 20px;
    height: 20px;
    border: 3px solid var(--borde);
    border-top-color: var(--indigo);
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}

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

.spinner-boton {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girar 0.6s linear infinite;
    margin-right: 8px;
    vertical-align: -2px;
}

/* ===== PANTALLAS DE AUTENTICACION (con blobs) ===== */

.pantalla-blobs {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 24px;
}

.pantalla-blobs--rosa { background: var(--rosa); }
.pantalla-blobs--lavanda { background: var(--lavanda-fondo); }

.blob {
    position: absolute;
    border-radius: 50%;
    opacity: 0.85;
    filter: blur(0.5px);
}

.blob--menta {
    width: 260px;
    height: 260px;
    background: var(--menta);
    top: 8%;
    right: -60px;
    animation: flotar-a 19s ease-in-out infinite;
}

.blob--lavanda {
    width: 200px;
    height: 200px;
    background: var(--lavanda-blob);
    bottom: 10%;
    left: -50px;
    animation: flotar-b 23s ease-in-out infinite;
}

.blob--rosa {
    width: 180px;
    height: 180px;
    background: var(--magenta);
    opacity: 0.35;
    top: 45%;
    right: 10%;
    animation: flotar-a 27s ease-in-out infinite reverse;
}

@keyframes flotar-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-35px, 45px) scale(1.05); }
    50% { transform: translate(20px, 90px) scale(0.95); }
    75% { transform: translate(-20px, 35px) scale(1.03); }
}

@keyframes flotar-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -40px) scale(1.04); }
    50% { transform: translate(-25px, -80px) scale(0.96); }
    75% { transform: translate(18px, -30px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
    .blob--menta,
    .blob--lavanda {
        animation: none;
    }
}

.tarjeta-auth {
    position: relative;
    z-index: 1;
    background: var(--blanco);
    border-radius: 24px;
    padding: 40px 32px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(46, 43, 61, 0.12);
    animation: auth-entrada 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes auth-entrada {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.logo-marca {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 18px;
    box-shadow: 0 6px 16px rgba(46, 43, 61, 0.15);
}

.logo-marca img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.titulo-form {
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: 28px;
    color: var(--texto-oscuro);
    margin-bottom: 24px;
}

.tarjeta-auth form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tarjeta-auth input {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--borde);
    font-family: var(--fuente-cuerpo);
    font-size: 16px;
    background: #FBFAFE;
    width: 100%;
}

.tarjeta-auth input:focus {
    outline: none;
    border-color: var(--indigo);
}

.input-con-icono {
    position: relative;
}

.input-con-icono svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--texto-secundario);
    pointer-events: none;
}

.input-con-icono input {
    padding-left: 42px !important;
}

.opcion-rol {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: #FBFAFE;
    border: 1.5px solid var(--borde);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    cursor: pointer;
    text-align: left;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.opcion-rol:hover {
    border-color: var(--indigo);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(123, 128, 232, 0.15);
}

.opcion-rol-icono {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: var(--lavanda-fondo);
    color: var(--indigo);
    display: flex;
    align-items: center;
    justify-content: center;
}

.opcion-rol-icono svg {
    width: 20px;
    height: 20px;
}

.opcion-rol-texto {
    flex: 1;
}

.opcion-rol-titulo {
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--texto-oscuro);
}

.texto-secundario {
    color: var(--texto-secundario);
    font-size: 14px;
    margin-top: 20px;
    text-align: center;
}

.texto-secundario a {
    color: var(--indigo-oscuro);
    font-weight: 600;
    text-decoration: none;
}

/* ===== BOTONES ===== */

.btn-indigo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--indigo);
    color: white;
    border: none;
    padding: 14px 20px;
    border-radius: 12px;
    font-family: var(--fuente-cuerpo);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease;
    width: 100%;
}

.btn-indigo:hover {
    background: var(--indigo-oscuro);
}

.btn-indigo--outline {
    background: transparent;
    color: var(--indigo);
    border: 1.5px solid var(--indigo);
    margin-top: 10px;
}

.btn-indigo--outline:hover {
    background: rgba(123, 128, 232, 0.08);
}

.btn-texto {
    background: none;
    border: none;
    color: var(--texto-secundario);
    font-family: var(--fuente-cuerpo);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.btn-notif {
    background: var(--sage);
    color: var(--texto-oscuro);
    border: none;
    padding: 14px 16px;
    border-radius: 12px;
    font-family: var(--fuente-cuerpo);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 24px;
    width: 100%;
}

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

/* ===== APP PRINCIPAL (paciente y terapeuta) ===== */

.pantalla {
    min-height: 100vh;
    background: #FAF8FC;
}

.contenedor-app {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 20px 70px;
}

.header-app {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 10px;
    padding-right: 58px;
}

.header-app h1 {
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: 26px;
    color: var(--texto-oscuro);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 380px) {
    .header-app h1 {
        font-size: 21px;
    }
    .header-app {
        padding-right: 50px;
    }
    .btn-toggle-tema {
        width: 42px;
        height: 42px;
        bottom: 14px;
        right: 14px;
    }
    .btn-hamburguesa {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
    .menu-hamburguesa-flotante {
        top: 14px;
        right: 14px;
    }
    .contenedor-app {
        padding: 32px 14px 70px;
    }
    .stat-numero {
        font-size: 18px;
    }
    .stat-card {
        padding: 14px 6px;
    }
    .dia-cal {
        font-size: 11px;
    }
    .fila-mensaje {
        max-width: 90%;
    }
    .fila-mensaje--propia {
        max-width: 82%;
    }
    .header-detalle-paciente {
        margin-right: 50px;
    }
    .contenedor-chat {
        padding-bottom: 74px;
    }
    .tarjeta-inicio-badge {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 14px;
    }
    .tarjeta-inicio-badge svg {
        width: 20px;
        height: 20px;
    }
    .tarjeta-inicio {
        padding: 16px;
        gap: 12px;
    }
    .tabs-paciente {
        gap: 4px;
        padding: 4px;
    }
    .tab-paciente {
        padding: 8px 4px;
    }
}

.tarjeta {
    background: var(--blanco);
    border-radius: 20px;
    padding: 26px;
    margin-bottom: 28px;
    box-shadow: 0 8px 30px rgba(46, 43, 61, 0.06);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tarjeta input,
.tarjeta textarea,
.tarjeta select {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--borde);
    font-family: var(--fuente-cuerpo);
    font-size: 16px;
    background: #FBFAFE;
}

.tarjeta input:focus,
.tarjeta textarea:focus,
.tarjeta select:focus {
    outline: none;
    border-color: var(--indigo);
}

/* ===== LISTA DE RECORDATORIOS (estilo nota) ===== */

#listaRecordatorios,
#listaRecordatoriosPaciente,
#detalleDiaCalendario ul {
    list-style: none;
}

#listaRecordatorios li,
#listaRecordatoriosPaciente li,
#detalleDiaCalendario li {
    background: var(--blanco);
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 16px;
    box-shadow: 0 6px 20px rgba(46, 43, 61, 0.05);
    border-left: 4px solid var(--indigo);
    position: relative;
}

#listaRecordatorios li.completado,
#listaRecordatoriosPaciente li.completado,
#detalleDiaCalendario li.completado {
    border-left-color: var(--menta);
    opacity: 0.6;
}

#listaRecordatorios li h3,
#listaRecordatoriosPaciente li h3,
#detalleDiaCalendario li h3 {
    font-family: var(--fuente-display);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 6px;
}

.completado h3 {
    text-decoration: line-through;
}

#listaRecordatorios li.incumplido,
#listaRecordatoriosPaciente li.incumplido,
#detalleDiaCalendario li.incumplido {
    border-left-color: var(--magenta);
    background: #FFF5F7;
}

[data-theme="dark"] #listaRecordatorios li.incumplido,
[data-theme="dark"] #listaRecordatoriosPaciente li.incumplido,
[data-theme="dark"] #detalleDiaCalendario li.incumplido {
    background: #2E1F28;
}

.badge-incumplido {
    display: inline-block;
    background: #FADADD;
    color: var(--magenta);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    margin-top: 6px;
}

.badge-bloqueado {
    display: inline-block;
    background: var(--lavanda-fondo);
    color: var(--texto-secundario);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    margin-top: 6px;
    margin-left: 6px;
}

[data-theme="dark"] .badge-bloqueado {
    background: #2C2A45;
}

.checkbox-bloqueado {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--texto-secundario);
    cursor: pointer;
    padding: 4px 0;
}

.checkbox-bloqueado input {
    width: auto;
    margin: 0;
}

#listaRecordatorios li p,
#listaRecordatoriosPaciente li p,
#detalleDiaCalendario li p {
    color: var(--texto-secundario);
    font-size: 14px;
    margin-bottom: 8px;
    line-height: 1.5;
}

#listaRecordatorios li small,
#listaRecordatoriosPaciente li small,
#detalleDiaCalendario li small {
    color: var(--texto-secundario);
    font-family: 'DM Sans', monospace;
    font-size: 12px;
    letter-spacing: 0.02em;
    display: block;
    margin-bottom: 4px;
}

.acciones {
    margin-top: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ===== VISTA DE CALENDARIO ===== */

.tabs-vista-recordatorios {
    margin-bottom: 16px;
}

.calendario-tarjeta {
    padding: 18px;
    margin-bottom: 16px;
}

.calendario-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.calendario-titulo {
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    color: var(--texto-oscuro);
}

.btn-cal-nav {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--lavanda-fondo);
    color: var(--indigo-oscuro);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.btn-cal-nav:hover {
    background: var(--indigo);
    color: var(--blanco);
}

.calendario-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--texto-secundario);
    margin-bottom: 6px;
}

.calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.dia-cal {
    aspect-ratio: 1;
    border: none;
    background: none;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-oscuro);
    cursor: pointer;
    transition: background 0.15s ease;
}

.dia-cal:hover {
    background: var(--lavanda-fondo);
}

.dia-cal--vacio {
    cursor: default;
    pointer-events: none;
}

.dia-cal--hoy {
    color: var(--indigo-oscuro);
    font-weight: 700;
    box-shadow: inset 0 0 0 2px var(--indigo);
}

.dia-cal--seleccionado {
    background: var(--indigo);
    color: var(--blanco);
    box-shadow: none;
}

.dia-cal--seleccionado.dia-cal--hoy {
    box-shadow: inset 0 0 0 2px var(--blanco);
}

.dia-cal--seleccionado:hover {
    background: var(--indigo-oscuro);
}

.dia-cal-punto {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--magenta);
}

.dia-cal-punto--completo {
    background: var(--menta);
}

[data-theme="dark"] .dia-cal-punto--completo {
    background: #7DCBA5;
}

/* ===== FOTOS DEL DIA (calendario) ===== */

.fotos-del-dia {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--borde);
}

.fotos-del-dia-titulo {
    font-family: var(--fuente-display);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--texto-oscuro);
}

.foto-del-dia-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--blanco);
    border-radius: 14px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(46, 43, 61, 0.05);
}

.foto-del-dia-item .foto-confirmacion {
    width: 56px;
    height: 56px;
    max-width: 56px;
    border-radius: 10px;
    object-fit: cover;
    margin: 0;
}

.fotos-del-dia-nombre {
    font-size: 14px;
    font-weight: 600;
    color: var(--texto-oscuro);
}

.acciones button {
    flex: 1;
    min-width: 80px;
    font-size: 12px;
    font-weight: 700;
    padding: 8px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: var(--fuente-cuerpo);
    background: var(--lavanda-fondo);
    color: var(--texto-oscuro);
}

.acciones .btn-borrar {
    background: #FADADD;
    color: var(--magenta);
}

/* ===== PANEL TERAPEUTA ===== */

.tarjeta-invitacion {
    background: linear-gradient(135deg, var(--blanco), var(--lavanda-fondo));
}

.invitacion-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.invitacion-icono {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: var(--blanco);
    color: var(--indigo);
    display: flex;
    align-items: center;
    justify-content: center;
}

.invitacion-icono svg {
    width: 18px;
    height: 18px;
}

.codigo-caja {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--blanco);
    border: 1.5px dashed var(--indigo);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 14px;
}

#codigoGenerado {
    font-family: 'DM Sans', monospace;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.15em;
    color: var(--indigo-oscuro);
}

.btn-copiar-codigo {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: var(--lavanda-fondo);
    color: var(--indigo-oscuro);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.btn-copiar-codigo svg {
    width: 16px;
    height: 16px;
}

.btn-copiar-codigo:hover {
    background: var(--indigo);
    color: var(--blanco);
}

.btn-copiar-codigo--copiado {
    background: var(--menta) !important;
    color: var(--blanco) !important;
    transform: scale(1.1);
}

.tarjeta-paciente {
    background: var(--blanco);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 14px;
    box-shadow: 0 6px 20px rgba(46, 43, 61, 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tarjeta-paciente:hover {
    transform: translateX(4px);
    box-shadow: 0 10px 26px rgba(46, 43, 61, 0.1);
}

.avatar-paciente {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.15s ease;
}

.avatar-paciente .avatar-inicial {
    font-size: 17px;
}

.tarjeta-paciente:hover .avatar-paciente {
    transform: scale(1.08);
}

.avatar--indigo { background: linear-gradient(135deg, var(--indigo), var(--indigo-oscuro)); }
.avatar--menta { background: linear-gradient(135deg, #6FC29A, #4A8F6E); }
.avatar--lavanda { background: linear-gradient(135deg, #B49DE8, #8468C4); }
.avatar--magenta { background: linear-gradient(135deg, #E06D95, var(--magenta)); }

.tarjeta-paciente-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tarjeta-paciente h3 {
    font-family: var(--fuente-display);
    font-size: 16px;
    font-weight: 600;
}

.tarjeta-paciente span {
    color: var(--texto-secundario);
    font-size: 13px;
}

.badges-atencion-cont {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.badge-atencion {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.badge-atencion--incumplido {
    background: #FADADD;
    color: var(--magenta);
}

.badge-atencion--mensaje {
    background: var(--lavanda-fondo);
    color: var(--indigo-oscuro);
}

[data-theme="dark"] .badge-atencion--incumplido {
    background: #3A2530;
    color: #E88FA6;
}

[data-theme="dark"] .badge-atencion--mensaje {
    background: #2C2A45;
    color: #A8AEFF;
}

/* ===== PESTAÑAS DE PACIENTE (recordatorios / diario) ===== */

.tabs-paciente {
    display: flex;
    gap: 8px;
    margin: 20px 0 16px;
    background: var(--lavanda-fondo);
    padding: 5px;
    border-radius: 14px;
}

.tab-paciente {
    flex: 1;
    background: none;
    border: none;
    padding: 10px;
    border-radius: 10px;
    font-family: var(--fuente-cuerpo);
    font-weight: 700;
    font-size: 18px;
    color: var(--texto-secundario);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.tab-paciente--activo {
    background: var(--blanco);
    color: var(--indigo-oscuro);
    box-shadow: 0 4px 12px rgba(46, 43, 61, 0.08);
    animation: tab-pop 0.25s ease;
}

@keyframes tab-pop {
    0% { transform: scale(0.9); }
    60% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* ===== ENTRADAS DEL DIARIO ===== */

.pregunta-guia-form {
    font-family: var(--fuente-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--indigo-oscuro);
}

.item-diario {
    background: var(--blanco);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 14px;
    box-shadow: 0 6px 20px rgba(46, 43, 61, 0.05);
    border-left: 4px solid var(--sage);
}

.item-diario p {
    margin-top: 6px;
    font-size: 14px;
    white-space: pre-wrap;
}

.pregunta-diario {
    font-weight: 700;
    color: var(--indigo-oscuro);
    margin-top: 10px !important;
}

.btn-borrar-diario {
    margin-top: 10px;
    background: #FADADD;
    color: var(--magenta);
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease;
}

/* ===== LOGROS Y EJERCICIOS ===== */

.item-logro {
    background: linear-gradient(135deg, var(--blanco), #FFFBF0);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 14px;
    box-shadow: 0 6px 20px rgba(46, 43, 61, 0.06);
    border: 1px solid #F3E4B8;
    display: flex;
    align-items: center;
    gap: 14px;
    animation: item-aparece 0.3s ease both;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.item-logro:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(46, 43, 61, 0.1);
}

.item-logro-icono {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: #FBF0D9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-logro p {
    font-size: 14px;
    font-weight: 600;
}

.item-ejercicio {
    background: var(--blanco);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 14px;
    box-shadow: 0 6px 20px rgba(46, 43, 61, 0.05);
    border-left: 4px solid var(--menta);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    animation: item-aparece 0.3s ease both;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.item-ejercicio:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(46, 43, 61, 0.09);
}

.item-ejercicio h3 {
    font-family: var(--fuente-display);
    font-size: 16px;
    font-weight: 600;
}

.item-ejercicio--hecho {
    border-left-color: var(--indigo);
    opacity: 0.85;
}

.item-ejercicio-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.acciones-item-terapeuta {
    display: flex;
    gap: 8px;
}

.btn-editar-item {
    background: var(--lavanda-fondo);
    color: var(--indigo-oscuro);
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease;
}

.badge-estado-tarea {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--lavanda-fondo);
    color: var(--texto-secundario);
    width: fit-content;
    margin-top: 4px;
}

.badge-estado-tarea--hecha {
    background: #DCF0E5;
    color: #3E8E6C;
}

.btn-toggle-tarea {
    background: var(--lavanda-fondo);
    color: var(--indigo-oscuro);
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-toggle-tarea:hover {
    background: var(--indigo);
    color: var(--blanco);
}

.btn-toggle-tarea--hecho {
    background: #DCF0E5;
    color: #3E8E6C;
}

.link-ejercicio {
    color: var(--indigo-oscuro);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    display: flex;
    align-items: center;
}

/* ===== NOTAS PRIVADAS (terapeuta) ===== */

.tarjeta-notas-privadas {
    background: linear-gradient(135deg, var(--blanco), #FBF6F0);
}

.aviso-privado {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FBF0D9;
    color: #8A6A1E;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 14px;
}

[data-theme="dark"] .aviso-privado {
    background: #3A331F;
    color: #E0B65C;
}

.aviso-privado svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
}

#formCrearNota {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.item-nota-privada {
    background: var(--blanco);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(46, 43, 61, 0.05);
    border-left: 4px solid #D9A64A;
}

[data-theme="dark"] .item-nota-privada {
    background: #221F35;
}

.item-nota-privada p {
    font-size: 14px;
    color: var(--texto-oscuro);
    line-height: 1.5;
    margin-bottom: 10px;
    white-space: pre-wrap;
}

.item-nota-privada-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ===== RUEDA DE EMOCIONES ===== */

.pantalla-rueda-blobs {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #F3EFFB 0%, #EAF6EE 50%, #FDEAF0 100%);
}

[data-theme="dark"] .pantalla-rueda-blobs {
    background: linear-gradient(160deg, #1E1B2E 0%, #17151F 50%, #241B29 100%);
}

.tarjeta-rueda {
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
}

[data-theme="dark"] .tarjeta-rueda {
    background: rgba(34, 31, 53, 0.9);
}

.svg-rueda {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    display: block;
    animation: item-aparece 0.4s ease both;
}

.cuna-rueda {
    cursor: pointer;
    stroke: var(--blanco);
    stroke-width: 3;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.18s ease;
    transform-origin: 150px 150px;
}

.cuna-rueda:hover,
.cuna-rueda:active {
    transform: scale(1.045);
    filter: brightness(1.06);
}

.texto-cuna-rueda {
    font-family: var(--fuente-cuerpo);
    font-weight: 700;
    font-size: 13px;
    fill: #2E2B3D;
    text-anchor: middle;
    pointer-events: none;
}

.vista-rueda-central {
    width: 100%;
}

.miga-rueda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 13px;
}

.miga-rueda-item {
    color: var(--indigo);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

.miga-rueda-flecha {
    color: var(--texto-secundario);
}

.vista-rueda-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.chip-rueda {
    border: none;
    padding: 12px 18px;
    border-radius: 20px;
    font-family: var(--fuente-cuerpo);
    font-weight: 700;
    font-size: 14px;
    color: #2E2B3D;
    cursor: pointer;
    transition: transform 0.12s ease;
}

.chip-rueda:hover {
    transform: translateY(-2px);
}

.resultado-rueda {
    text-align: center;
    padding: 20px 0;
}

.resultado-rueda-label {
    font-size: 14px;
    color: var(--texto-secundario);
    margin-bottom: 8px;
}

.resultado-rueda-texto {
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: 32px;
    color: var(--indigo-oscuro);
    margin-bottom: 20px;
}

/* ===== MI LISTA DE HOY ===== */

.pantalla-lista-blobs {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #FDF4E3 0%, #FBEFE0 45%, #FDEAF0 100%);
}

[data-theme="dark"] .pantalla-lista-blobs {
    background: linear-gradient(160deg, #241F1B 0%, #1E1B29 50%, #241B29 100%);
}

.tarjeta-lista-tareas {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
}

[data-theme="dark"] .tarjeta-lista-tareas {
    background: rgba(34, 31, 53, 0.9);
}

.item-tarea-lista {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--blanco);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(46, 43, 61, 0.05);
    animation: item-aparece 0.3s ease both;
}

[data-theme="dark"] .item-tarea-lista {
    background: #221F35;
}

.check-tarea-lista {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    border: 2px solid var(--borde);
    background: none;
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.check-tarea-lista svg {
    width: 14px;
    height: 14px;
}

.item-tarea-lista--hecha .check-tarea-lista {
    background: #4A8F6E;
    border-color: #4A8F6E;
    color: var(--blanco);
}

.texto-tarea-lista {
    flex: 1;
    font-size: 14px;
    color: var(--texto-oscuro);
}

.item-tarea-lista--hecha .texto-tarea-lista {
    text-decoration: line-through;
    color: var(--texto-secundario);
}

.grupo-tareas-lista {
    margin-bottom: 20px;
}

.titulo-grupo-tareas {
    font-family: var(--fuente-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--texto-secundario);
    margin-bottom: 10px;
    text-transform: capitalize;
}

.check-tarea-lista:disabled {
    cursor: default;
    opacity: 0.7;
}

.btn-borrar-tarea-lista {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--texto-secundario);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-borrar-tarea-lista svg {
    width: 14px;
    height: 14px;
}

.btn-borrar-tarea-lista:hover {
    color: var(--magenta);
}

/* ===== CALMA (respiracion guiada + grounding) ===== */

.pantalla-calma-blobs {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #E6F7ED 0%, #E8F3FF 50%, #F0EBFB 100%);
}

[data-theme="dark"] .pantalla-calma-blobs {
    background: linear-gradient(160deg, #16261F 0%, #17151F 50%, #1E1B2E 100%);
}

.tarjeta-respiracion,
.tarjeta-grounding {
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
}

[data-theme="dark"] .tarjeta-respiracion,
[data-theme="dark"] .tarjeta-grounding {
    background: rgba(34, 31, 53, 0.9);
}

.tarjeta-respiracion .seccion-animo-ayuda,
.tarjeta-grounding .seccion-animo-ayuda {
    text-align: center;
    margin-bottom: 20px;
}

.circulo-respiracion-cont {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    margin-bottom: 20px;
}

.circulo-respiracion {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6FC29A, #4A8F6E);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blanco);
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 10px 40px rgba(74, 143, 110, 0.35);
    transition: transform 4s ease-in-out;
    transform: scale(1);
}

.circulo-respiracion--inhala {
    transform: scale(1.55);
    transition: transform 4s ease-in-out;
}

.circulo-respiracion--sosten {
    transform: scale(1.55);
    transition: transform 0.3s ease;
}

.circulo-respiracion--exhala {
    transform: scale(1);
    transition: transform 4s ease-in-out;
}

.circulo-respiracion--relajate {
    transform: scale(1);
    transition: transform 0.3s ease;
}

.paso-grounding {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: item-aparece 0.3s ease both;
}

.grounding-numero {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6FC29A, #4A8F6E);
    color: var(--blanco);
    font-family: var(--fuente-display);
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grounding-instruccion {
    font-size: 16px;
    color: var(--texto-oscuro);
}

.grounding-final {
    font-size: 15px;
    font-weight: 600;
    color: #3E8E6C;
    margin-bottom: 14px;
}

.frase-defusion {
    font-family: var(--fuente-display);
    font-style: italic;
    font-size: 17px;
    color: var(--indigo-oscuro);
    background: var(--lavanda-fondo);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

/* ===== BIENVENIDA (instalar la app) ===== */

.pantalla-bienvenida-blobs {
    position: relative;
    overflow: hidden;
    background: linear-gradient(165deg, #E6F7ED 0%, #CDEEDD 45%, #A8E0C6 100%);
}

[data-theme="dark"] .pantalla-bienvenida-blobs {
    background: linear-gradient(165deg, #16261F 0%, #12241D 50%, #0F2019 100%);
}

.globo {
    position: absolute;
    width: 90px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

.globo--1 {
    top: 6%;
    left: 6%;
    animation: globo-flota-1 9s ease-in-out infinite;
}

.globo--2 {
    top: 12%;
    right: 8%;
    width: 75px;
    animation: globo-flota-2 11s ease-in-out infinite 0.5s;
}

.globo--3 {
    bottom: 8%;
    left: 10%;
    width: 65px;
    animation: globo-flota-1 10s ease-in-out infinite 1s;
}

.globo--4 {
    bottom: 14%;
    right: 10%;
    width: 80px;
    animation: globo-flota-2 8.5s ease-in-out infinite 0.3s;
}

@keyframes globo-flota-1 {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-22px) rotate(3deg); }
}

@keyframes globo-flota-2 {
    0%, 100% { transform: translateY(0) rotate(4deg); }
    50% { transform: translateY(-18px) rotate(-4deg); }
}

@media (max-width: 480px) {
    .globo { width: 60px; }
    .globo--2 { width: 52px; }
    .globo--3 { width: 46px; }
    .globo--4 { width: 56px; }
}

.bienvenida-header {
    text-align: center;
    padding: 30px 10px 24px;
}

.logo-marca--grande {
    width: 76px;
    height: 76px;
    margin: 0 auto 16px;
    animation: bienvenida-logo-entra 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.logo-marca--flota {
    animation: bienvenida-logo-entra 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               logo-flota 4s ease-in-out 0.6s infinite;
}

@keyframes bienvenida-logo-entra {
    from { opacity: 0; transform: scale(0.5) translateY(-20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes logo-flota {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.bienvenida-titulo {
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: 26px;
    color: var(--texto-oscuro);
    margin-bottom: 8px;
    animation: item-aparece 0.5s ease 0.15s both;
}

.bienvenida-subtitulo {
    color: var(--texto-secundario);
    font-size: 14px;
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.5;
    animation: item-aparece 0.5s ease 0.25s both;
}

.tarjeta-bienvenida {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    animation: item-aparece 0.5s ease 0.35s both;
}

[data-theme="dark"] .tarjeta-bienvenida {
    background: rgba(34, 31, 53, 0.9);
}

#btnContinuarBienvenida {
    animation: item-aparece 0.5s ease 0.45s both;
}

.pasos-instalacion {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.paso-instalacion {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    animation: item-aparece 0.35s ease both;
}

.paso-instalacion:nth-child(1) { animation-delay: 0.05s; }
.paso-instalacion:nth-child(2) { animation-delay: 0.12s; }
.paso-instalacion:nth-child(3) { animation-delay: 0.19s; }
.paso-instalacion:nth-child(4) { animation-delay: 0.26s; }

.paso-instalacion-numero {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: var(--lavanda-fondo);
    color: var(--indigo-oscuro);
    font-family: var(--fuente-display);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paso-instalacion p:first-child {
    font-size: 14px;
    color: var(--texto-oscuro);
    margin-bottom: 2px;
}

.paso-instalacion p.texto-secundario {
    font-size: 12px;
    line-height: 1.4;
}

/* ===== TOASTS ===== */

.contenedor-toasts {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: calc(100% - 32px);
    max-width: 400px;
    align-items: center;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--blanco);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 10px 30px rgba(46, 43, 61, 0.18);
    width: 100%;
    animation: toast-entra 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-left: 4px solid var(--indigo);
}

[data-theme="dark"] .toast {
    background: #221F35;
}

.toast--saliendo {
    animation: toast-sale 0.25s ease forwards;
}

@keyframes toast-entra {
    from { opacity: 0; transform: translateY(-16px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-sale {
    to { opacity: 0; transform: translateY(-10px) scale(0.95); }
}

.toast-icono {
    width: 22px;
    height: 22px;
    min-width: 22px;
    display: flex;
}

.toast-icono svg {
    width: 100%;
    height: 100%;
}

.toast-texto {
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-oscuro);
    line-height: 1.4;
}

.toast--error {
    border-left-color: var(--magenta);
}

.toast--error .toast-icono {
    color: var(--magenta);
}

.toast--exito {
    border-left-color: #4A8F6E;
}

.toast--exito .toast-icono {
    color: #4A8F6E;
}

.toast--info {
    border-left-color: var(--indigo);
}

.toast--info .toast-icono {
    color: var(--indigo);
}

/* ===== CELEBRACION ===== */

.overlay-celebracion {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: celebracion-entra 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.overlay-celebracion--saliendo {
    animation: celebracion-sale 0.3s ease forwards;
}

@keyframes celebracion-entra {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes celebracion-sale {
    to { opacity: 0; }
}

.celebracion-caja {
    background: var(--blanco);
    border-radius: 24px;
    padding: 28px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 20px 60px rgba(46, 43, 61, 0.25);
    animation: celebracion-caja-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] .celebracion-caja {
    background: #221F35;
}

@keyframes celebracion-caja-pop {
    0% { transform: scale(0.7); opacity: 0; }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

.celebracion-icono {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4A8F6E, #6FC29A);
    color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
}

.celebracion-icono svg {
    width: 28px;
    height: 28px;
}

.celebracion-texto {
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--texto-oscuro);
}

.celebracion-confeti {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.pieza-confeti {
    position: absolute;
    top: -20px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    animation: confeti-cae 1.4s ease-in forwards;
}

@keyframes confeti-cae {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(var(--rot-final)); opacity: 0; }
}

/* ===== REGISTRO EMOCIONAL ===== */

.pantalla-animo-fondo {
    background: linear-gradient(160deg, #FDEAF0 0%, #F6E7FB 45%, #E8F3FF 100%);
}

[data-theme="dark"] .pantalla-animo-fondo {
    background: linear-gradient(160deg, #241B29 0%, #1E1B33 50%, #191E2E 100%);
}

.hero-animo {
    text-align: center;
    padding: 22px 20px 16px;
}

.hero-animo-cara {
    display: block;
    font-size: 44px;
    margin-bottom: 8px;
}

.hero-animo-texto {
    font-family: var(--fuente-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--texto-secundario);
}

.tarjeta-animo {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    box-shadow: 0 12px 40px rgba(200, 100, 140, 0.12);
    gap: 0;
}

[data-theme="dark"] .tarjeta-animo,
[data-theme="dark"] .tarjeta-grafico-animo {
    background: rgba(34, 31, 53, 0.85);
}

.seccion-animo {
    padding: 18px 0;
    border-bottom: 1px dashed var(--borde);
    border-left: 3px solid transparent;
    padding-left: 14px;
    margin-left: -14px;
}

.seccion-animo:last-of-type {
    border-bottom: none;
    padding-bottom: 6px;
}

.seccion-animo--1 { border-left-color: var(--indigo); }
.seccion-animo--2 { border-left-color: var(--magenta); }
.seccion-animo--3 { border-left-color: #D9A64A; }
.seccion-animo--4 { border-left-color: #4A8F6E; }

.seccion-animo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.seccion-animo-numero {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background: var(--lavanda-fondo);
    color: var(--indigo-oscuro);
    font-family: var(--fuente-display);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seccion-animo--2 .seccion-animo-numero { background: #FCE4E9; color: var(--magenta); }
.seccion-animo--3 .seccion-animo-numero { background: #FBF0D9; color: #C08A1E; }
.seccion-animo--4 .seccion-animo-numero { background: #E3F3EC; color: #3E8E6C; }

.seccion-animo-header h3 {
    font-family: var(--fuente-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--texto-oscuro);
}

.seccion-animo-ayuda {
    font-size: 12px;
    color: var(--texto-secundario);
    margin-bottom: 10px;
    line-height: 1.5;
}

.seccion-animo textarea,
.seccion-animo input[type="text"] {
    margin-bottom: 4px;
}

.label-slider {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--texto-secundario);
    margin: 10px 0 4px;
}

.label-slider strong {
    color: var(--texto-oscuro);
}

.slider-animo {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--lavanda-fondo);
    outline: none;
}

.slider-animo::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--indigo);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(46, 43, 61, 0.25);
}

.slider-animo--emocion::-webkit-slider-thumb {
    background: #D9A64A;
}

.slider-animo::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--indigo);
    cursor: pointer;
    border: none;
}

.chips-emocion {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.chip-emocion {
    background: var(--lavanda-fondo);
    color: var(--texto-oscuro);
    border: none;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.15s ease, color 0.15s ease;
}

.chip-emocion:hover {
    transform: translateY(-2px);
}

.chip-emocion--activo {
    background: #D9A64A;
    color: var(--blanco);
}

.btn-guardar-animo {
    background: linear-gradient(135deg, var(--indigo), var(--magenta));
    margin-top: 16px;
}

.btn-guardar-animo:hover {
    background: linear-gradient(135deg, var(--indigo-oscuro), var(--magenta));
}

.titulo-grafico-animo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--indigo);
}

.titulo-grafico-animo h3 {
    font-family: var(--fuente-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--texto-oscuro);
}

/* ===== CHEQUEOS RAPIDOS DIARIOS (animo 1-10 y sueño) ===== */

.tarjeta-chequeo-rapido {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
}

[data-theme="dark"] .tarjeta-chequeo-rapido {
    background: rgba(34, 31, 53, 0.85);
}

.titulo-chequeo {
    font-family: var(--fuente-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--texto-oscuro);
    margin-bottom: 12px;
}

.escala-10 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.punto-escala10 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #FBFAFE;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--texto-secundario);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.punto-escala10 span {
    font-size: 18px;
}

.punto-escala10:hover {
    transform: translateY(-2px);
}

.punto-escala10--activo {
    border-color: var(--indigo);
    background: var(--lavanda-fondo);
    color: var(--indigo-oscuro);
    transform: translateY(-2px) scale(1.05);
}

[data-theme="dark"] .punto-escala10 {
    background: #221F35;
}

[data-theme="dark"] .punto-escala10--activo {
    background: #2C2A45;
}

.confirmacion-chequeo {
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #3E8E6C;
}

.fila-si-no {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--borde);
}

.fila-si-no:last-of-type {
    border-bottom: none;
}

.etiqueta-si-no {
    font-size: 14px;
    color: var(--texto-oscuro);
    font-weight: 600;
}

.botones-si-no {
    display: flex;
    gap: 6px;
}

.btn-si-no {
    background: #FBFAFE;
    border: 1.5px solid var(--borde);
    color: var(--texto-secundario);
    padding: 6px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

[data-theme="dark"] .btn-si-no {
    background: #221F35;
}

[data-theme="dark"] .btn-si-no--activo {
    background: var(--indigo);
    border-color: var(--indigo);
    color: var(--blanco);
}

.btn-si-no--activo {
    background: var(--indigo);
    border-color: var(--indigo);
    color: var(--blanco);
}

.tira-chequeo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.fila-chequeo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #FBFAFE;
    border-radius: 12px;
    padding: 10px 14px;
}

[data-theme="dark"] .fila-chequeo {
    background: #221F35;
}

.fila-chequeo-fecha {
    font-size: 13px;
    font-weight: 700;
    color: var(--texto-oscuro);
    text-transform: capitalize;
    white-space: nowrap;
}

.fila-chequeo-nivel {
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: var(--blanco);
    font-size: 14px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}

.fila-chequeo-nivel small {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.85;
}

.fila-chequeo--sueno {
    flex-wrap: wrap;
}

.fila-chequeo-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.fila-chequeo-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.fila-chequeo-badge--bien {
    background: #E3F3EC;
    color: #3E8E6C;
}

.fila-chequeo-badge--mal {
    background: #FCE9EE;
    color: #C0577D;
}

.fila-chequeo-badge--neutro {
    background: var(--lavanda-fondo);
    color: var(--texto-secundario);
}

[data-theme="dark"] .fila-chequeo-badge--bien {
    background: #1F3A2E;
    color: #7DCBA5;
}

[data-theme="dark"] .fila-chequeo-badge--mal {
    background: #3A2530;
    color: #E88FA6;
}

[data-theme="dark"] .fila-chequeo-badge--neutro {
    background: #2C2A45;
}

/* ===== ENTRADAS DEL REGISTRO EMOCIONAL (historial) ===== */

.entrada-animo {
    background: var(--blanco);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(46, 43, 61, 0.05);
    border-left: 4px solid var(--color-emocion, var(--indigo));
}

[data-theme="dark"] .entrada-animo {
    background: #221F35;
}

.entrada-animo-resumen {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    padding: 14px 16px;
    cursor: pointer;
    text-align: left;
}

.entrada-animo-punto {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    background: var(--color-emocion, var(--indigo));
}

.entrada-animo-resumen-texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.entrada-animo-resumen-texto strong {
    font-family: var(--fuente-display);
    font-size: 14px;
    color: var(--texto-oscuro);
}

.entrada-animo-resumen-texto small {
    font-size: 11px;
    color: var(--texto-secundario);
}

.entrada-animo-flecha {
    width: 18px;
    height: 18px;
    color: var(--texto-secundario);
    transition: transform 0.2s ease;
}

.entrada-animo--abierta .entrada-animo-flecha {
    transform: rotate(180deg);
}

.entrada-animo-detalle {
    padding: 0 16px 16px 38px;
}

.entrada-animo-detalle p {
    font-size: 13px;
    color: var(--texto-oscuro);
    margin-bottom: 8px;
    line-height: 1.5;
}

.entrada-animo-detalle p strong {
    color: var(--texto-secundario);
    font-weight: 700;
}

/* ===== ADJUNTAR ARCHIVO (ejercicios) ===== */

.adjuntar-archivo-cont {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-adjuntar {
    width: auto;
    align-self: flex-start;
    padding: 8px 16px;
    font-size: 13px;
}

.archivo-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--lavanda-fondo);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--texto-oscuro);
}

.archivo-info span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== ESTADISTICAS ===== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card {
    background: var(--blanco);
    border-radius: 16px;
    padding: 20px 10px;
    box-shadow: 0 6px 20px rgba(46, 43, 61, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.stat-numero {
    font-family: var(--fuente-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--indigo-oscuro);
}

.stat-label {
    font-size: 11px;
    color: var(--texto-secundario);
    font-weight: 600;
}

.calendario-racha {
    display: flex;
    gap: 6px;
    justify-content: space-between;
}

.dia-calendario {
    flex: 1;
    aspect-ratio: 0.85;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 10px;
    background: var(--lavanda-fondo);
    color: var(--texto-secundario);
    border: 2px solid transparent;
}

.dia-calendario-letra {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.8;
}

.dia-calendario-numero {
    font-size: 13px;
    font-weight: 700;
}

.dia-calendario--activo {
    background: var(--menta);
    color: var(--blanco);
}

.dia-calendario--hoy {
    border-color: var(--indigo);
}

/* ===== ANILLO DE PROGRESO (cumplimiento) ===== */

.anillo-progreso-cont {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.anillo-progreso {
    width: 70px;
    height: 70px;
    transform: rotate(-90deg);
}

.anillo-progreso-fondo {
    fill: none;
    stroke: var(--lavanda-fondo);
    stroke-width: 6;
}

.anillo-progreso-valor {
    fill: none;
    stroke: var(--indigo);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}

.anillo-progreso-texto {
    position: absolute;
    font-family: var(--fuente-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--indigo-oscuro);
}

#nombrePacienteSeleccionado {
    font-family: var(--fuente-display);
    font-size: 22px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== ZONA DE PELIGRO / ELIMINAR CUENTA ===== */

.tarjeta-peligro {
    border: 1.5px solid #FADADD;
}

.btn-peligro {
    background: var(--magenta);
}

.btn-peligro:hover {
    background: #A8305F;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(46, 43, 61, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

.modal-caja {
    background: var(--blanco);
    border-radius: 20px;
    padding: 28px;
    width: 100%;
    max-width: 380px;
    max-height: 85vh;
    overflow-y: auto;
}

.modal-caja--ancha {
    max-width: 440px;
}

.lista-terminos {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lista-terminos li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--texto-oscuro);
    line-height: 1.4;
}

.lista-terminos li::before {
    content: '•';
    color: var(--indigo);
    font-weight: 700;
    line-height: 1.4;
}

.modal-caja form {
    display: flex;
    flex-direction: column;
}

.modal-caja input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--borde);
    font-family: var(--fuente-cuerpo);
    font-size: 16px;
    background: #FBFAFE;
}

.modal-caja input:focus {
    outline: none;
    border-color: var(--indigo);
}

/* ===== ALARMA A PANTALLA COMPLETA ===== */

.alarma-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(160deg, var(--magenta), var(--indigo-oscuro), var(--magenta));
    background-size: 200% 200%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 24px;
}

.alarma-contenido {
    text-align: center;
    max-width: 380px;
    color: var(--blanco);
}

.alarma-icono-cont {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alarma-anillo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.55);
    animation: alarma-onda 1.8s ease-out infinite;
}

.alarma-anillo--2 {
    animation-delay: 0.6s;
}

@keyframes alarma-onda {
    0% { transform: scale(0.4); opacity: 0.9; }
    100% { transform: scale(1.4); opacity: 0; }
}

.alarma-icono {
    font-size: 64px;
    animation: alarma-pulso 1s infinite;
    position: relative;
    z-index: 1;
}

@keyframes alarma-pulso {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.pantalla-alarma {
    background-size: 200% 200%;
    animation: alarma-fondo 4s ease infinite;
}

@keyframes alarma-fondo {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.alarma-contenido h2 {
    font-family: var(--fuente-display);
    font-size: 26px;
    margin-bottom: 8px;
}

.alarma-contenido .texto-secundario {
    color: rgba(255, 255, 255, 0.85);
    margin-top: 0;
    margin-bottom: 20px;
}

.alarma-instruccion {
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 15px;
}

.btn-alarma {
    background: var(--blanco);
    color: var(--magenta);
    font-size: 17px;
    padding: 18px 20px;
}

.btn-alarma:hover {
    background: #FFF0F3;
}

.btn-alarma:disabled {
    opacity: 0.7;
    cursor: default;
}

.alarma-error {
    color: var(--blanco);
    background: rgba(0, 0, 0, 0.2);
    padding: 10px 14px;
    border-radius: 10px;
    margin-top: 14px;
    font-size: 14px;
}

.foto-confirmacion {
    width: 100%;
    max-width: 240px;
    border-radius: 12px;
    margin-top: 10px;
    display: block;
}

.badge-recurrencia {
    display: inline-block;
    background: var(--lavanda-fondo);
    color: var(--indigo-oscuro);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    margin-top: 6px;
}

.modal-caja--ancha {
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-historial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.lista-historial {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.item-historial {
    background: #FBFAFE;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.foto-historial {
    width: 100%;
    border-radius: 10px;
    display: block;
}

.fecha-historial {
    font-size: 13px;
    color: var(--texto-secundario);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 480px) {
    .tarjeta-auth {
        padding: 32px 24px;
    }
    .titulo-form {
        font-size: 24px;
    }
}