:root{--bg:#0b1020;--panel:#11182c;--text:#e8eeff;--muted:#93a4c7;--accent:#6ee7ff;--border:rgba(255,255,255,.08);--danger:#ff8391;--ok:#7dffb0;--warn:#ffd479}
*{box-sizing:border-box}

/* =========================================================
   Pantalla de inicio personalizada (splash nativo)
   ========================================================= */
#splash{
  position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(circle at 50% 30%,#15213f,#0b1020 65%);
  transition:opacity .35s cubic-bezier(.23,1,.32,1),visibility .35s;
}
#splash.out{opacity:0;visibility:hidden;pointer-events:none}
.splash-logo{animation:splashIn .5s cubic-bezier(.23,1,.32,1) both;filter:drop-shadow(0 0 28px rgba(110,231,255,.35))}
.splash-ring{animation:splashRingIn .8s cubic-bezier(.23,1,.32,1) .15s both}
.splash-shield{animation:splashShieldIn .6s cubic-bezier(.23,1,.32,1) .3s both}
.splash-check{animation:splashCheckIn .45s cubic-bezier(.23,1,.32,1) .65s both}
.splash-word{font-size:1.6em;font-weight:800;letter-spacing:.02em;animation:splashIn .5s cubic-bezier(.23,1,.32,1) .4s both}
.splash-sub{color:var(--muted);font-size:.95em;animation:splashIn .5s cubic-bezier(.23,1,.32,1) .5s both}
.splash-loader{display:flex;gap:8px;margin-top:6px}
.splash-loader span{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:splashDot 1s ease-in-out infinite}
.splash-loader span:nth-child(2){animation-delay:.15s}
.splash-loader span:nth-child(3){animation-delay:.3s}

@keyframes splashIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes splashRingIn{from{stroke-dasharray:1400;stroke-dashoffset:1400}to{stroke-dasharray:1400;stroke-dashoffset:0}}
@keyframes splashShieldIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes splashCheckIn{from{stroke-dasharray:120;stroke-dashoffset:120}to{stroke-dasharray:120;stroke-dashoffset:0}}
@keyframes splashDot{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1.1)}}

@media (prefers-reduced-motion:reduce){
  .splash-logo,.splash-ring,.splash-shield,.splash-check,.splash-word,.splash-sub,.splash-loader span{animation:none}
}
@media (min-width:600px){.splash-logo{width:132px;height:132px}}
body{margin:0;font-family:system-ui,sans-serif;background:radial-gradient(circle at top left,#15213f,#0b1020 50%);color:var(--text)}
.app{max-width:1100px;margin:0 auto;padding:32px}
.hero{margin-bottom:20px}
.hero p{color:var(--muted)}
.hidden{display:none !important}
.muted{color:var(--muted);font-size:.9em}

/* Tabs */
.tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap;background:rgba(17,24,44,.6);border:1px solid var(--border);border-radius:16px;padding:6px}
.tab{flex:1;min-width:90px;display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;border:none;color:var(--muted);padding:10px 6px;border-radius:12px;cursor:pointer;font:inherit;margin:0;width:auto}
.tab:hover{background:rgba(255,255,255,.05);filter:none}
.tab.active{background:linear-gradient(135deg,#1a2b52,#1f355d);color:var(--accent)}
.tab .icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.tab span{font-size:.78em}

.panel{display:none}
.panel.active{display:block}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:rgba(17,24,44,.92);border:1px solid var(--border);border-radius:20px;padding:20px;box-shadow:0 16px 40px rgba(0,0,0,.2);margin-bottom:16px}
input,textarea,button,select{width:100%;margin-top:12px;border-radius:14px;border:1px solid var(--border);padding:12px 14px;font:inherit}
input,textarea,select{background:#0d1426;color:var(--text)}
input[type="file"]{padding:10px}
input[type="range"]{padding:0;accent-color:var(--accent);background:transparent}
button{background:linear-gradient(135deg,#1a2b52,#1f355d);color:var(--text);cursor:pointer;border:1px solid var(--border)}
button:hover{filter:brightness(1.15)}
button:disabled{opacity:.5;cursor:not-allowed}
code{background:#0d1426;padding:2px 6px;border-radius:6px}

.result-box{background:#07101f;border:1px solid var(--border);border-radius:16px;padding:14px;min-height:60px;margin-top:12px;font-size:.92em}

/* Verificador de archivos */
.hash-block{border:1px solid var(--border);border-radius:12px;background:#0a1228;padding:10px 12px;margin-top:10px}
.hash-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hash-algo{font-weight:700;color:var(--accent);font-size:.85em;letter-spacing:.06em}
.hash-code{display:block;margin-top:8px;word-break:break-all;overflow-wrap:anywhere;hyphens:auto;font-family:ui-monospace,'SF Mono',monospace;font-size:.78em;line-height:1.55;color:var(--text);background:transparent;border-radius:0;max-width:100%;min-width:0}
.hash-block{min-width:0;max-width:100%;overflow:hidden}
@media (max-width:560px){.hash-code{font-size:.7em;line-height:1.6}.hash-block{padding:8px 10px}}
.copy-hash-btn.ok{color:var(--ok);border-color:var(--ok)}
button.ok{color:var(--ok);border-color:var(--ok);box-shadow:0 0 12px rgba(125,255,176,.25)}
#hashMatch{margin-top:10px;font-size:.92em}
#hashFileInfo{color:var(--muted)}
.result-box.ok{border-color:var(--ok);color:var(--ok)}
.result-box.warn{border-color:var(--warn);color:var(--warn)}
.result-box.danger{border-color:var(--danger);color:var(--danger)}

/* Passwords */
.range-row{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.9em}
.range-row input{margin-top:0;flex:1}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;color:var(--muted);font-size:.9em}
.checks label{display:flex;align-items:center;gap:6px}
.checks input{width:auto;margin:0}
.pw-output-row{display:flex;gap:8px;align-items:center}
.pw-output-row input{margin-top:12px}
.icon-btn{width:auto;flex-shrink:0;padding:10px;display:flex;align-items:center;justify-content:center}
.icon-sm{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.strength{margin-top:10px;font-size:.85em;color:var(--muted)}
.strength-bar{height:6px;border-radius:4px;background:#07101f;overflow:hidden;margin-top:6px}
.strength-bar>div{height:100%;transition:width .2s}

/* TOTP */
.totp-list{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.totp-item{display:flex;align-items:center;gap:14px;background:#0d1426;border:1px solid var(--border);border-radius:14px;padding:12px 14px}
.totp-ring{position:relative;width:38px;height:38px;flex-shrink:0}
.totp-ring svg{transform:rotate(-90deg)}
.totp-ring circle{fill:none;stroke-width:3}
.totp-ring .bg{stroke:var(--border)}
.totp-ring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.totp-code{font-size:1.4em;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.totp-secret{flex:1;color:var(--muted);font-size:.8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.totp-item button{width:auto;margin:0;padding:8px 10px}

/* Notes / vault */
.note{margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:#0d1426;min-width:0;max-width:100%;overflow:hidden}
.note>div{word-break:break-word;overflow-wrap:anywhere;hyphens:auto;white-space:pre-wrap;min-width:0;max-width:100%}
.vault-header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.vault-header h2{margin:0;word-break:break-word;overflow-wrap:break-word;min-width:0;max-width:100%}
.note .note-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.vault-top-row{display:flex;justify-content:flex-end;margin-bottom:4px}
.lock-now{width:auto;background:#3a1a2b;border-color:var(--danger);color:var(--text);font-weight:700;padding:8px 14px;font-size:.85em;margin-top:8px;display:inline-flex;align-items:center;gap:6px}
.lock-now:hover{filter:brightness(1.2)}
.note-tag-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 0}
.tag-legend{font-size:.8em;color:var(--muted);margin-right:4px}
.tag-opt{font-size:.78em;color:var(--muted);border:1px solid #24304a;border-radius:999px;padding:5px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;user-select:none;margin-top:12px;width:auto;background:#0d1426}
.tag-opt.active{color:var(--text);border-color:var(--accent);box-shadow:0 0 10px rgba(110,231,255,.25)}
.tagdot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dot-general{background:#4a6fa5}.dot-incidente{background:#d64545}.dot-clave{background:#c9a227}.dot-enlace{background:#36b37e}
.note-tag{font-size:.7em;border-radius:999px;padding:3px 9px;font-weight:700}
.tag-general{background:#1c3357;color:#8fb3e8}
.tag-incidente{background:#3d1c24;color:#f09191}
.tag-clave{background:#3d3415;color:#e3c75f}
.tag-enlace{background:#153d2b;color:#75e0ac}
#noteSearch{width:100%;background:#0d1426;color:var(--text);padding:10px 12px;font-size:.9em;margin:14px 0 2px;display:block}
.note .note-date{flex:1;min-width:140px;color:var(--muted);font-size:.75em;word-break:break-word;overflow-wrap:anywhere}
.note .note-editor{background:#0d1426;color:var(--text);resize:vertical;min-height:90px}
.note .note-editor-row{display:flex;gap:8px;margin-top:8px}
.note .note-editor-row button{width:auto;flex:1;margin-top:0;padding:8px 12px}
.note .saveEditNoteBtn{background:#1a3a2b;border-color:var(--ok)}
.note .copyNoteBtn,.note .editNoteBtn{width:auto;margin:0;padding:6px 10px;font-size:.85em;background:#0d1426}
.note .deleteNoteBtn{width:auto;margin:0;padding:6px 10px;font-size:.85em;background:#3a1a2b}
.copyNoteBtn.ok,.note button.ok{color:var(--ok);border-color:var(--ok)}
.vault-backup-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.vault-backup-row .icon-btn{width:auto;margin-top:0;padding:8px 14px;background:#0d1426;border:1px solid var(--border);color:var(--text);border-radius:12px;font-size:.85em;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.vault-backup-row .icon-btn:hover{filter:brightness(1.15)}

.install-msg{max-width:1100px;margin:0 auto 32px;padding:0 32px;color:var(--accent);display:flex;align-items:center;gap:12px}
.install-msg button{width:auto;margin-top:0;padding:8px 16px}

@media (max-width:900px){.grid{grid-template-columns:1fr}}
@media (max-width:560px){.tab span{display:none}.tab{min-width:0;padding:12px 4px}}

/* QR */
.qrTotpBtn{width:auto;margin:0;padding:8px 10px;background:#0d1426;border:1px solid rgba(34,211,238,.3);color:var(--accent);display:inline-flex;align-items:center}
.qrTotpBtn:hover{filter:brightness(1.2)}

#qrModal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}
#qrModal[hidden]{display:none !important}
.qr-backdrop{position:absolute;inset:0;background:rgba(5,8,16,.88);backdrop-filter:blur(4px)}
.qr-dialog{position:relative;background:var(--panel);border:1px solid rgba(34,211,238,.3);border-radius:20px;padding:24px;max-width:92vw;text-align:center;box-shadow:0 0 48px rgba(34,211,238,.15)}
.qr-dialog h3{margin:0 0 12px}
.qr-dialog img{background:#fff;border-radius:10px;padding:8px;width:min(66vw,290px);height:auto;display:block;margin:0 auto 12px}
.qr-dialog p{margin-top:0}
#qrCloseBtn{position:absolute;top:8px;right:12px;background:none;border:none;color:var(--muted);font-size:1.1em;cursor:pointer;width:auto;padding:6px}

/* =========================================================
   Adaptación libre para Chromebook y Android
   ========================================================= */
html{scroll-behavior:smooth;background:var(--bg)}
body{min-height:100dvh;overscroll-behavior-y:contain}
.app{padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(32px,env(safe-area-inset-bottom))}
button,.tab,.icon-btn,.tag-opt,.vault-backup-row .icon-btn{min-height:44px;touch-action:manipulation}
input,textarea,select{font-size:16px;line-height:1.35}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.tag-opt:focus-visible{outline:3px solid rgba(110,231,255,.5);outline-offset:2px}
button,.tab,.icon-btn{user-select:none;-webkit-tap-highlight-color:transparent}
.tab{min-height:64px}
.card{content-visibility:auto;contain-intrinsic-size:280px}
#installMsg{padding-bottom:max(16px,env(safe-area-inset-bottom))}
@media (min-width:901px){.app{padding-left:40px;padding-right:40px}.hero{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.hero h1{font-size:clamp(2.4rem,5vw,4.5rem)}}
@media (max-width:700px){.app{padding-left:14px;padding-right:14px}.card{padding:16px;border-radius:16px}.pw-output-row{align-items:stretch}.pw-output-row input{min-width:0}.totp-item{gap:8px;padding:10px}.totp-item button{padding-left:8px;padding-right:8px}.vault-backup-row{display:grid;grid-template-columns:1fr 1fr}.vault-backup-row .icon-btn{justify-content:center;text-align:center}.install-msg{padding-left:14px;padding-right:14px;flex-wrap:wrap}}
@media (max-width:420px){.tabs{gap:3px;padding:4px}.tab{padding:8px 2px;min-height:56px}.tab .icon{width:20px;height:20px}.card{padding:14px}.checks{gap:8px;font-size:.85em}.totp-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto}.totp-item .deleteTotpBtn{grid-column:2 / -1;justify-self:start}.qrTotpBtn,.copyTotpBtn{width:42px}.vault-backup-row{grid-template-columns:1fr}.hash-code{font-size:.66em}}
@media (orientation:landscape) and (max-height:600px){.app{padding-top:16px}.hero{margin-bottom:12px}.hero p{margin-top:6px}.tabs{margin-bottom:14px}.card{margin-bottom:12px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{content-visibility:visible}}
@media (forced-colors:active){button,.tab,input,textarea,select{border:1px solid CanvasText}.result-box{border:1px solid CanvasText}}

.ok-text{color:var(--ok)}
.danger-text{color:var(--danger)}