:root{
    /* Surface tones */
    --bg:#0A0E14;
    --bg-soft:#10161D;
    --bg-elev:#141B24;
    --card:#161D26;
    --card-2:#1B232E;
    --card-border:#232C38;
    --card-border-hover:#2E3A48;
    --card-border-strong:#3A465A;
    --text-primary:#EDF2F7;
    --text-secondary:#AAB8C9;
    --text-tertiary:#9AAABD;
    --text-quaternary:#536270;

    /* Zone colors (used by JS inline styles) */
    --zone0:#3A4756;
    --zone1:#3E8FE0;
    --zone2:#35B893;
    --zone3:#E8B94E;
    --zone4:#E88A3E;
    --zone5:#E14B4B;
    --alert:#FF4747;
    --ok:#35B893;

    /* Layout scale */
    --sidebar-w:76px;
    --radius:14px;
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:18px;
    --radius-pill:999px;

    /* Motion tokens */
    --ease-out:cubic-bezier(.22,.61,.36,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);
    --dur-fast:180ms;
    --dur-med:320ms;
    --dur-slow:520ms;

    /* Shadows */
    --shadow-card:0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.28);
    --shadow-elev:0 1px 2px rgba(0,0,0,.4), 0 22px 60px rgba(0,0,0,.35);

    /* Fonts */
    --font-display:'Space Mono', monospace;
    --font-bpm:'Oswald', sans-serif;
    --font-ui:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(1200px 700px at 82% -10%, rgba(53,184,147,.06), transparent 55%),
      radial-gradient(900px 500px at -10% 110%, rgba(62,143,224,.05), transparent 55%),
      var(--bg);
    color:var(--text-primary);
    font-family:var(--font-ui);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  /* ---------- Login (kept, lightly refined) ---------- */
  .login-overlay{
    position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(ellipse at top, var(--bg-soft) 0%, var(--bg) 60%);
    z-index:100;padding:20px;
  }
  .login-box{
    width:100%;max-width:410px;background:linear-gradient(160deg,var(--card-2),var(--card));border:1px solid var(--card-border-hover);
    border-radius:var(--radius-lg);padding:38px 34px;text-align:center;
    box-shadow:var(--shadow-elev);
  }
  .welcome-back{max-width:440px;}
  .welcome-account{
    display:flex;align-items:center;gap:14px;
    padding:14px 16px;margin:0 0 20px;
    background:rgba(53,184,147,.08);
    border:1px solid rgba(53,184,147,.28);
    border-radius:14px;
    text-align:left;
  }
  .welcome-avatar{
    width:48px;height:48px;border-radius:50%;
    background:linear-gradient(135deg, var(--zone2, #35b893), var(--zone1, #4dd0e1));
    display:flex;align-items:center;justify-content:center;
    color:#08211A;font-weight:800;font-size:19px;flex:none;
  }
  .welcome-account-copy{flex:1;min-width:0;}
  .welcome-label{
    display:block;
    color:var(--text-secondary, #aebbc7);
    font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    margin-bottom:2px;
  }
  .welcome-account-copy strong{
    display:block;color:var(--text-primary, #f4f7f9);
    font-size:14px;font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .welcome-primary,
  .welcome-ghost{
    width:100%;padding:13px 16px;margin-bottom:10px;
    border-radius:12px;font-family:inherit;font-size:14px;font-weight:600;
    display:flex;align-items:center;justify-content:center;gap:8px;
    cursor:pointer;transition:transform var(--dur-fast, .15s) ease, background var(--dur-fast, .15s) ease;
  }
  .welcome-primary{
    background:var(--zone2, #35b893);color:#061511;border:1px solid var(--zone2, #35b893);
  }
  .welcome-primary:hover{background:#2ca07f;border-color:#2ca07f;transform:translateY(-1px);}
  .welcome-primary i{font-size:18px;}
  .welcome-ghost{
    background:transparent;color:var(--text-secondary, #aebbc7);
    border:1px solid var(--card-border, #2a3948);
  }
  .welcome-ghost:hover{border-color:#ff9898;color:#ffb3b3;background:rgba(255,152,152,.05);}
  .welcome-ghost i{font-size:16px;}
  .welcome-ghost:disabled{opacity:.6;cursor:default;}
  .welcome-hint{
    margin:16px 0 0;font-size:12px;line-height:1.5;
    color:var(--text-tertiary, #7a898e);text-align:center;
  }
  .login-box h1{font-size:23px;letter-spacing:-.025em;margin:0 0 7px;}
  .login-sub{font-size:14px;line-height:1.5;color:var(--text-secondary);margin:0 0 26px;}
  .login-box .field{display:flex;flex-direction:column;gap:5px;text-align:left;}
  .login-box .field label{font-size:12px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em;}
  .login-box .field input,
  .login-box select{
    font-family:var(--font-ui);font-size:16px;padding:12px 13px;border-radius:var(--radius-sm);
    border:1px solid var(--card-border);background:var(--bg-soft);color:var(--text-primary);width:100%;
    transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .login-box .field input:focus,
  .login-box select:focus{outline:none;border-color:var(--zone2);background:var(--bg-elev);}
  .login-error{color:var(--alert);font-size:12px;margin-top:12px;min-height:14px;}
  .login-toggle{margin-top:16px;font-size:12px;}
  .login-toggle button{
    min-height:44px;padding:8px 4px;
    color:var(--zone2);text-decoration:none;
    background:transparent;border:0;box-shadow:none;
  }
  .login-toggle button:hover{color:var(--zone2);background:transparent;text-decoration:underline;}
  .login-back{
    display:inline-flex;align-items:center;gap:6px;
    margin-top:22px;padding-top:18px;
    border-top:1px solid var(--card-border);
    width:100%;justify-content:center;
    font-size:12px;color:var(--text-tertiary);text-decoration:none;
    transition:color var(--dur-fast) var(--ease-out);
  }
  .login-back i{font-size:14px;transition:transform var(--dur-fast) var(--ease-out);}
  .login-back:hover{color:var(--text-primary);}
  .login-back:hover i{transform:translateX(-3px);}

  /* ---------- Shell layout ---------- */
  .shell{
    display:flex;min-height:100vh;
  }
  .sidebar{
    width:var(--sidebar-w);flex-shrink:0;
    background:linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-soft) 100%);
    border-right:1px solid var(--card-border);
    display:flex;flex-direction:column;align-items:center;
    padding:18px 0 20px;gap:22px;
    position:sticky;top:0;height:100vh;z-index:20;
  }
  .sidebar-brand{
    position:relative;padding:2px;
  }
  .sidebar-brand::after{
    content:"";position:absolute;inset:-3px;border-radius:15px;
    background:linear-gradient(135deg, rgba(53,184,147,.45), rgba(62,143,224,.25));
    z-index:-1;filter:blur(6px);opacity:.6;
  }
  .sidebar .logo-badge{
    width:44px;height:44px;border-radius:12px;
    background:#FFFFFF;padding:0;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    box-shadow:0 4px 14px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4);
  }
  .sidebar .logo-badge img{width:32px;height:auto;display:block;}
  .login-box .logo-badge{
    width:56px;height:56px;border-radius:14px;padding:0;margin:0 auto 18px;
    background:#FFFFFF;display:flex;align-items:center;justify-content:center;overflow:hidden;
    box-shadow:0 4px 14px rgba(0,0,0,.35);
  }
  .login-box .logo-badge img{width:42px;height:auto;display:block;}

  .sidebar-nav,
  .sidebar-tools{
    display:flex;flex-direction:column;gap:8px;align-items:center;padding:2px 0;
  }
  .sidebar-actions{
    margin-top:auto;display:flex;flex-direction:column;gap:10px;align-items:center;padding-bottom:2px;
  }
  .add-panel-wrap{margin-top:14px;}
  .side-btn{
    position:relative;
    width:44px;height:44px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    color:var(--text-secondary);cursor:pointer;
    background:transparent;border:1px solid transparent;
    transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    padding:0;font-family:var(--font-ui);
  }
  .side-btn i,
  .side-btn svg{font-size:22px;line-height:1;pointer-events:none;}
  .side-btn:hover{background:rgba(255,255,255,.04);color:var(--text-primary);border-color:var(--card-border);}
  .side-btn.active{
    background:linear-gradient(135deg, rgba(53,184,147,.18), rgba(53,184,147,.06));
    color:var(--zone2);border-color:rgba(53,184,147,.35);
  }
  .side-btn.danger:hover{color:var(--alert);border-color:rgba(255,71,71,.35);background:rgba(255,71,71,.06);}
  .side-btn::after{
    content:attr(data-tip);
    position:absolute;left:calc(100% + 12px);top:50%;transform:translate(-6px,-50%);
    background:var(--card-2);color:var(--text-primary);
    border:1px solid var(--card-border);border-radius:8px;
    padding:6px 10px;font-size:12px;font-weight:500;white-space:nowrap;
    box-shadow:var(--shadow-card);pointer-events:none;
    opacity:0;transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    z-index:60;
  }
  .side-btn:hover::after{opacity:1;transform:translate(0,-50%);}
  .side-divider{
    width:32px;height:1px;background:var(--card-border);margin:2px auto;
  }
  .avatar-mini{
    width:40px;height:40px;border-radius:50%;
    background:linear-gradient(135deg, var(--zone2), var(--zone1));
    display:flex;align-items:center;justify-content:center;
    color:#08211A;font-weight:800;font-size:14px;letter-spacing:.02em;
    box-shadow:0 4px 12px rgba(0,0,0,.4);
    cursor:pointer;position:relative;user-select:none;
    border:none;font-family:inherit;
    transition:transform var(--dur-fast, .15s) ease, box-shadow var(--dur-fast, .15s) ease;
  }
  .avatar-mini:hover{transform:scale(1.06);box-shadow:0 6px 18px rgba(53,184,147,.35);}
  .avatar-mini:focus-visible{outline:2px solid var(--zone2);outline-offset:3px;}
  .avatar-mini[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(53,184,147,.35),0 4px 12px rgba(0,0,0,.4);}

  /* ---------- Popover cuenta / centro ---------- */
  .account-popover{
    position:fixed;
    left:78px;bottom:20px;
    z-index:1600;
    width:320px;max-width:calc(100vw - 96px);
    background:linear-gradient(160deg, var(--card-bg-2, #17222e), var(--card-bg, #121b25));
    border:1px solid var(--card-border, #2a3948);
    border-radius:16px;
    box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02);
    overflow:hidden;
    opacity:0;transform:translateY(6px) scale(.98);
    pointer-events:none;
    transition:opacity 160ms ease, transform 160ms ease;
  }
  .account-popover[data-open="true"]{
    opacity:1;transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  .account-pop-head{
    padding:16px 18px 14px;
    display:flex;align-items:center;gap:12px;
    border-bottom:1px solid var(--card-border, #2a3948);
    background:linear-gradient(145deg, rgba(53,184,147,.10), transparent);
  }
  .account-pop-avatar{
    width:44px;height:44px;border-radius:50%;
    background:linear-gradient(135deg, var(--zone2), var(--zone1));
    display:flex;align-items:center;justify-content:center;
    color:#08211A;font-weight:800;font-size:17px;flex:none;
  }
  .account-pop-name{
    font-size:15px;font-weight:700;color:var(--text-primary, #f4f7f9);
    line-height:1.2;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .account-pop-mail{
    font-size:12px;color:var(--text-secondary, #aebbc7);
    line-height:1.3;margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .account-pop-role{
    display:inline-flex;align-items:center;gap:4px;
    margin-top:6px;padding:2px 8px;
    background:rgba(53,184,147,.14);
    border:1px solid rgba(53,184,147,.30);
    border-radius:999px;
    color:var(--zone2, #35b893);
    font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  }
  .account-pop-section{
    padding:14px 18px;
    border-bottom:1px solid var(--card-border, #2a3948);
  }
  .account-pop-section:last-of-type{border-bottom:none;}
  .account-pop-label{
    font-size:12px;color:var(--text-secondary, #aebbc7);
    font-weight:700;letter-spacing:.10em;text-transform:uppercase;
    margin-bottom:6px;
  }
  .account-pop-row{
    display:flex;align-items:center;gap:10px;
    font-size:13px;color:var(--text-primary, #f4f7f9);
    line-height:1.4;
    margin-bottom:5px;
  }
  .account-pop-row:last-child{margin-bottom:0;}
  .account-pop-row i{color:var(--zone2, #35b893);font-size:16px;flex:none;}
  .account-pop-row .valor{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .account-pop-badge-suscripcion{
    display:inline-flex;align-items:center;gap:5px;
    padding:4px 10px;margin-top:2px;
    border-radius:999px;
    font-size:12px;font-weight:700;
  }
  .account-pop-badge-suscripcion.trial{
    background:rgba(240,201,108,.15);border:1px solid rgba(240,201,108,.35);color:#ffe0a8;
  }
  .account-pop-badge-suscripcion.activo{
    background:rgba(53,184,147,.15);border:1px solid rgba(53,184,147,.35);color:var(--zone2, #35b893);
  }
  .account-pop-badge-suscripcion.suspendido{
    background:rgba(255,152,152,.15);border:1px solid rgba(255,152,152,.35);color:#ffb3b3;
  }
  .account-pop-actions{
    padding:8px;
    display:flex;flex-direction:column;
    background:rgba(0,0,0,.15);
  }
  .account-pop-action{
    display:flex;align-items:center;gap:10px;
    padding:9px 12px;
    background:transparent;
    color:var(--text-primary, #f4f7f9);
    border:none;border-radius:8px;
    font-family:inherit;font-size:13px;font-weight:500;
    cursor:pointer;text-align:left;text-decoration:none;
    transition:background var(--dur-fast, .15s) ease;
  }
  .account-pop-action:hover{background:rgba(53,184,147,.08);color:var(--zone2, #35b893);}
  .account-pop-action i{font-size:16px;flex:none;color:var(--text-secondary, #aebbc7);}
  .account-pop-action:hover i{color:var(--zone2, #35b893);}
  .account-pop-action.danger{color:#ffb3b3;}
  .account-pop-action.danger:hover{background:rgba(255,152,152,.10);color:#ff9898;}
  .account-pop-action.danger i{color:#ff9898;}
  .account-pop-action.primary{
    background:var(--zone2, #35b893);color:#061511;
    margin:4px 0 2px;font-weight:700;
    justify-content:center;
  }
  .account-pop-action.primary:hover{background:#2ca07f;color:#061511;}
  .account-pop-action.primary i{color:#061511;}

  /* ---------- Panel de configuración de logo del centro ---------- */
  .logo-config-panel{display:flex;flex-direction:column;gap:14px;width:100%;}
  .logo-preview-box{
    width:100%;max-width:240px;aspect-ratio:1/1;
    margin:0 auto;
    border:2px dashed var(--card-border, #2a3948);
    border-radius:14px;
    background:#ffffff;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    position:relative;
  }
  .logo-preview-box img{max-width:85%;max-height:85%;display:block;object-fit:contain;}
  .logo-preview-empty{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    color:#8299aa;font-size:12px;font-weight:600;letter-spacing:.04em;
  }
  .logo-preview-empty i{font-size:36px;opacity:.5;}
  .logo-config-actions{
    display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  }
  .logo-config-actions .ghost{
    padding:9px 14px;font-size:13px;font-weight:600;
    background:transparent;color:var(--text-primary, #f4f7f9);
    border:1px solid var(--card-border, #2a3948);border-radius:10px;
    display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;
    transition:background var(--dur-fast,.15s) ease, border-color var(--dur-fast,.15s) ease;
  }
  .logo-config-actions .ghost:hover{border-color:var(--zone2, #35b893);color:var(--zone2, #35b893);}
  .logo-config-actions .logo-danger{color:#ff9898;border-color:rgba(255,152,152,.35);}
  .logo-config-actions .logo-danger:hover{border-color:#ff9898;color:#ffb3b3;background:rgba(255,152,152,.06);}
  .logo-hint{
    text-align:center;
    font-size:12px;color:var(--text-secondary, #aebbc7);line-height:1.5;
    margin:0;
  }
  .logo-save-row{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding-top:10px;border-top:1px solid var(--card-border, #2a3948);
  }
  .logo-save-row .primary{
    flex:1;padding:11px 16px;
    background:var(--zone2, #35b893);color:#061511;border:1px solid var(--zone2, #35b893);
    border-radius:10px;font-family:inherit;font-size:14px;font-weight:700;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
    transition:background var(--dur-fast,.15s) ease;
  }
  .logo-save-row .primary:hover:not(:disabled){background:#2ca07f;}
  .logo-save-row .primary:disabled{opacity:.5;cursor:default;}
  .logo-estado{
    font-size:12px;color:var(--text-secondary, #aebbc7);
    flex:1;text-align:right;
  }
  .logo-estado.success{color:var(--zone2, #35b893);}
  .logo-estado.error{color:#ff9898;}

  /* Ajuste del contenido del sidebar-brand para que el img se ajuste bien */
  .sidebar .logo-badge img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
  .login-box .logo-badge img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}

  /* Marca del centro en el header del modal QR (opcional) */
  .qr-modal-head .qr-brand-mini{
    display:none;
    width:34px;height:34px;border-radius:8px;
    background:#ffffff;overflow:hidden;
    align-items:center;justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,.35);
    flex:none;
  }
  .qr-modal-head .qr-brand-mini img{max-width:80%;max-height:80%;object-fit:contain;}
  .qr-modal-head .qr-brand-mini[data-has-logo="true"]{display:flex;}

  /* Backdrop invisible para cerrar al clic fuera */
  .account-pop-backdrop{
    position:fixed;inset:0;z-index:1550;
    background:transparent;pointer-events:none;
  }
  .account-pop-backdrop[data-open="true"]{pointer-events:auto;}

  @media (max-width:640px){
    .account-popover{left:8px;bottom:76px;width:calc(100vw - 16px);max-width:none;}
  }

  .main-scroll{
    flex:1;min-width:0;
    padding:26px 34px 60px;
    max-width:1440px;margin:0 auto;width:100%;
  }

  /* ---------- Hero ---------- */
  .hero{
    display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;
    margin-bottom:22px;
  }
  .hero-greeting{display:flex;flex-direction:column;gap:6px;min-width:260px;}
  .hero-eyebrow{
    font-family:var(--font-display);font-size:12px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--zone2);
  }
  .hero-title{
    margin:0;font-size:28px;font-weight:800;letter-spacing:-0.01em;line-height:1.15;
  }
  .hero-title .accent{color:var(--zone2);}
  .hero-sub{color:var(--text-secondary);font-size:13px;margin-top:2px;line-height:1.4;}
  .hero-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end;}

  .modo-switch{
    display:inline-flex;position:relative;padding:4px;
    background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-pill);
    overflow:hidden;
  }
  .modo-switch button{
    position:relative;z-index:1;
    border:none;background:transparent;color:var(--text-secondary);
    font-size:12px;padding:8px 16px;cursor:pointer;font-family:var(--font-ui);font-weight:600;
    border-radius:var(--radius-pill);
    transition:color var(--dur-fast) var(--ease-out);
  }
  .modo-switch button:hover{color:var(--text-primary);}
  .modo-switch button.activo{
    background:var(--zone2);color:#08211A;
    box-shadow:0 4px 12px rgba(53,184,147,.28);
    transition:background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
  }

  button{
    font-family:var(--font-ui);font-weight:600;font-size:13px;
    border-radius:var(--radius-sm);border:1px solid var(--card-border);
    background:var(--card);color:var(--text-primary);
    padding:9px 14px;cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;
    transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  button i{font-size:16px;line-height:1;}
  button:hover{border-color:var(--card-border-hover);background:var(--card-2);}
  button:active{transform:translateY(1px);}
  button.primary{
    background:linear-gradient(180deg, #3ec9a1 0%, var(--zone2) 100%);
    border-color:transparent;color:#08211A;
    box-shadow:0 4px 14px rgba(53,184,147,.25);
  }
  button.primary:hover{filter:brightness(1.06);}
  button.ghost{background:transparent;}
  button:disabled{opacity:.4;cursor:not-allowed;transform:none;}
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  summary:focus-visible,
  textarea:focus-visible{
    outline:3px solid #74F0C6;
    outline-offset:3px;
  }

  .toggle{
    display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);
    border:1px solid var(--card-border);border-radius:var(--radius-pill);
    padding:7px 14px;background:var(--card);cursor:pointer;user-select:none;
    transition:border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .toggle:hover{border-color:var(--card-border-hover);color:var(--text-primary);}
  .toggle input{accent-color:var(--zone2);cursor:pointer;}

  /* ---------- KPI row ---------- */
  .kpi-row{
    display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:14px;
    margin-bottom:22px;
  }
  .kpi{
    position:relative;overflow:hidden;
    background:linear-gradient(180deg, var(--card-2) 0%, var(--card) 100%);
    border:1px solid var(--card-border);border-radius:var(--radius-md);
    padding:16px 18px 15px;min-height:104px;
    display:flex;flex-direction:column;justify-content:space-between;
    transition:border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  }
  .kpi::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 100% 0%, var(--kpi-accent, rgba(53,184,147,.15)) 0%, transparent 60%);
    opacity:.6;
  }
  .kpi:hover{border-color:var(--card-border-hover);}
  .kpi-head{display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;}
  .kpi-label{
    font-size:12px;font-weight:700;color:var(--text-secondary);
    text-transform:uppercase;letter-spacing:.08em;
  }
  .kpi-icon{
    width:28px;height:28px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.03);border:1px solid var(--card-border);
    color:var(--kpi-color, var(--text-secondary));
  }
  .kpi-icon i{font-size:16px;line-height:1;}
  .kpi-body{display:flex;align-items:baseline;gap:6px;position:relative;margin-top:4px;}
  .kpi-num{
    font-family:var(--font-bpm);font-size:36px;font-weight:700;line-height:1;
    color:var(--text-primary);letter-spacing:0;
    font-variant-numeric:tabular-nums;
    transition:color var(--dur-med) var(--ease-out);
  }
  .kpi-unit{font-size:12px;color:var(--text-tertiary);font-weight:500;}
  .kpi-context{
    font-size:12px;color:var(--text-secondary);position:relative;
    display:flex;align-items:center;gap:6px;
  }
  .kpi-context .dot{
    width:6px;height:6px;border-radius:50%;background:var(--kpi-color, var(--zone2));
    box-shadow:0 0 0 4px rgba(53,184,147,.15);
  }
  .kpi.alert-active .kpi-num{color:var(--alert);}
  .kpi.alert-active .kpi-icon{color:var(--alert);border-color:rgba(255,71,71,.35);background:rgba(255,71,71,.08);}
  .kpi.alert-active{border-color:rgba(255,71,71,.35);}
  .kpi.alert-active::before{background:radial-gradient(circle at 100% 0%, rgba(255,71,71,.18) 0%, transparent 60%);}

  /* KPI ring for "conectados" */
  .kpi-ring{position:relative;width:44px;height:44px;flex-shrink:0;}
  .kpi-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
  .kpi-ring .track{stroke:var(--card-border);}
  .kpi-ring .value{
    stroke:var(--zone2);stroke-linecap:round;
    transition:stroke-dashoffset var(--dur-slow) var(--ease-out);
  }
  .kpi-ring .center{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-bpm);font-size:14px;color:var(--text-primary);
  }

  /* ---------- Add panel + section title ---------- */
  .section-title{
    display:flex;align-items:center;gap:10px;
    font-size:12px;font-weight:700;color:var(--text-secondary);
    text-transform:uppercase;letter-spacing:.08em;margin:8px 0 12px;
  }
  .section-title .live-dot{
    width:8px;height:8px;border-radius:50%;background:var(--zone2);
    box-shadow:0 0 0 0 rgba(53,184,147,.6);animation:livePing 2.2s ease-out infinite;
  }
  .section-title .live-dot.paused{animation:none;background:var(--text-tertiary);box-shadow:none;}
  .section-title .count{color:var(--text-tertiary);font-weight:500;letter-spacing:.02em;text-transform:none;}

  .panel{
    background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-md);
    padding:16px 18px;margin-bottom:20px;
    transition:border-color var(--dur-fast) var(--ease-out);
  }
  .panel:hover{border-color:var(--card-border-hover);}
  .panel > h2{
    margin:0 0 12px;font-size:12px;font-weight:700;color:var(--text-secondary);
    text-transform:uppercase;letter-spacing:.08em;
    display:flex;align-items:center;gap:8px;
  }
  .panel > h2 i{color:var(--zone2);font-size:16px;}

  /* Collapsible add panel */
  details.panel{padding:0;}
  details.panel > summary{
    list-style:none;cursor:pointer;user-select:none;
    padding:14px 18px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    font-size:12px;font-weight:700;color:var(--text-secondary);
    text-transform:uppercase;letter-spacing:.08em;
  }
  details.panel > summary::-webkit-details-marker{display:none;}
  details.panel > summary .caret{
    color:var(--text-tertiary);transition:transform var(--dur-med) var(--ease-out);
    display:inline-flex;
  }
  details.panel[open] > summary .caret{transform:rotate(180deg);}
  details.panel > summary .lead{display:flex;align-items:center;gap:10px;color:var(--text-primary);}
  details.panel > summary .lead i{color:var(--zone2);font-size:16px;}
  details.panel > .panel-body{padding:0 18px 18px;}

  .form-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;}
  .field{display:flex;flex-direction:column;gap:5px;}
  .field label{font-size:12px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
  .field input,
  .field select{
    font-family:var(--font-ui);font-size:14px;padding:10px 12px;border-radius:var(--radius-sm);
    border:1px solid var(--card-border);background:var(--bg-soft);color:var(--text-primary);width:140px;
    transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .field input:focus,
  .field select:focus{outline:none;border-color:var(--zone2);background:var(--bg-elev);}
  .field.nombre input{width:200px;}
  .hint{font-size:12px;color:var(--text-tertiary);max-width:720px;margin-top:10px;line-height:1.55;}

  /* ---------- Banners ---------- */
  .banner{
    border-radius:var(--radius-sm);padding:12px 16px;font-size:13px;margin-bottom:16px;
    border:1px solid;display:none;align-items:flex-start;gap:10px;
  }
  .banner.show{display:flex;}
  .banner i{font-size:18px;line-height:1;flex:none;margin-top:1px;}
  .banner.warn{background:rgba(232,138,62,.08);border-color:var(--zone4);color:#F3C08E;}
  .banner.err{background:rgba(225,75,75,.08);border-color:var(--alert);color:#F5A3A3;}

  /* ---------- Legend ---------- */
  .legend{
    display:flex;flex-wrap:wrap;gap:14px;margin:0 0 18px;font-size:12px;color:var(--text-secondary);
    padding:12px 16px;background:var(--card);border:1px solid var(--card-border);
    border-radius:var(--radius-md);
  }
  .legend span{display:inline-flex;align-items:center;gap:6px;font-weight:500;}
  .legend i{
    width:8px;height:8px;border-radius:50%;display:inline-block;
    box-shadow:0 0 0 3px rgba(255,255,255,.04);
  }

  /* ---------- Grid de pacientes ---------- */
  .grid{
    display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:16px;
  }
  .empty{
    grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text-tertiary);
    border:1px dashed var(--card-border);border-radius:var(--radius-md);font-size:14px;
    background:rgba(255,255,255,.015);
    display:flex;flex-direction:column;align-items:center;gap:12px;
  }
  .empty i{font-size:34px;color:var(--text-quaternary);}

  /* ---------- Card ---------- */
  .card{
    background:linear-gradient(180deg, var(--card-2) 0%, var(--card) 100%);
    border:1px solid var(--card-border);border-radius:var(--radius-md);
    padding:18px 18px 16px;position:relative;overflow:hidden;
    transition:border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  }
  .card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:2px;
    background:var(--card-accent, transparent);
    opacity:.8;transition:background var(--dur-med) var(--ease-out);
  }
  .card:hover{border-color:var(--card-border-hover);transform:translateY(-1px);box-shadow:var(--shadow-card);}
  .card.enter{animation:cardEnter var(--dur-slow) var(--ease-spring) both;}
  @keyframes cardEnter{
    0%{opacity:0;transform:translateY(12px) scale(.985);}
    100%{opacity:1;transform:translateY(0) scale(1);}
  }
  .card.alerta{animation:alertFlash 1.4s ease-in-out infinite;border-color:var(--alert);}
  @keyframes alertFlash{
    0%,100%{box-shadow:0 0 0 0 rgba(255,71,71,0);}
    50%{box-shadow:0 0 0 6px rgba(255,71,71,.12), 0 0 32px 2px rgba(255,71,71,.28);}
  }

  .card-top{
    display:flex;justify-content:space-between;align-items:flex-start;
    margin-bottom:14px;gap:10px;
  }
  .card-top-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}
  .card-toggle-min{
    background:transparent;border:none;color:var(--text-tertiary);
    cursor:pointer;padding:5px 7px;border-radius:6px;
    display:inline-flex;align-items:center;justify-content:center;
    transition:color .18s ease, background .18s ease;
    font-family:inherit;
  }
  .card-toggle-min:hover{color:var(--text-primary);background:rgba(255,255,255,.06);}
  .card-toggle-min i{font-size:15px;}

  /* Vista minimizada */
  .card-mini{display:none;}
  .card.minimizada{padding:11px 14px 11px 16px;}
  .card.minimizada > *:not(.card-mini){display:none !important;}
  .card.minimizada > .card-mini{
    display:flex;align-items:center;gap:12px;justify-content:space-between;
    min-height:34px;
  }
  .card.minimizada .mini-left{
    display:flex;align-items:center;gap:11px;min-width:0;flex:1;
  }
  .card.minimizada .mini-dot{
    width:9px;height:9px;border-radius:50%;background:var(--zone0);flex-shrink:0;
    transition:background .28s ease, box-shadow .28s ease;
  }
  .card.minimizada .mini-dot.pulsing{
    animation:statusPulse 1.6s ease-in-out infinite;
  }
  .card.minimizada .mini-name{
    font-weight:700;font-size:13.5px;letter-spacing:-.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    color:var(--text-primary);min-width:0;
  }
  .card.minimizada .mini-bpm{
    display:inline-flex;align-items:baseline;gap:3px;
    font-family:var(--font-mono);font-weight:700;font-size:16px;
    color:var(--text-primary);font-variant-numeric:tabular-nums;
    margin-left:auto;padding-left:8px;
  }
  .card.minimizada .mini-bpm-unit{font-size:12px;color:var(--text-tertiary);font-weight:500;}
  .card.minimizada .mini-zona{
    font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
    padding:3px 8px;border-radius:999px;flex-shrink:0;
    background:rgba(255,255,255,.05);color:var(--text-secondary);
  }
  .card.minimizada .card-toggle-min{color:var(--text-secondary);}
  /* La barra de acento superior sí se muestra en minimizado */
  .card.minimizada::before{opacity:1;}
  .card-name{font-size:16px;font-weight:700;letter-spacing:-0.01em;line-height:1.15;}
  .card-meta{
    font-size:12px;color:var(--text-tertiary);margin-top:3px;line-height:1.4;
    font-variant-numeric:tabular-nums;
  }
  .estado{
    font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    padding:5px 10px;border-radius:var(--radius-pill);white-space:nowrap;
    display:inline-flex;align-items:center;gap:6px;
    transition:background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
  }
  .estado::before{
    content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
    box-shadow:0 0 0 3px currentColor;opacity:.9;
    /* subtle glow, using currentColor at low opacity via filter */
  }
  .estado.desconectado{background:rgba(138,153,174,.12);color:var(--text-secondary);}
  .estado.desconectado::before{box-shadow:none;opacity:.6;}
  .estado.conectado{background:rgba(53,184,147,.14);color:var(--ok);}
  .estado.conectado::before{
    animation:statusPulse 1.8s ease-in-out infinite;
  }
  .estado.sin-senal{background:rgba(232,185,78,.14);color:var(--zone3);}
  @keyframes statusPulse{
    0%,100%{box-shadow:0 0 0 3px rgba(53,184,147,.15);}
    50%{box-shadow:0 0 0 6px rgba(53,184,147,0);}
  }

  .bpm-row{
    display:flex;align-items:baseline;gap:14px;
    margin:6px 0 14px;padding:14px 16px;
    background:rgba(255,255,255,.02);
    border:1px solid var(--card-border);border-radius:var(--radius-sm);
    position:relative;overflow:hidden;
  }
  .bpm-row::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 100% 50%, var(--card-accent, transparent) 0%, transparent 55%);
    opacity:.14;transition:background var(--dur-med) var(--ease-out);
  }
  .pulse-dot{
    width:14px;height:14px;border-radius:50%;background:var(--zone0);flex-shrink:0;
    align-self:center;
    animation:pulseDot var(--pulse-duration, 1.2s) ease-in-out infinite;
    transition:background var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
    box-shadow:0 0 0 4px rgba(255,255,255,.02);
  }
  @keyframes pulseDot{
    0%{transform:scale(1);opacity:.7;}
    30%{transform:scale(1.55);opacity:1;box-shadow:0 0 14px currentColor;}
    100%{transform:scale(1);opacity:.7;}
  }
  .bpm-num{
    font-family:var(--font-bpm);font-size:46px;font-weight:700;line-height:1;letter-spacing:0;
    font-variant-numeric:tabular-nums;
    transition:color var(--dur-med) var(--ease-out);
  }
  .bpm-unit{font-size:12px;color:var(--text-tertiary);margin-left:6px;font-weight:500;}

  .zona-badge{
    display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
    padding:6px 12px;border-radius:var(--radius-pill);margin-bottom:12px;
    transition:background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
    position:relative;
  }
  .zona-pct{font-size:12px;color:currentColor;opacity:.7;font-weight:500;}

  .zone-bar{
    height:6px;border-radius:var(--radius-pill);overflow:hidden;
    display:flex;margin-bottom:12px;background:var(--bg-soft);gap:2px;padding:1px;
    border:1px solid var(--card-border);
  }
  .zone-bar div{
    height:100%;border-radius:var(--radius-pill);
    transition:opacity var(--dur-med) var(--ease-out);
  }

  svg.spark{width:100%;height:44px;display:block;margin-bottom:12px;overflow:visible;}
  svg.spark polyline{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
    transition:stroke var(--dur-med) var(--ease-out);
  }
  svg.spark .fill{fill:var(--card-accent, transparent);opacity:.18;stroke:none;transition:fill var(--dur-med) var(--ease-out);}

  .card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px;}
  .card-actions button{flex:1;font-size:12px;padding:9px 10px;justify-content:center;}

  .hrr-box,
  .rpe-box,
  .kcal-box{
    border:1px solid var(--card-border);border-radius:var(--radius-sm);
    padding:11px 13px;margin-bottom:12px;background:rgba(255,255,255,.015);
    transition:border-color var(--dur-fast) var(--ease-out);
  }
  .kcal-box:hover,
  .rpe-box:hover,
  .hrr-box:hover{border-color:var(--card-border-hover);}

  .rango-zonas{margin-bottom:12px;}
  .rango-zonas summary{
    cursor:pointer;font-size:12px;color:var(--text-secondary);
    padding:6px 10px;background:rgba(255,255,255,.02);
    border:1px solid var(--card-border);border-radius:var(--radius-sm);
    user-select:none;list-style:none;
    display:flex;align-items:center;gap:8px;
    transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .rango-zonas summary::-webkit-details-marker{display:none;}
  .rango-zonas summary::before{
    content:"›";display:inline-block;transform:rotate(0deg);color:var(--text-tertiary);
    transition:transform var(--dur-fast) var(--ease-out);font-weight:700;
  }
  .rango-zonas[open] summary::before{transform:rotate(90deg);}
  .rango-zonas summary:hover{color:var(--text-primary);border-color:var(--card-border-hover);}
  .rango-zonas-lista{margin-top:8px;display:flex;flex-direction:column;gap:5px;}
  .rango-zona-fila{
    display:flex;justify-content:space-between;align-items:center;font-size:12px;
    padding:7px 11px;background:var(--bg-soft);
    border:1px solid var(--card-border);border-radius:var(--radius-sm);
  }
  .rango-zona-pct{color:var(--text-tertiary);font-size:12px;}

  .kcal-label,
  .rpe-label,
  .hrr-label{
    font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;
    margin-bottom:5px;font-weight:700;
  }
  .kcal-valor,
  .rpe-valor{font-size:12px;color:var(--text-primary);}
  .kcal-valor strong,
  .rpe-valor strong{
    font-family:var(--font-bpm);font-size:20px;margin-right:5px;
    font-variant-numeric:tabular-nums;
  }
  .kcal-aviso{
    font-size:12px;color:var(--zone3);margin-top:6px;line-height:1.45;
    display:flex;align-items:flex-start;gap:6px;
  }

  .config-grid{
    display:grid;grid-template-columns:repeat(auto-fit, minmax(85px, 1fr));gap:8px;margin-top:12px;
    padding:12px;background:rgba(255,255,255,.015);
    border:1px solid var(--card-border);border-radius:var(--radius-sm);
  }
  .config-grid .field{width:auto;}
  .config-grid .field label{font-size:12px;}
  .config-grid .field input,
  .config-grid select{
    width:100%;font-size:12px;padding:8px 9px;font-family:var(--font-ui);
    border:1px solid var(--card-border);background:var(--bg-soft);color:var(--text-primary);
    border-radius:var(--radius-sm);
    transition:border-color var(--dur-fast) var(--ease-out);
  }
  .config-grid .field input:focus,
  .config-grid select:focus{outline:none;border-color:var(--zone2);}

  .med-check{
    display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text-tertiary);
    margin-top:10px;cursor:pointer;line-height:1.45;
  }
  .med-check input{accent-color:var(--zone3);flex:none;margin-top:2px;}

  .rpe-picker{display:grid;grid-template-columns:repeat(2, 1fr);gap:5px;margin-top:10px;}
  .rpe-picker button{
    display:flex;align-items:center;gap:7px;padding:8px 10px;font-size:12px;font-weight:500;
    text-align:left;justify-content:flex-start;
  }
  .rpe-picker button strong{font-family:var(--font-bpm);font-size:14px;font-weight:700;min-width:16px;}
  .rpe-picker button.activo{background:var(--zone2);border-color:var(--zone2);color:#08211A;}

  .hrr-box.active{border-color:var(--zone3);background:rgba(232,185,78,.06);}
  .hrr-count{font-family:var(--font-display);font-size:15px;color:var(--zone3);font-variant-numeric:tabular-nums;}
  .hrr-result{font-size:13px;margin-bottom:4px;}
  .hrr-ref{font-size:12px;color:var(--text-tertiary);line-height:1.5;}

  .zona-tiempo{
    display:flex;height:8px;border-radius:var(--radius-pill);overflow:hidden;
    margin-bottom:12px;background:var(--bg-soft);border:1px solid var(--card-border);
  }
  .zona-tiempo div{
    height:100%;
    transition:width var(--dur-slow) var(--ease-out);
  }

  /* ---------- Footer ---------- */
  .footer{
    margin-top:34px;padding-top:16px;border-top:1px solid var(--card-border);
    font-size:12px;color:var(--text-tertiary);text-align:center;line-height:1.6;
  }

  /* ---------- Modo pantalla grande ---------- */
  body.modo-pantalla .sidebar,
  body.modo-pantalla .hero,
  body.modo-pantalla .kpi-row,
  body.modo-pantalla .add-panel-wrap,
  body.modo-pantalla details.panel,
  body.modo-pantalla .panel:not(.stay),
  body.modo-pantalla .legend,
  body.modo-pantalla .config-grid,
  body.modo-pantalla .footer,
  body.modo-pantalla .section-title{ display:none !important; }
  body.modo-pantalla .main-scroll{padding:20px;max-width:100%;}
  body.modo-pantalla .grid{grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));gap:24px;}
  body.modo-pantalla .card{padding:28px;}
  body.modo-pantalla .card-name{font-size:22px;}
  body.modo-pantalla .bpm-num{font-size:76px;}
  body.modo-pantalla .zona-badge{font-size:15px;padding:8px 14px;}
  body.modo-pantalla .estado{font-size:12px;padding:6px 12px;}

  .exit-fullscreen{
    display:none;
    position:fixed;top:16px;right:18px;z-index:200;
    padding:10px 16px 10px 14px;font-size:13px;font-weight:600;
    background:var(--card-2);color:var(--text-primary);
    border:1px solid var(--card-border-strong);border-radius:var(--radius-pill);
    box-shadow:var(--shadow-elev);
    align-items:center;gap:8px;cursor:pointer;
    font-family:var(--font-ui);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    animation:fadeInUp var(--dur-med) var(--ease-out) both;
  }
  .exit-fullscreen i{font-size:18px;line-height:1;}
  .exit-fullscreen kbd{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:22px;height:20px;padding:0 6px;margin-left:4px;
    font-family:var(--font-display);font-size:12px;font-weight:700;
    color:var(--text-secondary);background:var(--bg-soft);
    border:1px solid var(--card-border);border-radius:4px;
  }
  .exit-fullscreen:hover{background:var(--card);border-color:var(--zone2);color:var(--zone2);transform:translateY(-1px);}
  .exit-fullscreen:hover kbd{color:var(--zone2);border-color:rgba(53,184,147,.35);}
  body.modo-pantalla .exit-fullscreen{display:inline-flex;}

  /* ---------- Utilities ---------- */
  .icon-btn-sm i{font-size:14px;}
  .visually-hidden{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }

  /* ---------- Global keyframes ---------- */
  @keyframes livePing{
    0%{box-shadow:0 0 0 0 rgba(53,184,147,.55);}
    70%{box-shadow:0 0 0 10px rgba(53,184,147,0);}
    100%{box-shadow:0 0 0 0 rgba(53,184,147,0);}
  }
  @keyframes fadeInUp{
    from{opacity:0;transform:translateY(8px);}
    to{opacity:1;transform:translateY(0);}
  }
  .hero,
  .kpi,
  .add-panel-wrap,
  .legend,
  .section-title{
    animation:fadeInUp var(--dur-med) var(--ease-out) both;
  }
  .kpi:nth-child(1){animation-delay:60ms;}
  .kpi:nth-child(2){animation-delay:120ms;}
  .kpi:nth-child(3){animation-delay:180ms;}
  .kpi:nth-child(4){animation-delay:240ms;}

  /* ---------- Responsive ---------- */
  @media (max-width:960px){
    .kpi-row{grid-template-columns:repeat(2, minmax(0,1fr));}
    .main-scroll{padding:22px 22px 60px;}
  }
  @media (max-width:640px){
    .sidebar{
      width:100%;height:auto;flex-direction:row;position:static;
      padding:10px 14px;gap:10px;
      border-right:none;border-bottom:1px solid var(--card-border);
      overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;
    }
    .sidebar::-webkit-scrollbar{display:none;}
    .sidebar-nav,
    .sidebar-tools,
    .sidebar-actions{flex-direction:row;margin:0;flex:none;}
    .sidebar-actions{margin-left:auto;}
    .side-btn{flex:none;min-width:44px;min-height:44px;}
    .side-btn::after{display:none;}
    .side-divider{display:none;}
    .shell{flex-direction:column;}
    .main-scroll{padding:18px 16px 50px;}
    .hero{flex-direction:column;align-items:flex-start;gap:14px;}
    .hero-actions{justify-content:flex-start;}
    .kpi-row{grid-template-columns:repeat(2, minmax(0,1fr));gap:10px;}
    .kpi{min-height:92px;padding:14px;}
    .kpi-num{font-size:30px;}
    .bpm-num{font-size:40px;}
    .config-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  }

  @media (max-width:420px){
    .kpi-row{grid-template-columns:1fr;}
  }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
      scroll-behavior:auto !important;
    }
    /* Keep pulse but slow it right down to convey aliveness without motion */
    .pulse-dot{animation:none;opacity:.9;}
    .estado.conectado::before{animation:none;}
    .card.alerta{animation:none;border-color:var(--alert);box-shadow:0 0 0 3px rgba(255,71,71,.25);}
    .section-title .live-dot{animation:none;}
  }

  /* ---------- VO₂máx estimado (tarjeta paciente) ---------- */
  .vo2-box{
    border:1px solid var(--card-border);border-radius:var(--radius-sm);
    padding:11px 13px;margin-bottom:12px;
    background:rgba(255,255,255,.015);
    transition:border-color var(--dur-fast) var(--ease-out);
  }
  .vo2-box:hover{border-color:var(--card-border-hover);}
  .vo2-header{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    margin-bottom:6px;
  }
  .vo2-label{
    font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  }
  .vo2-formula{
    font-family:var(--font-display);font-size:12px;color:var(--zone2);
    padding:2px 7px;background:rgba(53,184,147,.1);border:1px solid rgba(53,184,147,.25);
    border-radius:var(--radius-pill);letter-spacing:.06em;
    cursor:help;
  }
  .vo2-value{
    display:flex;align-items:baseline;gap:5px;
  }
  .vo2-num{
    font-family:var(--font-bpm);font-size:22px;font-weight:700;color:var(--text-primary);
    font-variant-numeric:tabular-nums;line-height:1;
  }
  .vo2-unit{font-size:12px;color:var(--text-tertiary);font-weight:500;}
  .vo2-cat-row{margin-top:8px;}
  .vo2-cat{
    display:inline-flex;align-items:center;gap:5px;
    font-size:12px;font-weight:700;padding:3px 9px;
    border-radius:var(--radius-pill);border:1px solid transparent;
    letter-spacing:.02em;
  }
  .vo2-box.vo2-empty .vo2-hint{
    font-size:12px;color:var(--text-tertiary);line-height:1.45;
  }
  .vo2-box.vo2-empty .vo2-hint strong{color:var(--text-secondary);font-weight:600;}

  /* ---------- Tarjeta con sesión finalizada individualmente ---------- */
  .card.card-finalizada{
    border-color:rgba(53,184,147,.55);
    background:linear-gradient(155deg, rgba(53,184,147,.10) 0%, var(--card-bg, #17222e) 55%);
    position:relative;
  }
  .card.card-finalizada .live,
  .card.card-finalizada .bpm-num,
  .card.card-finalizada .zona-badge,
  .card.card-finalizada .connection-help{
    opacity:.72;
  }
  .card-finalizada-badge{
    display:inline-flex;align-items:center;gap:5px;
    padding:3px 9px;margin-top:4px;
    background:rgba(53,184,147,.16);
    border:1px solid rgba(53,184,147,.4);
    border-radius:999px;
    color:var(--zone2, #35b893);
    font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  }
  .card-finalizada-badge i{font-size:12px;}

  /* ---------- Botón "Terminar entrenamiento" (sidebar) ---------- */
  .side-btn-finish{
    background:linear-gradient(180deg, #3ec9a1 0%, var(--zone2) 100%);
    color:#08211A;
    border-color:transparent;
    box-shadow:0 4px 14px rgba(53,184,147,.25), inset 0 1px 0 rgba(255,255,255,.25);
  }
  .side-btn-finish:hover{
    filter:brightness(1.06);
    border-color:transparent;
    background:linear-gradient(180deg, #3ec9a1 0%, var(--zone2) 100%);
    color:#08211A;
    transform:translateY(-1px);
    box-shadow:0 8px 22px rgba(53,184,147,.35), inset 0 1px 0 rgba(255,255,255,.3);
  }

  /* ---------- Modal: Resumen de sesión ---------- */
  .resumen-overlay{
    position:fixed;inset:0;z-index:180;
    background:rgba(6,10,16,.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    display:flex;align-items:center;justify-content:center;
    padding:24px;
    animation:fadeIn 260ms var(--ease-out);
  }
  @keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
  .resumen-modal{
    background:linear-gradient(180deg, var(--card-2) 0%, var(--card) 100%);
    border:1px solid var(--card-border-hover);
    border-radius:var(--radius-lg);
    max-width:960px;width:100%;max-height:88vh;
    display:flex;flex-direction:column;
    box-shadow:var(--shadow-elev);
    overflow:hidden;
    animation:fadeInUp 380ms var(--ease-spring) both;
  }
  .resumen-modal-head{
    display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
    padding:24px 28px 20px;
    border-bottom:1px solid var(--card-border);
  }
  .resumen-modal-head h2{
    margin:0;font-size:22px;font-weight:800;letter-spacing:-0.01em;color:var(--text-primary);
  }
  .resumen-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-display);font-size:12px;letter-spacing:.16em;
    color:var(--zone2);margin-bottom:6px;font-weight:700;
  }
  .resumen-eyebrow i{font-size:14px;}
  .resumen-close{
    background:transparent;border:1px solid var(--card-border);
    width:36px;height:36px;padding:0;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    color:var(--text-secondary);cursor:pointer;flex-shrink:0;
    transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .resumen-close i{font-size:18px;}
  .resumen-close:hover{color:var(--text-primary);border-color:var(--card-border-hover);background:var(--card);}
  .resumen-body{
    padding:22px 28px 26px;overflow-y:auto;flex:1;
  }
  /* Global stats row (duración / personas / kcal) */
  .resumen-header-global{margin-bottom:22px;}
  .resumen-meta-row{
    display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px;
  }
  .resumen-meta-card{
    background:rgba(255,255,255,.02);border:1px solid var(--card-border);
    border-radius:var(--radius-md);padding:14px 16px;
  }
  .resumen-meta-card .label{
    font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;font-weight:700;
    display:block;margin-bottom:6px;
  }
  .resumen-meta-card .valor-grande{
    font-family:var(--font-bpm);font-size:30px;font-weight:700;line-height:1;
    color:var(--text-primary);font-variant-numeric:tabular-nums;
  }
  .resumen-meta-card .valor-grande .unit{
    font-family:var(--font-ui);font-size:12px;color:var(--text-tertiary);
    margin-left:5px;font-weight:500;
  }
  /* Grid de tarjetas por persona */
  .resumen-grid{
    display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:14px;
  }
  .resumen-card{
    background:rgba(255,255,255,.02);
    border:1px solid var(--card-border);
    border-radius:var(--radius-md);
    padding:16px 18px;
    transition:border-color var(--dur-fast) var(--ease-out);
  }
  .resumen-card:hover{border-color:var(--card-border-hover);}
  .resumen-card-head{
    display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
    margin-bottom:14px;
  }
  .resumen-name{font-size:15px;font-weight:700;letter-spacing:-0.01em;line-height:1.2;}
  .resumen-meta{font-size:12px;color:var(--text-tertiary);margin-top:3px;line-height:1.4;font-variant-numeric:tabular-nums;}
  .resumen-kcal{
    background:linear-gradient(135deg, rgba(232,138,62,.18), rgba(232,138,62,.05));
    border:1px solid rgba(232,138,62,.3);
    padding:5px 12px;border-radius:var(--radius-pill);
    display:inline-flex;align-items:baseline;gap:4px;flex-shrink:0;
  }
  .resumen-kcal .valor{font-family:var(--font-bpm);font-size:18px;font-weight:700;color:var(--zone4);}
  .resumen-kcal .unit{font-size:12px;color:var(--zone4);opacity:.8;}
  .resumen-stats-row{
    display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:8px;
    margin-bottom:14px;
  }
  .resumen-stat{
    background:rgba(255,255,255,.02);border:1px solid var(--card-border);
    border-radius:var(--radius-sm);padding:8px 10px;
  }
  .resumen-stat .label{
    font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-weight:700;
    display:block;margin-bottom:3px;
  }
  .resumen-stat .value{
    font-family:var(--font-bpm);font-size:16px;font-weight:700;color:var(--text-primary);
    font-variant-numeric:tabular-nums;
  }
  .resumen-stat .value .unit{font-family:var(--font-ui);font-size:12px;color:var(--text-tertiary);margin-left:3px;font-weight:500;}
  .resumen-stats-secondary{grid-template-columns:1fr;margin-top:8px;}
  .resumen-stats-secondary .resumen-stat{padding:10px 12px;}
  .resumen-stats-secondary .value{font-size:20px;}
  .resumen-explicado{
    margin:0 0 14px;padding:13px 14px;
    background:linear-gradient(135deg, rgba(62,143,224,.09), rgba(62,143,224,.025));
    border:1px solid rgba(62,143,224,.25);border-radius:var(--radius-md);
  }
  .resumen-explicado-head,
  .comparacion-head{
    display:flex;align-items:center;gap:7px;margin-bottom:6px;
    color:var(--text-primary);font-size:12px;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;
  }
  .resumen-explicado-head i{font-size:15px;color:var(--zone1);}
  .resumen-explicado p{
    margin:0;color:var(--text-secondary);font-size:12px;line-height:1.62;
  }
  .comparacion-personal{
    margin:0 0 14px;padding:13px 14px;
    background:rgba(255,255,255,.018);border:1px solid var(--card-border);
    border-radius:var(--radius-md);
  }
  .comparacion-head{justify-content:space-between;gap:10px;flex-wrap:wrap;}
  .comparacion-head span:first-child{display:inline-flex;align-items:center;gap:7px;}
  .comparacion-head i{font-size:15px;color:var(--zone2);}
  .comparacion-fecha{
    color:var(--text-tertiary);font-size:12px;font-weight:600;
    text-transform:none;letter-spacing:0;
  }
  .comparacion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px;}
  .comparacion-item{
    min-width:0;padding:9px 10px;background:rgba(0,0,0,.12);
    border:1px solid var(--card-border);border-radius:var(--radius-sm);
  }
  .comparacion-item .label{
    display:block;color:var(--text-tertiary);font-size:12px;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;
  }
  .comparacion-item .value{
    display:block;color:var(--text-primary);font-family:var(--font-bpm);
    font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;
  }
  .comparacion-item .previous{display:block;margin-top:2px;color:var(--text-tertiary);font-size:12px;}
  .comparacion-delta{
    display:inline-flex;align-items:center;gap:4px;margin-top:6px;
    font-size:12px;font-weight:700;
  }
  .comparacion-delta.up{color:var(--zone2);}
  .comparacion-delta.down{color:var(--zone4);}
  .comparacion-delta.same{color:var(--text-secondary);}
  .comparacion-note{margin:9px 0 0;color:var(--text-tertiary);font-size:12px;line-height:1.5;}
  .comparacion-loading,
  .comparacion-empty{
    display:flex;align-items:flex-start;gap:8px;color:var(--text-tertiary);
    font-size:12px;line-height:1.5;
  }
  .comparacion-loading i,
  .comparacion-empty i{font-size:15px;color:var(--zone2);flex:0 0 auto;margin-top:1px;}
  .comparacion-loading i{animation:resumenSpin 1s linear infinite;}
  @keyframes resumenSpin{to{transform:rotate(360deg);}}
  .resumen-vo2-cat{
    display:inline-flex;align-items:center;padding:3px 9px;
    font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:.03em;
    border-radius:var(--radius-pill);border:1px solid transparent;
  }
  .resumen-vo2-block{
    margin-top:12px;padding:14px 16px;
    background:linear-gradient(180deg, rgba(53,184,147,.06) 0%, rgba(53,184,147,.02) 100%);
    border:1px solid rgba(53,184,147,.22);
    border-radius:var(--radius-md);
  }
  .resumen-vo2-head{
    display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap;
  }
  .resumen-vo2-label{
    font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  }
  .resumen-vo2-value{
    display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:10px;
  }
  .resumen-vo2-num{
    font-family:var(--font-bpm);font-size:32px;font-weight:700;color:var(--text-primary);
    font-variant-numeric:tabular-nums;line-height:1;
  }
  .resumen-vo2-unit{font-size:12px;color:var(--text-tertiary);font-weight:500;}
  .resumen-vo2-delta{
    font-size:12px;color:var(--text-secondary);margin-left:8px;
    padding:3px 8px;background:rgba(255,255,255,.03);border:1px solid var(--card-border);
    border-radius:var(--radius-pill);
  }
  .resumen-vo2-detail{
    display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;
  }
  .chip-detail{
    display:inline-flex;align-items:center;gap:6px;
    font-size:12px;color:var(--text-secondary);
    padding:5px 10px;background:rgba(255,255,255,.03);
    border:1px solid var(--card-border);border-radius:var(--radius-pill);
  }
  .chip-detail i{font-size:12px;color:var(--zone2);}
  .chip-detail strong{color:var(--text-primary);font-family:var(--font-bpm);font-weight:700;}
  .chip-detail-muted{color:var(--text-tertiary);font-style:italic;}
  .chip-detail-muted i{color:var(--text-tertiary);}
  .resumen-vo2-chart-wrap{
    background:rgba(0,0,0,.15);
    border:1px solid var(--card-border);
    border-radius:var(--radius-sm);
    padding:10px 12px 6px;
  }
  .resumen-vo2-chart-label{
    font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-weight:700;
    margin-bottom:6px;
  }
  .resumen-vo2-chart{min-height:80px;}
  .chart-loading,
  .chart-empty{
    font-size:12px;color:var(--text-tertiary);text-align:center;padding:22px 6px;line-height:1.5;
  }
  .chart-empty strong{color:var(--text-secondary);}
  .chart-trend{
    font-size:12px;font-weight:600;margin-top:4px;text-align:center;
    font-variant-numeric:tabular-nums;
  }
  .resumen-vo2-empty{
    background:rgba(255,255,255,.02);
    border-color:var(--card-border);
  }
  .resumen-vo2-empty .resumen-vo2-hint{
    font-size:12px;color:var(--text-tertiary);margin-top:4px;line-height:1.5;
  }
  .resumen-zonas-titulo{
    font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-weight:700;
    margin-bottom:8px;
  }
  .resumen-zonas-bar{
    display:flex;height:8px;border-radius:var(--radius-pill);overflow:hidden;
    background:var(--bg-soft);border:1px solid var(--card-border);
    margin-bottom:10px;
  }
  .resumen-zonas-bar div{height:100%;}
  .resumen-zonas-lista{
    display:flex;flex-direction:column;gap:4px;
  }
  .resumen-zona-fila{
    display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
    font-size:12px;padding:5px 9px;border-radius:var(--radius-sm);
    background:rgba(255,255,255,.02);border:1px solid var(--card-border);
  }
  .resumen-zona-chip{
    font-size:12px;font-weight:700;padding:3px 8px;border-radius:var(--radius-pill);
  }
  .resumen-zona-tiempo{color:var(--text-primary);font-variant-numeric:tabular-nums;font-weight:600;}
  .resumen-zona-pct{color:var(--text-tertiary);font-size:12px;min-width:34px;text-align:right;font-variant-numeric:tabular-nums;}
  .resumen-empty{
    text-align:center;color:var(--text-tertiary);padding:24px 10px;font-size:12px;
    border:1px dashed var(--card-border);border-radius:var(--radius-sm);
  }
  /* Footer del modal */
  .resumen-modal-foot{
    padding:16px 24px;
    border-top:1px solid var(--card-border);
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:rgba(0,0,0,.15);
    flex-wrap:wrap;
  }
  .resumen-foot-left{display:flex;gap:8px;flex-wrap:wrap;}
  .resumen-modal-foot .ghost{
    background:var(--card);color:var(--text-primary);
    border:1px solid var(--card-border);
    padding:10px 14px;font-size:12px;font-weight:600;
    border-radius:var(--radius-sm);cursor:pointer;
    display:inline-flex;align-items:center;gap:7px;font-family:var(--font-ui);
    transition:border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .resumen-modal-foot .ghost:hover{border-color:var(--zone2);color:var(--zone2);}
  .resumen-modal-foot .ghost i{font-size:15px;}
  .resumen-modal-foot .primary{
    background:linear-gradient(180deg, #3ec9a1 0%, var(--zone2) 100%);
    color:#08211A;border:none;padding:11px 18px;font-size:13px;font-weight:700;
    border-radius:var(--radius-sm);cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);
    box-shadow:0 4px 14px rgba(53,184,147,.25);
    transition:transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
  }
  .resumen-modal-foot .primary:hover{transform:translateY(-1px);filter:brightness(1.05);}
  .resumen-modal-foot .primary i{font-size:16px;}

  /* Bloque de observaciones + botón PDF por paciente */
  .resumen-ficha-block{
    margin-top:14px;padding-top:14px;
    border-top:1px dashed var(--card-border);
    display:flex;flex-direction:column;gap:10px;
  }
  .resumen-ficha-block label{
    font-size:12px;letter-spacing:.05em;text-transform:uppercase;
    color:var(--text-tertiary);font-weight:600;
  }
  .resumen-obs{
    width:100%;min-height:48px;resize:vertical;
    background:var(--bg-elev);color:var(--text-primary);
    border:1px solid var(--card-border);border-radius:var(--radius-sm);
    padding:8px 10px;font-family:var(--font-ui);font-size:12px;line-height:1.45;
  }
  .resumen-obs:focus{outline:none;border-color:var(--zone2);}
  .resumen-obs::placeholder{color:var(--text-tertiary);}
  .resumen-pdf-btn{
    align-self:flex-start;
    background:transparent;color:var(--zone2);
    border:1px solid rgba(53,184,147,.4);
    padding:8px 12px;font-size:12px;font-weight:600;
    border-radius:var(--radius-sm);cursor:pointer;
    display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);
    transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .resumen-pdf-btn:hover{background:rgba(53,184,147,.1);border-color:var(--zone2);}
  .resumen-pdf-btn i{font-size:15px;}
  .resumen-qr-btn{
    align-self:flex-start;
    background:transparent;color:var(--zone3, #ffd166);
    border:1px solid rgba(255,209,102,.35);
    padding:8px 12px;font-size:12px;font-weight:600;
    border-radius:var(--radius-sm);cursor:pointer;
    display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);
    margin-left:8px;
    transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .resumen-qr-btn:hover{background:rgba(255,209,102,.10);border-color:var(--zone3, #ffd166);}
  .resumen-qr-btn i{font-size:15px;}
  .resumen-btns-row{display:flex;flex-wrap:wrap;gap:0;align-items:center;}

  /* ---------- Modal QR compartir con participante ---------- */
  .qr-overlay{
    position:fixed;inset:0;z-index:2000;
    background:rgba(3,8,12,.85);backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    animation:qr-fade var(--dur-med, .18s) var(--ease-out, ease-out);
  }
  @keyframes qr-fade{ from{opacity:0} to{opacity:1} }
  .qr-modal{
    width:100%;max-width:640px;max-height:90vh;overflow:auto;
    background:linear-gradient(145deg, var(--card-bg-2, #17222e), var(--card-bg, #121b25));
    border:1px solid var(--card-border, #2a3948);
    border-radius:var(--radius, 16px);
    box-shadow:0 24px 60px rgba(0,0,0,.5);
    display:flex;flex-direction:column;
  }
  .qr-modal-head{
    padding:22px 24px 16px;
    border-bottom:1px solid var(--card-border, #2a3948);
    display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  }
  .qr-eyebrow{
    color:var(--zone2, #35b893);
    font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;
  }
  .qr-modal-head h2{
    margin:0;font-size:20px;line-height:1.2;color:var(--text-primary, #f4f7f9);
  }
  .qr-modal-head h2 span{color:var(--zone2, #35b893)}
  .qr-sub{
    margin:8px 0 0;font-size:12px;color:var(--text-secondary, #aebbc7);line-height:1.5;
  }
  .qr-close{
    background:transparent;border:none;color:var(--text-secondary, #aebbc7);
    cursor:pointer;padding:6px;border-radius:8px;
    font-size:22px;line-height:1;
  }
  .qr-close:hover{background:rgba(255,255,255,.06);color:var(--text-primary, #fff);}
  .qr-body{
    padding:22px 24px;
    display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  }
  .qr-canvas-wrap{
    background:#fff;padding:14px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    flex:none;
  }
  .qr-canvas-wrap canvas{display:block;max-width:100%;height:auto;}
  .qr-info{display:flex;flex-direction:column;gap:14px;min-width:0;}
  .qr-info-label{
    display:block;color:var(--text-secondary, #aebbc7);
    font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    margin-bottom:6px;
  }
  .qr-link-row{display:flex;gap:6px;}
  .qr-link-row input{
    flex:1;min-width:0;
    padding:8px 10px;background:rgba(0,0,0,.25);
    border:1px solid var(--card-border, #2a3948);border-radius:8px;
    color:var(--text-secondary, #aebbc7);
    font-family:'Consolas','Courier New',monospace;font-size:12px;
  }
  .qr-link-row input:focus{outline:none;border-color:var(--zone2, #35b893);color:var(--text-primary, #fff);}
  .qr-link-row .ghost{
    flex:none;padding:8px 12px;font-size:12px;
    display:inline-flex;align-items:center;gap:4px;
  }
  .qr-help{
    background:rgba(53,184,147,.05);
    border:1px solid rgba(53,184,147,.20);
    border-radius:10px;
    padding:12px 14px;
    color:var(--text-secondary, #aebbc7);
    font-size:12px;line-height:1.55;
  }
  .qr-help p{margin:0 0 6px;}
  .qr-help ol{margin:0 0 8px;padding-left:18px;}
  .qr-help li{margin-bottom:3px;}
  .qr-help strong{color:var(--text-primary, #f4f7f9);}
  .qr-warn{
    margin:8px 0 0!important;
    padding:8px 10px;
    background:rgba(240,201,108,.08);
    border-left:2px solid var(--zone4, #f0c96c);
    border-radius:0 6px 6px 0;
    font-size:12px;color:#ffe8ae;
    display:flex;gap:6px;align-items:flex-start;
  }
  .qr-warn i{margin-top:1px;}

  @media (max-width:640px){
    .resumen-body{padding:16px 18px 20px;}
    .resumen-modal-head{padding:18px 20px 14px;}
    .resumen-modal-foot{padding:14px 18px;flex-direction:column;align-items:stretch;}
    .resumen-modal-foot .primary,
    .resumen-modal-foot .ghost{justify-content:center;}
    .resumen-foot-left{flex-direction:column;}
    .resumen-meta-row{grid-template-columns:1fr;}
    .resumen-stats-row{grid-template-columns:1fr 1fr;}
    .resumen-meta-card .valor-grande{font-size:24px;}
    .comparacion-grid{grid-template-columns:1fr;}
    .qr-body{grid-template-columns:1fr;}
    .qr-canvas-wrap{align-self:center;}
    .resumen-qr-btn{margin-left:0;margin-top:6px;}
    .resumen-btns-row{flex-direction:column;align-items:stretch;}
    .resumen-btns-row .resumen-pdf-btn,
    .resumen-btns-row .resumen-qr-btn{align-self:stretch;justify-content:center;}
  }

  /* ---------- Banners de suscripción (trial / pago próximo) ---------- */
  .banner.banner-trial{
    background:rgba(53,184,147,.1);
    border-color:rgba(53,184,147,.35);
    color:#A7ECD0;
  }
  .banner.banner-trial i{color:var(--zone2);}
  .banner.banner-trial a{color:#5FE0B5;text-decoration:underline;font-weight:600;}
  .banner.banner-trial a:hover{color:#EAFFF5;}
  .banner.banner-payment{
    background:rgba(232,185,78,.1);
    border-color:rgba(232,185,78,.35);
    color:#F0D89C;
  }
  .banner.banner-payment i{color:var(--zone3);}
  .banner.banner-payment a{color:#F7E1A8;text-decoration:underline;font-weight:600;}

  /* ---------- Pantalla de bloqueo por suscripción ---------- */
  .bloqueo-overlay{
    position:fixed;inset:0;z-index:150;
    background:
      radial-gradient(1000px 600px at 82% 0%, rgba(53,184,147,.06), transparent 55%),
      radial-gradient(800px 500px at -10% 100%, rgba(62,143,224,.05), transparent 55%),
      var(--bg);
    display:flex;align-items:center;justify-content:center;
    padding:24px;
  }
  .bloqueo-card{
    background:linear-gradient(180deg, var(--card-2) 0%, var(--card) 100%);
    border:1px solid var(--card-border);
    border-radius:var(--radius-lg);
    padding:44px 40px 32px;
    max-width:480px;width:100%;text-align:center;
    box-shadow:var(--shadow-elev);
    animation:fadeInUp 500ms var(--ease-out) both;
  }
  .bloqueo-icon{
    width:72px;height:72px;margin:0 auto 20px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, rgba(53,184,147,.18), rgba(53,184,147,.04));
    border:1px solid rgba(53,184,147,.3);
    border-radius:20px;
  }
  .bloqueo-icon i{font-size:36px;color:var(--zone2);}
  .bloqueo-card h1{
    margin:0 0 12px;font-size:24px;font-weight:800;letter-spacing:-0.01em;
    color:var(--text-primary);
  }
  .bloqueo-desc{
    margin:0 0 28px;font-size:14px;line-height:1.6;
    color:var(--text-secondary);
  }
  .bloqueo-desc strong{color:var(--text-primary);}
  .bloqueo-actions{
    display:flex;flex-direction:column;gap:10px;margin-bottom:20px;
  }
  .bloqueo-actions .btn-primary,
  .bloqueo-actions .btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    padding:12px 20px;
    font-family:var(--font-ui);font-weight:600;font-size:14px;
    border-radius:var(--radius-pill);
    text-decoration:none;cursor:pointer;
    border:1px solid transparent;
    transition:transform var(--dur-fast) var(--ease-out),
               background var(--dur-fast) var(--ease-out),
               border-color var(--dur-fast) var(--ease-out);
  }
  .bloqueo-actions .btn-primary{
    background:linear-gradient(180deg, #3ec9a1 0%, var(--zone2) 100%);
    color:#08211A;
    box-shadow:0 4px 14px rgba(53,184,147,.25);
  }
  .bloqueo-actions .btn-primary:hover{transform:translateY(-1px);filter:brightness(1.05);}
  .bloqueo-actions .btn-ghost{
    background:var(--card);color:var(--text-primary);
    border-color:var(--card-border-hover);
  }
  .bloqueo-actions .btn-ghost:hover{border-color:var(--zone2);color:var(--zone2);}
  .bloqueo-actions .btn-ghost i{color:#25D366;font-size:18px;}
  .btn-text{
    background:transparent;border:none;
    color:var(--text-tertiary);font-family:var(--font-ui);
    font-size:12px;cursor:pointer;padding:6px 12px;
    text-decoration:underline;
  }
  .btn-text:hover{color:var(--text-secondary);}

  /* ---------- Flujo guiado de primera lectura ---------- */
  .skip-link{
    position:fixed;left:16px;top:12px;z-index:260;
    transform:translateY(-160%);padding:10px 14px;border-radius:8px;
    background:var(--zone2);color:#08211A;font-weight:800;text-decoration:none;
    transition:transform var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus{transform:translateY(0);}
  .start-guide{
    position:relative;overflow:hidden;margin:0 0 22px;padding:22px;
    border:1px solid rgba(53,184,147,.34);border-radius:var(--radius-lg);
    background:
      linear-gradient(110deg,rgba(53,184,147,.12),rgba(62,143,224,.045) 58%,rgba(255,255,255,.018)),
      var(--card);
    box-shadow:var(--shadow-card);
  }
  .start-guide::after{
    content:"";position:absolute;right:-70px;top:-95px;width:240px;height:240px;border-radius:50%;
    border:1px solid rgba(53,184,147,.16);box-shadow:0 0 0 26px rgba(53,184,147,.025),0 0 0 52px rgba(62,143,224,.02);
    pointer-events:none;
  }
  .guide-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;position:relative;z-index:1;}
  .guide-eyebrow{font-family:var(--font-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--zone2);}
  .guide-head h2{font-size:20px;letter-spacing:-.02em;margin:6px 0 4px;}
  .guide-head p{max-width:650px;margin:0;color:var(--text-secondary);font-size:13px;line-height:1.55;}
  .guide-dismiss{min-width:44px;min-height:44px;padding:0;justify-content:center;background:rgba(255,255,255,.025);}
  .guide-progress{height:4px;border-radius:999px;background:var(--card-border);overflow:hidden;margin:20px 0 16px;position:relative;z-index:1;}
  .guide-progress > span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--zone2),var(--zone1));transition:width var(--dur-slow) var(--ease-out);}
  .guide-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;position:relative;z-index:1;}
  .guide-step{
    display:flex;align-items:center;gap:8px;min-width:0;padding:10px 11px;
    border:1px solid var(--card-border);border-radius:10px;background:rgba(10,14,20,.38);
    color:var(--text-tertiary);font-size:12px;font-weight:650;line-height:1.25;
  }
  .guide-step i{font-size:17px;flex:none;}
  .guide-step.done{color:#B8F2DE;border-color:rgba(53,184,147,.28);background:rgba(53,184,147,.07);}
  .guide-step.current{color:var(--text-primary);border-color:rgba(62,143,224,.42);background:rgba(62,143,224,.08);}
  .guide-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;position:relative;z-index:1;}
  .guide-count{font-family:var(--font-display);font-size:12px;color:var(--text-secondary);letter-spacing:.05em;}
  .guide-foot .primary{min-height:44px;}

  .context-action{
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:13px 15px;margin:0 0 18px;border:1px solid var(--card-border);
    border-radius:var(--radius-md);background:linear-gradient(90deg,var(--card-2),var(--card));
  }
  .context-action-copy{display:flex;align-items:center;gap:11px;min-width:0;}
  .context-action-copy > i{font-size:22px;color:var(--zone2);flex:none;}
  .context-action-copy strong{display:block;font-size:13px;}
  .context-action-copy span{display:block;color:var(--text-secondary);font-size:12px;margin-top:2px;}
  .context-action .primary{min-height:44px;white-space:nowrap;}
  .hero-guide-btn{min-height:44px;background:transparent;}
  .banner-action{min-height:36px;margin-left:6px;padding:4px 7px;border:0;background:transparent;color:inherit;text-decoration:underline;font-size:inherit;}
  .banner-action:hover{background:transparent;filter:brightness(1.16);}
  button.danger-confirm{background:rgba(255,71,71,.14);border-color:rgba(255,71,71,.5);color:#FFB0B0;}
  button.danger-confirm:hover{background:rgba(255,71,71,.22);border-color:var(--alert);}

  /* Estado vacío con una acción inequívoca */
  .empty{padding:54px 22px;gap:8px;}
  .empty-icon{
    width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;
    background:rgba(53,184,147,.08);border:1px solid rgba(53,184,147,.2);margin-bottom:4px;
  }
  .empty-icon i{font-size:26px;color:var(--zone2);}
  .empty strong{font-size:17px;color:var(--text-primary);}
  .empty p{max-width:480px;margin:0 0 8px;color:var(--text-secondary);line-height:1.55;}
  .empty .primary{min-height:44px;}

  /* Formularios accesibles y revelado progresivo */
  .field-error{display:none;color:#FF9D9D;font-size:12px;line-height:1.35;margin-top:2px;}
  .field-error.show{display:block;}
  .field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--alert);box-shadow:0 0 0 2px rgba(255,71,71,.12);}
  .required-mark{color:#FF9D9D;}
  .password-wrap{position:relative;}
  .password-wrap input{padding-right:48px!important;}
  .password-toggle{
    position:absolute;right:3px;top:50%;transform:translateY(-50%);width:40px;height:40px;
    justify-content:center;padding:0;border:0;background:transparent;color:var(--text-secondary);
  }
  .password-toggle:hover{background:rgba(255,255,255,.04);}
  .auth-help-row{display:flex;justify-content:flex-end;margin:-4px 0 12px;}
  .auth-help-row button{min-height:36px;padding:4px 2px;border:0;background:transparent;color:var(--zone2);font-size:12px;}
  .auth-help-row button:hover{background:transparent;text-decoration:underline;}
  .active-account{
    display:none;flex-direction:column;align-items:stretch;gap:11px;width:100%;
    margin:0 0 16px;padding:13px;border:1px solid rgba(53,184,147,.3);
    border-radius:11px;background:rgba(53,184,147,.07);text-align:left;
  }
  .active-account-main{display:flex;align-items:flex-start;gap:10px;min-width:0;}
  .active-account-main > i{font-size:20px;color:var(--zone2);flex:none;margin-top:1px;}
  .active-account-copy{min-width:0;}
  .active-account-copy span{display:block;color:var(--text-tertiary);font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
  .active-account-copy strong{display:block;margin-top:3px;color:var(--text-primary);font-size:13px;line-height:1.4;overflow-wrap:anywhere;}
  .active-account button{width:100%;min-height:44px;justify-content:center;background:transparent;color:var(--zone2);}
  .login-error{line-height:1.45;}
  .login-error.success{color:#8FE0C4;}
  .auth-legal{margin-top:14px;color:var(--text-tertiary);font-size:12px;line-height:1.55;text-align:center;}
  .auth-legal a,.privacy-confirm a,.footer a{color:#8FE0C4;text-underline-offset:3px;}
  .privacy-confirm{
    display:flex;align-items:flex-start;gap:10px;width:100%;margin:12px 0 4px;padding:12px 13px;
    border:1px solid rgba(232,185,78,.28);border-radius:11px;background:rgba(232,185,78,.055);
    color:var(--text-secondary);font-size:12px;line-height:1.5;cursor:pointer;
  }
  .privacy-confirm input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--zone2);flex:none;}
  .privacy-confirm strong{display:block;margin-bottom:2px;color:var(--text-primary);font-size:12px;}
  .privacy-confirm:focus-within{border-color:var(--zone2);box-shadow:0 0 0 3px rgba(53,184,147,.14);}
  .privacy-confirm[aria-invalid="true"]{border-color:var(--alert);box-shadow:0 0 0 2px rgba(255,71,71,.12);}
  .privacy-field-error{margin:0 0 8px;}
  .evaluation-banner{border-color:rgba(232,185,78,.34)!important;background:rgba(232,185,78,.075)!important;color:#FFE3A0!important;}
  .evaluation-banner strong{color:#FFF1C9;}
  .advanced-fields{margin-top:14px;border-top:1px solid var(--card-border);padding-top:10px;}
  .advanced-fields > summary{
    min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--text-secondary);
    font-size:12px;font-weight:700;list-style:none;
  }
  .advanced-fields > summary::-webkit-details-marker{display:none;}
  .advanced-fields > summary i{color:var(--zone2);font-size:16px;}
  .advanced-fields .form-row{padding-top:8px;}
  .inline-help{margin-top:12px;border-top:1px dashed var(--card-border);padding-top:6px;}
  .inline-help > summary{min-height:40px;display:flex;align-items:center;cursor:pointer;color:var(--text-secondary);font-size:12px;font-weight:650;}

  /* Estados de conexión y feedback */
  .estado.buscando,.estado.conectando,.estado.esperando{background:rgba(62,143,224,.14);color:#83BBF1;}
  .estado.buscando::before,.estado.conectando::before,.estado.esperando::before{background:var(--zone1);animation:statusPulse 1.5s ease-in-out infinite;}
  .estado.error{background:rgba(255,71,71,.12);color:#FF9D9D;}
  .estado.error::before{background:var(--alert);}
  .connection-help{font-size:12px;line-height:1.45;color:var(--text-secondary);margin:-2px 0 12px;display:flex;gap:7px;align-items:flex-start;}
  .connection-help i{color:var(--zone1);font-size:15px;margin-top:1px;}

  .toast-region{position:fixed;right:20px;bottom:20px;z-index:250;display:flex;flex-direction:column;gap:10px;width:min(390px,calc(100vw - 32px));pointer-events:none;}
  .app-toast{
    display:flex;gap:11px;align-items:flex-start;padding:14px 15px;border:1px solid var(--card-border-hover);
    border-radius:12px;background:rgba(22,29,38,.97);box-shadow:var(--shadow-elev);color:var(--text-primary);
    font-size:13px;line-height:1.45;pointer-events:auto;animation:fadeInUp var(--dur-med) var(--ease-out) both;
  }
  .app-toast i{font-size:20px;color:var(--zone2);flex:none;}
  .app-toast.error i{color:#FF8E8E;}
  .app-toast.warn i{color:var(--zone3);}

  dialog.app-dialog{
    width:min(520px,calc(100vw - 32px));padding:0;border:1px solid var(--card-border-hover);
    border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--card-2),var(--card));
    color:var(--text-primary);box-shadow:var(--shadow-elev);
  }
  dialog.app-dialog::backdrop{background:rgba(6,10,16,.76);backdrop-filter:blur(8px);}
  .dialog-head{display:flex;justify-content:space-between;gap:16px;padding:21px 22px 15px;border-bottom:1px solid var(--card-border);}
  .dialog-head h2{font-size:19px;margin:0;}
  .dialog-close{width:44px;height:44px;padding:0;justify-content:center;margin:-9px -9px 0 0;}
  .dialog-body{padding:20px 22px;color:var(--text-secondary);font-size:14px;line-height:1.6;}
  .dialog-body p{margin:0 0 12px;}
  .dialog-foot{display:flex;justify-content:flex-end;gap:10px;padding:15px 22px 20px;}
  .dialog-foot button,.dialog-foot a{min-height:44px;justify-content:center;}
  .plan-price{display:flex;align-items:baseline;gap:8px;margin:12px 0 16px;color:var(--text-primary);}
  .plan-price strong{font-family:var(--font-bpm);font-size:40px;letter-spacing:.01em;}
  .plan-points{display:grid;gap:8px;margin:0;padding:0;list-style:none;}
  .plan-points li{display:flex;gap:9px;align-items:flex-start;}
  .plan-points i{color:var(--zone2);font-size:17px;margin-top:3px;}
  .history-dialog{width:min(780px,calc(100vw - 32px))!important;}
  .history-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 22px 0;}
  .history-stat{padding:12px 13px;border:1px solid var(--card-border);border-radius:10px;background:rgba(255,255,255,.015);}
  .history-stat span{display:block;color:var(--text-tertiary);font-size:12px;text-transform:uppercase;letter-spacing:.07em;}
  .history-stat strong{display:block;margin-top:4px;font-family:var(--font-bpm);font-size:24px;}
  .history-list{display:grid;gap:9px;max-height:52vh;overflow:auto;padding:16px 22px 6px;}
  .history-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(110px,.8fr) minmax(120px,.8fr);gap:14px;align-items:center;padding:13px 14px;border:1px solid var(--card-border);border-radius:11px;background:rgba(255,255,255,.015);}
  .history-person{display:flex;gap:10px;align-items:center;min-width:0;}
  .history-person > i{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(53,184,147,.08);color:var(--zone2);flex:none;}
  .history-person strong,.history-person span{display:block;overflow-wrap:anywhere;}
  .history-person strong{font-size:13px;}
  .history-person span,.history-meta{font-size:12px;color:var(--text-secondary);line-height:1.45;}
  .history-zone{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-secondary);}
  .history-zone i{width:8px;height:8px;border-radius:50%;background:var(--history-zone,var(--zone2));}
  .history-empty{text-align:center;padding:42px 16px;color:var(--text-secondary);border:1px dashed var(--card-border);border-radius:12px;}
  .history-empty i{display:block;font-size:28px;color:var(--zone2);margin-bottom:9px;}
  .history-empty strong,.history-empty span{display:block;}
  .history-empty span{font-size:12px;margin-top:5px;}

  /* Navegación móvil con etiquetas */
  .mobile-nav,.mobile-more{display:none;}
  @media (max-width:640px){
    .sidebar{display:none;}
    .main-scroll{padding-bottom:112px;}
    .mobile-nav{
      display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:10px;right:10px;bottom:10px;z-index:110;
      padding:7px calc(7px + env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) calc(7px + env(safe-area-inset-left));
      background:rgba(20,27,36,.96);border:1px solid var(--card-border-hover);border-radius:16px;box-shadow:var(--shadow-elev);backdrop-filter:blur(14px);
    }
    .mobile-nav button{min-height:54px;justify-content:center;flex-direction:column;gap:3px;padding:5px;border:0;background:transparent;color:var(--text-secondary);font-size:12px;}
    .mobile-nav button i{font-size:21px;}
    .mobile-nav button.active{color:var(--zone2);background:rgba(53,184,147,.08);}
    .mobile-nav button.mobile-finish{color:#0B2A21;background:var(--zone2);}
    .mobile-more{
      position:fixed;left:10px;right:10px;bottom:84px;z-index:109;padding:14px;
      border:1px solid var(--card-border-hover);border-radius:16px;background:rgba(20,27,36,.98);box-shadow:var(--shadow-elev);
    }
    .mobile-more.show{display:grid;grid-template-columns:1fr 1fr;gap:9px;animation:fadeInUp var(--dur-fast) var(--ease-out) both;}
    .mobile-more button{min-height:48px;justify-content:flex-start;}
    .mobile-more .danger{color:#FF9D9D;}
    .guide-steps{grid-template-columns:1fr 1fr;}
    .guide-step:last-child{grid-column:1/-1;}
    .guide-head{align-items:flex-start;}
    .guide-dismiss{align-self:flex-start;flex:none;}
    .guide-foot,.context-action{align-items:stretch;}
    .guide-foot,.context-action{flex-direction:column;}
    .context-action .primary,.guide-foot .primary{width:100%;justify-content:center;}
    .hero-guide-btn{display:none;}
    .toast-region{right:16px;bottom:96px;}
    .form-row .field,.form-row .field.nombre{width:100%;}
    .form-row .field input,.form-row .field select,.field.nombre input{width:100%;min-height:44px;font-size:16px;}
    .form-row > button.primary{width:100%;justify-content:center;min-height:48px;}
    .privacy-confirm{font-size:12px;}
    .dialog-foot{flex-direction:column-reverse;}
    .dialog-foot button,.dialog-foot a{width:100%;}
    .history-summary{grid-template-columns:1fr 1fr;padding:14px 16px 0;}
    .history-stat:last-child{grid-column:1/-1;}
    .history-list{padding:14px 16px 4px;}
    .history-row{grid-template-columns:1fr;gap:8px;}
  }

/* Lectura y cierre de sesión: controles esenciales visibles en tablet y escritorio. */
.auth-compatibility{margin-top:18px;padding:13px 15px;border:1px solid var(--card-border-strong);border-radius:10px;text-align:left;font-size:12px;line-height:1.6;background:var(--bg-elev)}
.auth-compatibility strong{font-size:13px;color:var(--text-primary)}
.auth-compatibility p{margin:5px 0;color:var(--text-secondary)}
.auth-compatibility a{display:inline-block;padding:7px 0;min-height:36px;color:var(--zone2);font-weight:700}
.auth-compatibility[data-state=unsupported] strong,.auth-compatibility[data-state=insecure] strong{color:#f0c85a}
.export-reminder{padding:18px 24px;border-bottom:1px solid var(--card-border);background:var(--bg-elev);font-size:14px;line-height:1.6}
.export-reminder strong{color:var(--text-primary)}
.export-reminder p{margin:5px 0;color:var(--text-secondary)}
.export-reminder #exportStatus{color:#74e0bd;font-weight:600}
.export-reminder #exportStatus:empty{display:none}
.resumen-modal-foot button{min-height:44px;font-size:13px;white-space:normal;line-height:1.4}
.senal-calidad{display:flex;align-items:center;gap:9px;margin:10px 0;padding:9px 11px;border:1px solid rgba(170,184,201,.2);border-radius:9px;font-size:12px;line-height:1.5;background:rgba(0,0,0,.12)}
.senal-calidad strong{display:block;color:#e2eaf3;font-weight:600}
.senal-detalle{display:block;color:#aab8c9;font-variant-numeric:tabular-nums}
.senal-punto{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:#aab8c9}
.senal-punto.reciente{background:#74e0bd}
.senal-punto.demora,.senal-punto.espera{background:#f0c85a}
.senal-punto.perdida{background:#ff8c98}
.card-name{font-size:19px;line-height:1.3}
.field input,.field select{min-height:44px;font-size:16px}
.login-overlay{overflow-y:auto}
.login-box{margin-block:auto}
@media(max-width:700px){.resumen-modal-foot{align-items:stretch;flex-direction:column}.resumen-foot-left{display:flex;flex-wrap:wrap;gap:8px}.resumen-foot-left button{flex:1 1 135px}.export-reminder{padding:15px 18px}.login-overlay{padding:20px 14px}.auth-compatibility{margin-top:12px}}

/* Resultados de sesión: superficies translúcidas y curvas basadas en lecturas reales. */
.resumen-overlay{background:rgba(4,12,24,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.resumen-modal{
  position:relative;max-width:1200px;max-height:92vh;
  background:linear-gradient(125deg,rgba(25,60,72,.93),rgba(13,31,51,.95) 43%,rgba(18,42,69,.94));
  border:1px solid rgba(178,224,230,.38);border-radius:30px;
  box-shadow:0 28px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
}
.resumen-modal-head{
  padding:30px 36px 26px;
  background:radial-gradient(circle at 4% 0%,rgba(151,245,219,.18),transparent 40%),radial-gradient(circle at 100% 100%,rgba(87,155,248,.13),transparent 42%);
  border-bottom-color:rgba(178,224,230,.17);
}
.resumen-eyebrow{color:#a2eddb;font-size:11px;letter-spacing:.13em}
.resumen-modal-head h2{font-size:clamp(25px,3vw,36px);letter-spacing:-.035em;line-height:1.12}
.resumen-close{width:44px;height:44px;border-radius:14px;border-color:rgba(178,224,230,.28);background:rgba(255,255,255,.06);color:#e7f4f5}
.resumen-close:hover{background:rgba(255,255,255,.12)}
.resumen-body{padding:28px 36px 36px}
.resumen-header-global{margin-bottom:24px}
.resumen-meta-row{gap:13px}
.resumen-meta-card,
.resumen-card{
  background:linear-gradient(135deg,rgba(166,231,228,.13),rgba(57,115,163,.08) 54%,rgba(11,32,51,.25));
  border:1px solid rgba(178,224,230,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 14px 30px rgba(1,13,27,.13);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.resumen-meta-card{border-radius:20px;padding:19px 20px;min-width:0}
.resumen-meta-card .label{font-size:11px;color:#c8e2e5;margin-bottom:12px}
.resumen-meta-card .valor-grande{font-size:clamp(28px,3vw,39px);letter-spacing:-.035em}
.resumen-meta-card .valor-grande .unit{color:#c5d9df;font-size:13px}
.resumen-meta-detalle{display:block;margin-top:8px;color:#bed4da;font-size:12px;line-height:1.4}
.resumen-seccion-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px}
.resumen-seccion-head h3{margin:0;color:#f1fafb;font-size:18px;letter-spacing:-.02em}
.resumen-seccion-head span{color:#bdd4db;font-size:12px}
.resumen-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.resumen-card{border-radius:22px;padding:20px 21px;min-width:0}
.resumen-card:hover{border-color:rgba(168,243,222,.55)}
.resumen-persona-orden{margin-bottom:8px;color:#a2e9dc;font-size:11px;font-weight:800;letter-spacing:.13em}
.resumen-name{font-size:20px;color:#f5fbfc;overflow-wrap:anywhere}
.resumen-meta{color:#bfd6db}
.resumen-kcal{background:rgba(250,195,97,.12);border-color:rgba(255,213,141,.38);border-radius:11px;padding:7px 10px}
.resumen-kcal .valor,.resumen-kcal .unit{color:#ffe0a4}
.resumen-curva{margin:15px 0 16px;padding:12px 0 8px;border-bottom:1px solid rgba(178,224,230,.18)}
.resumen-curva-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:7px;color:#bfdce1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.075em}
.resumen-curva-rango{font-variant-numeric:tabular-nums;color:#d7f7ef;white-space:nowrap}
.resumen-curva-svg{display:block;width:100%;height:88px;overflow:visible}
.resumen-curva-guia{fill:none;stroke:rgba(190,228,231,.12);stroke-width:1;vector-effect:non-scaling-stroke}
.resumen-curva-trazo{fill:none;stroke:#8ee8d4;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 5px rgba(109,235,204,.36))}
.resumen-curva-punto{fill:#8ee8d4}
.resumen-card:nth-child(even) .resumen-curva-trazo{stroke:#9bd7fb;filter:drop-shadow(0 1px 5px rgba(130,194,251,.32))}
.resumen-card:nth-child(even) .resumen-curva-punto{fill:#9bd7fb}
.resumen-curva-pie{display:flex;justify-content:space-between;gap:6px;color:#bdd1d8;font-size:11px;line-height:1.4}
.resumen-curva-pie span:nth-child(2){text-align:center;color:#d7eee8}
.resumen-curva-empty{margin:12px 0 18px;color:#c2d9df;font-size:13px;line-height:1.5}
.resumen-stat{background:rgba(2,21,37,.27);border-color:rgba(178,224,230,.2);border-radius:12px;padding:10px 11px}
.resumen-stat .label{font-size:10px;color:#c5dce0}
.resumen-stat .value{font-size:19px}
.resumen-stat .value .unit{color:#c2d7dd}
.resumen-explicado{background:rgba(84,162,174,.1);border-color:rgba(137,229,211,.26);border-left:2px solid #80dccb;border-radius:0 12px 12px 0}
.resumen-explicado-head{color:#e5f8f4}
.resumen-explicado p{color:#d7e9ec;font-size:13px}
.resumen-vo2-block{background:rgba(56,151,131,.1);border-color:rgba(139,225,201,.25)}
.resumen-zonas-titulo{margin-top:17px;color:#d0e4e7}
.resumen-zonas-bar{height:10px;background:rgba(1,17,29,.42);border-color:rgba(178,224,230,.17)}
.resumen-zona-fila{background:rgba(2,21,37,.19);border-color:rgba(178,224,230,.16)}
.resumen-zona-pct{color:#d1e0e3}
.resumen-ficha-block{border-top-color:rgba(178,224,230,.22)}
.resumen-ficha-block label{color:#cee2e5}
.resumen-obs{min-height:76px;background:rgba(2,19,33,.4);border-color:rgba(178,224,230,.3);border-radius:12px;padding:11px 12px;font-size:14px}
.resumen-obs::placeholder{color:#b4cbd1;opacity:1}
.resumen-btns-row{gap:8px}
.resumen-pdf-btn,.resumen-qr-btn{min-height:44px;margin:0;border-radius:11px;padding:10px 13px}
.resumen-pdf-btn{background:rgba(111,224,193,.12);color:#c9fff0;border-color:rgba(129,234,205,.43)}
.resumen-qr-btn{background:rgba(183,205,217,.09);color:#e5f2f4;border-color:rgba(178,224,230,.32)}
.export-reminder{background:rgba(2,20,35,.25);border-bottom-color:rgba(178,224,230,.17);padding:13px 36px;font-size:12px}
.export-reminder p{color:#c5dbe0}
.resumen-modal-foot{background:rgba(2,20,35,.38);border-top-color:rgba(178,224,230,.2);padding:18px 36px}
.resumen-modal-foot .ghost{background:rgba(161,212,225,.1);border-color:rgba(178,224,230,.3);border-radius:11px}
.resumen-modal-foot .primary{border-radius:11px}
@media(max-width:700px){
  .resumen-overlay{padding:8px;align-items:stretch}
  .resumen-modal{max-height:calc(100dvh - 16px);border-radius:22px}
  .resumen-modal-head{padding:19px 18px 16px}
  .resumen-modal-head h2{font-size:26px}
  .resumen-body{padding:18px 16px 23px}
  .resumen-meta-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .resumen-meta-card{padding:14px}
  .resumen-meta-card:last-child{grid-column:1/-1}
  .resumen-meta-card .valor-grande{font-size:28px}
  .resumen-card{padding:17px 15px}
  .resumen-grid{grid-template-columns:1fr}
  .resumen-stats-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .resumen-stat{padding:8px 7px}
  .resumen-stat .label{font-size:9px}
  .resumen-stat .value{font-size:16px}
  .resumen-curva-pie{font-size:10px}
  .resumen-obs{font-size:16px}
  .export-reminder{padding:11px 18px}
  .resumen-modal-foot{padding:13px 16px}
  .resumen-foot-left{flex-direction:column}
  .resumen-foot-left button{flex:0 0 auto;width:100%}
}
@media(max-width:380px){.resumen-stats-row{grid-template-columns:1fr 1fr}.resumen-stat:first-child{grid-column:1/-1}.resumen-curva-head{flex-wrap:wrap}}
@media(prefers-reduced-transparency:reduce){.resumen-modal{background:#10283a}.resumen-card,.resumen-meta-card{background:#1c3b4d}}