:root {
      --c1: #9b7fd4; --c2: #f4956a;
      --bg: #fdf6f0; --surface: #fff8f3; --card: #ffeee4; --border: #f0d9cc;
      --text: #2e2522; --muted: #a08880; --green: #5dbe8a; --red: #e06060; --amber: #e8941a;
      --serif: 'DM Serif Display', serif; --sans: 'DM Sans', sans-serif;
      --r: 16px; --r-sm: 10px; --t: 0.22s cubic-bezier(0.4,0,0.2,1);
      --nav-h: 68px; --top-h: 60px; --safe-bottom: env(safe-area-inset-bottom, 0px);
      /* Colores por hijo — hijo0=primario, hijo1=verde, hijo2=ámbar */
      --hijo0: var(--c1); --hijo0-bg: color-mix(in srgb,var(--c1) 15%,#fff); --hijo0-border: color-mix(in srgb,var(--c1) 35%,transparent);
      --hijo1: var(--green); --hijo1-bg: color-mix(in srgb,var(--green) 15%,#fff); --hijo1-border: color-mix(in srgb,var(--green) 35%,transparent);
      --hijo2: var(--amber); --hijo2-bg: color-mix(in srgb,var(--amber) 15%,#fff); --hijo2-border: color-mix(in srgb,var(--amber) 35%,transparent);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-text-size-adjust: 100%; }
    body { font-family: var(--sans); background: var(--bg); color: var(--text); height: 100dvh; overflow: hidden; -webkit-font-smoothing: antialiased; }

    /* SPLASH SIMPLE — solo mientras carga Firebase */
    #splash-inicial {
      position:fixed;inset:0;z-index:99999;
      background:linear-gradient(160deg,
        color-mix(in srgb,var(--c1) 20%,var(--bg)) 0%,
        color-mix(in srgb,var(--c2) 12%,var(--bg)) 60%,
        var(--bg) 100%);
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
    }
    #splash-inicial.si-hiding { animation:si-out 0.5s ease forwards; }
    @keyframes si-out { to { opacity:0; transform:scale(1.03); } }
    .si-halo {
      position:absolute;width:280px;height:280px;border-radius:50%;
      background:radial-gradient(circle,rgba(155,127,212,0.18) 0%,transparent 70%);
      animation:si-halo-pulse 2.4s ease-in-out infinite;
    }
    @keyframes si-halo-pulse {
      0%,100% { transform:scale(1);    opacity:0.7; }
      50%     { transform:scale(1.15); opacity:1;   }
    }
    .si-particle {
      position:absolute;border-radius:50%;opacity:0;
      animation:si-particle-float 4s ease-in-out infinite;
    }
    .si-p1 { width:8px;height:8px;background:var(--c1);top:18%;left:15%;animation-delay:1.4s; }
    .si-p2 { width:5px;height:5px;background:var(--c2);top:25%;right:18%;animation-delay:1.8s; }
    .si-p3 { width:6px;height:6px;background:var(--c2);bottom:30%;left:20%;animation-delay:2.1s; }
    .si-p4 { width:4px;height:4px;background:var(--c1);bottom:25%;right:15%;animation-delay:2.4s; }
    @keyframes si-particle-float {
      0%   { opacity:0;   transform:translateY(0)     scale(0.5); }
      30%  { opacity:0.6; }
      70%  { opacity:0.4; }
      100% { opacity:0;   transform:translateY(-28px)  scale(1); }
    }
    .si-logo-wrap { display:flex;flex-direction:column;align-items:center;gap:18px;position:relative;z-index:2; }
    .si-icon-bg {
      width:100px;height:100px;border-radius:26px;
      background:linear-gradient(135deg,var(--c1),var(--c2));
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 12px 40px color-mix(in srgb,var(--c1) 45%,transparent);
      animation:si-icon-in 0.7s cubic-bezier(0.34,1.56,0.64,1) both,
                si-float   3s ease-in-out 1.2s infinite;
    }
    @keyframes si-icon-in {
      from { transform:scale(0.3) rotate(-15deg);opacity:0; }
      to   { transform:scale(1)   rotate(0deg);  opacity:1; }
    }
    @keyframes si-float {
      0%,100% { transform:translateY(0px);  }
      50%     { transform:translateY(-6px); }
    }
    .si-bow-left  { transform-origin:20px 20px; animation:si-bow-l 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.6s both; }
    @keyframes si-bow-l  { from { transform:scaleX(0) rotate(-20deg);opacity:0; } to { transform:scaleX(1) rotate(0deg);opacity:1; } }
    .si-bow-right { transform-origin:20px 20px; animation:si-bow-r 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.85s both; }
    @keyframes si-bow-r  { from { transform:scaleX(0) rotate(20deg);opacity:0;  } to { transform:scaleX(1) rotate(0deg);opacity:1; } }
    .si-knot { animation:si-knot-in 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.1s both; }
    @keyframes si-knot-in { from { transform:scale(0);opacity:0; } to { transform:scale(1);opacity:1; } }
    .si-ribbon-l { transform-origin:20px 22px; animation:si-rib 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.3s both; }
    .si-ribbon-r { transform-origin:20px 22px; animation:si-rib 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.5s both; }
    @keyframes si-rib { from { transform:scaleY(0);opacity:0; } to { transform:scaleY(1);opacity:1; } }
    .si-wordmark {
      font-family:var(--serif);font-size:2.4rem;letter-spacing:-0.02em;
      background:linear-gradient(135deg,var(--c1),var(--c2));
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
      animation:si-fade-up 0.5s ease 1.8s both;
    }
    .si-tagline { font-family:var(--sans);font-size:0.9rem;color:var(--muted);letter-spacing:0.02em;animation:si-fade-up 0.5s ease 2.0s both; }
    @keyframes si-fade-up { from { opacity:0;transform:translateY(12px); } to { opacity:1;transform:translateY(0); } }
    .si-dots { display:flex;gap:7px;position:absolute;bottom:48px;animation:si-fade-up 0.4s ease 2.3s both; }
    .si-dot {
      width:7px;height:7px;border-radius:50%;
      background:linear-gradient(135deg,var(--c1),var(--c2));
      animation:si-dot-bounce 1.2s ease-in-out infinite;
    }
    .si-dot:nth-child(2) { animation-delay:0.15s; }
    .si-dot:nth-child(3) { animation-delay:0.30s; }
    @keyframes si-dot-bounce {
      0%,80%,100% { transform:scale(0.7);opacity:0.4; }
      40%         { transform:scale(1.1);opacity:1;   }
    }

    /* SPLASH BIENVENIDA — tras login */
    #splash-welcome {
      position:fixed; inset:0; z-index:9999;
      background:linear-gradient(160deg,
        color-mix(in srgb,var(--c1) 20%,var(--bg)) 0%,
        color-mix(in srgb,var(--c2) 12%,var(--bg)) 60%,
        var(--bg) 100%);
      display:none; flex-direction:column;
      align-items:center; justify-content:center;
      gap:20px; padding:40px;
    }
    #splash-welcome.hiding { animation:splash-out .6s ease forwards; }
    @keyframes splash-out { to { opacity:0; transform:scale(1.04); } }

    .splash-fotos-row { display:flex; gap:20px; align-items:flex-end; justify-content:center; flex-wrap:wrap; }
    .splash-foto-wrap { display:flex; flex-direction:column; align-items:center; gap:8px;
      animation:splash-pop .5s cubic-bezier(0.34,1.56,0.64,1) both; }
    .splash-foto-wrap:nth-child(2) { animation-delay:.1s; }
    .splash-foto-wrap:nth-child(3) { animation-delay:.2s; }
    @keyframes splash-pop { from { transform:scale(0.5); opacity:0; } to { transform:scale(1); opacity:1; } }

    .splash-foto {
      width:130px; height:130px; border-radius:50%;
      overflow:hidden; display:flex; align-items:center; justify-content:center;
      font-size:52px; transition:box-shadow .3s;
    }
    .splash-foto img { width:100%; height:100%; object-fit:cover; }
    .splash-foto-label { font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

    .splash-welcome-msg {
      font-family:var(--serif); font-size:1.9rem; text-align:center; line-height:1.3;
      background:linear-gradient(135deg,var(--c1),var(--c2));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      animation:splash-fade .5s ease .3s both;
    }
    .splash-welcome-sub { font-size:.95rem; color:var(--muted); text-align:center; animation:splash-fade .5s ease .5s both; }
    @keyframes splash-fade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

    /* SETUP — pantalla de onboarding tras registro */
    #screen-setup { height:100dvh; display:none; align-items:center; justify-content:center; background:linear-gradient(160deg,color-mix(in srgb,var(--c1) 22%,#fff) 0%,color-mix(in srgb,var(--c2) 12%,#fff) 50%,var(--bg) 100%); overflow-y:auto; position:relative; }
    #screen-setup.on { display:flex; }
    .setup-card { background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:36px 32px 28px; width:calc(100% - 32px); max-width:400px; box-shadow:0 8px 40px color-mix(in srgb,var(--c1) 15%,transparent); animation:slide-up .55s ease both; position:relative; z-index:1; margin:auto; }
    .setup-step { display:none; }
    .setup-step.active { display:block; animation:slide-up .25s ease; }
    .setup-header { text-align:center; margin-bottom:24px; }
    .setup-icon { font-size:40px; margin-bottom:10px; }
    .setup-title { font-family:var(--serif); font-size:1.5rem; letter-spacing:-0.02em; background:linear-gradient(135deg,var(--text),var(--c1)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:4px; }
    .setup-sub { color:var(--muted); font-size:.8rem; line-height:1.5; }
    .setup-field { margin-bottom:12px; }
    .setup-field label { display:block; font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.09em; margin-bottom:5px; }
    .setup-field input { width:100%; padding:11px 14px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text); font-family:var(--sans); font-size:.92rem; outline:none; transition:border-color var(--t); }
    .setup-field input:focus { border-color:var(--c1); }
    .tipo-selector { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
    .tipo-opt { border:2px solid var(--border); border-radius:14px; padding:14px 10px; text-align:center; cursor:pointer; transition:all var(--t); background:var(--card); }
    .tipo-opt:hover { border-color:var(--c1); }
    .tipo-opt.sel { border-color:var(--c1); background:color-mix(in srgb,var(--c1) 10%,var(--surface)); }
    .tipo-opt-icon { font-size:28px; margin-bottom:6px; }
    .tipo-opt-label { font-size:.8rem; font-weight:700; color:var(--text); }
    .tipo-opt-desc { font-size:.68rem; color:var(--muted); margin-top:2px; line-height:1.4; }
    .setup-error { color:var(--red); font-size:.76rem; text-align:center; min-height:14px; margin-bottom:6px; line-height:1.4; }
    .btn-setup-main { width:100%; background:linear-gradient(135deg,var(--c1),var(--c2)); color:#fff; border:none; padding:13px 20px; border-radius:var(--r-sm); cursor:pointer; font-family:var(--sans); font-size:.95rem; font-weight:700; transition:all var(--t); margin-bottom:8px; }
    .btn-setup-main:hover { opacity:.88; transform:translateY(-1px); }
    .btn-setup-main:disabled { opacity:.35; cursor:not-allowed; transform:none !important; }
    .btn-setup-sec { width:100%; background:transparent; color:var(--muted); border:1px solid var(--border); padding:11px 20px; border-radius:var(--r-sm); cursor:pointer; font-family:var(--sans); font-size:.88rem; font-weight:600; transition:all var(--t); }
    .btn-setup-sec:hover { border-color:var(--c1); color:var(--text); }
    /* Código de invitación */
    .codigo-display { background:color-mix(in srgb,var(--c1) 8%,var(--card)); border:2px dashed color-mix(in srgb,var(--c1) 40%,var(--border)); border-radius:16px; padding:20px; text-align:center; margin-bottom:16px; }
    .codigo-valor { font-family:monospace; font-size:1.6rem; font-weight:700; letter-spacing:0.15em; color:var(--c1); margin-bottom:8px; }
    .codigo-expira { font-size:.72rem; color:var(--muted); }
    .codigo-btns { display:flex; gap:8px; margin-bottom:12px; }
    .codigo-btns button { flex:1; padding:10px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface); color:var(--text); font-family:var(--sans); font-size:.82rem; font-weight:600; cursor:pointer; transition:all var(--t); display:flex; align-items:center; justify-content:center; gap:6px; }
    .codigo-btns button:hover { border-color:var(--c1); color:var(--c1); }
    /* Input código unirse */
    .codigo-input-wrap { display:flex; gap:8px; margin-bottom:12px; }
    .codigo-input-wrap input { flex:1; padding:11px 14px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text); font-family:monospace; font-size:1rem; letter-spacing:0.1em; text-transform:uppercase; outline:none; transition:border-color var(--t); }
    .codigo-input-wrap input:focus { border-color:var(--c1); }
    .codigo-input-wrap button { padding:11px 16px; border-radius:var(--r-sm); border:none; background:linear-gradient(135deg,var(--c1),var(--c2)); color:#fff; font-family:var(--sans); font-size:.88rem; font-weight:700; cursor:pointer; transition:all var(--t); white-space:nowrap; }
    .codigo-input-wrap button:disabled { opacity:.35; cursor:not-allowed; }
    .setup-divider { display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--muted); font-size:.7rem; }
    .setup-divider::before,.setup-divider::after { content:''; flex:1; height:1px; background:var(--border); }
    .setup-back { display:flex; align-items:center; gap:5px; font-size:.75rem; color:var(--muted); cursor:pointer; background:none; border:none; font-family:var(--sans); margin-bottom:14px; padding:0; }
    .rol-selector { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
    .rol-opt { flex:1; min-width:72px; border:2px solid var(--border); border-radius:12px; padding:10px 6px; text-align:center; cursor:pointer; transition:all var(--t); background:var(--card); }
    .rol-opt:hover { border-color:var(--c1); }
    .rol-opt.sel { border-color:var(--c1); background:color-mix(in srgb,var(--c1) 10%,var(--surface)); }
    .rol-opt-icon { font-size:22px; margin-bottom:4px; }
    .rol-opt-label { font-size:.75rem; font-weight:700; color:var(--text); }
    .rol-otro-wrap { display:none; margin-bottom:14px; }
    .rol-otro-wrap.visible { display:block; }
    .rol-otro-wrap input { width:100%; padding:10px 14px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text); font-family:var(--sans); font-size:.9rem; outline:none; transition:border-color var(--t); }
    .rol-otro-wrap input:focus { border-color:var(--c1); }
    .setup-back:hover { color:var(--text); }
    .setup-progress { display:flex; justify-content:center; gap:6px; margin-bottom:20px; }
    .setup-dot { width:8px; height:8px; border-radius:50%; background:var(--border); transition:all var(--t); }
    .setup-dot.active { background:var(--c1); transform:scale(1.2); }

    /* LOGIN */
    #screen-login { height:100dvh; display:none; align-items:center; justify-content:center; background:linear-gradient(160deg,color-mix(in srgb,var(--c1) 22%,#fff) 0%,color-mix(in srgb,var(--c2) 12%,#fff) 50%,var(--bg) 100%); overflow:hidden; position:relative; overflow-y:auto; }
    #screen-login::before { content:''; position:absolute; width:420px; height:420px; border-radius:50%; border:1px solid color-mix(in srgb,var(--c1) 20%,transparent); top:-160px; left:50%; transform:translateX(-50%); animation:pulse-ring 7s ease-in-out infinite; pointer-events:none; }
    @keyframes pulse-ring { 0%,100%{transform:translateX(-50%) scale(1);opacity:.4} 50%{transform:translateX(-50%) scale(1.15);opacity:1} }
    .login-card { background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:36px 32px 28px; width:calc(100% - 32px); max-width:380px; box-shadow:0 8px 40px color-mix(in srgb,var(--c1) 15%,transparent); animation:slide-up .55s ease both; position:relative; z-index:1; margin:auto; }
    @keyframes slide-up { from { opacity:0; transform:translateY(28px); } }
    .login-logo { text-align:center; margin-bottom:24px; }
    .login-symbol { width:56px; height:56px; margin:0 auto 10px; background:linear-gradient(135deg,var(--c1),var(--c2)); border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 4px 20px color-mix(in srgb,var(--c1) 35%,transparent); }
    .login-title { font-family:var(--serif); font-size:1.7rem; letter-spacing:-0.02em; background:linear-gradient(135deg,var(--text),var(--c1)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    .login-sub { color:var(--muted); font-size:.8rem; margin-top:3px; }

    /* Vistas del login (acceso / registro / recuperar) */
    .login-view { display:none; }
    .login-view.active { display:block; animation:slide-up .25s ease; }

    /* Tabs acceso / registro */
    .login-tabs { display:flex; gap:6px; background:var(--card); border-radius:12px; padding:4px; margin-bottom:18px; }
    .login-tab { flex:1; padding:8px 4px; border-radius:9px; border:none; background:transparent; font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--muted); cursor:pointer; transition:all var(--t); }
    .login-tab.active { background:var(--surface); color:var(--text); box-shadow:0 1px 6px color-mix(in srgb,var(--c1) 18%,transparent); }

    /* Campos */
    .login-field { margin-bottom:11px; }
    .login-field label { display:block; font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.09em; margin-bottom:5px; }
    .login-field input { width:100%; padding:11px 14px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text); font-family:var(--sans); font-size:.9rem; outline:none; transition:border-color var(--t); }
    .login-field input:focus { border-color:var(--c1); }
    .login-field .pass-wrap { position:relative; }
    .login-field .pass-wrap input { padding-right:40px; box-sizing:border-box; }
    .login-field .pass-wrap .btn-eye { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; padding:4px; cursor:pointer; color:var(--muted); display:flex; align-items:center; line-height:1; }

    /* Botón principal email */
    .btn-email-main { width:100%; background:linear-gradient(135deg,var(--c1),var(--c2)); color:#fff; border:none; display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 20px; border-radius:var(--r-sm); cursor:pointer; font-family:var(--sans); font-size:.93rem; font-weight:700; transition:all var(--t); margin-bottom:8px; }
    .btn-email-main:hover { opacity:.88; transform:translateY(-1px); }
    .btn-email-main:disabled { opacity:.35; cursor:not-allowed; transform:none !important; }

    /* Botón Google */
    .btn-google { width:100%; background:#fff; color:#3c3c3c; border:none; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 20px; border-radius:var(--r-sm); cursor:pointer; font-family:var(--sans); font-size:.93rem; font-weight:600; box-shadow:0 2px 10px rgba(0,0,0,0.2); transition:all var(--t); }
    .btn-google:hover { transform:translateY(-1px); box-shadow:0 4px 18px rgba(0,0,0,0.28); }
    .btn-google:disabled { opacity:.4; cursor:not-allowed; transform:none !important; }

    /* Separador */
    .login-divider { display:flex; align-items:center; gap:10px; margin:13px 0; color:var(--muted); font-size:.7rem; }
    .login-divider::before,.login-divider::after { content:''; flex:1; height:1px; background:var(--border); }

    /* Enlace olvidé / volver */
    .login-link { font-size:.75rem; color:var(--c1); text-align:center; cursor:pointer; text-decoration:underline; margin-top:6px; display:block; background:none; border:none; font-family:var(--sans); width:100%; padding:0; line-height:1.4; }
    .login-link:hover { opacity:.75; }
    .login-back { display:flex; align-items:center; gap:5px; font-size:.75rem; color:var(--muted); cursor:pointer; background:none; border:none; font-family:var(--sans); margin-bottom:14px; padding:0; }
    .login-back:hover { color:var(--text); }

    /* Mensajes estado */
    .login-error { color:var(--red); font-size:.76rem; text-align:center; min-height:14px; margin-bottom:6px; line-height:1.4; }
    .login-ok { color:var(--green); font-size:.76rem; text-align:center; min-height:14px; margin-bottom:6px; line-height:1.4; }

    /* Política privacidad */
    .consent-wrap { display:flex; align-items:flex-start; gap:10px; background:color-mix(in srgb,var(--c1) 7%,var(--surface)); border:1px solid color-mix(in srgb,var(--c1) 20%,var(--border)); border-radius:10px; padding:11px; margin-bottom:12px; cursor:pointer; transition:border-color var(--t); }
    .consent-wrap:hover { border-color:var(--c1); }
    .consent-wrap input[type=checkbox] { width:18px; height:18px; flex-shrink:0; margin-top:1px; accent-color:var(--c1); cursor:pointer; }
    .consent-label { font-size:.7rem; color:var(--muted); line-height:1.5; cursor:pointer; }
    .consent-label a { color:var(--c1); text-decoration:underline; font-weight:600; }
    .login-note { text-align:center; font-size:.68rem; color:var(--muted); margin-top:10px; line-height:1.5; }

    /* APP */
    #screen-app { display:none; height:100dvh; flex-direction:column; }
    #screen-app.on { display:flex; }
    /* UPGRADE MODAL */
    .upgrade-features { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px; }
    .upgrade-feat { display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--muted); }
    .upgrade-feat .uf-icon { display:flex; align-items:center; flex-shrink:0; }
    .upgrade-feat strong { color:var(--text); font-weight:600; }
    .premium-badge { display:inline-flex; align-items:center; gap:5px; background:linear-gradient(135deg,var(--c1),var(--c2)); color:#fff; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:99px; letter-spacing:.05em; margin-left:6px; vertical-align:middle; }

    #screen-trial { height:100dvh; display:none; align-items:center; justify-content:center; background:linear-gradient(160deg,color-mix(in srgb,var(--c1) 22%,#fff) 0%,color-mix(in srgb,var(--c2) 12%,#fff) 50%,var(--bg) 100%); overflow-y:auto; position:relative; }
    #screen-trial.on { display:flex; }
    .trial-card { background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:40px 32px; width:calc(100% - 32px); max-width:380px; box-shadow:0 8px 40px color-mix(in srgb,var(--c1) 15%,transparent); text-align:center; margin:auto; animation:slide-up .55s ease both; }
    .trial-icon { font-size:52px; margin-bottom:16px; }
    .trial-title { font-family:var(--serif); font-size:1.6rem; letter-spacing:-0.02em; margin-bottom:8px; }
    .trial-sub { font-size:.85rem; color:var(--muted); line-height:1.6; margin-bottom:24px; }
    .trial-badge { display:inline-flex; align-items:center; gap:8px; background:color-mix(in srgb,var(--amber) 12%,var(--card)); border:1px solid color-mix(in srgb,var(--amber) 30%,var(--border)); border-radius:99px; padding:6px 16px; font-size:.78rem; color:var(--amber); font-weight:600; margin-bottom:24px; }
    .trial-info { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:24px; font-size:.8rem; color:var(--muted); line-height:1.7; text-align:left; }
    .trial-info strong { color:var(--text); }

    /* TOPBAR */
    .topbar { height:var(--top-h); flex-shrink:0; display:flex; align-items:center; gap:10px; padding:0 16px; background:var(--surface); border-bottom:1px solid var(--border); }
    .topbar-brand { flex:1; }
    .topbar-name { font-family:var(--serif); font-size:1.2rem; letter-spacing:-0.01em; background:linear-gradient(135deg,var(--c1),var(--c2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
    .topbar-year { font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-top:1px; }
    .topbar-right { display:flex; align-items:center; gap:8px; }
    .avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; background:linear-gradient(135deg,var(--c1),var(--c2)); overflow:hidden; }
    .avatar img { width:100%; height:100%; object-fit:cover; }
    .topbar-rol { font-size:.72rem; font-weight:600; padding:2px 8px; border-radius:99px; background:color-mix(in srgb,var(--c1) 15%,var(--surface)); color:var(--c1); }
    .plan-badge { display:inline-flex; align-items:center; gap:4px; font-size:.65rem; font-weight:700; padding:2px 8px; border-radius:99px; letter-spacing:.04em; }
    .plan-badge svg { display:block; flex-shrink:0; }
    .plan-free    { background:color-mix(in srgb,var(--muted) 15%,var(--surface)); color:var(--muted); }
    .plan-trial   { background:color-mix(in srgb,#22d3ee 15%,var(--surface)); color:#0ea5e9; }
    .plan-premium  { background:color-mix(in srgb,var(--amber) 18%,var(--surface)); color:#d97706; }
    .plan-canceling { background:var(--amber); color:#fff; }
    #screen-mi-perfil {
      position: fixed;
      inset: 0;
      z-index: 400;
      background: var(--bg);
      overflow-y: auto;
      font-family: var(--sans);
      transform: translateY(-100%);
      transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
      display: block !important;
      pointer-events: none;
    }
    #screen-mi-perfil.perfil-open {
      transform: translateY(0);
      pointer-events: all;
    }
    .btn-icon { width:34px; height:34px; border-radius:9px; background:transparent; border:1px solid var(--border); color:var(--muted); cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; transition:all var(--t); }
    .btn-icon:hover { background:var(--card); color:var(--text); }
    #btn-refresh { font-size:18px; }
    #btn-refresh.spinning { animation:spin-r .6s linear; }
    @keyframes spin-r { to { transform:rotate(360deg); } }

    /* BODY */
    .app-body { flex:1; overflow-y:auto; overflow-x:hidden; padding:12px 12px calc(var(--nav-h) + var(--safe-bottom) + 8px); }

    /* PANELS */
    .panel { display:none; animation:panel-in .28s ease; }
    .panel.active { display:block; }
    @keyframes panel-in { from { opacity:0; transform:translateY(10px); } }

    /* BOTTOM NAV — pill style */
    :root { --nav-h: 68px; --nav-bg: #ffffff; --bump-size: 54px; }
    .bottom-nav {
      position: fixed; bottom: 0; left: 0; right: 0;
      height: calc(var(--nav-h) + var(--safe-bottom) + 20px);
      padding: 0 16px calc(var(--safe-bottom) + 20px);
      background: transparent;
      border-top: none;
      display: flex; align-items: flex-end; justify-content: center;
      z-index: 100; pointer-events: none;
    }
    .bottom-nav-inner {
      width: 100%; max-width: 480px;
      height: var(--nav-h);
      background: var(--nav-bg);
      border-radius: 28px;
      box-shadow: 0 8px 32px rgba(100,60,180,.14), 0 2px 8px rgba(0,0,0,.06);
      display: flex; align-items: center; padding: 0 6px;
      pointer-events: all; position: relative; overflow: visible;
    }

    .nav-tab {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      gap: 3px; padding: 8px 4px;
      background: none; border: none;
      color: var(--muted);
      font-family: var(--sans); font-size: .56rem; font-weight: 700;
      cursor: pointer; transition: color var(--t);
      text-transform: uppercase; letter-spacing: .07em;
      -webkit-tap-highlight-color: transparent; outline: none;
      position: relative; border-radius: 16px;
    }
    .nav-tab svg {
      width: 22px; height: 22px; stroke-width: 1.7;
      stroke: currentColor; fill: none;
      stroke-linecap: round; stroke-linejoin: round;
      transition: transform var(--t), stroke-width var(--t);
    }
    .nav-tab.active { color: var(--c1); }
    .nav-tab.active svg { transform: translateY(-2px); stroke-width: 2.2; }
    .nav-tab::after {
      content: ''; display: block;
      width: 4px; height: 4px; border-radius: 50%;
      background: linear-gradient(135deg, var(--c1), var(--c2));
      margin: 0 auto; opacity: 0; transition: opacity var(--t);
    }
    .nav-tab.active::after { opacity: 1; }
    .nav-tab:active svg { transform: scale(.86); }
    /* Tab bump central */
    .nav-tab-bump {
      flex: 1.4; display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 3px;
      background: none; border: none;
      color: var(--muted);
      font-family: var(--sans); font-size: .56rem; font-weight: 700;
      cursor: pointer; transition: color var(--t);
      text-transform: uppercase; letter-spacing: .07em;
      -webkit-tap-highlight-color: transparent; outline: none;
      padding-bottom: 0; margin-top: -22px;
      position: relative; z-index: 10;
    }
    .nav-tab-bump.active { color: var(--c1); }
    .nav-tab-bump::after {
      content: ''; display: block;
      width: 4px; height: 4px; border-radius: 50%;
      background: linear-gradient(135deg, var(--c1), var(--c2));
      margin: 0 auto; opacity: 0; transition: opacity var(--t);
    }
    .nav-tab-bump.active::after { opacity: 1; }
    .bump-circle {
      width: var(--bump-size); height: var(--bump-size); border-radius: 50%;
      background: linear-gradient(135deg, var(--c1), color-mix(in srgb, var(--c1) 60%, var(--c2)));
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 20px color-mix(in srgb, var(--c1) 55%, transparent), 0 1px 4px rgba(0,0,0,.12);
      transition: transform var(--t), box-shadow var(--t);
      margin-bottom: 4px; flex-shrink: 0;
    }
    .bump-circle svg {
      width: 24px; height: 24px; stroke: #fff; stroke-width: 2; fill: none;
      stroke-linecap: round; stroke-linejoin: round;
    }
    .nav-tab-bump:active .bump-circle { transform: scale(0.91); }
    .nav-tab-bump.active .bump-circle {
      box-shadow: 0 6px 28px color-mix(in srgb, var(--c1) 70%, transparent), 0 0 0 4px rgba(255,255,255,.22);
    }
    .badge { position:absolute; top:3px; right:calc(50% - 20px); background:var(--red); color:#fff; font-size:.5rem; font-weight:800; width:15px; height:15px; border-radius:50%; display:none; align-items:center; justify-content:center; border:2px solid #fff; pointer-events:none; }
    .badge.on { display:flex; }

    /* MEDS DASHBOARD */
    .med-dash-card {
      border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px;
      cursor: pointer; transition: transform var(--t);
      display: flex; flex-direction: column; gap: 6px;
    }
    .med-dash-card:active { transform: scale(0.98); }
    .med-dash-header { display: flex; align-items: center; gap: 8px; }
    .med-dash-emoji { font-size: 1.1rem; line-height: 1; }
    .med-dash-nombre { font-size: .82rem; font-weight: 700; }
    .med-dash-vacia { font-size: .75rem; opacity: .6; font-style: italic; }
    .med-dash-pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px; border-radius: 20px;
      font-size: .72rem; font-weight: 500;
    }
    .med-dash-pills { display: flex; flex-wrap: wrap; gap: 5px; padding-left: 26px; }

    /* CARDS */
    .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px; margin-bottom:12px; }
    .card-title { font-size:.68rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px; }

    /* WELCOME */
    /* ── WELCOME CARD ── */
    .welcome-header {
      margin-bottom:12px;
      background:linear-gradient(135deg,
        color-mix(in srgb,var(--c1) 14%,var(--surface)),
        color-mix(in srgb,var(--c2) 10%,var(--surface)));
      border:1px solid color-mix(in srgb,var(--c1) 22%,var(--border));
      border-radius:var(--r);
      padding:16px 18px;
      position:relative; overflow:hidden;
    }
    .welcome-header::before {
      content:''; position:absolute; inset:0;
      background:linear-gradient(135deg,
        color-mix(in srgb,var(--c1) 8%,transparent),
        transparent 60%);
      pointer-events:none;
    }
    .welcome-header h2 {
      font-family:var(--serif); font-size:1.55rem; font-weight:400;
      background:linear-gradient(135deg,var(--c1),var(--c2));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      line-height:1.2;
    }
    .welcome-header p { font-size:.78rem; color:var(--muted); margin-top:4px; text-transform:capitalize; }

    /* STATS */
    .stats-row { display:grid; gap:10px; margin-bottom:12px; grid-template-columns:repeat(3,1fr); }
    .stat-card { border-radius:var(--r); padding:12px; text-align:center; cursor:pointer; transition:all var(--t); border:1px solid transparent; }
    .stat-card:active { transform:scale(0.95); }
    /* Mensajes — tono primario */
    .stat-card.s-msgs {
      background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 14%,var(--surface)),color-mix(in srgb,var(--c1) 6%,var(--surface)));
      border-color:color-mix(in srgb,var(--c1) 25%,var(--border));
    }
    .stat-card.s-msgs .stat-num { background:linear-gradient(135deg,var(--c1),color-mix(in srgb,var(--c1) 70%,var(--c2))); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    /* Documentos — tono secundario */
    .stat-card.s-docs {
      background:linear-gradient(135deg,color-mix(in srgb,var(--c2) 14%,var(--surface)),color-mix(in srgb,var(--c2) 6%,var(--surface)));
      border-color:color-mix(in srgb,var(--c2) 25%,var(--border));
    }
    .stat-card.s-docs .stat-num { background:linear-gradient(135deg,var(--c2),color-mix(in srgb,var(--c2) 60%,var(--c1))); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    /* Medicación — tono verde */
    .stat-card.s-meds {
      background:linear-gradient(135deg,color-mix(in srgb,var(--green) 14%,var(--surface)),color-mix(in srgb,var(--green) 6%,var(--surface)));
      border-color:color-mix(in srgb,var(--green) 25%,var(--border));
    }
    .stat-card.s-meds .stat-num { background:linear-gradient(135deg,var(--green),color-mix(in srgb,var(--green) 60%,var(--c1))); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    .stat-num { font-family:var(--serif); font-size:1.5rem; font-weight:400; }
    .stat-label { font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }

    /* QUICK ACTIONS */
    .quick-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
    .qa-btn { display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 6px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; font-family:var(--sans); font-size:.65rem; font-weight:600; color:var(--muted); transition:all var(--t); text-transform:uppercase; letter-spacing:.04em; }
    .qa-btn:active { transform:scale(0.95); }
    .qa-icon { font-size:20px; }

    /* ALERTS */
    .alert-banner { display:none; align-items:center; gap:12px; background:linear-gradient(135deg,#fff3e0,#ffe0b2); border:1px solid #ffb74d; border-radius:var(--r); padding:12px 16px; margin-bottom:12px; cursor:pointer; }
    .alert-banner.on { display:flex; }
    .alert-text { font-weight:700; font-size:.85rem; color:#e65100; }
    .alert-sub { font-size:.72rem; color:#bf360c; }

    /* UPCOMING */
    .event-day-block { padding:9px 0; border-bottom:1px solid var(--border); }
    .event-day-block:last-child { border-bottom:none; }
    .event-day-header { display:flex; align-items:flex-start; gap:12px; }
    .event-date-badge { width:48px; min-height:62px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; gap:1px; padding:6px 4px; }
    .event-date-weekday { font-size:.52rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,0.7); line-height:1; }
    .event-date-day { font-size:1.3rem; font-weight:800; line-height:1; color:#fff; }
    .event-date-month { font-size:.55rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,0.85); }
    .event-turnos-col { flex:1; display:flex; flex-direction:column; gap:4px; padding-top:2px; }
    .event-row { display:flex; align-items:center; gap:6px; }
    .event-name { font-size:.85rem; font-weight:500; flex:1; }
    .event-turno { font-size:.62rem; font-weight:700; padding:2px 7px; border-radius:99px; color:#fff; white-space:nowrap; }
    .event-note { font-size:.75rem; font-style:italic; color:var(--muted); padding:3px 0 1px 2px; line-height:1.4; display:flex; gap:5px; align-items:flex-start; }
    .event-note-icon { font-size:.7rem; flex-shrink:0; margin-top:1px; }
    .upcoming-filter { display:flex; gap:6px; flex-wrap:wrap; }
    .upcoming-chip { font-size:.65rem; font-weight:600; padding:3px 9px; border-radius:99px; cursor:pointer; background:var(--card); border:1px solid var(--border); color:var(--muted); transition:all var(--t); white-space:nowrap; }
    .upcoming-chip.active { background:linear-gradient(135deg,var(--c1),var(--c2)); color:#fff; border-color:transparent; }

    /* MENSAJES */
    .chat-container { padding:0; overflow:hidden; position:relative; }
    .msg-opts { display:flex; gap:6px; padding:12px 4px 12px 14px; border-bottom:1px solid var(--border); align-items:center; }

    /* Botón Mejorar con IA */
    .btn-msg-ia {
      display:inline-flex;align-items:center;gap:5px;
      padding:5px 11px;border-radius:99px;
      background:var(--surface);border:1px solid var(--border);
      box-shadow:2px 2px 6px rgba(0,0,0,.07),-1px -1px 4px rgba(255,255,255,.9);
      cursor:pointer;font-family:var(--sans);font-size:.72rem;font-weight:700;
      white-space:nowrap;transition:all var(--t);flex-shrink:0;
      line-height:1;
    }
    .btn-msg-ia:active { transform:scale(0.96); box-shadow:1px 1px 3px rgba(0,0,0,.07); }
    .btn-msg-ia:disabled { opacity:.55; cursor:default; transform:none; }
    .btn-msg-ia .ia-icon {
      display:flex;align-items:center;justify-content:center;
      width:17px;height:17px;border-radius:5px;flex-shrink:0;
      background:linear-gradient(135deg,#22d3ee,#a855f7);
    }
    .btn-msg-ia .ia-label {
      background:linear-gradient(90deg,#22d3ee,#a855f7);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    }
    .btn-msg-ia.ia-activo {
      background:linear-gradient(135deg,color-mix(in srgb,#22d3ee 15%,var(--surface)),color-mix(in srgb,#a855f7 15%,var(--surface)));
      border-color:color-mix(in srgb,#a855f7 50%,var(--border));
      box-shadow:0 0 0 2px color-mix(in srgb,#a855f7 25%,transparent),2px 2px 6px rgba(0,0,0,.07);
    }
    .btn-send.ia-activo {
      background:linear-gradient(135deg,#22d3ee,#a855f7);
    }

    /* Opciones IA */
    .ia-opcion {
      background:var(--surface);border:1.5px solid var(--border);
      border-radius:var(--r-sm);padding:12px 14px;cursor:pointer;
      transition:all var(--t);
    }
    .ia-opcion:active { transform:scale(0.98); }
    .ia-opcion:hover { border-color:color-mix(in srgb,#a855f7 40%,var(--border)); background:color-mix(in srgb,#a855f7 4%,var(--surface)); }
    .ia-opcion-label {
      font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
      background:linear-gradient(90deg,#22d3ee,#a855f7);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
      margin-bottom:5px;
    }
    .ia-opcion-texto {
      font-size:.87rem;line-height:1.55;color:var(--text);white-space:pre-wrap;word-break:break-word;
    }

    /* Panel ajustes chat — slide-in desde la derecha, encima del chat */
    .chat-ajustes-overlay {
      position:absolute; inset:0; z-index:20;
      pointer-events:none;   /* cerrado: invisible a clicks */
    }
    .chat-ajustes-overlay.open {
      pointer-events:auto;   /* abierto: recibir clicks en toda el área */
    }
    .chat-ajustes-backdrop {
      position:absolute; inset:0; z-index:0;
      background:rgba(0,0,0,0); backdrop-filter:blur(0px);
      transition:background .28s ease, backdrop-filter .28s ease;
      border-radius:inherit;
    }
    .chat-ajustes-overlay.open .chat-ajustes-backdrop {
      background:rgba(0,0,0,0.25); backdrop-filter:blur(2px);
    }
    .chat-ajustes-drawer {
      position:absolute; top:0; right:0; bottom:0;
      width:min(280px, 88%);
      background:var(--surface);
      border-left:1px solid var(--border);
      border-radius:0 var(--r-sm) var(--r-sm) 0;
      box-shadow:-8px 0 32px rgba(0,0,0,0.12);
      transform:translateX(100%);
      transition:transform .3s cubic-bezier(.4,0,.2,1);
      display:flex; flex-direction:column;
      overflow:hidden;
      z-index:1; /* siempre por encima del backdrop */
    }
    .chat-ajustes-overlay.open .chat-ajustes-drawer {
      transform:translateX(0);
    }
    .chat-ajustes-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 16px 12px;
      border-bottom:1px solid var(--border);
      flex-shrink:0;
    }
    .chat-ajustes-title {
      font-size:.8rem; font-weight:700; letter-spacing:.04em;
      text-transform:uppercase; color:var(--muted);
    }
    .chat-ajustes-close {
      background:none; border:none; cursor:pointer;
      color:var(--muted); padding:4px; line-height:1;
      border-radius:6px; display:flex; align-items:center;
      transition:background var(--t), color var(--t);
    }
    .chat-ajustes-close:hover { background:var(--card); color:var(--text); }
    .chat-ajustes-body {
      flex:1; overflow-y:auto; padding:16px;
      display:flex; flex-direction:column; gap:0;
    }
    .chat-ajustes-row {
      display:flex; align-items:center; justify-content:space-between;
      gap:12px; padding:14px 0;
    }
    .chat-ajustes-row + .chat-ajustes-row {
      border-top:1px solid var(--border);
    }
    .chat-ajustes-label { flex:1; min-width:0; }
    .chat-ajustes-label strong {
      display:block; font-size:.85rem; font-weight:600; color:var(--text);
      margin-bottom:3px;
    }
    .chat-ajustes-label span {
      font-size:.72rem; color:var(--muted); line-height:1.45;
    }
    .chat-ios-toggle {
      flex-shrink:0; width:44px; height:26px; border-radius:13px;
      border:none; cursor:pointer; position:relative;
      transition:background .22s ease; background:var(--c1);
    }
    .chat-ios-toggle-knob {
      position:absolute; top:3px; left:3px;
      width:20px; height:20px; border-radius:50%;
      background:#fff;
      box-shadow:0 1px 4px rgba(0,0,0,0.2);
      transition:transform .22s ease; display:block;
    }
    .chip { font-size:.75rem; font-weight:600; padding:5px 12px; border-radius:99px; cursor:pointer; background:var(--card); border:1px solid var(--border); color:var(--muted); transition:all var(--t); }
    .chip.active { background:linear-gradient(135deg,var(--c1),var(--c2)); color:#fff; border-color:transparent; }
    .chat-container { display:flex; flex-direction:column; height:calc(100dvh - var(--top-h) - var(--nav-h) - var(--safe-bottom) - 26px); margin-bottom:0 !important; }
    .chat-messages { flex:1; min-height:0; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
    .msg { max-width:78%; padding:9px 13px; border-radius:14px; font-size:.87rem; line-height:1.4; position:relative; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
    .msg.mine { align-self:flex-end; background:linear-gradient(135deg,var(--c1),var(--c2)); color:#fff; border-bottom-right-radius:4px; }
    .msg.other { align-self:flex-start; background:var(--card); border:1px solid var(--border); border-bottom-left-radius:4px; }
    /* ── NIVELES DE PRIORIDAD ──────────────────────────────────────────────── */
    /* nivel 2: Importante (ámbar) */
    .msg.nivel-2 { border:1.5px solid rgba(251,191,36,0.45) !important; }
    .msg.other.nivel-2 { background:rgba(251,191,36,0.06) !important; }
    .msg.mine.nivel-2  { background:linear-gradient(135deg,rgba(180,130,0,0.85),rgba(217,160,0,0.9)) !important; }
    /* nivel 3: Urgente (naranja) */
    .msg.nivel-3 { border:1.5px solid rgba(249,115,22,0.5) !important; }
    .msg.other.nivel-3 { background:rgba(249,115,22,0.07) !important; }
    .msg.mine.nivel-3  { background:linear-gradient(135deg,rgba(194,65,12,0.88),rgba(234,88,12,0.92)) !important; }
    /* nivel 4: Emergencia (rojo intenso + pulso) */
    .msg.nivel-4 { border:2px solid rgba(220,38,38,0.7) !important; }
    .msg.other.nivel-4 { background:rgba(220,38,38,0.09) !important; animation: nivel4-pulse 1.8s ease-in-out infinite; }
    .msg.mine.nivel-4  { background:linear-gradient(135deg,#7f1d1d,#dc2626) !important; animation: nivel4-pulse 1.8s ease-in-out infinite; }
    @keyframes nivel4-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
      50%      { box-shadow: 0 0 0 4px rgba(220,38,38,0.15); }
    }

    .urgente-badge {
      display:inline-flex; align-items:center; gap:3px; margin-bottom:5px;
      font-size:.58rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
      border-radius:4px; padding:2px 7px;
    }
    .urgente-badge.nb-2 { color:#92400e; background:rgba(251,191,36,0.18); }
    .urgente-badge.nb-3 { color:#c2410c; background:rgba(249,115,22,0.14); }
    .urgente-badge.nb-4 { color:#fff; background:rgba(220,38,38,0.75); }
    .msg.mine .urgente-badge { color:rgba(255,255,255,0.92); background:rgba(255,255,255,0.18); }

    .urgente-leido {
      font-size:.62rem; color:var(--green); margin-top:5px; opacity:.9;
      display:flex; align-items:center; gap:4px;
    }
    .msg.mine .urgente-leido { color:rgba(255,255,255,0.85); }

    /* botón "Entendido" en mensajes recibidos nivel 3-4 */
    .btn-entendido {
      display:inline-flex; align-items:center; gap:5px; margin-top:7px;
      font-size:.7rem; font-weight:700; padding:5px 11px;
      border-radius:6px; cursor:pointer; border:none; font-family:var(--sans);
      background:rgba(220,38,38,0.12); color:var(--red); transition:background var(--t);
    }
    .btn-entendido:hover { background:rgba(220,38,38,0.22); }
    .msg.nivel-2 .btn-entendido { background:rgba(251,191,36,0.12); color:#92400e; }
    .msg.nivel-2 .btn-entendido:hover { background:rgba(251,191,36,0.24); }
    .msg.nivel-3 .btn-entendido { background:rgba(249,115,22,0.12); color:#c2410c; }
    .msg.nivel-3 .btn-entendido:hover { background:rgba(249,115,22,0.24); }

    /* banner dashboard por nivel */
    .urgentes-banner-inner {
      display:flex; align-items:center; gap:12px; padding:13px 16px;
      border-radius:var(--r-sm); cursor:pointer; transition:background var(--t);
      margin-bottom:14px;
    }
    .urgentes-banner-inner.bn-4 {
      background:rgba(220,38,38,0.08); border:1.5px solid rgba(220,38,38,0.35);
      animation: urgente-pulse 1.6s ease-in-out infinite;
    }
    .urgentes-banner-inner.bn-3 {
      background:rgba(249,115,22,0.07); border:1.5px solid rgba(249,115,22,0.35);
      animation: urgente-pulse 2s ease-in-out infinite;
    }
    .urgentes-banner-inner.bn-2 {
      background:rgba(251,191,36,0.07); border:1.5px solid rgba(251,191,36,0.3);
    }
    .urgentes-banner-inner:hover { filter: brightness(1.08); }
    @keyframes urgente-pulse {
      0%,100% { border-color:rgba(220,38,38,0.25); }
      50%      { border-color:rgba(220,38,38,0.6); }
    }

    /* barra modo urgente bajo el chat */
    .urgente-mode-bar {
      display:none; align-items:center; gap:6px; padding:6px 14px;
      border-bottom:1px solid rgba(248,113,113,0.2);
      font-size:.72rem; font-weight:600; flex-shrink:0;
    }
    .urgente-mode-bar.visible { display:flex; }
    .urgente-mode-bar.mb-2 { background:rgba(251,191,36,0.07); color:#92400e; border-color:rgba(251,191,36,0.25); }
    .urgente-mode-bar.mb-3 { background:rgba(249,115,22,0.07); color:#c2410c; border-color:rgba(249,115,22,0.2); }
    .urgente-mode-bar.mb-4 { background:rgba(220,38,38,0.10); color:#dc2626; border-color:rgba(220,38,38,0.3); }

    /* ── DROPDOWN SELECTOR DE NIVEL ──────────────────────────────────────────── */
    .nivel-dropdown {
      position: fixed; /* left/top/width calculados en JS desde chip-urgente */
      background: var(--surface, var(--card)); border: 1px solid var(--border2);
      border-radius: var(--r-sm); box-shadow: 0 12px 40px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.1);
      z-index: 9000; padding: 6px 0 0;
      transform-origin: top center;
      transform: scaleY(0.85) translateY(-6px); opacity: 0; pointer-events: none;
      transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), opacity 0.18s ease;
    }
    .nivel-dropdown.open { transform: scaleY(1) translateY(0); opacity: 1; pointer-events: auto; }
    .nivel-dropdown-arrow {
      position: absolute; top: -6px; left: 74px;
      width: 12px; height: 6px; overflow: hidden;
    }
    .nivel-dropdown-arrow::before {
      content: ''; display: block; width: 10px; height: 10px;
      background: var(--card); border: 1px solid var(--border2);
      transform: rotate(45deg) translateY(4px); margin-left: 1px;
    }
    .nivel-option {
      padding: 11px 14px; cursor: pointer; transition: background var(--t);
      border-bottom: 1px solid var(--border);
    }
    .nivel-option:hover { background: rgba(255,255,255,0.04); }
    .nivel-option.selected { background: rgba(255,255,255,0.05); }
    .nivel-option-em { border-bottom: none; }
    .nivel-option-header {
      display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
    }
    .nivel-option-icon { font-size: 1rem; flex-shrink: 0; }
    .nivel-option-nombre { font-size: .82rem; font-weight: 700; flex: 1; }
    .nivel-option-tiempo {
      font-size: .65rem; font-weight: 600; padding: 2px 7px;
      border-radius: 99px; background: rgba(255,255,255,0.07); color: var(--muted2);
      font-family: var(--mono); white-space: nowrap;
    }
    .nivel-option-desc {
      font-size: .72rem; color: var(--muted2); margin: 0 0 3px; line-height: 1.45;
    }
    .nivel-option-ejemplos {
      font-size: .65rem; color: var(--muted); margin: 0; font-style: italic;
    }
    .n2-color { color: #92400e; }
    .n3-color { color: #c2410c; }
    .n4-color { color: #dc2626; }
    .nivel-aviso {
      display: flex; align-items: center; gap: 6px;
      padding: 8px 14px; font-size: .68rem; color: var(--muted);
      background: rgba(255,255,255,0.02); border-top: 1px solid var(--border);
    }

    /* La msg-opts necesita position relative para el dropdown absoluto */
    .msg-opts { position: relative; }

    .chip.urgente-chip.active {
      background: linear-gradient(135deg,#c2410c,#ea580c) !important;
      border-color: transparent !important; color: #fff !important;
    }
    .msg-meta { font-size:.62rem; opacity:.65; margin-top:3px; }
    .msg-sender { font-size:.68rem; font-weight:700; margin-bottom:2px; color:var(--muted); }
    .chat-input-bar { display:flex; align-items:flex-end; gap:8px; padding:10px 14px; border-top:1px solid var(--border); flex-shrink:0; }
    .chat-input { flex:1; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:9px 12px; font-family:var(--sans); font-size:.9rem; color:var(--text); outline:none; resize:none; transition:border-color var(--t); max-height:100px; }
    .chat-input:focus { border-color:var(--c1); }
    .btn-send { width:38px; height:38px; flex-shrink:0; background:linear-gradient(135deg,var(--c1),var(--c2)); border:none; border-radius:10px; color:#fff; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .msg-del-btn { background:none; border:none; cursor:pointer; font-size:13px; opacity:0; transition:opacity var(--t); padding:2px 4px; color:inherit; }
    .msg:hover .msg-del-btn { opacity:0.6; }
    .msg.eliminado { opacity:0.5; font-style:italic; }
    .msg-tick { display:inline-flex; align-items:center; margin-left:2px; flex-shrink:0; }
    .msg-tick svg { display:block; }

    /* ═══════════════════════════════════════════════════
       CALENDARIO COPARENTAL — inspirado en Nexo Triana
    ═══════════════════════════════════════════════════ */
    .cal-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
    .cal-month { font-family:var(--serif); font-size:1.3rem; font-weight:400; }
    .cal-nav { background:var(--card); border:1px solid var(--border); border-radius:8px; width:34px; height:34px; font-size:18px; cursor:pointer; color:var(--muted); }

    /* Coparental: celdas grandes con turnos */
    .cal-full-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
    .cal-weekdays-full { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
    .cal-wd-full { text-align:center; font-size:.62rem; font-weight:700; color:var(--muted); padding:4px 0; text-transform:uppercase; }
    .cal-cell { min-height:72px; border-radius:6px; padding:3px 2px; cursor:pointer; transition:all var(--t); position:relative; background:var(--surface); border:1px solid var(--border); display:flex; flex-direction:column; gap:2px; overflow:hidden; }
    .cal-cell:hover { border-color:var(--c1); }
    .cal-cell.other-month { opacity:.35; }
    .cal-cell.today { border:2px solid var(--c1); background:color-mix(in srgb,var(--c1) 8%,var(--surface)); }
    .cal-cell-num { font-size:.72rem; font-weight:700; line-height:1; padding:1px 3px; align-self:flex-end; color:var(--muted); }
    .cal-cell.today .cal-cell-num { color:var(--c1); }
    .cal-cell.other-month .cal-cell-num { color:var(--border); }
    .cal-turno { font-size:.58rem; font-weight:800; line-height:1.2; padding:2px 3px; border-radius:3px; text-align:center; text-transform:uppercase; letter-spacing:.01em; width:100%; word-break:break-word; }
    .cal-turno-hijo { font-size:.52rem; font-weight:700; padding:1px 3px; border-radius:2px; margin-top:1px; width:100%; text-align:center; text-transform:none; }
    /* Colores fijos por índice de hijo */
    .hijo-0-bg { background:color-mix(in srgb,var(--c1) 20%,#fff); color:color-mix(in srgb,var(--c1) 80%,#000); border:1px solid color-mix(in srgb,var(--c1) 35%,transparent); }
    .hijo-1-bg { background:color-mix(in srgb,var(--green) 20%,#fff); color:color-mix(in srgb,var(--green) 70%,#000); border:1px solid color-mix(in srgb,var(--green) 35%,transparent); }
    .hijo-2-bg { background:color-mix(in srgb,var(--amber) 20%,#fff); color:color-mix(in srgb,var(--amber) 70%,#000); border:1px solid color-mix(in srgb,var(--amber) 35%,transparent); }
    .hijo-todos-bg { background:color-mix(in srgb,var(--c2) 20%,#fff); color:color-mix(in srgb,var(--c2) 70%,#000); border:1px solid color-mix(in srgb,var(--c2) 35%,transparent); }

    /* Nuclear: celdas pequeñas con puntos */
    .cal-grid-small { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
    .cal-weekdays-small { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
    .cal-wd-small { text-align:center; font-size:.62rem; font-weight:700; color:var(--muted); padding:4px 0; text-transform:uppercase; }
    .cal-day { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:.82rem; border-radius:8px; cursor:pointer; transition:all var(--t); position:relative; gap:2px; }
    .cal-day:hover { background:var(--card); }
    .cal-day.other-month { opacity:.3; }
    .cal-day.today { background:linear-gradient(135deg,var(--c1),var(--c2)); color:#fff; font-weight:700; }
    .cal-day.has-event::after { content:''; width:5px; height:5px; border-radius:50%; background:var(--c2); position:absolute; bottom:4px; }
    .cal-day.today.has-event::after { background:rgba(255,255,255,0.8); }

    /* TURNOS */
    .turno-badge { padding:5px 10px; border-radius:20px; font-size:.75rem; font-weight:700; display:flex; align-items:center; gap:5px; cursor:pointer; transition:all var(--t); }
    .turno-badge .remove-t { opacity:.6; font-size:.7rem; }
    .turnos-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
    .turno-option { padding:9px 10px; border-radius:10px; font-size:.78rem; font-weight:600; cursor:pointer; transition:all var(--t); border:2px solid transparent; display:flex; align-items:center; gap:6px; background:var(--card); }
    .turno-option.selected { border-color:var(--c1); }
    .turno-option .dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
    .color-pick { width:28px; height:28px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:all var(--t); }
    .color-pick.selected { border-color:var(--text); transform:scale(1.15); }

    /* DOCS */
    .doc-cats { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:12px; }
    .doc-cat { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:12px; cursor:pointer; transition:all var(--t); text-align:center; }
    .doc-cat:active { transform:scale(0.97); }
    .cat-icon { font-size:24px; margin-bottom:4px; }
    .doc-cat h4 { font-size:.82rem; font-weight:600; }
    .doc-cat p { font-size:.68rem; color:var(--muted); margin-top:2px; }
    .upload-zone { border:2px dashed var(--border); border-radius:var(--r); padding:24px; text-align:center; cursor:pointer; margin-bottom:12px; transition:all var(--t); color:var(--muted); font-size:.82rem; }
    .upload-zone:hover,.upload-zone.drag { border-color:var(--c1); background:color-mix(in srgb,var(--c1) 5%,var(--bg)); }
    .upload-icon { font-size:32px; margin-bottom:6px; }
    .doc-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
    .doc-item:last-child { border-bottom:none; }
    .pago-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
    .pago-item:last-child { border-bottom:none; }
    .pago-item.pagado { opacity:.55; }
    .pago-info { flex:1; }
    .pago-info h4 { font-size:.85rem; font-weight:600; }
    .pago-info p { font-size:.68rem; color:var(--muted); }
    .pago-estado { font-size:.7rem; font-weight:700; white-space:nowrap; }
    .pago-estado.pendiente { color:var(--amber); }
    .pago-estado.pagado { color:var(--green); }
    .pago-estado.noconforme { color:var(--red); }
    .pago-item.noconforme { opacity:.7; }
    .pago-item.pagado { opacity:.65; }
    .pago-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
    #pagos-list { max-height:160px; overflow-y:auto; }

    /* PERFIL */
    .hijo-tabs { display:flex; gap:8px; margin-bottom:14px; overflow-x:auto; }
    .hijo-tab { flex:1; min-width:80px; padding:9px; background:var(--card); border:2px solid transparent; border-radius:var(--r-sm); font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--muted); cursor:pointer; transition:all var(--t); text-align:center; white-space:nowrap; }
    .hijo-tab.active { border-color:var(--c1); color:var(--c1); background:color-mix(in srgb,var(--c1) 8%,var(--surface)); }
    .profile-hero { text-align:center; padding:24px 16px 16px; border-radius:var(--r); margin-bottom:12px; border:1px solid var(--border); transition:background .4s; }
    .profile-hero.h0 { background:linear-gradient(135deg,var(--hijo0-bg),color-mix(in srgb,var(--c1) 8%,#fff)); border-color:var(--hijo0-border); }
    .profile-hero.h1 { background:linear-gradient(135deg,var(--hijo1-bg),color-mix(in srgb,var(--green) 8%,#fff)); border-color:var(--hijo1-border); }
    .profile-hero.h2 { background:linear-gradient(135deg,var(--hijo2-bg),color-mix(in srgb,var(--amber) 8%,#fff)); border-color:var(--hijo2-border); }
    .profile-foto-container { position:relative; width:112px; margin:0 auto 12px; cursor:pointer; }
    .profile-foto-wrap { width:112px; height:112px; border-radius:50%; background:var(--card); border:3px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:52px; overflow:hidden; transition:all var(--t); }
    .profile-hero.h0 .profile-foto-wrap { background:linear-gradient(135deg,var(--c1),color-mix(in srgb,var(--c1) 70%,var(--c2))); border-color:color-mix(in srgb,var(--c1) 50%,transparent); box-shadow:0 6px 20px color-mix(in srgb,var(--c1) 30%,transparent); }
    .profile-hero.h1 .profile-foto-wrap { background:linear-gradient(135deg,var(--green),#3da882); border-color:color-mix(in srgb,var(--green) 50%,transparent); box-shadow:0 6px 20px color-mix(in srgb,var(--green) 30%,transparent); }
    .profile-hero.h2 .profile-foto-wrap { background:linear-gradient(135deg,var(--amber),#e06c00); border-color:color-mix(in srgb,var(--amber) 50%,transparent); box-shadow:0 6px 20px color-mix(in srgb,var(--amber) 30%,transparent); }
    .profile-foto-edit { position:absolute; bottom:2px; right:2px; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,0.6); border:2px solid #fff; color:#fff; display:flex; align-items:center; justify-content:center; pointer-events:none; }
    .profile-name { font-family:var(--serif); font-size:1.4rem; }
    .profile-sub { font-size:.78rem; color:var(--muted); margin-top:4px; }
    /* Hijo tabs coloreados */
    .hijo-tab.active.h0 { border-color:var(--c1); color:var(--c1); background:var(--hijo0-bg); }
    .hijo-tab.active.h1 { border-color:var(--green); color:var(--green); background:var(--hijo1-bg); }
    .hijo-tab.active.h2 { border-color:var(--amber); color:var(--amber); background:var(--hijo2-bg); }
    /* Hijo tabs v2 — diseño vertical compacto con scroll */
    .hijo-tabs-wrap { position:relative; padding:0 0 12px; }
    .hijo-tabs-scroll { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth; }
    .hijo-tabs-scroll::-webkit-scrollbar { display:none; }
    .hijo-tab-v2 { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 10px; border-radius:12px; border:2px solid transparent; background:var(--card); cursor:pointer; min-width:58px; max-width:68px; transition:all var(--t); }
    .hijo-tab-v2.active { border-color:var(--hijo-color,var(--c1)) !important; background:color-mix(in srgb,var(--hijo-color,var(--c1)) 8%,transparent) !important; }
    .hijo-tab-v2.bloqueado { border-style:dashed; border-color:var(--border); opacity:0.55; cursor:default; }
    .hijo-tab-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; background:rgba(155,127,212,0.12); }
    .hijo-tab-nombre { font-size:0.65rem; font-weight:600; color:var(--text); max-width:56px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
    .hijo-tab-lock { font-size:9px; color:#c0b0a8; text-align:center; }
    .hijo-tab-add { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:7px 10px; border-radius:12px; border:2px dashed rgba(155,127,212,0.3); background:transparent; cursor:pointer; min-width:58px; }
    .hijo-tab-add-icon { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--c1),var(--c2)); display:flex; align-items:center; justify-content:center; }
    .hijo-tab-add-label { font-size:0.62rem; font-weight:600; color:var(--c1); }
    .info-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--border); gap:10px; }
    .info-row:last-child { border-bottom:none; }
    .info-row .label { font-size:.75rem; color:var(--muted); font-weight:500; flex-shrink:0; }
    .info-row .value { font-size:.85rem; font-weight:500; text-align:right; }
    .med-item { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
    .med-item:last-child { border-bottom:none; }
    .med-dot { width:10px; height:10px; border-radius:50%; background:var(--c1); margin-top:5px; flex-shrink:0; }
    .med-name { font-size:.88rem; font-weight:600; }
    .med-dosis { font-size:.72rem; color:var(--muted); }
    .talla-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
    .talla-item:last-child { border-bottom:none; }
    .talla-fecha { font-size:.72rem; color:var(--muted); min-width:60px; }
    .talla-vals { flex:1; display:flex; gap:10px; flex-wrap:wrap; }
    .talla-val { font-size:.85rem; font-weight:600; }
    .talla-val span { font-size:.7rem; color:var(--muted); font-weight:400; }

    /* BUTTONS */
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:var(--r-sm); border:none; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:.88rem; transition:all var(--t); width:100%; margin-bottom:8px; }
    .btn-primary { background:linear-gradient(135deg,var(--c1),var(--c2)); color:#fff; }
    .btn-ghost { background:var(--card); border:1px solid var(--border); color:var(--muted); }
    .btn-danger { background:rgba(224,96,96,0.1); border:1px solid rgba(224,96,96,0.3); color:var(--red); }

    /* MODAL */
    .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); display:none; align-items:flex-end; justify-content:center; z-index:600; backdrop-filter:blur(3px); }
    .modal-overlay.open { display:flex; }
    .modal { background:var(--surface); border-radius:24px 24px 0 0; padding:20px 20px calc(20px + var(--safe-bottom)); width:100%; max-width:480px; max-height:90dvh; overflow-y:auto; animation:slide-up-modal .3s ease; }
    @keyframes slide-up-modal { from { transform:translateY(100%); } }
    .modal-handle { width:40px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 18px; }
    .modal-title { font-family:var(--serif); font-size:1.3rem; font-weight:400; margin-bottom:18px; }
    .form-group { margin-bottom:14px; }
    .form-group label { display:block; font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
    .form-group input,.form-group select,.form-group textarea { width:100%; padding:11px 14px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text); font-family:var(--sans); font-size:.92rem; outline:none; transition:border-color var(--t); }
    .form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--c1); }
    .form-group textarea { resize:vertical; }

    /* MODAL PRIVACIDAD */
    #modal-privacy .modal { border-radius:24px 24px 0 0; max-height:92dvh; }
    .privacy-section { margin-bottom:24px; }
    .privacy-section h3 { font-family:var(--serif); font-size:1rem; font-weight:400; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border); }
    .privacy-section p { font-size:.82rem; color:#4a3f3a; line-height:1.65; margin-bottom:8px; }
    .privacy-section p:last-child { margin-bottom:0; }
    .privacy-tag { display:inline-block; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:99px; background:color-mix(in srgb,var(--c1) 12%,var(--surface)); color:var(--c1); margin-bottom:8px; }
    .privacy-table { width:100%; border-collapse:collapse; font-size:.78rem; margin:8px 0; }
    .privacy-table th { background:var(--card); font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:8px 10px; text-align:left; border-bottom:2px solid var(--border); }
    .privacy-table td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top; line-height:1.4; }
    .privacy-table tr:last-child td { border-bottom:none; }
    .privacy-highlight { background:color-mix(in srgb,var(--c1) 8%,var(--surface)); border-left:3px solid var(--c1); border-radius:0 8px 8px 0; padding:10px 12px; margin:10px 0; font-size:.8rem; line-height:1.6; }
    .privacy-rights { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
    .privacy-right { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px; }
    .privacy-right .ri { font-size:16px; margin-bottom:3px; }
    .privacy-right strong { font-size:.78rem; display:block; margin-bottom:2px; }
    .privacy-right span { font-size:.7rem; color:var(--muted); line-height:1.4; }
    .empty-icon { font-size:32px; margin-bottom:8px; }
    .empty-state { text-align:center; }
    .empty-state p { font-size:.82rem; }

    /* LOADING */
    .loading-dots { display:flex; gap:4px; justify-content:center; padding:12px; }
    .loading-dots span { width:7px; height:7px; border-radius:50%; background:var(--muted); animation:dot 1.2s infinite; }
    .loading-dots span:nth-child(2) { animation-delay:.2s; }
    .loading-dots span:nth-child(3) { animation-delay:.4s; }
    @keyframes dot { 0%,80%,100%{transform:scale(0.6);opacity:.4} 40%{transform:scale(1);opacity:1} }

    /* TOAST */
    .toast { position:fixed; bottom:calc(var(--nav-h) + 12px); left:50%; transform:translateX(-50%) translateY(20px); background:var(--text); color:var(--surface); font-size:.82rem; font-weight:500; padding:10px 20px; border-radius:99px; z-index:700; opacity:0; transition:all .3s; white-space:nowrap; pointer-events:none; }
    .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

    /* COUNTDOWN */
    .countdown-card { border-radius:var(--r); padding:16px 18px; margin-bottom:10px; display:flex; align-items:center; gap:14px; transition:transform var(--t); }
    .countdown-card:active { transform:scale(0.98); }

    /* ── ANIMACIÓN CUMPLEAÑOS ──────────────────────────────────────────────── */
    @keyframes bday-bounce { 0%,100%{transform:scale(1) rotate(-3deg)} 50%{transform:scale(1.15) rotate(3deg)} }
    @keyframes bday-twinkle { 0%,100%{opacity:.4;transform:scale(0.8)} 50%{opacity:1;transform:scale(1.1)} }
    @keyframes bday-fall { 0%{transform:translateY(-20px) rotate(0deg);opacity:1} 100%{transform:translateY(100vh) rotate(720deg);opacity:0} }
    @keyframes bday-in { from{opacity:0;transform:scale(0.88) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
    #bday-screen { position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,rgba(155,127,212,0.93),rgba(244,149,106,0.89));display:flex;align-items:center;justify-content:center;overflow:hidden; }
    .bday-float { position:absolute;pointer-events:none;animation:bday-twinkle 2s infinite ease-in-out; }
    .bday-confetti { position:absolute;top:-10px;width:8px;height:8px;animation:bday-fall linear forwards;opacity:0.85; }
    .bday-confetti-circle { border-radius:50%; }
    .bday-confetti-square { border-radius:2px; }
    .bday-confetti-rect { width:5px;height:12px;border-radius:2px; }
    .bday-card { position:relative;z-index:10;background:rgba(255,255,255,0.92);border:1px solid rgba(155,127,212,0.2);border-radius:24px;padding:32px 28px 28px;max-width:340px;width:90%;text-align:center;animation:bday-in .5s cubic-bezier(.34,1.56,.64,1) both; }
    .bday-cake { font-size:52px;animation:bday-bounce 1.6s ease-in-out infinite;display:inline-block;margin-bottom:8px; }
    .bday-pretitle { font-size:.75rem;font-weight:700;color:#f4956a;letter-spacing:.06em;margin-bottom:8px; }
    .bday-title { font-family:var(--serif);font-size:1.45rem;line-height:1.25;margin-bottom:10px; }
    .bday-nombre { background:linear-gradient(135deg,#9b7fd4,#f4956a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
    .bday-sub { font-size:.85rem;color:#666;margin-bottom:18px; }
    .bday-btn { width:100%;padding:13px;border:none;border-radius:12px;background:linear-gradient(135deg,#9b7fd4,#f4956a);color:#fff;font-family:var(--sans);font-size:.9rem;font-weight:700;cursor:pointer;transition:opacity .15s; }
    .bday-btn:hover { opacity:.88; }

  /* ── NOTIFICACIONES IN-APP ───────────────────────────────────────────────── */
  :root {
    --border2: color-mix(in srgb, var(--border) 75%, var(--muted));
    --muted2:  color-mix(in srgb, var(--muted)  55%, var(--bg));
  }
  .notif-item {
    display:flex;align-items:flex-start;gap:10px;
    padding:11px 16px;
    border-bottom:1px solid var(--border);
    cursor:pointer;
    transition:opacity 0.3s, background 0.15s;
  }
  .notif-item:active { background:var(--surface); }
  .notif-item.leida  { opacity:0.38; }
  .notif-item-icon {
    width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;flex-shrink:0;
  }
  .notif-item-body   { flex:1;min-width:0; }
  .notif-item-titulo { font-size:.82rem;font-weight:600;
                       color:var(--text);line-height:1.4; }
  .notif-item-cuerpo { font-size:.76rem;color:var(--muted);
                       margin-top:2px;line-height:1.3; }
  .notif-item-time   { font-size:.68rem;color:var(--muted2);
                       margin-top:3px; }
  .notif-item-dot    { width:8px;height:8px;border-radius:50%;
                       background:var(--c1);flex-shrink:0;
                       margin-top:6px; }

  /* ─── ONBOARDING SLIDER ─── */
  #onboarding-slider { position:fixed;inset:0;z-index:10000;background:var(--bg);
                       display:none;flex-direction:column; }
  .ob-slide { min-width:100%;display:flex;flex-direction:column;align-items:center;
              justify-content:center;padding:40px 28px 20px;text-align:center;gap:14px; }
  .ob-dot { width:9px;height:9px;border-radius:50%;background:var(--border);
            transition:background .25s,transform .25s; }
  .ob-dot.active { background:var(--c1);transform:scale(1.25); }
  .ob-slide-icon { color:var(--c1); }
  .ob-slide-icon svg { width:64px;height:64px;display:block; }
  #ob-tooltip-icono { color:var(--c1);display:flex;align-items:center; }
  #ob-tooltip-icono svg { width:20px;height:20px; }
  @keyframes obFadeIn { from { opacity:0;transform:translateY(10px); } to { opacity:1;transform:translateY(0); } }
/* ─── UPGRADE SCREEN ─── */
    #screen-upgrade {
      --u-purple: #9b7fd4;
      --u-orange: #f4956a;
      --u-text: #2e2522;
      --u-muted: #a08880;
      --u-surface: rgba(255,255,255,0.8);
      --u-border: rgba(155,127,212,0.15);
    }
    .upgrade-hero {
      text-align:center;
      padding:40px 24px 24px;
      position:relative;
    }
    .upgrade-logo-wrap {
      display:inline-flex;
      align-items:center;
      gap:12px;
      margin-bottom:24px;
      animation: upgrade-fade-in .5s ease both;
    }
    .upgrade-logo-icon {
      width:52px;height:52px;
      background:linear-gradient(135deg,var(--u-purple),var(--u-orange));
      border-radius:16px;
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 6px 24px rgba(155,127,212,0.4);
    }
    .upgrade-logo-name {
      font-family:'DM Serif Display',serif;
      font-size:2rem;
      background:linear-gradient(135deg,var(--u-text),var(--u-purple));
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
      letter-spacing:-0.03em;
    }
    .upgrade-headline {
      font-family:'DM Serif Display',serif;
      font-size:1.55rem;
      font-weight:400;
      line-height:1.25;
      color:var(--u-muted);
      margin-bottom:10px;
      letter-spacing:-0.02em;
      animation:upgrade-fade-in .5s .1s ease both;
    }
    .upgrade-headline em {
      font-style:italic;
      background:linear-gradient(135deg,var(--u-purple),var(--u-orange));
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    }
    .upgrade-sub {
      font-size:.85rem;
      color:var(--u-muted);
      line-height:1.6;
      max-width:320px;
      margin:0 auto 28px;
      animation:upgrade-fade-in .5s .15s ease both;
    }
    @keyframes upgrade-fade-in {
      from{opacity:0;transform:translateY(12px)}
      to{opacity:1;transform:translateY(0)}
    }

    /* Tabla comparativa */
    .upgrade-table {
      margin:0 16px 16px;
      background:var(--u-surface);
      border:1px solid var(--u-border);
      border-radius:20px;
      overflow:hidden;
      backdrop-filter:blur(8px);
      box-shadow:0 4px 32px rgba(155,127,212,0.1);
      animation:upgrade-fade-in .5s .2s ease both;
      display:flex;
      flex-direction:column;
      max-height:300px; /* altura fija para scroll interno */
    }
    .upgrade-table-body {
      overflow-y:auto;
      flex:1;
    }
    .upgrade-table-body::-webkit-scrollbar { width:3px; }
    .upgrade-table-body::-webkit-scrollbar-track { background:transparent; }
    .upgrade-table-body::-webkit-scrollbar-thumb { background:rgba(155,127,212,0.3);border-radius:3px; }
    .upgrade-table-header {
      display:grid;grid-template-columns:1fr 72px 80px;
      padding:10px 16px 8px;
      background:linear-gradient(135deg,rgba(155,127,212,0.06),rgba(244,149,106,0.04));
      border-bottom:1px solid var(--u-border);
    }
    .upgrade-col-title { font-size:.62rem;font-weight:700;color:var(--u-muted);text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center; }
    .upgrade-col-free  { text-align:center;font-size:.75rem;font-weight:600;color:var(--u-muted); }
    .upgrade-col-premium {
      text-align:center;
      font-size:.75rem;font-weight:800;
      background:linear-gradient(135deg,var(--u-purple),var(--u-orange));
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
      display:flex;align-items:center;justify-content:center;gap:3px;
    }
    .upgrade-col-premium::before { content:'💎';font-size:.65rem;-webkit-text-fill-color:initial; }
    .upgrade-row {
      display:grid;grid-template-columns:1fr 72px 80px;
      padding:9px 16px;
      border-bottom:1px solid rgba(155,127,212,0.08);
      align-items:center;
    }
    .upgrade-row:last-child { border-bottom:none; }
    .upgrade-row-label { font-size:.78rem;color:var(--u-text);line-height:1.25; }
    .upgrade-row-label small { display:block;font-size:.65rem;color:var(--u-muted);margin-top:1px; }
    .upgrade-cell { text-align:center;font-size:.78rem; }
    .upgrade-cell.free  { color:var(--u-muted); }
    .upgrade-cell.prem  { color:var(--u-purple);font-weight:700; }
    .upgrade-check { display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--u-purple),var(--u-orange));color:#fff;font-size:.55rem; }
    .upgrade-dash  { color:var(--u-border);font-size:.9rem; }

    /* Bloque precio */
    .upgrade-price-block {
      margin:0 16px 12px;
      border:2px solid var(--u-purple);
      border-radius:18px;
      padding:14px 16px;
      background:rgba(155,127,212,0.05);
      animation:upgrade-fade-in .5s .3s ease both;
    }
    .upgrade-price-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px; }
    .upgrade-price-top-left { display:flex;align-items:center;gap:10px; }
    .upgrade-price-label { font-size:.88rem;font-weight:700;color:var(--u-text); }
    .upgrade-discount-chip {
      background:linear-gradient(135deg,var(--u-purple),var(--u-orange));
      color:#fff;font-size:.7rem;font-weight:800;
      padding:4px 10px;border-radius:99px;white-space:nowrap;
    }
    .upgrade-price-right { text-align:right; }
    .upgrade-price-year  { font-size:1.1rem;font-weight:800;color:var(--u-text); }
    .upgrade-price-month { font-size:.72rem;color:var(--u-muted); }
    .upgrade-price-bottom {
      border-top:1px solid rgba(155,127,212,0.12);
      padding-top:8px;
      display:flex;align-items:center;gap:6px;
      font-size:.72rem;color:var(--u-muted);line-height:1.4;
    }

    /* Botones — mismo ancho que tabla y precio */
    .upgrade-btn-primary {
      display:block;margin:0 16px 10px;
      background:linear-gradient(135deg,var(--u-purple),var(--u-orange));
      color:#fff;border:none;border-radius:16px;
      font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:700;
      padding:16px 20px;text-align:center;cursor:pointer;
      box-shadow:0 6px 24px rgba(155,127,212,0.4);
      transition:all .2s ease;
      animation:upgrade-fade-in .5s .35s ease both;
      width:calc(100% - 32px);box-sizing:border-box;
    }
    .upgrade-btn-primary:hover { opacity:.9;transform:translateY(-1px); }
    .upgrade-btn-free {
      display:block;margin:0 16px 32px;
      background:transparent;color:var(--u-muted);border:1px solid rgba(160,136,128,0.3);
      border-radius:14px;font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:500;
      padding:13px 20px;text-align:center;cursor:pointer;
      transition:all .2s ease;
      animation:upgrade-fade-in .5s .4s ease both;
      width:calc(100% - 32px);box-sizing:border-box;
    }
    .upgrade-btn-free:hover { border-color:var(--u-muted);color:var(--u-text); }
    .upgrade-legal {
      text-align:center;font-size:.68rem;color:var(--u-muted);
      line-height:1.6;padding:0 24px 40px;
      animation:upgrade-fade-in .5s .45s ease both;
    }

/* ─── IA INTRO OVERLAY ─────────────────────────────────────────────────── */
#overlay-ia-intro {
  position:fixed;inset:0;z-index:9500;
  pointer-events:none;
  transform:translateY(100%);
  transition:transform .42s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;overflow:hidden;
}
#overlay-ia-intro.open { pointer-events:auto;transform:translateY(0); }

.ia-intro-hero {
  flex-shrink:0;min-height:42vh;
  background:linear-gradient(160deg,#08071a 0%,#1a0535 55%,#0c1a3a 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:44px;position:relative;overflow:hidden;
}
.ia-intro-glow {
  position:absolute;top:40%;left:50%;
  transform:translate(-50%,-50%);
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,.55) 0%,rgba(34,211,238,.2) 45%,transparent 70%);
  filter:blur(32px);
}
#overlay-ia-intro.open .ia-intro-glow { animation:ia-glow-pulse 3.5s ease-in-out infinite; }
@keyframes ia-glow-pulse {
  0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.14)}
}
.ia-intro-particles {
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.ia-intro-particles span {
  position:absolute;border-radius:50%;
  background:rgba(168,85,247,.35);
  animation:ia-particle-float 6s ease-in-out infinite;
}
.ia-intro-particles span:nth-child(1){width:6px;height:6px;left:20%;top:25%;animation-delay:0s}
.ia-intro-particles span:nth-child(2){width:4px;height:4px;left:75%;top:35%;animation-delay:1.2s;background:rgba(34,211,238,.4)}
.ia-intro-particles span:nth-child(3){width:5px;height:5px;left:60%;top:18%;animation-delay:2.4s}
.ia-intro-particles span:nth-child(4){width:3px;height:3px;left:35%;top:55%;animation-delay:0.8s;background:rgba(34,211,238,.35)}
.ia-intro-particles span:nth-child(5){width:5px;height:5px;left:85%;top:55%;animation-delay:3s}
@keyframes ia-particle-float {
  0%,100%{transform:translateY(0) scale(1);opacity:.6}
  50%{transform:translateY(-18px) scale(1.3);opacity:1}
}
.ia-intro-icon-wrap {
  width:96px;height:96px;border-radius:26px;
  background:linear-gradient(135deg,#22d3ee,#a855f7);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 48px rgba(168,85,247,.6),0 0 90px rgba(34,211,238,.15);
  position:relative;z-index:1;
}
#overlay-ia-intro.open .ia-intro-icon-wrap { animation:ia-icon-pop .65s .08s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes ia-icon-pop {
  from{opacity:0;transform:scale(.4) rotate(-20deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}
.ia-intro-icon-svg { width:50px;height:50px;color:#fff; }
.ia-intro-badge {
  margin-top:14px;z-index:1;
  background:linear-gradient(90deg,rgba(34,211,238,.25),rgba(168,85,247,.25));
  border:1px solid rgba(168,85,247,.4);
  color:#c4b5fd;font-size:.68rem;font-weight:700;letter-spacing:.1em;
  padding:5px 14px;border-radius:99px;
}
#overlay-ia-intro.open .ia-intro-badge { animation:ia-fade-up .4s .28s both; }

.ia-intro-content {
  flex:1;overflow-y:auto;
  background:var(--bg);
  border-radius:24px 24px 0 0;
  padding:28px 22px calc(32px + env(safe-area-inset-bottom,0px));
  margin-top:-22px;
}
.ia-intro-title {
  font-size:1.45rem;font-weight:800;color:var(--text);
  line-height:1.22;margin:0 0 10px;
}
#overlay-ia-intro.open .ia-intro-title { animation:ia-fade-up .4s .38s both; }

.ia-intro-sub {
  font-size:.86rem;color:var(--muted);line-height:1.65;margin:0 0 24px;
}
#overlay-ia-intro.open .ia-intro-sub { animation:ia-fade-up .4s .44s both; }

@keyframes ia-fade-up {
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

.ia-intro-steps { display:flex;flex-direction:column;gap:12px;margin-bottom:28px; }
.ia-intro-step {
  display:flex;align-items:flex-start;gap:14px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:14px 16px;
}
#overlay-ia-intro.open .ia-intro-step:nth-child(1){animation:ia-fade-up .4s .50s both}
#overlay-ia-intro.open .ia-intro-step:nth-child(2){animation:ia-fade-up .4s .57s both}
#overlay-ia-intro.open .ia-intro-step:nth-child(3){animation:ia-fade-up .4s .64s both}
.ia-intro-step-num {
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#22d3ee,#a855f7);
  color:#fff;font-size:.78rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.ia-intro-step-title { font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:3px; }
.ia-intro-step-desc  { font-size:.77rem;color:var(--muted);line-height:1.5; }

.ia-intro-btn {
  width:100%;padding:15px;border:none;border-radius:14px;
  background:linear-gradient(135deg,#22d3ee,#a855f7);
  color:#fff;font-family:var(--sans);font-size:.95rem;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 6px 28px rgba(168,85,247,.38);
  transition:opacity .15s,transform .15s;
}
#overlay-ia-intro.open .ia-intro-btn { animation:ia-fade-up .4s .70s both; }
.ia-intro-btn:active { opacity:.88;transform:scale(.98); }
.ia-intro-legal {
  text-align:center;font-size:.7rem;color:var(--muted);margin:12px 0 0;
}
#overlay-ia-intro.open .ia-intro-legal { animation:ia-fade-up .4s .75s both; }