/* SayBye — sistema de diseño compartido */
:root{
  --navy:#11253E; --brand:#1B4B8C; --brand-hover:#163D72; --brand-soft:#E8EFF9;
  --bg:#F5F7FA; --surface:#FFFFFF; --line:#E3E8F0; --text:#0F1B2D; --muted:#5B6B80;
  --ok:#1F7A55; --ok-soft:#E6F4EE; --warn:#B7791F; --warn-soft:#FDF4E3; --danger:#C0392B; --danger-soft:#FBEAE8;
  --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --shadow-sm:0 1px 2px rgba(17,37,62,.06);
  --shadow-md:0 1px 2px rgba(17,37,62,.05),0 12px 32px rgba(17,37,62,.08);
  --ring:0 0 0 3px rgba(27,75,140,.22);
  /* alias heredados (usados por scripts inline) */
  --sand-deep:var(--line); --sage:var(--navy); --sage-light:#3D5A80; --sage-mist:var(--brand-soft);
  --terracotta:var(--brand); --terracotta-deep:var(--brand-hover); --ink:var(--text); --ink-soft:var(--muted);
  --white:#fff; --error:var(--danger); --green:var(--ok); --warn-c:var(--warn);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,.title{letter-spacing:-.02em}
a{color:var(--brand)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}

/* Layout de acceso */
.wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:32px 16px;
  background:radial-gradient(900px 400px at 50% -10%,#E3ECF8 0,transparent 70%),var(--bg)}
.wrap .box,.wrap .card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:40px 36px;box-shadow:var(--shadow-md)}
.wrap .card{text-align:center}
.logo{display:flex;justify-content:center;margin-bottom:28px;font-size:0}
.logo::before{content:"";display:block;width:56px;height:56px;border-radius:14px;background:url(/logo.png) center/cover no-repeat;box-shadow:var(--shadow-sm)}
.title{font-size:22px;font-weight:700;color:var(--text);margin-bottom:6px}
.subtitle{font-size:14px;color:var(--muted);margin-bottom:22px;line-height:1.6}
.email{font-size:14px;font-weight:600;margin:6px 0 22px}
.icon-circle,.icon{width:56px;height:56px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:0}
.icon-circle::before,.icon::before{content:"";width:26px;height:26px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ic-mail{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
.ic-trash{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3C/svg%3E")}
.icon.ic-trash{background:var(--danger-soft);color:var(--danger)}

/* Formularios */
.field,.code-input{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 14px;font:inherit;font-size:14.5px;color:var(--text);margin-bottom:12px;outline:none;transition:border-color .15s,box-shadow .15s}
.field:focus,.code-input:focus{border-color:var(--brand);box-shadow:var(--ring)}
.code-input{text-align:center;font-size:26px;font-weight:600;letter-spacing:10px;padding:14px 10px 14px 20px}
.input-row,.pw-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:0 14px;margin-bottom:12px;transition:border-color .15s,box-shadow .15s}
.input-row:focus-within,.pw-row:focus-within{border-color:var(--brand);box-shadow:var(--ring)}
.input-row input,.pw-row input{flex:1;min-width:0;border:none;background:transparent;font:inherit;font-size:14.5px;color:var(--text);outline:none;padding:13px 0}
.input-row .ic{font-size:0;width:18px;height:18px;flex-shrink:0;background:var(--muted);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ic-user{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
.ic-pin{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 22s7-6 7-12a7 7 0 10-14 0c0 6 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")}
.ic-phone{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E")}
.pw-row .eye{padding:6px 0 6px 8px;cursor:pointer;color:var(--muted);font-size:16px;user-select:none}
.rules{margin:2px 0 14px;display:flex;flex-wrap:wrap;gap:6px 14px}
.rule{font-size:12px;color:var(--muted)}
.rule.ok{color:var(--ok);font-weight:600}

/* Botones */
.btn-primary{display:block;width:100%;background:var(--brand);color:#fff;border:none;border-radius:var(--r-md);padding:14px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;text-align:center;margin-top:4px;box-shadow:var(--shadow-sm);transition:background .15s,transform .05s}
.btn-primary:hover{background:var(--brand-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed}
.btn-secondary,.btn-ghost,.btn-danger{display:block;width:100%;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-md);padding:12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;text-align:center;margin-top:10px;transition:border-color .15s,color .15s,background .15s}
.btn-secondary:hover,.btn-ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.btn-danger{color:var(--danger);border-color:#E7B9B3}
.btn-danger:hover{background:var(--danger-soft)}

/* Feedback */
.error{display:none;color:var(--danger);background:var(--danger-soft);border-radius:var(--r-sm);padding:10px 12px;font-size:13px;margin-bottom:12px;text-align:left}
.success{display:none;color:var(--ok);background:var(--ok-soft);border-radius:var(--r-sm);padding:10px 12px;font-size:13px;margin-bottom:12px}
.date-box{background:var(--danger-soft);border-radius:var(--r-md);padding:14px 18px;margin:0 0 22px;font-size:13.5px;color:var(--danger);font-weight:600}
.back-link{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.back-link:hover{color:var(--brand)}
.box>.back-link{margin-bottom:20px}
.resend{margin-top:18px;font-size:13px;color:var(--muted);text-align:center}
.resend a{color:var(--brand);cursor:pointer;font-weight:600}
.step{display:none}.step.active{display:block}
.step-indicator{display:flex;gap:6px;margin-bottom:26px}
.step-dot{flex:1;height:4px;border-radius:2px;background:var(--line);transition:background .2s}
.step-dot.active{background:var(--brand)}
@media(max-width:480px){.wrap .box,.wrap .card{padding:32px 22px;border-radius:var(--r-lg)}}
.box-center{text-align:center}.box-center .back-link{margin-top:18px}

/* Shell de la app privada */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:248px;background:var(--surface);border-right:1px solid var(--line);padding:24px 16px;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar-logo{display:flex;align-items:center;padding:0 8px 20px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.sidebar-logo img{width:44px;height:44px;border-radius:12px}
.sidebar-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.sidebar-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-md);font-size:14px;color:var(--muted);cursor:pointer;font-weight:500;text-decoration:none;transition:background .15s,color .15s}
.sidebar-link:hover{background:var(--bg);color:var(--text)}
.sidebar-link.active{background:var(--brand-soft);color:var(--brand);font-weight:600}
.sidebar-link svg{width:20px;height:20px;flex-shrink:0}
.sidebar-bottom{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.sidebar-logout{color:var(--muted)}
.main-area{flex:1;min-width:0;padding:36px 44px;max-width:760px}
.page-title{font-size:26px;font-weight:700;margin-bottom:24px;letter-spacing:-.02em}
.section-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:28px 0 10px}
.loading{text-align:center;padding:60px;color:var(--muted)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm);margin-bottom:14px}
.panel h3{font-size:16px;margin-bottom:6px}
.hint{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px}
.pill.on{background:var(--ok-soft);color:var(--ok)}.pill.off{background:var(--bg);color:var(--muted)}
.row-btns{display:flex;gap:10px;flex-wrap:wrap}.row-btns>*{flex:1;min-width:140px;margin-top:4px}
@media(max-width:860px){
  .app-shell{flex-direction:column}
  .sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:auto;flex-direction:row;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-right:none;border-top:1px solid var(--line);z-index:50}
  .sidebar-logo{display:none}
  .sidebar-nav{flex-direction:row;justify-content:space-around}
  .sidebar-bottom{border:none;margin:0;padding:0}
  .sidebar-link{flex-direction:column;gap:3px;font-size:11px;padding:6px 10px}
  .main-area{padding:22px 16px 96px;max-width:none}
}

/* Modales */
.modal-overlay{position:fixed;inset:0;background:rgba(15,27,45,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border-radius:var(--r-xl);padding:30px 28px;width:100%;max-width:420px;max-height:92vh;overflow:auto;box-shadow:0 24px 64px rgba(15,27,45,.28)}
.modal-title{font-size:18px;font-weight:700;margin-bottom:18px;letter-spacing:-.01em}
.modal-actions,.form-actions{display:flex;gap:10px;margin-top:8px}
.modal-actions .btn-primary,.form-actions .btn-primary{flex:1;width:auto;margin:0}
.btn-cancel{flex:1;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-md);padding:12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.btn-cancel:hover{background:var(--bg);color:var(--text)}
.app-shell .field{background:var(--bg)}
.app-shell .error{margin-bottom:10px}
.app-shell .success{margin-bottom:10px}
@media(max-width:480px){.modal{padding:24px 20px}}

/* Pulido de componentes de la app */
.app-shell .main-area{max-width:1100px}
.app-shell .folder-card,.app-shell .note-box,.app-shell .item-row,.app-shell .form-card,.app-shell .mfa-row,.app-shell .settings-card,.app-shell .action-btn{border-radius:var(--r-lg);border-color:var(--line);box-shadow:var(--shadow-sm)}
.app-shell .card{border-radius:var(--r-lg);border-color:var(--line);box-shadow:var(--shadow-sm)}
.app-shell .folder-card{transition:box-shadow .2s,transform .2s,border-color .2s}
.app-shell .folder-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:#CBD6E6}
.app-shell .new-folder-card{border-radius:var(--r-lg);border-color:#CBD6E6}
.app-shell .new-folder-btn{background:var(--brand);border-radius:var(--r-md);box-shadow:var(--shadow-sm);transition:background .15s}
.app-shell .new-folder-btn:hover{background:var(--brand-hover);opacity:1}
.app-shell .trial-banner{background:var(--warn-soft);border-color:#EBCB8B;color:#7A5410;border-radius:var(--r-md)}
.app-shell .dash-title{letter-spacing:-.02em}
.app-shell .chip,.app-shell .add-chip-form button{border-radius:99px}
.app-shell .ghost-btn{border-radius:var(--r-md)}
.app-shell .ghost-btn:hover,.app-shell .settings-row:hover,.app-shell .action-btn:hover,.app-shell .mfa-row:hover{border-color:var(--brand);background:var(--brand-soft)}
.app-shell .btn-primary{margin-top:0}
.app-shell .modal-actions .btn-primary{margin-top:0}
/* iconos de tarjeta: sustituir emojis por pictogramas */
.folder-icon,.folder-arch,.item-icon{font-size:0!important}
.folder-icon::before,.folder-arch::before,.item-icon::before{content:"";width:55%;height:55%;background:currentColor;-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;
  --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z'/%3E%3C/svg%3E")}
.item-icon::before{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3C/svg%3E")}
.empty-state .icon{width:64px;height:64px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:0}
.empty-state .icon::before{content:"";width:28px;height:28px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:860px){.folder-detail-layout{grid-template-columns:1fr!important}}
.loading:has(*){padding:0;text-align:left}
.folder-grid{text-align:left}
.app-shell .mfa-badge{flex:none!important;margin-left:auto}
.app-shell .plan-card{border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.app-shell .plan-card.selected{border-color:var(--brand);box-shadow:0 0 0 3px rgba(27,75,140,.15)}
.app-shell .btn-checkout,.app-shell .btn-change{border-radius:var(--r-md)}

/* Páginas de estado (tarjeta centrada) */
body.center{display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(900px 400px at 50% -10%,#E3ECF8 0,transparent 70%),var(--bg)}
body.center>.card{width:100%;max-width:460px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:44px 36px;box-shadow:var(--shadow-md);text-align:center}
.icon.emoji{font-size:28px}
.icon.emoji::before{display:none}
.icon.ic-hourglass{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.info-box{background:var(--brand-soft);border-radius:var(--r-md);padding:16px 18px;margin-bottom:24px;text-align:left}
.info-box strong{display:block;font-size:13px;color:var(--navy);margin-bottom:4px}
.info-box p{font-size:13px;color:var(--navy);line-height:1.6}
.rejection-box{background:var(--danger-soft);border-radius:var(--r-md);padding:16px 18px;margin-bottom:24px;text-align:left;display:none}
.rejection-box strong{display:block;font-size:13px;color:var(--danger);margin-bottom:4px}
.rejection-box p{font-size:13px;color:var(--danger);line-height:1.6}
body.center .btn-primary,body.center .btn-ghost{margin-top:0;margin-bottom:10px}
body.center .btn-ghost{margin-bottom:0}
body.center .subtitle{margin-bottom:26px}
/* 404 */
.nf{max-width:480px;text-align:center}
.nf .code{font-size:104px;font-weight:700;letter-spacing:-.04em;line-height:1;background:linear-gradient(180deg,var(--brand),#8FB0DA);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}
.nf h1{font-size:26px;font-weight:700;margin-bottom:12px}
.nf p{color:var(--muted);margin-bottom:28px}
.nf .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.nf .btn{display:inline-block;padding:13px 24px;border-radius:var(--r-md);font-size:14px;font-weight:600;text-decoration:none}
.nf .btn.btn-primary{width:auto;color:#fff}
.nf .btn-secondary{width:auto;margin:0;border:1px solid var(--line);color:var(--text)}
.nf .logo-icon{width:72px;height:72px;border-radius:18px;margin:0 auto 28px;display:block}