/* ============================================
   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 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 {
     padding: 16px 22px;
     font-size: 1rem;
     font-family: inherit;
     font-weight: 700;
     border: none;
     border-radius: 22px;
     background: #7db89e;
     color: white;
     cursor: pointer;
     transition: transform 0.15s ease, background 0.2s;
     flex-shrink: 0;
   }
   
   .btn-enviar:hover {
     transform: scale(1.03);
     background: #6aaa8f;
   }
   
   .btn-enviar:active {
     transform: scale(0.97);
   }
   
   /* ============================================
      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;
   }

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