/* ============================================
   NUMA — Mobile-first CSS
   Columna centrada en desktop, full en móvil
   ============================================ */

   @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Nunito', 'Arial Rounded MT Bold', system-ui;
   }
   
   html {
     height: -webkit-fill-available;
   }
   
   body {
     background: #d8ede5;
     min-height: 100vh;
     min-height: -webkit-fill-available;
     display: flex;
     justify-content: center;
     align-items: stretch;
   
     /* Fondo decorativo para desktop */
     background-image:
       radial-gradient(ellipse at 20% 50%, rgba(166,199,184,0.3) 0%, transparent 60%),
       radial-gradient(ellipse at 80% 20%, rgba(183,211,198,0.2) 0%, transparent 50%);
   }
   
   /* ============================================
      COLUMNA PRINCIPAL
      ============================================ */
   
   .app {
     width: 100%;
     max-width: 430px;
     height: 100vh;
     height: -webkit-fill-available; /* iOS */
     height: 100dvh;                 /* Android: se ajusta al teclado virtual */
     overflow: hidden;
     padding: 16px 20px 0;
     padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
     display: flex;
     flex-direction: column;
     align-items: center;
     background: linear-gradient(170deg, #eaf4ef 0%, #f4faf7 60%, #f8fbf9 100%);

     /* Sombra lateral solo en desktop */
     box-shadow: 0 0 60px rgba(0,0,0,0.12);
   }
   
   /* ============================================
      OSO 3D
      ============================================ */
   
   .bear-container {
     margin-top: 8px;
     margin-bottom: 4px;
     width: 160px;
     height: 160px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     flex-shrink: 0;
   }
   
   .bear-container canvas {
     display: block;
     cursor: pointer;
     filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12));
   }
   
   .bear-container::before {
     content: '';
     position: absolute;
     width: 100px;
     height: 20px;
     background: radial-gradient(ellipse, rgba(0,0,0,0.08) 0%, transparent 70%);
     bottom: 6px;
     border-radius: 50%;
     z-index: -1;
   }
   
   /* ============================================
      MOOD INDICATOR
      ============================================ */
   
   #mood-indicator {
     font-size: 0.82rem;
     color: #8fb5a3;
     text-align: center;
     height: 18px;
     margin-top: -2px;
     margin-bottom: 4px;
     opacity: 0;
     transition: opacity 0.5s ease;
     flex-shrink: 0;
   }
   
   /* ============================================
      CHAT
      ============================================ */
   
   .chat {
     width: 100%;
     flex: 1;
     min-height: 0; /* fix crítico: permite overflow-y en flex container en Android */
     overflow-y: auto;
     padding: 8px 4px;
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-bottom: 8px;
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
   }
   
   .chat::-webkit-scrollbar {
     width: 3px;
   }
   .chat::-webkit-scrollbar-track {
     background: transparent;
   }
   .chat::-webkit-scrollbar-thumb {
     background: #b7d3c6;
     border-radius: 10px;
   }
   
   .bubble {
     max-width: 82%;
     padding: 14px 18px;
     border-radius: 20px;
     font-size: 1.05rem;
     line-height: 1.5;
     word-break: break-word;
   }
   
   .user {
     align-self: flex-end;
     background: #cfe7dd;
     color: #2f4f45;
     border-bottom-right-radius: 5px;
     font-weight: 600;
   }
   
   .oso {
     align-self: flex-start;
     background: #f2efe9;
     color: #3a3a3a;
     border-bottom-left-radius: 5px;
   }
   
   /* Mood bubbles */
   .bubble.oso.mood-stressed    { background: #ffe5e5; }
   .bubble.oso.mood-overwhelmed { background: #ffd6d6; }
   .bubble.oso.mood-sad         { background: #e8e8f0; }
   .bubble.oso.mood-anxious     { background: #ffecd6; }
   .bubble.oso.mood-happy       { background: #e5f5e0; }
   .bubble.oso.mood-excited     { background: #fff3cd; }
   .bubble.oso.mood-calm        { background: #f2efe9; }
   .bubble.oso.mood-neutral     { background: #f2efe9; }
   
   .bubble.oso {
     transition: background 0.4s ease;
   }
   
   /* ============================================
      INPUT
      ============================================ */
   
   .input-container {
     width: 100%;
     display: flex;
     gap: 10px;
     margin-bottom: 10px;
     flex-shrink: 0;
   }
   
   input {
     flex: 1;
     padding: 16px 18px;
     font-size: 1rem;
     font-family: inherit;
     border: 2px solid #b7d3c6;
     border-radius: 22px;
     outline: none;
     background: white;
     color: #2f4f45;
     /* Evita zoom automático en iOS */
     font-size: 16px;
   }
   
   input::placeholder {
     color: #a8c8b8;
   }
   
   input:focus {
     border-color: #8fb5a3;
     box-shadow: 0 0 0 3px rgba(143,181,163,0.15);
   }
   
   .btn-enviar {
     width: 48px;
     height: 48px;
     padding: 0;
     font-size: 1.3rem;
     font-family: inherit;
     font-weight: 700;
     border: none;
     border-radius: 50%;
     background: #7db89e;
     color: white;
     cursor: pointer;
     transition: transform 0.15s ease, background 0.2s;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .btn-enviar:hover {
     transform: scale(1.05);
     background: #6aaa8f;
   }

   .btn-enviar:active {
     transform: scale(0.93);
   }
   
   /* ============================================
      NAV BUTTONS
      ============================================ */
   
   .nav-buttons {
     width: 100%;
     display: flex;
     gap: 10px;
     margin-bottom: 8px;
     flex-shrink: 0;
   }
   
   .nav-btn {
     flex: 1;
     padding: 13px 8px;
     font-size: 0.9rem;
     font-family: inherit;
     font-weight: 700;
     border: none;
     border-radius: 16px;
     background: #dceee7;
     color: #3d6358;
     cursor: pointer;
     transition: all 0.2s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 5px;
   }
   
   .nav-btn:hover {
     background: #c8e2d8;
     transform: translateY(-2px);
   }
   
   .nav-btn:active {
     transform: translateY(0);
   }
   
   .nav-btn span {
     font-size: 1.2rem;
   }
   
   /* ============================================
      ANIMACIONES
      ============================================ */
   
   .ejercicios-panel, .breathing, .meditation {
     animation: fadeIn 0.35s ease-out;
   }
   
   @keyframes fadeIn {
     from { opacity: 0; transform: translateY(12px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   /* ============================================
      PREP SCREEN
      ============================================ */
   
   .prep-screen {
     position: fixed;
     top: 0; left: 0; width: 100%; height: 100%;
     background: #fdfaf6;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 2000;
   }
   
   .loader-circle {
     width: 52px;
     height: 52px;
     border: 5px solid #e0e0e0;
     border-top: 5px solid #7db89e;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-bottom: 20px;
   }
   
   @keyframes spin {
     0%   { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
   
   /* ============================================
      PROGRESS BAR
      ============================================ */
   
   .progress-container {
     width: 80%;
     height: 6px;
     background: #eee;
     border-radius: 10px;
     margin-top: 20px;
     overflow: hidden;
   }
   
   .progress-bar {
     height: 100%;
     background: #7db89e;
     width: 0%;
     transition: width 1s linear;
   }
   
   /* ============================================
      PANEL EJERCICIOS
      ============================================ */
   
   .ejercicios-panel {
     position: fixed;
     top: 0; left: 0;
     width: 100%; height: 100%;
     background: linear-gradient(170deg, #eaf4ef 0%, #f4faf7 60%, #f8fbf9 100%);
     padding: 28px 20px 32px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
     z-index: 100;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }

   .ejercicios-panel h2 {
     color: #2f4f45;
     margin-top: 28px;
     margin-bottom: 4px;
     font-size: 1.5rem;
     font-weight: 800;
     text-align: center;
   }

   .ejercicios-panel .close-btn {
     position: absolute;
     top: 20px;
     right: 20px;
   }

   /* Subtítulo del panel principal */
   .ejercicios-panel .panel-subtitle {
     font-size: 0.85rem;
     color: #8fb5a3;
     text-align: center;
     margin-top: -4px;
     margin-bottom: 6px;
   }
   
   /* ============================================
      RESPIRACIÓN OVERLAY
      ============================================ */
   
   .breathing {
     position: fixed;
     top: 0; left: 0;
     width: 100%; height: 100%;
     background: rgba(234, 244, 239, 0.98);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     z-index: 200;
   }
   
   .circle {
     width: 140px;
     height: 140px;
     border-radius: 50%;
     background: rgba(125,184,158,0.5);
     animation: breathe 6s ease-in-out infinite;
   }
   
   #breathing-text {
     margin-top: 32px;
     font-size: 1.4rem;
     font-weight: 700;
     color: #4a6a5e;
   }
   
   @keyframes breathe {
     0%   { transform: scale(1); }
     50%  { transform: scale(1.45); }
     100% { transform: scale(1); }
   }
   
   /* ============================================
      MEDITACIÓN / YOGA / LECTURA
      ============================================ */
   
   .meditation, .yoga, .reading {
     position: fixed;
     top: 0; left: 0;
     width: 100%; height: 100%;
     background: rgba(234, 244, 239, 0.98);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 40px 28px;
     z-index: 200;
     text-align: center;
   }
   
   .meditation h3, .yoga h3, .reading h3 {
     color: #4a6a5e;
     font-size: 1.6rem;
     font-weight: 800;
     margin-bottom: 20px;
   }
   
   .meditation-timer {
     font-size: 3.2rem;
     color: #4a6a5e;
     margin-top: 20px;
     font-weight: 800;
   }
   
   #yoga-pose {
     color: #6b8e7d;
     font-size: 1.9rem;
     font-weight: 800;
     margin: 20px 0;
   }
   
   #yoga-instruction {
     color: #4a6a5e;
     font-size: 1.1rem;
     line-height: 1.6;
   }
   
   .quote {
     font-size: 1.35rem;
     font-style: italic;
     color: #4a6a5e;
     line-height: 1.8;
     margin-bottom: 20px;
   }
   
   .author {
     color: #6b8e7d;
     font-size: 1rem;
     font-weight: 600;
   }
   
   /* ============================================
      CLOSE BTN
      ============================================ */
   
   .close-btn {
     position: absolute;
     top: 20px;
     right: 20px;
     background: rgba(183, 211, 198, 0.6);
     border: none;
     width: 44px;
     height: 44px;
     border-radius: 50%;
     font-size: 1.4rem;
     color: #4a6a5e;
     cursor: pointer;
     transition: all 0.2s ease;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .close-btn:hover {
     background: rgba(183, 211, 198, 0.9);
     transform: scale(1.1);
   }
   
   /* ============================================
      HIDDEN
      ============================================ */
   
   .hidden {
     display: none !important;
   }
   
   /* ============================================
      TYPING INDICATOR
      ============================================ */
   
   .bubble.typing span {
     display: inline-block;
     width: 7px;
     height: 7px;
     background: #9abfb0;
     border-radius: 50%;
     margin: 0 2px;
     animation: bounce 1.2s infinite;
   }
   .bubble.typing span:nth-child(2) { animation-delay: 0.2s; }
   .bubble.typing span:nth-child(3) { animation-delay: 0.4s; }
   
   @keyframes bounce {
     0%, 60%, 100% { transform: translateY(0); }
     30%           { transform: translateY(-7px); }
   }
   
   /* ============================================
      FEEDBACK POST-EJERCICIO
      ============================================ */
   
   #feedback-post-ejercicio {
     position: fixed;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 100%;
     max-width: 430px;
     background: linear-gradient(to top, #eaf4ef 80%, transparent);
     padding: 28px 24px 36px;
     z-index: 500;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 14px;
     animation: feedbackSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
   
   #feedback-post-ejercicio.feedback-saliendo {
     animation: feedbackSlideDown 0.3s ease forwards;
   }
   
   @keyframes feedbackSlideUp {
     from { opacity: 0; transform: translateX(-50%) translateY(20px); }
     to   { opacity: 1; transform: translateX(-50%) translateY(0); }
   }
   
   @keyframes feedbackSlideDown {
     from { opacity: 1; transform: translateX(-50%) translateY(0); }
     to   { opacity: 0; transform: translateX(-50%) translateY(20px); }
   }
   
   .feedback-pregunta {
     font-size: 1.05rem;
     color: #4a6a5e;
     text-align: center;
     margin: 0;
     line-height: 1.5;
     font-weight: 600;
   }
   
   .feedback-pregunta strong {
     color: #2f4f45;
   }
   
   .feedback-opciones {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
     width: 100%;
   }
   
   .feedback-opcion {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     padding: 16px 10px;
     border: 2px solid #d4e5df;
     border-radius: 18px;
     background: white;
     cursor: pointer;
     transition: all 0.2s ease;
     color: #4a6a5e;
   }
   
   .feedback-opcion:hover:not(:disabled) {
     border-color: #7db89e;
     background: #f0f8f4;
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0,0,0,0.08);
   }
   
   .feedback-opcion:disabled {
     opacity: 0.5;
     cursor: default;
   }
   
   .feedback-opcion.selected {
     border-color: #5a9e85;
     background: #e8f5f0;
     opacity: 1 !important;
     transform: scale(1.03);
     box-shadow: 0 4px 16px rgba(90,158,133,0.25);
   }
   
   .feedback-emoji {
     font-size: 1.8rem;
     line-height: 1;
   }
   
   .feedback-label {
     font-size: 0.85rem;
     font-weight: 700;
     text-align: center;
     line-height: 1.3;
   }
   
   .feedback-skip {
     background: none;
     border: none;
     color: #8fb5a3;
     font-size: 0.85rem;
     cursor: pointer;
     padding: 4px 8px;
     text-decoration: underline;
     text-underline-offset: 3px;
     transition: color 0.2s;
     font-family: inherit;
   }
   
   .feedback-skip:hover {
     color: #4a6a5e;
   }
   
   /* ============================================
      AUTH SCREEN
      ============================================ */
   
   #auth-screen {
     position: fixed;
     top: 0; left: 0;
     width: 100%; height: 100%;
     background: linear-gradient(#eaf4ef, #f6fbf8);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
   }
   
   .auth-container {
     width: 100%;
     max-width: 380px;
     padding: 48px 28px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 20px;
   }
   
   .auth-logo {
     text-align: center;
     margin-bottom: 8px;
   }
   
   .auth-logo span {
     font-size: 3.5rem;
   }
   
   .auth-logo h1 {
     color: #4a6a5e;
     font-size: 2.2rem;
     font-weight: 800;
     margin: 6px 0;
   }
   
   .auth-logo p {
     color: #8fb5a3;
     font-size: 1rem;
   }
   
   .auth-tabs {
     display: flex;
     width: 100%;
     background: #dceee7;
     border-radius: 16px;
     padding: 4px;
     gap: 4px;
   }
   
   .auth-tab {
     flex: 1;
     padding: 12px;
     border: none;
     border-radius: 12px;
     background: transparent;
     color: #6b8e7d;
     font-size: 1rem;
     font-family: inherit;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
   }
   
   .auth-tab.active {
     background: white;
     color: #2f4f45;
     font-weight: 800;
     box-shadow: 0 2px 8px rgba(0,0,0,0.08);
   }
   
   .auth-form {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 14px;
   }
   
   .auth-input {
     width: 100%;
     padding: 16px 18px;
     font-size: 16px; /* evita zoom iOS */
     font-family: inherit;
     border: 2px solid #b7d3c6;
     border-radius: 16px;
     outline: none;
     background: white;
     color: #2f4f45;
     box-sizing: border-box;
     transition: border-color 0.2s;
   }
   
   .auth-input:focus {
     border-color: #7db89e;
     box-shadow: 0 0 0 3px rgba(125,184,158,0.15);
   }
   
   .auth-btn {
     width: 100%;
     padding: 16px;
     font-size: 1.05rem;
     font-family: inherit;
     font-weight: 800;
     border: none;
     border-radius: 16px;
     background: #7db89e;
     color: white;
     cursor: pointer;
     transition: all 0.2s ease;
     margin-top: 4px;
   }
   
   .auth-btn:hover {
     background: #6aaa8f;
     transform: translateY(-2px);
   }
   
   .auth-btn:active {
     transform: translateY(0);
   }
   
   .auth-error {
     color: #e07070;
     font-size: 0.9rem;
     font-weight: 600;
     text-align: center;
     margin: 0;
   }
   
   .auth-divider {
     display: flex;
     align-items: center;
     gap: 12px;
     margin: 12px 0;
     color: #aaa;
     font-size: 13px;
   }

   .auth-divider::before,
   .auth-divider::after {
     content: '';
     flex: 1;
     height: 1px;
     background: #ddd;
   }

   .auth-btn-google {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     width: 100%;
     padding: 12px;
     border: 1px solid #ddd;
     border-radius: 8px;
     background: white;
     color: #333;
     font-size: 15px;
     font-family: inherit;
     cursor: pointer;
     margin-top: 4px;
   }

   /* Botón link sutil para "¿Olvidaste tu contraseña?" */
   .auth-forgot-link {
     background: none;
     border: none;
     color: #7db89e;
     font-size: 0.88rem;
     font-family: inherit;
     cursor: pointer;
     text-align: center;
     padding: 2px 0;
     text-decoration: underline;
     text-underline-offset: 3px;
   }
   .auth-forgot-link:hover {
     color: #4a8a6e;
   }

   /* Botón link secundario para "← Volver" y "Reenviar" */
   .auth-link-btn {
     background: none;
     border: none;
     color: #8fb5a3;
     font-size: 0.9rem;
     font-family: inherit;
     cursor: pointer;
     text-align: center;
     padding: 4px 0;
     text-decoration: none;
   }
   .auth-link-btn:hover {
     color: #5a8a74;
   }
   .auth-link-btn:disabled {
     color: #bbb;
     cursor: default;
   }

   /* Mensaje de éxito en flujo reset */
   .auth-success {
     color: #5a9e7a;
     font-size: 0.9rem;
     font-weight: 600;
     text-align: center;
     margin: 0;
   }

   /* ============================================
      ONBOARDING
      ============================================ */
   
   #onboarding-screen {
     position: fixed;
     top: 0; left: 0;
     width: 100%; height: 100%;
     background: linear-gradient(#eaf4ef, #f6fbf8);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9998;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
   
   .onboarding-container {
     width: 100%;
     max-width: 430px;
     padding: 40px 24px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 16px;
     min-height: 100vh;
     justify-content: center;
   }
   
   .onboarding-header {
     text-align: center;
     margin-bottom: 8px;
   }
   
   .onboarding-header span {
     font-size: 2.8rem;
   }
   
   .onboarding-header h2 {
     color: #4a6a5e;
     font-size: 1.6rem;
     font-weight: 800;
     margin: 8px 0 4px;
   }
   
   .onboarding-header p {
     color: #8fb5a3;
     font-size: 0.95rem;
   }
   
   .onboarding-progress {
     width: 100%;
     height: 7px;
     background: #d8ece5;
     border-radius: 10px;
     overflow: hidden;
   }
   
   .onboarding-progress-bar {
     height: 100%;
     background: #7db89e;
     border-radius: 10px;
     transition: width 0.4s ease;
     width: 10%;
   }
   
   .onboarding-step-label {
     font-size: 0.85rem;
     color: #8fb5a3;
     font-weight: 600;
     margin: 0;
   }
   
   .onboarding-pregunta-container {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 12px;
     animation: fadeIn 0.3s ease;
   }
   
   .onboarding-pregunta {
     color: #2f4f45;
     font-size: 1.2rem;
     font-weight: 700;
     line-height: 1.5;
     text-align: center;
     margin-bottom: 8px;
   }
   
   .onboarding-opciones {
     display: flex;
     flex-direction: column;
     gap: 10px;
     width: 100%;
   }
   
   .onboarding-opcion {
     width: 100%;
     padding: 16px 18px;
     border: 2px solid #b7d3c6;
     border-radius: 16px;
     background: white;
     color: #4a6a5e;
     font-size: 1rem;
     font-family: inherit;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
     text-align: left;
   }
   
   .onboarding-opcion:hover {
     background: #eaf4ef;
     border-color: #7db89e;
   }
   
   .onboarding-opcion.selected {
     background: #c2ddd3;
     border-color: #7db89e;
     color: #2f4f45;
     font-weight: 800;
   }
   
   .onboarding-textarea {
     width: 100%;
     min-height: 110px;
     resize: none;
     font-family: inherit;
     line-height: 1.6;
     font-size: 16px; /* evita zoom iOS */
   }
   
   .onboarding-nav {
     width: 100%;
     display: flex;
     gap: 10px;
     margin-top: 8px;
   }
   
   .onboarding-btn-back {
     flex: 1;
     padding: 16px;
     border: 2px solid #b7d3c6;
     border-radius: 16px;
     background: white;
     color: #4a6a5e;
     font-size: 1rem;
     font-family: inherit;
     font-weight: 700;
     cursor: pointer;
     transition: all 0.2s ease;
   }
   
   .onboarding-btn-next {
     flex: 2;
     padding: 16px;
     border: none;
     border-radius: 16px;
     background: #7db89e;
     color: white;
     font-size: 1rem;
     font-family: inherit;
     font-weight: 800;
     cursor: pointer;
     transition: all 0.2s ease;
   }
   
   .onboarding-btn-next:hover {
     background: #6aaa8f;
     transform: translateY(-2px);
   }
   
   .onboarding-btn-back:hover {
     background: #eaf4ef;
   }
   
   .onboarding-toast {
     position: fixed;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%) translateY(20px);
     background: #4a6a5e;
     color: white;
     padding: 14px 28px;
     border-radius: 24px;
     font-size: 0.95rem;
     font-weight: 600;
     opacity: 0;
     transition: all 0.3s ease;
     z-index: 9999;
     white-space: nowrap;
   }
   
   .onboarding-toast.visible {
     opacity: 1;
     transform: translateX(-50%) translateY(0);
   }
   
   /* ============================================
      DESKTOP — columna centrada con fondo
      ============================================ */
   
   @media (min-width: 500px) {
     body {
       align-items: center;
       padding: 20px 0;
     }
   
     .app {
       min-height: min(00dvh, 820px);
       max-height: 900px;
       border-radius: 32px;
       margin: auto;
       display: flex;
        flex-direction: column;
     }
   


     .bear-container {
       width: 180px;
       height: 180px;
     }
   }

   .mic-btn {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 6px;
  margin-right: 6px;
  transition: transform 0.2s ease;
}

.mic-btn.active {
  color: #d85c5c;
  animation: mic-pulse 1.2s infinite;
}


.mic-btn.recording {
  background: #e74c3c;
  color: white;
  box-shadow: 0 0 0 rgba(231, 76, 60, 0.7);
  animation: mic-pulse 1.3s infinite;
}

@keyframes mic-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(231, 76, 60, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
  }
}


.mic-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.mic-toast {
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(47, 79, 69, 0.95);
  color: white;
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  animation: fadeInUp 0.25s ease;
  z-index: 9999;
}

.hidden {
  display: none;
}

/* ============================================
   CHECK-IN DIARIO
   ============================================ */

.checkin-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 32px;
  z-index: 9000;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.checkin-overlay.visible {
  opacity: 1;
}

.checkin-card {
  background: #fff;
  border-radius: 20px;
  padding: 24px 28px 20px;
  width: min(360px, 90vw);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  transform: translateY(24px);
  transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
  text-align: center;
}

.checkin-overlay.visible .checkin-card {
  transform: translateY(0);
}

.checkin-pregunta {
  font-size: 1.05rem;
  font-weight: 600;
  color: #2f4f45;
  margin: 0 0 20px;
}

.checkin-opciones {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.checkin-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #f4f9f7;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 12px 6px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.checkin-btn:hover {
  background: #e4f2ec;
  transform: translateY(-2px);
}

.checkin-btn.seleccionado {
  background: #d4eddf;
  border-color: #7db89e;
}

.checkin-emoji {
  font-size: 1.8rem;
  line-height: 1;
}

.checkin-label {
  font-size: 0.72rem;
  color: #5a7a70;
  font-weight: 500;
}

/* ============================================
   DASHBOARD — Mi estado
   ============================================ */

#view-dashboard {
  overflow: hidden;
}

.db-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 20px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.db-header {
  padding: 4px 4px 0;
}

.db-titulo {
  font-size: 1.4rem;
  font-weight: 700;
  color: #2f4f45;
  margin: 0 0 2px;
}

.db-subtitulo {
  font-size: 0.82rem;
  color: #8fb5a3;
  margin: 0;
}

/* Cards */
.db-card {
  background: #fff;
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.db-card-titulo {
  font-size: 0.78rem;
  font-weight: 600;
  color: #8fb5a3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 14px;
}

/* Resumen */
.db-insight {
  border-width: 1.5px;
  border-style: solid;
}

.db-insight-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.db-insight-texto {
  font-size: 0.97rem;
  color: #2f4f45;
  line-height: 1.6;
  font-style: italic;
  margin: 0 0 10px;
}

.db-insight-autor {
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0;
}

.db-resumen {
  background: linear-gradient(135deg, #2f4f45 0%, #4a7a6a 100%);
}

.db-resumen-texto {
  font-size: 0.95rem;
  color: #e8f5f0;
  line-height: 1.6;
  margin: 0;
}

/* Gráfica semanal */
/* Esta semana */
.db-sem-mood {
  font-size: 0.95rem;
  color: #2f4f45;
  margin: 0 0 14px;
  text-align: center;
}

.db-sem-fila {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.db-sem-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
}

.db-sem-label {
  font-size: 0.7rem;
  color: #8fb5a3;
  font-weight: 600;
  text-transform: uppercase;
}

.db-sem-punto {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eef3f1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.db-sem-con-dato {
  background: #e4f5eb;
}

.db-sem-activos {
  font-size: 0.82rem;
  color: #6b8e7d;
  text-align: center;
  margin: 0 0 6px;
}

.db-sem-comp {
  font-size: 0.82rem;
  color: #4a6a5e;
  text-align: center;
  margin: 0;
  padding: 8px 12px;
  background: #f4f9f7;
  border-radius: 10px;
}

/* Check-ins grid */
.db-ci-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
}

.db-ci-dot {
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  background: #f0f8f4;
}

.db-ci-vacio {
  background: #eef3f1;
}

.db-ci-daynum {
  font-size: 0.6rem;
  color: #b0c9bf;
  font-weight: 500;
  line-height: 1;
}

.db-ci-v1 { background: #fde8e8; }
.db-ci-v2 { background: #fef5e4; }
.db-ci-v3 { background: #e4f5eb; }
.db-ci-v4 { background: #d4eddf; }

/* Patrones */
.db-patrones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.db-patron-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f4f9f7;
  border: 1.5px solid #d4e5df;
  border-radius: 20px;
  padding: 6px 12px;
}

.db-patron-topic {
  font-size: 0.85rem;
  color: #2f4f45;
  font-weight: 500;
}

.db-patron-count {
  font-size: 0.72rem;
  color: #7db89e;
  font-weight: 600;
}

.db-patron-detalle {
  font-size: 0.8rem;
  color: #8fb5a3;
  font-style: italic;
  margin: 0;
  line-height: 1.5;
}

/* Estados: loading / error / vacío */
.db-estado-centro {
  justify-content: center;
  align-items: center;
  height: 100%;
}

.db-estado-texto {
  font-size: 0.9rem;
  color: #8fb5a3;
  text-align: center;
  padding: 0 24px;
}

.db-loader {
  width: 32px;
  height: 32px;
  border: 3px solid #d4e5df;
  border-top-color: #7db89e;
  border-radius: 50%;
  animation: dbSpin 0.8s linear infinite;
  margin-bottom: 12px;
}

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

.db-empty {
  font-size: 0.82rem;
  color: #8fb5a3;
  text-align: center;
  margin: 8px 0 0;
  line-height: 1.5;
}

.db-empty-inicio {
  margin-top: 40px;
  font-size: 0.95rem;
  padding: 0 16px;
}

.db-insight-placeholder {
  background: #f4faf7;
  border-color: #d4e5df;
}

.db-insight-placeholder-texto {
  font-size: 0.9rem;
  color: #8fb5a3;
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

/* ============================================
   PERFIL
   ============================================ */

.prf-scroll {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 4px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}

/* Header */
.prf-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 8px;
  gap: 6px;
}

.prf-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #7db89e;
  color: white;
  font-size: 1.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.prf-nombre {
  font-size: 1.15rem;
  font-weight: 700;
  color: #2f4f45;
  margin: 0;
}

.prf-email {
  font-size: 0.85rem;
  color: #8fb5a3;
  margin: 0;
}

/* Cards */
.prf-card {
  background: white;
  border-radius: 18px;
  border: 1px solid #d4e5df;
  padding: 18px;
}

.prf-card-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: #2f4f45;
  margin: 0 0 14px;
}

/* Check-in */
.prf-mood-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.prf-mood-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 4px;
  background: #f4faf7;
  border: 1.5px solid #d4e5df;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  font-family: inherit;
}

.prf-mood-btn:hover {
  background: #e4f5eb;
  border-color: #7db89e;
}

.prf-mood-btn:active,
.prf-mood-btn.seleccionado {
  background: #cfe7dd;
  border-color: #5a9e84;
  transform: scale(0.96);
}

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

.prf-mood-emoji {
  font-size: 1.9rem;
}

.prf-mood-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #6b8e7d;
}

.prf-checkin-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 8px;
}

.prf-checkin-emoji {
  font-size: 2.8rem;
}

.prf-checkin-done-texto {
  font-size: 0.88rem;
  color: #8fb5a3;
  margin: 0;
  text-align: center;
}

/* Disclaimer */
.prf-disclaimer {
  background: #fdf8f0;
  border-color: #e8d5b0;
}

.prf-disclaimer-texto {
  font-size: 0.88rem;
  color: #5a4a2a;
  line-height: 1.6;
  margin: 0;
}

/* Links legales */
.prf-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.prf-link {
  font-size: 0.78rem;
  color: #8fb5a3;
  text-decoration: underline;
}

.prf-link-sep {
  font-size: 0.78rem;
  color: #b7d3c6;
}

/* Botón cerrar sesión */
.prf-btn-logout {
  width: 100%;
  padding: 14px;
  background: transparent;
  border: 2px solid #7db89e;
  border-radius: 16px;
  color: #2f4f45;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.prf-btn-logout:hover {
  background: #e4f5eb;
}

/* Botón eliminar cuenta */
.prf-btn-delete {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: none;
  color: #c0392b;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* Modal eliminar cuenta */
.prf-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.prf-modal-overlay.visible {
  opacity: 1;
}

.prf-modal {
  background: white;
  border-radius: 24px 24px 0 0;
  padding: 28px 24px max(24px, env(safe-area-inset-bottom, 24px));
  width: 100%;
  max-width: 430px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateY(40px);
  transition: transform 0.25s ease;
}

.prf-modal-overlay.visible .prf-modal {
  transform: translateY(0);
}

.prf-modal-titulo {
  font-size: 1.3rem;
  font-weight: 800;
  color: #2f4f45;
  margin: 0;
}

.prf-modal-subtitulo {
  font-size: 0.9rem;
  color: #6b8e7d;
  margin: 0;
  line-height: 1.5;
}

.prf-modal-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #b7d3c6;
  border-radius: 12px;
  font-size: 0.9rem;
  font-family: inherit;
  color: #2f4f45;
  resize: none;
  height: 80px;
  outline: none;
}

.prf-modal-warning {
  background: #fdecea;
  border: 1px solid #f5c6c2;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.82rem;
  color: #922b21;
  line-height: 1.5;
}

.prf-modal-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prf-modal-btn-cancel {
  padding: 14px;
  background: #f4faf7;
  border: 1.5px solid #d4e5df;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  color: #2f4f45;
  cursor: pointer;
}

.prf-modal-btn-confirm {
  padding: 14px;
  background: #c0392b;
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  color: white;
  cursor: pointer;
  transition: background 0.15s;
}

.prf-modal-btn-confirm:hover {
  background: #a93226;
}

.prf-modal-btn-confirm:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Estado loading/error del perfil */
.prf-estado-centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
}

.prf-estado-texto {
  font-size: 0.9rem;
  color: #8fb5a3;
  text-align: center;
}

/* ============================================
   TARJETA DE CRISIS — recursos clicables
   Burbuja diferenciada para respuestas de crisis:
   los teléfonos y links son accionables con un toque.
   ============================================ */

.bubble.oso.crisis-card {
  background: #fff8f0;
  border: 2px solid #e8a87c;
  box-shadow: 0 4px 14px rgba(232, 168, 124, 0.25);
  line-height: 1.55;
}

.crisis-card .crisis-tel,
.crisis-card .crisis-link {
  display: inline-block;
  background: #e8a87c;
  color: #fff;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
  text-decoration: none;
  margin: 2px 0;
}

.crisis-card .crisis-tel:active,
.crisis-card .crisis-link:active {
  transform: scale(0.97);
}

/* ============================================
   BOTÓN DE SUGERENCIA DE EJERCICIO
   (antes estaba inline en chat.js)
   ============================================ */

.exercise-suggestion-btn {
  background: #a6c7b8;
  border: none;
  padding: 12px;
  width: 100%;
  border-radius: 12px;
  cursor: pointer;
  color: #2f4f45;
  font-weight: bold;
  font-family: inherit;
  font-size: 1rem;
  transition: transform 0.2s;
}

.exercise-suggestion-btn:hover {
  transform: scale(1.02);
}

/* ============================================
   MICRÓFONO DESHABILITADO (reintentable)
   ============================================ */

.mic-btn.disabled {
  opacity: 0.45;
}

/* ============================================
   SEPARADOR DE CHARLA ANTERIOR (rehidratación)
   ============================================ */

.chat-separador {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 8px;
  color: #9abfb0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.chat-separador::before,
.chat-separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(154, 191, 176, 0.4);
}

/* ============================================
   SUGERENCIA DE EJERCICIO EN EL CHAT
   ============================================ */

.sugerencia-frase {
  font-size: 0.9em;
  margin: 0 0 8px;
}

.sugerencia-cientifico {
  font-size: 0.75em;
  opacity: 0.8;
  margin: 6px 0 0;
  font-style: italic;
}

.sugerencia-ahora-no {
  display: block;
  margin: 8px auto 0;
  background: none;
  border: none;
  color: #8fb5a3;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  padding: 4px 8px;
}

/* ============================================
   PERFIL — memorias y tamaño de texto
   ============================================ */

.prf-card-subtexto {
  font-size: 0.8rem;
  color: #8fb5a3;
  margin: -4px 0 10px;
}

.prf-memoria-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(183, 211, 198, 0.3);
}

.prf-memoria-item:last-child {
  border-bottom: none;
}

.prf-memoria-texto {
  flex: 1;
  font-size: 0.87rem;
  color: #4a6a5e;
  line-height: 1.45;
}

.prf-memoria-borrar {
  background: none;
  border: none;
  color: #c5a8a8;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}

.prf-memoria-borrar:hover {
  background: rgba(197, 168, 168, 0.15);
  color: #b08585;
}

.prf-memoria-vacio {
  font-size: 0.85rem;
  color: #8fb5a3;
  margin: 0;
  line-height: 1.5;
}

.prf-font-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.prf-font-btn {
  width: 52px;
  height: 44px;
  border: 1.5px solid rgba(183, 211, 198, 0.5);
  border-radius: 12px;
  background: white;
  color: #4a6a5e;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
}

.prf-font-btn[data-size="small"]  { font-size: 0.8rem; }
.prf-font-btn[data-size="normal"] { font-size: 1rem; }
.prf-font-btn[data-size="large"]  { font-size: 1.25rem; }

.prf-font-btn.activo {
  background: #7db89e;
  border-color: #7db89e;
  color: white;
}

/* ============================================
   DASHBOARD — racha y exportar
   ============================================ */

.db-racha {
  font-size: 0.82rem;
  color: #5a9e7a;
  background: rgba(125, 184, 158, 0.12);
  border-radius: 10px;
  padding: 6px 10px;
  margin: 0 0 10px;
}

.db-btn-export {
  display: block;
  width: 100%;
  padding: 13px;
  margin-top: 4px;
  background: white;
  border: 1.5px solid rgba(125, 184, 158, 0.5);
  border-radius: 14px;
  color: #5a9e7a;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
}

.db-export-hint {
  text-align: center;
  font-size: 0.75rem;
  color: #9abfb0;
  margin: 6px 0 18px;
}

/* ============================================
   ONBOARDING — microcopy y "prefiero no responder"
   ============================================ */

.onboarding-porque {
  font-size: 0.82rem;
  color: #8fb5a3;
  margin: -6px 0 14px;
  line-height: 1.45;
}

.onboarding-skip {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: none;
  color: #9abfb0;
  font-size: 0.83rem;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  padding: 6px 10px;
}

/* ============================================
   MENÚ DE EJERCICIOS (antes inline en menuEjercicios.js)
   ============================================ */

.menu-sep {
  width: 100%;
  max-width: 340px;
  height: 1px;
  background: rgba(183, 211, 198, 0.4);
  margin: 4px 0 10px;
}

.menu-cat-btn {
  width: 100%;
  max-width: 340px;
  background: white;
  border: 1.5px solid rgba(183, 211, 198, 0.4);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  font-family: inherit;
}

.menu-cat-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
}

.menu-cat-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  flex-shrink: 0;
}

.menu-cat-info  { flex: 1; min-width: 0; }
.menu-cat-label { font-weight: 800; color: #2f4f45; font-size: 1rem; }
.menu-cat-desc  { font-size: 0.82rem; color: #6b8e7d; margin-top: 1px; }
.menu-cat-badge { font-size: 0.72rem; color: #b7d3c6; margin-top: 2px; }
.menu-cat-chevron { color: #b7d3c6; font-size: 1.4rem; font-weight: 300; margin-left: 4px; }

.ej-card {
  background: white;
  padding: 16px;
  border-radius: 16px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1.5px solid rgba(183, 211, 198, 0.25);
}

.ej-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.ej-card-titulo {
  color: #2f4f45;
  font-size: 1.05rem;
  font-weight: 800;
  flex: 1;
  margin: 0;
}

.ej-card-duracion {
  background: #eaf4ef;
  color: #7db89e;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  margin-left: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ej-card-desc {
  font-size: 0.87rem;
  color: #5a7a6e;
  margin: 0 0 6px;
  line-height: 1.5;
}

.ej-card-cientifico {
  font-size: 0.77rem;
  color: #9fb5aa;
  font-style: italic;
  margin: 0 0 12px;
  line-height: 1.4;
}

.ej-card-spacer { margin-bottom: 12px; }

.btn-start-ejercicio {
  background: linear-gradient(135deg, #7db89e, #5a9e84);
  border: none;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  color: white;
  font-weight: 800;
  font-size: 0.92rem;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
}

.btn-start-ejercicio:hover { opacity: 0.88; }

.lectura-intro {
  font-size: 0.85rem;
  color: #8fb5a3;
  text-align: center;
  margin: 0 0 8px;
  line-height: 1.5;
}

.lectura-card {
  width: 100%;
  max-width: 340px;
  background: white;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1.5px solid rgba(183, 211, 198, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}

.lectura-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
}

.lectura-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.lectura-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.lectura-card-info   { flex: 1; }
.lectura-card-nombre { font-weight: 800; color: #2f4f45; font-size: 1rem; }
.lectura-card-count  { font-size: 0.72rem; color: #b7d3c6; margin-top: 2px; }

.lectura-card-desc {
  font-size: 0.85rem;
  color: #5a7a6e;
  margin: 0 0 12px;
  line-height: 1.5;
}

.btn-leer-pack {
  border: 1.5px solid transparent;
  padding: 9px 16px;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  font-weight: 800;
  font-size: 0.9rem;
  font-family: inherit;
  transition: opacity 0.2s;
}

.btn-leer-pack:hover { opacity: 0.8; }

/* ============================================
   BANNER DE NOTIFICACIONES (antes inline en app.js)
   ============================================ */

.banner-notif {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #2f4f45;
  color: white;
  padding: 24px 24px 36px; /* 36px abajo por el home indicator del iPhone */
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 9999;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
}

.banner-notif-emoji { font-size: 2rem; margin-bottom: 8px; }

.banner-notif-texto {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

.banner-notif-si {
  width: 100%;
  padding: 14px;
  background: #7db89e;
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
  font-family: inherit;
}

.banner-notif-no {
  width: 100%;
  padding: 12px;
  background: transparent;
  color: #aaa;
  border: none;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
}

/* ============================================
   MODO OSCURO (uso nocturno)
   Se activa con la clase .tema-oscuro en <html>.
   El JS la aplica según la preferencia del usuario
   (Perfil → Tema): Automático (sistema) / Claro / Oscuro.
   ============================================ */

html.tema-oscuro body {
  background: #17201c;
}

html.tema-oscuro .app,
html.tema-oscuro #onboarding-screen,
html.tema-oscuro #auth-screen {
  background: linear-gradient(170deg, #1b2521 0%, #19221e 60%, #171f1b 100%);
}

/* Burbujas del chat */
html.tema-oscuro .bubble.user { background: #35514a; color: #e6efe9; }
html.tema-oscuro .bubble.oso  { background: #25312c; color: #dde8e2; }
html.tema-oscuro .bubble.oso.mood-stressed    { background: #3a2c2c; }
html.tema-oscuro .bubble.oso.mood-overwhelmed { background: #402e2e; }
html.tema-oscuro .bubble.oso.mood-sad         { background: #2c2c3a; }
html.tema-oscuro .bubble.oso.mood-anxious     { background: #3a322a; }
html.tema-oscuro .bubble.oso.mood-happy       { background: #283a2c; }
html.tema-oscuro .bubble.oso.mood-excited     { background: #3a382a; }
html.tema-oscuro .bubble.oso.mood-calm,
html.tema-oscuro .bubble.oso.mood-neutral     { background: #2b302c; }

html.tema-oscuro .bubble.oso.crisis-card {
  background: #332a22;
  border-color: #e8a87c;
  color: #f0e4d8;
}

/* Barra de navegación */
html.tema-oscuro .nav-bar {
  background: #242f2a;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
html.tema-oscuro .nav-bar-item {
  color: #7a9387;
}
html.tema-oscuro .nav-bar-item.active {
  background: #35514a;
  color: #e6efe9;
}
html.tema-oscuro .nav-bar-item .nav-bar-label {
  color: #e6efe9;
}

/* Superficies y tarjetas */
html.tema-oscuro .db-card,
html.tema-oscuro .prf-card,
html.tema-oscuro .ej-card,
html.tema-oscuro .lectura-card,
html.tema-oscuro .menu-cat-btn,
html.tema-oscuro .prf-font-btn,
html.tema-oscuro .prf-tema-btn,
html.tema-oscuro .db-btn-export,
html.tema-oscuro .checkin-card,
html.tema-oscuro .prf-modal {
  background: #242f2a;
  border-color: rgba(255, 255, 255, 0.08);
  color: #dde8e2;
}

html.tema-oscuro .prf-font-btn.activo,
html.tema-oscuro .prf-tema-btn.activo {
  background: #7db89e;
  border-color: #7db89e;
  color: white;
}

html.tema-oscuro .menu-cat-label,
html.tema-oscuro .ej-card-titulo,
html.tema-oscuro .lectura-card-nombre,
html.tema-oscuro .db-card-titulo,
html.tema-oscuro .prf-card-titulo,
html.tema-oscuro .prf-nombre,
html.tema-oscuro .db-titulo,
html.tema-oscuro .prf-modal-titulo,
html.tema-oscuro .onboarding-pregunta,
html.tema-oscuro .checkin-pregunta {
  color: #e6efe9;
}

html.tema-oscuro .menu-cat-desc,
html.tema-oscuro .ej-card-desc,
html.tema-oscuro .lectura-card-desc,
html.tema-oscuro .prf-memoria-texto,
html.tema-oscuro .db-resumen-texto,
html.tema-oscuro .prf-email,
html.tema-oscuro .prf-disclaimer-texto {
  color: #aec4ba;
}

/* Inputs */
html.tema-oscuro .auth-input,
html.tema-oscuro #input,
html.tema-oscuro .prf-modal-textarea,
html.tema-oscuro .onboarding-textarea {
  background: #242f2a;
  border-color: rgba(255, 255, 255, 0.12);
  color: #e6efe9;
}

html.tema-oscuro #input::placeholder,
html.tema-oscuro .auth-input::placeholder { color: #7d948a; }

html.tema-oscuro .input-container {
  background: linear-gradient(to top, #1b2521 80%, transparent);
}

/* Menús y overlays a pantalla completa */
html.tema-oscuro #ejercicios-menu,
html.tema-oscuro #submenu-detalle {
  background: rgba(23, 30, 26, 0.98);
}

/* Separadores */
html.tema-oscuro .chat-separador { color: #6d847a; }
html.tema-oscuro .chat-separador::before,
html.tema-oscuro .chat-separador::after {
  background: rgba(255, 255, 255, 0.12);
}

/* Tu opinión (feedback) */
html.tema-oscuro .fb-title,
html.tema-oscuro .fb-label,
html.tema-oscuro .fb-success h3 { color: #e6efe9; }
html.tema-oscuro .fb-subtitle,
html.tema-oscuro .fb-success p { color: #aec4ba; }
html.tema-oscuro .fb-textarea,
html.tema-oscuro .fb-rating-num,
html.tema-oscuro .fb-new-btn {
  background: #242f2a;
  border-color: rgba(255, 255, 255, 0.12);
  color: #e6efe9;
}

/* ============================================
   SELECTOR DE TEMA (Perfil)
   ============================================ */

.prf-tema-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.prf-tema-btn {
  flex: 1;
  max-width: 110px;
  padding: 10px 6px;
  border: 1.5px solid rgba(183, 211, 198, 0.5);
  border-radius: 12px;
  background: white;
  color: #4a6a5e;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
}

.prf-tema-btn.activo {
  background: #7db89e;
  border-color: #7db89e;
  color: white;
}

/* Toggle "Mostrar más / menos" de memorias */
.prf-memorias-toggle {
  display: block;
  margin: 10px auto 0;
  background: none;
  border: none;
  color: #7db89e;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  padding: 6px 12px;
  border-radius: 10px;
}

.prf-memorias-toggle:hover {
  background: rgba(125, 184, 158, 0.12);
}

html.tema-oscuro .prf-memorias-toggle {
  color: #8fc7ab;
}