/* Ferno's App · estilos
   Paleta y tipografía del documento técnico y del boceto de seis pantallas. */

@font-face { font-family: 'Barlow'; font-weight: 400 500; font-display: swap; src: url(../assets/fonts/barlow-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url(../assets/fonts/barlow-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700 900; font-display: swap; src: url(../assets/fonts/barlow-700.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 400 900; font-display: swap; src: url(../assets/fonts/barlow-condensed-700.woff2) format('woff2'); }

:root {
  --bg: #0E0E10;
  --surface: #17171A;
  --surface-2: #26262B;
  --tabbar: #121214;
  --border: #2A2A2E;
  --border-2: #3A3A40;
  --muted-2: #5A5A62;
  --red: #C81E1E;
  --red-dark: #8F1D1D;
  --red-text: #FF5A5A;
  --red-soft: #FF8A8A;
  --red-bg: #2A1214;
  --amber: #E9A23B;
  --amber-border: #8A6A2A;
  --amber-bg: #24200F;
  --text: #F4F1EC;
  --text-2: #D7D4CE;
  --muted: #A1A1A8;
  --green: #4ADE80;
  --shadow-dark: #0A0A0B;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, -apple-system, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #070708; color: var(--text); font-family: var(--body); font-weight: 500; }
body { overscroll-behavior: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
input, textarea, select { font: inherit; color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--muted); }
:focus-visible { outline: 3px solid var(--red-soft); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { flex: none; }

/* ---------- Marco de la app ---------- */
.app {
  position: relative; margin: 0 auto; max-width: 480px; height: 100dvh;
  background: var(--bg); display: flex; flex-direction: column; overflow: hidden;
}
@media (min-width: 520px) {
  .app { border-left: 2px solid var(--border); border-right: 2px solid var(--border); }
}
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(24px + var(--safe-top)) 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.scroll.tight { padding-top: 14px; }
.scroll::-webkit-scrollbar { width: 0; }
/* Nada dentro de una pantalla con scroll se encoge: así los filtros y las tarjetas no quedan aplastados
   cuando hay muchas tareas (los bloques con overflow se encogían hasta casi desaparecer). */
.scroll > *, .chat > *, .sheet > * { flex-shrink: 0; }

/* ---------- Barra inferior ---------- */
.tabbar { flex: none; height: calc(70px + var(--safe-bottom)); padding: 6px 8px calc(6px + var(--safe-bottom)); gap: 4px; display: flex; border-top: 2px solid var(--border); background: var(--tabbar); }
.tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 14px; border: 2px solid transparent; color: var(--muted); font-size: 12px; font-weight: 600; }
.tab.active { background: var(--red-bg); border-color: var(--red); color: var(--red-soft); font-weight: 700; }
.tab .dot-badge { position: absolute; top: 4px; right: calc(50% - 20px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--tabbar); }

/* ---------- Tipografía ---------- */
.h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1.05; }
.h1.sm { font-size: 34px; }
.sub { font-weight: 500; font-size: 14px; color: var(--muted); }
.section-label { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .12em; color: var(--muted); display: flex; align-items: center; gap: 8px; text-transform: uppercase; }
.section-label.red { color: var(--red-text); font-size: 16px; }
.section-label .grow { flex: 1; }
.count-pill { background: var(--red); color: #fff; font-family: var(--body); font-weight: 700; font-size: 12px; padding: 1px 8px; border-radius: 10px; letter-spacing: 0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.display { font-family: var(--display); font-weight: 700; }

/* ---------- Botones (con borde inferior grueso = relieve) ---------- */
.btn { border: 0; height: 46px; padding: 0 16px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 14px; transition: transform .08s ease, border-bottom-width .08s ease; user-select: none; }
.btn:active:not(:disabled) { transform: translateY(2px); }
.btn-red { background: var(--red); color: #fff; border-bottom: 4px solid var(--red-dark); }
.btn-dark { background: var(--surface-2); color: var(--text); border-bottom: 4px solid var(--shadow-dark); }
.btn-dark.red-ico { color: var(--red-text); }
.btn-outline { background: var(--surface); color: var(--muted); border: 2px solid var(--border-2); border-bottom-width: 4px; }
.btn-prio { background: var(--red-bg); color: var(--red-soft); border: 2px solid var(--red); border-bottom-width: 4px; }
.btn-amber { background: var(--amber-bg); color: var(--amber); border: 2px solid var(--amber-border); border-bottom-width: 4px; }
.btn-ghost { background: transparent; color: var(--muted); border: 0; height: auto; padding: 6px 8px; }
.btn-big { font-family: var(--display); font-size: 18px; letter-spacing: .1em; }
.btn-block { width: 100%; }
.btn-sm { height: 36px; padding: 0 12px; border-radius: 12px; font-size: 13px; }
.btn-xs { height: 30px; padding: 0 10px; border-radius: 10px; font-size: 12px; }
.icon-btn { width: 48px; height: 48px; padding: 0; flex: none; border-radius: 16px; }
.icon-btn.md { width: 40px; height: 40px; border-radius: 12px; }
.icon-btn.sm { width: 34px; height: 34px; border-radius: 11px; border-bottom-width: 3px; }

/* ---------- Entradas ---------- */
.input { flex: 1; min-width: 0; height: 48px; border-radius: 16px; border: 2px solid var(--border); background: var(--surface); padding: 0 16px; font-weight: 500; font-size: 15px; }
.input:focus { outline: none; border-color: var(--red); }
.input.on-dark { background: var(--bg); }
.input.sm { height: 40px; border-radius: 12px; font-size: 14px; padding: 0 12px; }
textarea.input { height: auto; min-height: 76px; padding: 12px 14px; resize: vertical; line-height: 1.35; }
select.input { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.row { display: flex; gap: 10px; align-items: center; }
.row.gap-6 { gap: 6px; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.between { justify-content: space-between; }
.field-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }

/* ---------- Tarjetas ---------- */
.card { background: var(--surface); border: 2px solid var(--border); border-bottom-width: 4px; border-radius: 18px; padding: 12px 14px; }
.card.prio { background: var(--red-bg); border-color: var(--red); }
.card.amber { background: var(--amber-bg); border-color: var(--amber-border); }
.card.flat { border-bottom-width: 2px; }
.card.tap { cursor: pointer; }
.inset { background: var(--bg); border: 2px solid var(--border); border-radius: 12px; padding: 8px 10px; }

/* ---------- Etiquetas ---------- */
.tag { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 10px; letter-spacing: .1em; padding: 2px 7px; border-radius: 6px; text-transform: uppercase; white-space: nowrap; line-height: 1.4; }
.tag-prioridad { background: var(--red); color: #fff; padding: 3px 9px; border-radius: 8px; font-size: 11px; }
.tag-tarea { border: 1px solid var(--muted-2); color: var(--text-2); }
.tag-equipo { border: 1px solid var(--amber-border); color: var(--amber); }
.tag-info { border: 1px solid var(--border-2); color: var(--muted); }
.tag-auto { border: 1px solid var(--amber-border); color: var(--amber); }
.tag-manual { border: 1px solid var(--muted-2); color: var(--text-2); }
.tag-investigacion { border: 1px solid var(--amber-border); color: var(--amber); }
.tag-proceso { background: var(--bg); border: 2px solid var(--red); color: var(--red-soft); padding: 1px 7px; border-radius: 8px; }
.tag-proceso::before { content: ''; width: 7px; height: 7px; border-radius: 4px; background: var(--red-text); }
.tag-completada { background: #12241A; border: 2px solid #1F5C36; color: var(--green); padding: 1px 7px; border-radius: 8px; }
.tag-bg { border: 1px solid var(--muted-2); color: var(--text-2); }
.pill { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); color: var(--text); font-weight: 600; font-size: 13px; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.pill.amber { background: var(--amber-bg); border: 2px solid var(--amber-border); color: var(--amber); padding: 1px 9px; font-weight: 700; font-size: 12px; }
.pill.red { background: var(--red-bg); border: 2px solid var(--red); color: var(--red-soft); padding: 1px 10px; font-weight: 700; font-size: 12px; }
.live-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--red-text); display: inline-block; flex: none; }
.live-dot.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------- Avatares ---------- */
.avatar { width: 26px; height: 26px; flex: none; border-radius: 50%; font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.avatar.md { width: 28px; height: 28px; }
.avatar.lg { width: 40px; height: 40px; font-size: 16px; border-bottom: 4px solid rgba(0,0,0,.35); }
.avatar.xl { width: 64px; height: 64px; font-size: 26px; border-bottom: 5px solid rgba(0,0,0,.35); }

/* ---------- Cabecera de Tareas ---------- */
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 46px; height: 46px; display: block; }
.brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name b { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .12em; }
.brand-name span { font-weight: 600; font-size: 10px; letter-spacing: .2em; color: var(--muted); }
.bell { position: relative; }
.bell .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.progress { flex: 1; height: 12px; border-radius: 6px; background: var(--border); overflow: hidden; }
.progress > div { height: 100%; border-radius: 6px; background: var(--red); transition: width .4s ease; }

/* ---------- Tareas ---------- */
.filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 32px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--border-2); border-bottom-width: 3px; background: transparent; color: var(--muted); font-weight: 700; font-size: 12px; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; }
.chip.on { background: var(--red); border-color: var(--red); border-bottom-color: var(--red-dark); color: #fff; }
.chip.amber { border-color: var(--amber-border); color: var(--amber); }
.chip.amber.on { background: var(--amber-bg); }
.chip.tarea { border-color: var(--muted-2); color: var(--text-2); }
.chip.tarea.on { background: var(--surface-2); }
.chip.info.on { background: var(--surface-2); color: var(--text); }

.task-prio { display: flex; gap: 12px; align-items: flex-start; padding: 14px; }
.check { width: 32px; height: 32px; flex: none; border-radius: 10px; border: 3px solid var(--red-text); background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 0; color: #fff; }
.check.sm { width: 26px; height: 26px; border-radius: 8px; border-color: var(--muted-2); }
.check.done { background: var(--red); border-color: var(--red); }
.check.sm.done { background: #1F5C36; border-color: #1F5C36; }
.task-title-big { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.05; overflow-wrap: anywhere; }
.task-row { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; }
.task-row .t { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.task-row .m { font-weight: 500; font-size: 12px; color: var(--muted); }
.task-row.done .t { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted-2); }
.due-red { font-weight: 700; font-size: 14px; color: var(--red-soft); white-space: nowrap; }
.timer-live { font-variant-numeric: tabular-nums; }
.empty { text-align: center; padding: 24px 12px; color: var(--muted); font-size: 14px; border: 2px dashed var(--border); border-radius: 18px; }

/* ---------- Detalle ---------- */
.back-btn { align-self: flex-start; height: 36px; padding: 0 12px 0 8px; border-radius: 12px; border: 0; border-bottom: 3px solid var(--shadow-dark); background: var(--surface-2); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.status-seg { display: flex; gap: 6px; }
.status-seg .btn { flex: 1; height: 40px; border-radius: 12px; font-size: 13px; padding: 0 6px; }
.big-time { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.huge-time { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; }
.files { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.file { min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 2px solid var(--border); border-radius: 14px; padding: 8px 10px; text-align: left; }
.file .n { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.file .s { font-weight: 500; font-size: 11px; color: var(--muted); }
.file-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 2px solid var(--border); border-radius: 10px; padding: 3px 9px; font-weight: 600; font-size: 12px; color: var(--text-2); max-width: 100%; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comment { display: flex; gap: 8px; align-items: flex-start; }
.comment .b { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 2px solid var(--border); border-radius: 4px 14px 14px 14px; padding: 6px 10px; font-weight: 500; font-size: 13px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.comment .b.on-dark { background: var(--bg); }
.comment .time { font-size: 11px; color: var(--muted); }
.composer { flex: none; padding: 10px 16px calc(14px + var(--safe-bottom)); border-top: 2px solid var(--border); background: var(--bg); display: flex; flex-direction: column; gap: 8px; }
.meta-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.meta-btn { height: 34px; padding: 0 10px; border-radius: 11px; border: 2px solid var(--border-2); background: var(--surface); font-weight: 600; font-size: 13px; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.meta-btn.on { border-color: var(--red); background: var(--red-bg); color: var(--red-soft); }
.meta-btn input, .meta-btn select { background: transparent; border: 0; color: inherit; font-weight: 600; font-size: 13px; padding: 0; }
.meta-btn input[type=date] { color-scheme: dark; width: 118px; }
.mention { color: var(--red-soft); font-weight: 700; }

/* ---------- Asistente ---------- */
.ai-head { flex: none; padding: calc(20px + var(--safe-top)) 20px 12px; display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--border); }
.ai-head img { width: 50px; height: 50px; }
.ai-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; }
.status-line { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; color: var(--muted); }
.status-line .d { width: 9px; height: 9px; border-radius: 5px; background: var(--green); }
.status-line .d.busy { background: var(--amber); animation: pulse 1s infinite; }
.status-line .d.rec { background: var(--red-text); animation: pulse .8s infinite; }
.chat { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.bubble-me { align-self: flex-end; max-width: 82%; background: var(--red); color: #fff; border-radius: 18px 18px 4px 18px; padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; }
.bubble-me .via { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 11px; letter-spacing: .08em; color: #FFD0D0; }
.bubble-me .tx { font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.bubble-ai { align-self: flex-start; max-width: 92%; background: var(--surface); border: 2px solid var(--border); border-bottom-width: 4px; border-radius: 18px 18px 18px 4px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.bubble-ai .tx { font-weight: 600; font-size: 15px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble-ai .tx.light { font-weight: 500; font-size: 14px; }
.bullets { display: flex; flex-direction: column; gap: 7px; }
.bullets div { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 14px; line-height: 1.3; }
.bullets div::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: var(--red-text); margin-top: 6px; flex: none; }
.sources { display: flex; flex-direction: column; gap: 4px; }
.sources a { font-size: 12px; color: var(--red-soft); text-decoration: underline; text-underline-offset: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 2px solid var(--border); border-radius: 14px; padding: 8px 10px; }
.wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 28px; overflow: hidden; }
.wave span { width: 4px; border-radius: 2px; background: var(--muted-2); flex: none; transition: background .2s; }
.wave span.on { background: var(--red-text); }
.wave.playing span.on { animation: bar 0.9s ease-in-out infinite alternate; }
@keyframes bar { from { transform: scaleY(.6); } to { transform: scaleY(1.1); } }
.action-chip { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 2px solid var(--border); border-radius: 12px; padding: 7px 10px; font-weight: 600; font-size: 13px; color: var(--text-2); }
.action-chip .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 7px; height: 7px; border-radius: 4px; background: var(--muted); animation: pulse 1s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
.quick { flex: none; padding: 8px 20px 4px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.quick::-webkit-scrollbar { display: none; }
.quick .btn { height: 38px; flex: none; border-radius: 14px; font-size: 13px; }
.ai-input { flex: none; padding: 8px 16px 12px; display: flex; gap: 8px; align-items: center; }
.mic-on { background: var(--red) !important; color: #fff !important; animation: ring 1.2s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255,90,90,.6); } 100% { box-shadow: 0 0 0 14px rgba(255,90,90,0); } }

/* ---------- Avisos ---------- */
.aviso-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; text-align: left; width: 100%; color: inherit; }
.aviso-title-big { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.05; overflow-wrap: anywhere; }

/* ---------- Tiempo ---------- */
.bars { display: flex; align-items: flex-end; justify-content: space-between; height: 110px; padding-top: 14px; }
.bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; position: relative; }
.bar-col .bar { width: 30px; border-radius: 8px; background: var(--muted-2); min-height: 8px; transition: height .4s ease; }
.bar-col .bar.today { background: var(--red); }
.bar-col .bar.zero { background: var(--border); border-radius: 4px; }
.bar-col .l { font-weight: 600; font-size: 12px; color: var(--muted); }
.bar-col .l.today { color: var(--red-soft); font-weight: 700; }
.bar-col .v { position: absolute; top: -14px; font-size: 10px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.entry { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg); border: 2px solid var(--border); border-radius: 12px; padding: 8px 10px; width: 100%; text-align: left; color: inherit; }
.entry .nm { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry .when { font-size: 11px; color: var(--muted); }
.entry .dur { font-weight: 700; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Widget (pantalla de inicio simulada) ---------- */
.home { background: radial-gradient(120% 80% at 50% 0%, #2a2a31 0%, #1B1B1F 55%, #141417 100%); }
.home .scroll { gap: 22px; padding-top: calc(18px + var(--safe-top)); }
.statusbar { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; color: var(--text); padding: 0 6px; }
.notif { background: #2A2A2F; border: 2px solid var(--border-2); border-bottom-width: 4px; border-radius: 22px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; color: inherit; }
.notif img { width: 42px; height: 42px; }
.w-large { background: var(--bg); border: 2px solid var(--border); border-bottom-width: 4px; border-radius: 28px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.w-task { background: var(--red-bg); border: 2px solid var(--red); border-radius: 16px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; color: inherit; width: 100%; }
.w-task .t { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.05; overflow-wrap: anywhere; }
.w-task-sm { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; width: 100%; background: none; border: 0; color: var(--muted); font-size: 14px; text-align: left; }
.w-small-row { display: flex; gap: 14px; }
.w-small { flex: 1; height: 150px; border-radius: 26px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; color: inherit; border: 2px solid; border-bottom-width: 4px; min-width: 0; }
.w-small.red { background: var(--red-bg); border-color: var(--red); }
.w-small.amb { background: var(--amber-bg); border-color: var(--amber-border); }
.w-small .lbl { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .12em; }
.app-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 10px; padding: 0 6px; }
.app-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); background: none; border: 0; }
.app-icon .i { width: 60px; height: 60px; border-radius: 16px; background: #2f2f36; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.app-icon .i img { width: 60px; height: 60px; }
.note { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 13px; line-height: 1.35; color: var(--text-2); }

/* ---------- Perfil y acceso ---------- */
.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--border); width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; color: inherit; text-align: left; font-size: 15px; font-weight: 600; }
.list-item:last-child { border-bottom: 0; }
.list-item .d { font-size: 12px; color: var(--muted); font-weight: 500; }
.switch { position: relative; width: 50px; height: 30px; flex: none; border-radius: 15px; background: var(--border-2); border: 0; padding: 0; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px; background: var(--text); transition: transform .2s; }
.switch.on { background: var(--red); }
.switch.on::after { transform: translateX(20px); }
.switch:disabled { opacity: .6; }
.login { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: calc(48px + var(--safe-top)) 24px 32px; }
.login img.logo { width: 120px; height: 120px; }
.member-btn { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px; text-align: left; color: inherit; }
.pin-dots { display: flex; gap: 14px; justify-content: center; }
.pin-dots i { width: 16px; height: 16px; border-radius: 8px; border: 2px solid var(--muted-2); }
.pin-dots i.on { background: var(--red); border-color: var(--red); }
.pinpad { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; justify-content: center; }
.pinpad .btn { height: 64px; font-family: var(--display); font-size: 28px; border-radius: 18px; }
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---------- Banner tipo notificación, toasts y hojas ---------- */
.banner-zone { position: fixed; top: calc(8px + var(--safe-top)); left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 16px)); z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.banner-zone .notif { pointer-events: auto; animation: drop .35s cubic-bezier(.2,.9,.3,1.2); box-shadow: 0 12px 30px rgba(0,0,0,.5); cursor: pointer; }
.banner-zone .notif.out { animation: up .3s forwards; }
@keyframes drop { from { transform: translateY(-120%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes up { to { transform: translateY(-120%); opacity: 0; } }
.toast-zone { position: fixed; bottom: calc(86px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 32px)); z-index: 70; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; background: var(--text); color: var(--bg); border-radius: 14px; padding: 10px 14px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.5); animation: rise .25s ease; }
.toast button { background: none; border: 0; color: var(--red); font-weight: 800; padding: 4px; }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.overlay { position: fixed; inset: 0; z-index: 62; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: 480px; max-height: 88dvh; overflow-y: auto; background: var(--surface); border-top: 2px solid var(--border-2); border-radius: 24px 24px 0 0; padding: 10px 20px calc(20px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 12px; animation: slide .25s cubic-bezier(.2,.9,.3,1); }
.sheet::before { content: ''; align-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--border-2); }
.sheet h2 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1.05; }
@keyframes slide { from { transform: translateY(100%); } }
.opt { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--bg); border: 2px solid var(--border); text-align: left; color: inherit; width: 100%; font-weight: 600; font-size: 14px; }
.opt.on { border-color: var(--red); background: var(--red-bg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Aro iridiscente animado en los botones ----------
   Un aro de colores que gira lento y un destello blanco que lo recorre en sentido contrario,
   con un resplandor suave detrás. */
@property --halo-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes halo-spin { to { --halo-a: 360deg; } }

.btn-red, .icon-btn, .tab.active, .btn-big { position: relative; isolation: isolate; }
.btn-red::before, .icon-btn::before, .tab.active::before, .btn-big::before,
.btn-red::after, .icon-btn::after, .tab.active::after, .btn-big::after {
  content: ''; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
  padding: 2px;
  background:
    conic-gradient(from calc(var(--halo-a) * -2), transparent 0deg, rgba(244,241,236,0) 40deg, rgba(244,241,236,.95) 70deg, rgba(255,138,138,.6) 95deg, transparent 130deg, transparent 360deg),
    conic-gradient(from var(--halo-a), #C81E1E, #FF5A5A 40deg, #FF8A8A 70deg, #E9A23B 100deg, #FF5A5A 135deg, #8F1D1D 175deg, #2A1214 205deg, #C81E1E 240deg, #FF8A8A 280deg, #E9A23B 310deg, #C81E1E 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: halo-spin 5s linear infinite;
  z-index: 1;
}
/* Resplandor: el mismo aro, desenfocado, detrás del botón. */
.btn-red::after, .icon-btn::after, .tab.active::after, .btn-big::after {
  inset: -4px; padding: 3px; filter: blur(6px); opacity: .55; z-index: -1;
}
.tab.active { border-color: transparent; }
.btn-red:hover::after, .icon-btn:hover::after, .btn-big:hover::after { opacity: .85; }

/* ---------- Nexus pensando: aro de neón rojo ----------
   Un aro tenue siempre encendido y un cometa brillante que lo recorre en sentido contrario
   a las manecillas, con la cola apagándose detrás. */
@property --think-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes think-spin { to { --think-a: -360deg; } }
.think {
  position: relative; display: inline-block; flex: none; width: var(--s, 40px); height: var(--s, 40px); border-radius: 50%;
  filter: drop-shadow(0 0 3px rgba(255,90,90,.9)) drop-shadow(0 0 10px rgba(200,30,30,.75));
}
.think::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255,90,90,.38);
}
.think::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; padding: var(--w, 2.5px);
  background: conic-gradient(from var(--think-a), #FFE3E3 0deg, #FF8A8A 10deg, #FF5A5A 45deg, rgba(200,30,30,.65) 140deg, rgba(200,30,30,0) 230deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: think-spin 4s linear infinite;
}
.nexus-orb { position: relative; display: inline-flex; flex: none; }
.nexus-orb .think { position: absolute; inset: -5px; width: auto; height: auto; }
.thinking-bubble { flex-direction: row !important; align-items: center; gap: 12px !important; }

/* ---------- Tarjeta de voz de Nexus ----------
   Fondo negro con un arco de luz roja tipo horizonte, tarjeta de vidrio oscuro que se enciende
   en rojo hacia abajo, texto palabra por palabra, ondas brillantes y micrófono blanco. */
.vc-overlay {
  position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center;
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  background: #0B0A0C; overflow: hidden; animation: fade .25s ease;
}
.vc-overlay::before {
  content: ''; position: absolute; left: 50%; bottom: -640px; width: 900px; height: 900px; transform: translateX(-50%);
  border-radius: 50%; border: 2px solid rgba(255,190,180,.75);
  box-shadow: 0 0 18px 2px rgba(255,138,138,.8), 0 0 70px 18px rgba(255,90,90,.45), 0 0 160px 60px rgba(200,30,30,.3), inset 0 0 90px rgba(200,30,30,.35);
  pointer-events: none;
}
.vc-card {
  position: relative; width: min(400px, 100%); height: min(600px, 100%); border-radius: 34px; overflow: hidden;
  display: flex; flex-direction: column; padding: 18px 22px 22px;
  background:
    radial-gradient(70% 45% at 50% 108%, rgba(255,70,60,.95) 0%, rgba(200,30,30,.55) 35%, rgba(200,30,30,0) 75%),
    linear-gradient(180deg, #1D1A1D 0%, #141113 42%, #1E0C0E 72%, #4A0D11 100%);
  border: 1.5px solid rgba(255,138,138,.18);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  animation: rise .35s cubic-bezier(.2,.9,.3,1);
}
.vc-card::after { /* puntitos en la mitad de abajo */
  content: ''; position: absolute; inset: 45% 0 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,190,180,.22) 1px, transparent 1.4px); background-size: 14px 14px;
  -webkit-mask: linear-gradient(180deg, transparent, #000 60%); mask: linear-gradient(180deg, transparent, #000 60%);
}
.vc-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.vc-name { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .2em; color: var(--red-soft); }
.vc-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--red-text); box-shadow: 0 0 8px var(--red-text); }
.vc-overlay[data-mode=speaking] .vc-dot, .vc-overlay[data-mode=listening] .vc-dot, .vc-overlay[data-mode=thinking] .vc-dot { animation: pulse .9s infinite; }
.vc-close { width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(255,255,255,.12); color: var(--text); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.vc-you { position: relative; z-index: 1; margin-top: 18px; font-size: 14px; line-height: 1.35; color: var(--muted); }
.vc-you b { color: var(--red-soft); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; margin-right: 6px; }
.vc-text {
  position: relative; z-index: 1; margin-top: 12px; flex: 0 1 auto; max-height: 48%; overflow-y: auto; scrollbar-width: none;
  font-weight: 600; font-size: 24px; line-height: 1.24; letter-spacing: -.01em; color: rgba(244,241,236,.42); overflow-wrap: anywhere;
}
.vc-text::-webkit-scrollbar { display: none; }
.vc-w { transition: color .25s ease; }
.vc-w.now { color: #FFFFFF; font-weight: 700; text-shadow: 0 0 18px rgba(255,138,138,.35); }
.vc-w.done { color: var(--text); }
.vc-wait { color: rgba(244,241,236,.55); }
.vc-dots { display: inline-flex; gap: 4px; margin-left: 4px; vertical-align: middle; }
.vc-dots i { width: 7px; height: 7px; border-radius: 4px; background: #fff; animation: pulse 1s infinite; }
.vc-dots i:nth-child(2) { width: 6px; height: 6px; animation-delay: .15s; opacity: .8; }
.vc-dots i:nth-child(3) { width: 5px; height: 5px; animation-delay: .3s; opacity: .6; }
.vc-wave { position: relative; z-index: 1; flex: 1; min-height: 120px; width: calc(100% + 44px); margin: 0 -22px; }
.vc-form { position: relative; z-index: 2; display: flex; gap: 8px; margin-bottom: 12px; }
.vc-form .input { background: rgba(14,14,16,.75); }
.vc-bottom { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vc-mic {
  width: 84px; height: 84px; border-radius: 50%; border: 0; background: #F4F1EC; color: #0E0E10;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(120,10,10,.65), 0 0 0 6px rgba(255,255,255,.06), inset 0 -4px 0 rgba(0,0,0,.12);
  transition: transform .12s ease;
}
.vc-mic:active { transform: scale(.95); }
.vc-overlay[data-mode=listening] .vc-mic { background: var(--red); color: #fff; animation: ring 1.2s infinite; }
.vc-overlay[data-mode=speaking] .vc-mic { box-shadow: 0 12px 30px rgba(200,30,30,.8), 0 0 0 8px rgba(255,90,90,.18); }
.vc-hint { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: rgba(244,241,236,.6); }

.vc-overlay [hidden] { display: none !important; }

/* ---------- Generando documento (Nexus) ----------
   Misma escena que la pantalla de voz: arco de luz roja, tarjeta de vidrio oscuro,
   ícono de archivo con placa PDF/TXT, y panel de progreso con porcentaje grande. */
.dc-overlay { z-index: 58; }
.dc-card {
  position: relative; width: min(430px, 100%); border-radius: 34px; padding: 26px 24px 24px;
  display: flex; flex-direction: column; gap: 22px;
  background: linear-gradient(180deg, #19161A 0%, #121013 60%, #1B0E10 100%);
  border: 1.5px solid rgba(255,138,138,.16);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  animation: rise .35s cubic-bezier(.2,.9,.3,1);
}
.dc-close { position: absolute; top: 18px; right: 18px; }
.dc-head { display: flex; align-items: center; gap: 22px; padding-right: 40px; min-width: 0; }
.dc-icon { position: relative; width: 116px; height: 132px; flex: none; }
.dc-sheet {
  position: absolute; right: 0; top: 0; width: 92px; height: 132px; border-radius: 12px;
  clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%);
  background:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 15px 15px,
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 15px 15px,
    linear-gradient(160deg, #FF8A8A 0%, #E0403F 30%, #C81E1E 55%, #6E1216 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.dc-sheet::after { /* esquina doblada */
  content: ''; position: absolute; right: 0; top: 0; width: 32%; height: 26%;
  background: linear-gradient(225deg, transparent 50%, rgba(255,200,195,.55) 50%, rgba(255,160,150,.35));
  border-bottom-left-radius: 8px;
}
.dc-badge {
  position: absolute; left: 0; top: 52px; width: 84px; height: 54px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: .06em; color: #2A1214;
  background: linear-gradient(180deg, #E9DCDA, #BFA9A7);
  box-shadow: 0 0 0 4px rgba(14,14,16,.85), 0 0 0 5.5px rgba(255,138,138,.25), 0 10px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
}
.dc-badge i { position: absolute; width: 4px; height: 4px; border-radius: 2px; background: rgba(42,18,20,.55); }
.dc-badge i:nth-child(1) { top: 7px; left: 7px; } .dc-badge i:nth-child(2) { top: 7px; right: 7px; }
.dc-badge i:nth-child(3) { bottom: 7px; left: 7px; } .dc-badge i:nth-child(4) { bottom: 7px; right: 7px; }
.dc-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dc-name { font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.dc-size { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dc-panel {
  position: relative; border-radius: 24px; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 16px;
  background: linear-gradient(180deg, #0C0B0D, #110E10); border: 1.5px solid rgba(255,255,255,.07);
  box-shadow: 0 -18px 40px -20px rgba(255,70,60,.55);
}
.dc-panel::before { /* línea de luz arriba del panel */
  content: ''; position: absolute; left: 22%; right: 22%; top: -1px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, #FF5A5A, transparent); box-shadow: 0 0 12px 2px rgba(255,90,90,.6);
}
.dc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dc-state { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 600; font-size: 16px; }
.dc-ok { width: 20px; height: 20px; border-radius: 10px; background: #1F5C36; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.dc-pct { font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.dc-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.dc-bar > div { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #F4F1EC, #FFFFFF); box-shadow: 0 0 10px rgba(255,255,255,.6); }
.dc-overlay.done .dc-bar > div { background: linear-gradient(90deg, #FF8A8A, #F4F1EC); }
.dc-overlay.failed .dc-size { color: var(--red-soft); }
.dc-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.dc-actions .btn { padding: 0 8px; font-size: 13px; }
.dc-overlay [hidden] { display: none !important; }
@media (max-width: 380px) { .dc-icon { transform: scale(.8); transform-origin: left center; margin-right: -18px; } .dc-name { font-size: 18px; } }

/* Vista previa del documento */
.doc-preview { background: #FBF8F6; color: #222023; border-radius: 16px; padding: 18px; max-height: 55dvh; overflow-y: auto; font-size: 14px; line-height: 1.45; }
.doc-prev-head { display: flex; align-items: center; gap: 8px; background: #0E0E10; color: #fff; margin: -18px -18px 14px; padding: 10px 16px; border-radius: 16px 16px 0 0; border-bottom: 3px solid #C81E1E; }
.doc-prev-head b { font-family: var(--display); letter-spacing: .14em; font-size: 15px; }
.doc-prev-head span { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: #FF8A8A; }
.doc-preview h3 { margin: 0; font-family: var(--display); font-size: 26px; line-height: 1.05; color: #0E0E10; }
.doc-preview .doc-sub { margin: 4px 0 10px; font-size: 12px; color: #78767D; }
.doc-preview h4 { margin: 14px 0 6px; color: #C81E1E; font-size: 14px; border-left: 3px solid #C81E1E; padding-left: 8px; }
.doc-preview p { margin: 0 0 8px; }
.doc-preview ul { margin: 0 0 8px; padding-left: 18px; }
.doc-preview li::marker { color: #C81E1E; }
.doc-table { overflow-x: auto; }
.doc-preview table { width: 100%; border-collapse: collapse; font-size: 12px; }
.doc-preview th { background: #0E0E10; color: #fff; text-align: left; padding: 6px 8px; }
.doc-preview td { padding: 6px 8px; border-bottom: 1px solid #EEE6E3; }

/* Documento dentro del chat */
.doc-chip { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 2px solid var(--border); border-radius: 14px; padding: 10px; }
.doc-mini { position: relative; width: 38px; height: 46px; flex: none; border-radius: 6px; clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%); background: linear-gradient(160deg, #FF8A8A, #C81E1E 55%, #6E1216); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; font-family: var(--display); font-weight: 700; font-size: 11px; color: #fff; letter-spacing: .06em; }

/* ---------- Subir archivo ----------
   Fondo oscuro con resplandores rojos abajo, tarjeta de vidrio con textura de puntos,
   carpeta roja, zona para elegir o arrastrar y botón brillante. */
.up-overlay {
  position: fixed; inset: 0; z-index: 64; display: flex; align-items: center; justify-content: center;
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  background:
    radial-gradient(45% 35% at 22% 105%, rgba(200,30,30,.55), transparent 70%),
    radial-gradient(40% 35% at 80% 108%, rgba(143,29,29,.6), transparent 70%),
    radial-gradient(30% 25% at 60% 100%, rgba(233,162,59,.18), transparent 70%),
    rgba(7,7,9,.94);
  animation: fade .2s ease;
}
.up-card {
  position: relative; width: min(460px, 100%); border-radius: 26px; padding: 22px 20px 20px;
  display: flex; flex-direction: column; gap: 20px; overflow: hidden;
  background: linear-gradient(180deg, rgba(36,32,36,.92), rgba(20,18,21,.95));
  border: 1.5px solid rgba(255,190,180,.14);
  box-shadow: 0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  animation: rise .3s cubic-bezier(.2,.9,.3,1);
}
.up-card::before { /* textura de puntos arriba a la izquierda */
  content: ''; position: absolute; left: 0; top: 0; width: 55%; height: 60%; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.3px); background-size: 9px 9px;
  -webkit-mask: radial-gradient(100% 100% at 0 0, #000, transparent 70%); mask: radial-gradient(100% 100% at 0 0, #000, transparent 70%);
}
.up-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; z-index: 1; }
.up-head { position: relative; display: flex; align-items: center; gap: 18px; padding-right: 40px; }
.up-folder { position: relative; width: 92px; height: 78px; flex: none; }
.up-folder .b { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 12px;
  background: linear-gradient(180deg, #8F1D1D, #5E1216);
  clip-path: polygon(0 0, 38% 0, 46% 12%, 100% 12%, 100% 100%, 0 100%); }
.up-folder .p { position: absolute; left: 10%; right: 10%; top: 14%; height: 40%; border-radius: 6px; background: linear-gradient(180deg, #FFFFFF, #E4DCDA); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.up-folder .f { position: absolute; left: 0; right: 0; bottom: 0; height: 74%; border-radius: 12px;
  background: linear-gradient(170deg, #FF8A8A 0%, #FF5A5A 35%, #C81E1E 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 22px rgba(200,30,30,.45); }
.up-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.02; color: var(--text); }
.up-sub { font-size: 14px; color: var(--muted); line-height: 1.3; }
.up-drop {
  position: relative; border-radius: 18px; padding: 28px 18px 24px; min-height: 150px;
  display: flex; flex-direction: column; justify-content: center;
  background: rgba(10,9,11,.85); border: 1.5px solid rgba(255,255,255,.05); cursor: pointer;
  transition: border-color .2s, background .2s;
}
.up-drop.over { border-color: var(--red-text); background: rgba(42,18,20,.85); }
.up-idle { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: left; }
.up-line { display: flex; align-items: center; gap: 12px; max-width: 100%; }
.up-ico { width: 36px; height: 40px; flex: none; border-radius: 8px; background: #2A2A2E; color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.up-t { font-size: 15px; color: var(--muted); }
.up-h { font-size: 12px; color: var(--text-2); }
.up-btn {
  height: 40px; padding: 0 22px; border-radius: 20px; border: 0; color: #fff; font-weight: 700; font-size: 14px;
  background: linear-gradient(180deg, #FF5A5A, #C81E1E);
  box-shadow: 0 8px 22px rgba(200,30,30,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.up-btn:active { transform: translateY(1px); }
.up-err { font-size: 13px; color: var(--red-soft); text-align: center; }
.up-busy { display: flex; flex-direction: column; gap: 14px; }
.up-file { display: flex; align-items: center; gap: 12px; }
.up-name { font-weight: 600; font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-size { font-size: 12px; color: var(--muted); }
.up-label { color: var(--muted); }
.up-pct { font-size: 34px; }
.up-overlay [hidden] { display: none !important; }
.up-overlay.done .dc-bar > div { background: linear-gradient(90deg, #FF8A8A, #F4F1EC); }

/* ---------- Historial de entregas ---------- */
.hs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hs-stat { background: var(--surface); border: 2px solid var(--border); border-bottom-width: 4px; border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hs-num { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.hs-lbl { font-size: 12px; font-weight: 600; color: var(--muted); }
.hs-person { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 0; text-align: left; color: inherit; }
.hs-bar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.hs-bar > div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--red), var(--red-text)); }
.hs-list { display: flex; flex-direction: column; gap: 8px; }
.hs-item { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 2px solid var(--border); border-bottom-width: 4px; border-radius: 16px; padding: 10px 12px; color: inherit; }
.hs-dot { width: 26px; height: 26px; flex: none; border-radius: 8px; background: #1F5C36; color: #fff; display: flex; align-items: center; justify-content: center; }
.hs-dot.prio { background: var(--red); }
.hs-title { font-weight: 600; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.hs-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 8px; border: 1px solid var(--border-2); color: var(--muted); }
.hs-chip.ok { border-color: #1F5C36; color: var(--green); background: #12241A; }
.hs-chip.late { border-color: var(--amber-border); color: var(--amber); background: var(--amber-bg); }

/* ---------- Menú de perfil ----------
   Tarjeta de vidrio que cae del avatar: degradado rojo profundo, borde con brillo y desenfoque detrás. */
.pm-overlay {
  position: fixed; inset: 0; z-index: 66;
  background: radial-gradient(60% 40% at 85% 10%, rgba(200,30,30,.28), transparent 70%), rgba(5,5,7,.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade .18s ease;
}
.pm-card {
  position: absolute; right: max(16px, calc((100vw - 480px) / 2 + 16px)); width: min(310px, calc(100vw - 32px));
  border-radius: 24px; overflow: hidden; color: var(--text);
  background: linear-gradient(155deg, rgba(200,30,30,.42) 0%, rgba(90,18,22,.72) 38%, rgba(30,20,24,.88) 75%, rgba(42,18,20,.9) 100%);
  border: 1px solid rgba(255,160,150,.35);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18), 0 0 40px rgba(200,30,30,.25);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  transform-origin: top right; animation: pm-pop .22s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes pm-pop { from { opacity: 0; transform: scale(.92) translateY(-6px); } }
.pm-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; border-bottom: 1px solid rgba(255,190,180,.18); }
.pm-name { font-size: 17px; font-weight: 700; }
.pm-badge { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #FFC2BC; border: 1.5px solid rgba(255,138,138,.8); background: rgba(200,30,30,.35); padding: 1px 7px; border-radius: 7px; }
.pm-sub { font-size: 13px; color: rgba(255,214,208,.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-list { display: flex; flex-direction: column; padding: 8px; }
.pm-list + .pm-list { border-top: 1px solid rgba(255,190,180,.18); margin: 0 14px; padding: 8px 0; }
.pm-item {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 10px; border-radius: 14px;
  background: none; border: 0; color: var(--text); font-size: 15px; font-weight: 500; text-align: left;
}
.pm-item > svg { color: rgba(255,226,220,.9); }
.pm-item > span:first-of-type { flex: 1; }
.pm-item:hover, .pm-item:focus-visible { background: rgba(255,255,255,.08); outline: none; }
.pm-switch { position: relative; width: 44px; height: 24px; border-radius: 12px; flex: none; background: rgba(255,255,255,.14); border: 1px solid rgba(255,190,180,.35); transition: background .2s; }
.pm-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 8px; background: rgba(255,226,220,.85); transition: transform .2s; }
.pm-switch.on { background: rgba(200,30,30,.75); }
.pm-switch.on::after { transform: translateX(20px); background: #fff; }
.pm-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.vc-note { position: relative; z-index: 2; margin: -4px 2px 12px; font-size: 12.5px; line-height: 1.35; color: rgba(244,241,236,.72); background: rgba(14,14,16,.6); border: 1px solid rgba(255,138,138,.25); border-radius: 12px; padding: 8px 10px; }

/* ---------- Equipo y permisos ---------- */
.eq-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; color: inherit; padding: 12px; }
.eq-row.off { opacity: .6; }
.eq-role { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 7px; border: 1px solid var(--border-2); color: var(--muted); }
.eq-role.owner { background: var(--red); border-color: var(--red); color: #fff; }
.eq-role.co { border-color: var(--red); color: var(--red-soft); background: var(--red-bg); }

/* =====================================================================
   APP WEB (pantallas de 900 px o más)
   Barra lateral fija + contenido ancho centrado. En celular nada de esto aplica.
   ===================================================================== */
.sidebar { display: none; }
.only-wide { display: none !important; }
@media (min-width: 900px) {
  .only-wide { display: revert !important; }
  .only-narrow { display: none !important; }
  .app { max-width: none; border: 0 !important; }
  .app.has-sidebar { display: grid; grid-template-columns: 264px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .app.has-sidebar .tabbar { display: none; }
  .app.has-sidebar .screen { grid-column: 2; min-width: 0; }

  .sidebar {
    display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto;
    padding: calc(22px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
    background: linear-gradient(180deg, #121014 0%, #0F0D10 100%); border-right: 2px solid var(--border);
  }
  .sb-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 6px; }
  .sb-brand img { width: 40px; height: 40px; }
  .sb-nav { display: flex; flex-direction: column; gap: 2px; }
  .sb-label { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .14em; color: var(--muted-2); text-transform: uppercase; padding: 12px 10px 6px; }
  .sb-item { position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 12px; color: var(--muted); font-weight: 600; font-size: 15px; border: 2px solid transparent; }
  .sb-item:hover { background: var(--surface); color: var(--text); }
  .sb-item.on { background: var(--red-bg); border-color: var(--red); color: var(--red-soft); font-weight: 700; }
  .sb-item span:first-of-type { flex: 1; }
  .sb-count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
  .sb-live { width: 9px; height: 9px; border-radius: 5px; background: var(--red-text); animation: pulse 1.4s infinite; }
  .sb-card { margin-top: auto; background: var(--surface); border: 2px solid var(--border); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
  .sb-timer { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--red-soft); background: var(--red-bg); border: 1px solid var(--red); border-radius: 10px; padding: 6px 8px; font-variant-numeric: tabular-nums; }
  .sb-profile { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: 14px; background: none; border: 2px solid var(--border); color: inherit; }
  .sb-profile:hover { background: var(--surface); }

  /* Contenido ancho, centrado, con más aire */
  .scroll { padding: calc(30px + var(--safe-top)) max(36px, calc((100% - 1240px) / 2)) 48px; gap: 16px; }
  .h1 { font-size: 44px; }
  .back-btn { display: none; }
  .mobile-head { display: none !important; }

  /* Hojas: ventana centrada en vez de subir desde abajo */
  .overlay { align-items: center; padding: 24px; }
  .sheet { max-width: 560px; border-radius: 24px; border: 2px solid var(--border-2); max-height: 86vh; animation: rise .22s ease; }
  .sheet::before { display: none; }
  .toast-zone { bottom: 24px; left: auto; right: 24px; transform: none; width: 380px; }
  .banner-zone { left: auto; right: 20px; transform: none; width: 400px; }

  /* Tareas: encabezado en una fila y tablero */
  .t-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 24px; align-items: end; }
  .board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .col-k { background: #121115; border: 2px solid var(--border); border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 240px; transition: border-color .15s, background .15s; }
  .col-k.over { border-color: var(--red); background: var(--red-bg); }
  .col-k-head { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); padding: 2px 4px 4px; }
  .col-k-head .k-dot { width: 10px; height: 10px; border-radius: 5px; }
  .col-k-head .count-pill { margin-left: auto; background: var(--surface-2); color: var(--text); }
  .col-k-body { display: flex; flex-direction: column; gap: 10px; }
  .kcard { background: var(--surface); border: 2px solid var(--border); border-bottom-width: 4px; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; cursor: grab; }
  .kcard:active { cursor: grabbing; }
  .kcard.prio { background: var(--red-bg); border-color: var(--red); }
  .kcard.dragging { opacity: .45; }
  .kcard.done .k-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted-2); }
  .k-title { font-weight: 700; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
  .kcard.prio .k-title { font-family: var(--display); font-size: 21px; line-height: 1.05; }
  .k-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .k-empty { border: 2px dashed var(--border); border-radius: 14px; padding: 18px 10px; text-align: center; color: var(--muted); font-size: 13px; }

  /* Detalle de tarea en dos columnas */
  .detail-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
  .detail-main, .detail-side { display: flex !important; flex-direction: column; gap: 14px; min-width: 0; }
  .detail-side { position: sticky; top: 0; }
  .screen-detail .composer { padding-left: max(36px, calc((100% - 1240px) / 2)); padding-right: max(36px, calc((100% - 1240px) / 2)); }

  /* Avisos, Tiempo e Historial: dos columnas */
  .two-col { display: grid !important; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 28px; align-items: start; }
  .two-col > .col-a { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; }
  .two-col > .col-b { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .two-col.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* Equipo en cuadrícula y Perfil en columnas */
  .eq-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
  .perfil-cols { columns: 2; column-gap: 28px; }
  .perfil-cols > * { break-inside: avoid; margin-bottom: 14px; }

  /* Nexus: conversación centrada */
  .chat { padding-left: max(32px, calc((100% - 820px) / 2)); padding-right: max(32px, calc((100% - 820px) / 2)); }
  .quick, .ai-input { padding-left: max(32px, calc((100% - 820px) / 2)); padding-right: max(32px, calc((100% - 820px) / 2)); }
  .quick { flex-wrap: wrap; overflow: visible; }
  .ai-head { padding-left: max(32px, calc((100% - 820px) / 2)); padding-right: max(32px, calc((100% - 820px) / 2)); }

  /* Notificaciones y widget centrados */
  [data-view="notificaciones"] .scroll { padding-left: max(36px, calc((100% - 760px) / 2)); padding-right: max(36px, calc((100% - 760px) / 2)); }
  [data-view="widget"] .scroll { padding-left: max(24px, calc((100% - 430px) / 2)); padding-right: max(24px, calc((100% - 430px) / 2)); }
  [data-view="widget"] .screen { background: radial-gradient(60% 50% at 50% 0%, #2a2a31 0%, #141417 70%); }

  /* Acceso: pantalla dividida */
  [data-view="login"] .screen { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); }
  .login-hero { display: flex !important; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 56px; background:
      radial-gradient(70% 60% at 30% 30%, rgba(200,30,30,.35), transparent 70%),
      radial-gradient(60% 50% at 80% 90%, rgba(233,162,59,.12), transparent 70%), #0B0A0C; border-right: 2px solid var(--border); }
  .login-hero img { width: 180px; height: 180px; }
  .login-hero h2 { margin: 0; font-family: var(--display); font-size: 64px; line-height: .95; letter-spacing: .02em; }
  .login-hero p { margin: 0; color: var(--muted); font-size: 17px; max-width: 460px; line-height: 1.45; }
  .login { justify-content: center; max-width: 520px; width: 100%; margin: 0 auto; }
}
.login-hero { display: none; }

/* Detalle de tarea: en celular una sola columna en el orden de siempre */
.detail-layout, .detail-main, .detail-side { display: contents; }
.detail-layout [class^="o"] { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.o1 { order: 1; } .o2 { order: 2; } .o3 { order: 3; } .o4 { order: 4; } .o5 { order: 5; } .o6 { order: 6; }
@media (min-width: 900px) { .detail-main > *, .detail-side > * { order: 0; } }

/* Columnas de las pantallas: en celular se apilan */
.two-col, .two-col > .col-a, .two-col > .col-b { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.two-col > .col-a > *, .two-col > .col-b > * { flex-shrink: 0; }
@media (min-width: 900px) {
  [data-view="perfil"] .scroll, [data-view="equipo"] .scroll { padding-left: max(36px, calc((100% - 980px) / 2)); padding-right: max(36px, calc((100% - 980px) / 2)); }
  [data-view="perfil"] .scroll { padding-left: max(36px, calc((100% - 760px) / 2)); padding-right: max(36px, calc((100% - 760px) / 2)); }
}
@media (min-width: 900px) { [data-view="login"] .back-btn { display: inline-flex; } }
@media (min-width: 900px) { .screen-detail .back-btn { display: inline-flex; } }

/* =====================================================================
   ESTILO VIDRIO (glassmorphism) con luces rojas de fondo
   Superficies semitransparentes con desenfoque, bordes finos y brillo suave.
   ===================================================================== */
:root {
  --glass: rgba(30, 20, 24, 0.38);
  --glass-2: rgba(255, 255, 255, 0.06);
  --glass-strong: rgba(20, 14, 17, 0.72);
  --glass-line: rgba(255, 222, 216, 0.16);
  --glass-line-2: rgba(255, 222, 216, 0.28);
  --glass-red: rgba(200, 30, 30, 0.18);
  --glass-red-line: rgba(255, 110, 100, 0.55);
  --glass-amber: rgba(233, 162, 59, 0.10);
  --glass-amber-line: rgba(233, 162, 59, 0.5);
  --blur: blur(18px) saturate(140%);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html, body { background: #070608; }
#fondo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.app { position: relative; z-index: 1; background: transparent; }
@media (min-width: 520px) { .app { border-color: transparent !important; } }
.home, [data-view="widget"] .screen { background: transparent !important; }

/* Superficies */
.card, .kcard, .col-k, .hs-stat, .hs-item, .entry, .file, .comment .b, .inset, .opt, .doc-chip, .player, .action-chip,
.bubble-ai, .sb-card, .sb-profile, .meta-btn, .notif, .w-large, .dc-panel, .up-drop, .k-empty, .empty {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-bottom-width: 1px;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--glass-hi);
}
.comment .b.on-dark, .inset, .player, .action-chip, .doc-chip, .file { background: var(--glass-2); }
.card.flat { border-bottom-width: 1px; }
.empty, .k-empty { border-style: dashed; }
.card.prio, .kcard.prio, .w-task, .w-small.red, .notif.prio { background: var(--glass-red); border-color: var(--glass-red-line); }
.card.amber, .w-small.amb { background: var(--glass-amber); border-color: var(--glass-amber-line); }
.w-small { border-width: 1px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.col-k { background: rgba(20, 14, 17, 0.32); }
.col-k.over { background: var(--glass-red); border-color: var(--glass-red-line); }

/* Campos de texto: transparentes con borde fino, como la referencia */
.input { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.input.on-dark { background: rgba(0, 0, 0, 0.18); }
.input:focus { border-color: var(--red-soft); box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.18); }
select.input option { background: #1A1316; }

/* Botones */
.btn-red { background: linear-gradient(180deg, rgba(232, 52, 52, 0.88), rgba(168, 22, 22, 0.88)); border: 1px solid rgba(255, 170, 160, 0.55); border-bottom-width: 1px; box-shadow: 0 6px 20px rgba(200, 30, 30, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.btn-dark { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--glass-line); border-bottom-width: 1px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-outline { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--glass-line-2); border-bottom-width: 1px; }
.btn-prio { background: var(--glass-red); border: 1px solid var(--glass-red-line); border-bottom-width: 1px; }
.btn-amber { background: var(--glass-amber); border: 1px solid var(--glass-amber-line); border-bottom-width: 1px; }
.back-btn { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--glass-line); border-bottom-width: 1px; }
.chip { border-width: 1px; border-bottom-width: 1px; background: rgba(255, 255, 255, 0.03); }
.chip.on { background: rgba(200, 30, 30, 0.55); border-color: rgba(255, 170, 160, 0.6); }
.chip.amber.on { background: var(--glass-amber); }
.pill { background: rgba(255, 255, 255, 0.08); }
.check { background: rgba(0, 0, 0, 0.2); }
.tag-proceso { background: rgba(0, 0, 0, 0.2); }
.progress, .hs-bar, .dc-bar { background: rgba(255, 255, 255, 0.1); }
.switch { background: rgba(255, 255, 255, 0.16); }
.switch.on { background: rgba(200, 30, 30, 0.85); }

/* Barras y paneles */
.tabbar { background: rgba(14, 10, 12, 0.55); border-top: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); }
.tab.active, .sb-item.on { background: var(--glass-red); border-color: var(--glass-red-line); }
.ai-head, .composer { background: rgba(12, 9, 11, 0.45); border-color: var(--glass-line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.bubble-me { background: linear-gradient(180deg, rgba(222, 44, 44, 0.78), rgba(160, 20, 20, 0.78)); border: 1px solid rgba(255, 170, 160, 0.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (min-width: 900px) {
  .sidebar { background: rgba(14, 10, 12, 0.5); border-right: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); }
  .sb-item:hover, .sb-profile:hover { background: rgba(255, 255, 255, 0.06); }
}

/* Ventanas */
.overlay { background: rgba(4, 3, 5, 0.45); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.sheet { background: var(--glass-strong); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), var(--glass-hi); }
.toast { background: rgba(28, 20, 23, 0.86); color: var(--text); border: 1px solid var(--glass-line-2); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.toast button { color: var(--red-soft); }
.vc-overlay, .up-overlay { background: rgba(5, 4, 6, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vc-card, .dc-card, .up-card { background: linear-gradient(180deg, rgba(36, 26, 30, 0.55), rgba(20, 14, 17, 0.62)); border: 1px solid var(--glass-line-2); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); }
.vc-card { background: radial-gradient(70% 45% at 50% 108%, rgba(255, 70, 60, 0.75) 0%, rgba(200, 30, 30, 0.35) 40%, transparent 75%), linear-gradient(180deg, rgba(36, 26, 30, 0.5), rgba(24, 12, 15, 0.62)); }
.dc-panel { background: rgba(0, 0, 0, 0.28); }
.up-drop { background: rgba(0, 0, 0, 0.25); }

/* Acceso: tarjeta de vidrio centrada sobre las luces */
.login { flex: 1; justify-content: center; align-items: center; padding: calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom)); }
@media (min-width: 900px) { [data-view="login"] .screen { display: flex; } .login { max-width: none; } }
.login-card {
  width: min(420px, 100%); display: flex; flex-direction: column; gap: 18px; padding: 36px 32px 28px; border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03) 45%, rgba(200, 30, 30, 0.08));
  border: 1px solid rgba(255, 222, 216, 0.28);
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: rise .4s cubic-bezier(.2,.9,.3,1);
}
.login-logo { width: 64px; height: 64px; }
.login-title { margin: 0; font-family: var(--body); font-weight: 700; font-size: 46px; line-height: 1; letter-spacing: -.02em; color: #fff; }
.login-sub { font-weight: 600; font-size: 15px; color: rgba(255, 240, 236, 0.85); }
.login-fields { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.field { position: relative; display: block; }
.field input {
  width: 100%; height: 54px; border-radius: 14px; padding: 0 52px 0 18px; font-size: 16px; color: #fff;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 235, 230, 0.45); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input::placeholder { color: rgba(255, 240, 236, 0.6); }
.field input:focus { border-color: #fff; background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 3px rgba(255, 138, 138, 0.22); }
.field-ico { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: rgba(255, 245, 242, 0.9); background: none; border: 0; padding: 4px; display: flex; }
.remember { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: #fff; cursor: pointer; margin-top: -4px; }
.remember input { width: 16px; height: 16px; accent-color: #C81E1E; }
.login-err { color: var(--red-soft); font-size: 14px; font-weight: 600; margin-top: -6px; }
.login-btn {
  margin-top: 18px; height: 54px; border-radius: 14px; font-size: 18px; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 235, 230, 0.55);
  transition: background .15s, border-color .15s, transform .08s;
}
.login-btn:hover { background: rgba(200, 30, 30, 0.35); border-color: rgba(255, 170, 160, 0.8); }
.login-btn:active { transform: translateY(1px); }
.login-people { display: flex; gap: 8px; flex-wrap: wrap; }
.login-person { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 222, 216, 0.18); color: var(--text-2); font-size: 13px; font-weight: 600; }
.login-person:hover { background: rgba(255, 255, 255, 0.1); }
.login-foot { font-weight: 600; font-size: 14px; color: #fff; }
.login-hero { display: none !important; }
/* Texto suelto sobre las luces: una sombra suave para que siempre se lea */
.scroll > .small, .scroll > .sub, .section-label, .sub, .h1, .t-top .small { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75); }

/* =====================================================================
   EXCLUSIVO: lujo sobrio
   Serif de alto contraste para títulos, mayúsculas romanas espaciadas para
   etiquetas, negro profundo, carmesí oscuro y filos dorados champaña.
   ===================================================================== */
:root {
  --serif: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --regal: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', serif;
  --display: var(--serif);
  --gold: #CDAE7A;
  --champagne: #E8DCC6;
  --gold-line: rgba(205, 174, 122, 0.22);
  --gold-line-2: rgba(205, 174, 122, 0.42);
  --crimson: #8E1418;
  --glass: rgba(16, 12, 14, 0.5);
  --glass-2: rgba(255, 245, 230, 0.035);
  --glass-strong: rgba(14, 10, 12, 0.82);
  --glass-line: var(--gold-line);
  --glass-line-2: var(--gold-line-2);
  --glass-red: rgba(120, 14, 22, 0.26);
  --glass-red-line: rgba(205, 70, 70, 0.42);
  --glass-amber: rgba(205, 174, 122, 0.08);
  --glass-amber-line: rgba(205, 174, 122, 0.45);
  --text: #F3EDE3;
  --text-2: #D9D0C2;
  --muted: #9C948A;
  --red-soft: #E8A39C;
  --red-text: #D9524C;
  --amber: var(--gold);
  --amber-border: rgba(205, 174, 122, 0.45);
  --amber-bg: rgba(205, 174, 122, 0.08);
}
body { font-family: var(--body); font-weight: 400; letter-spacing: .005em; -webkit-font-smoothing: antialiased; }

/* Grano fino, como papel de alta calidad */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Títulos y marca */
.h1, .ai-title, .up-title, .sheet h2, .login-title, .doc-preview h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.005em; }
.h1 { font-size: 42px; line-height: 1.02; }
.h1.sm { font-size: 36px; }
.ai-title { font-size: 34px; }
.sheet h2 { font-size: 30px; }
.brand-name b, .sb-brand b { font-family: var(--regal); font-weight: 600; font-size: 19px; letter-spacing: .24em; }
.brand-name span { font-family: var(--regal); font-size: 9px; letter-spacing: .34em; color: var(--gold); }
.task-title-big, .aviso-title-big, .w-task .t, .kcard.prio .k-title { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.05; letter-spacing: 0; }
.k-title { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.hs-title, .task-row .t { font-family: var(--serif); font-size: 18px; font-weight: 600; }

/* Etiquetas: mayúsculas romanas, pequeñas y espaciadas */
.section-label, .sb-label, .field-label, .col-k-head, .vc-name, .lbl, .w-small .lbl {
  font-family: var(--regal); font-weight: 600; font-size: 11px; letter-spacing: .3em; color: var(--gold);
}
.section-label.red { color: var(--red-soft); font-size: 11px; }
.section-label .count-pill, .col-k-head .count-pill { font-family: var(--body); letter-spacing: 0; background: transparent; border: 1px solid var(--gold-line-2); color: var(--champagne); font-weight: 500; }
.tag { font-family: var(--regal); font-weight: 600; font-size: 9px; letter-spacing: .2em; border-radius: 4px; padding: 3px 8px; }
.tag-prioridad { background: rgba(142, 20, 24, 0.55); border: 1px solid rgba(217, 82, 76, 0.6); color: #F6D7D2; padding: 3px 8px; font-size: 9px; border-radius: 4px; }
.tag-proceso { border-width: 1px; border-color: rgba(217, 82, 76, 0.55); color: var(--red-soft); border-radius: 4px; }
.tag-completada { border-width: 1px; border-radius: 4px; }
.tag-equipo, .tag-auto, .tag-investigacion { border-color: var(--gold-line-2); color: var(--gold); }
.tag-tarea, .tag-manual, .tag-bg, .tag-info { border-color: rgba(232, 220, 198, 0.25); color: var(--text-2); }
.count-pill { font-family: var(--body); }

/* Números: finos y alineados */
.big-time, .huge-time, .hs-num, .dc-pct, .w-small .display, .display { font-family: var(--serif); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; }
.huge-time { font-size: 72px; font-weight: 500; }
.big-time { font-size: 44px; }

/* Superficies: vidrio oscuro con filo dorado */
.card, .kcard, .col-k, .hs-stat, .hs-item, .entry, .file, .comment .b, .opt, .bubble-ai, .sb-card, .sb-profile, .notif, .w-large, .dc-panel, .up-drop {
  border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 240, 220, 0.06), 0 10px 30px rgba(0, 0, 0, 0.25);
}
.card.prio, .kcard.prio, .w-task, .w-small.red { box-shadow: inset 0 1px 0 rgba(255, 220, 210, 0.08), 0 12px 34px rgba(80, 6, 10, 0.35); }

/* Botones: carmesí profundo con filo dorado, texto en mayúsculas espaciadas */
.btn { font-weight: 600; letter-spacing: .02em; }
.btn-red {
  background: linear-gradient(180deg, #A3161C 0%, #6E0E13 100%);
  border: 1px solid rgba(205, 174, 122, 0.55); border-bottom-width: 1px;
  box-shadow: 0 8px 24px rgba(110, 14, 19, 0.45), inset 0 1px 0 rgba(255, 230, 200, 0.22);
  color: #FBF4EA;
}
.btn-big, .login-btn, .up-btn { font-family: var(--regal); font-weight: 600; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; }
.btn-dark { background: rgba(255, 245, 230, 0.05); border-color: var(--gold-line); }
.btn-outline { border-color: var(--gold-line-2); color: var(--champagne); }
.btn-prio { background: rgba(120, 14, 22, 0.28); border-color: rgba(205, 70, 70, 0.45); color: #F0C9C4; }
.btn-amber { color: var(--gold); }
.chip { font-family: var(--regal); font-size: 10px; font-weight: 600; letter-spacing: .2em; border-color: var(--gold-line); color: var(--text-2); text-transform: uppercase; height: 32px; padding: 0 14px; border-radius: 16px; }
.chip.on { background: linear-gradient(180deg, #8E1418, #5E0D11); border-color: rgba(205, 174, 122, 0.6); color: #FBF4EA; }
.chip.amber { color: var(--gold); }
.check { border-width: 1.5px; border-color: rgba(217, 82, 76, 0.75); border-radius: 50%; }
.check.sm { border-color: rgba(232, 220, 198, 0.35); }
.check.done, .check.sm.done { border-radius: 50%; }

/* Destello de los botones: más lento, en oro y carmesí, apenas visible */
.btn-red::before, .icon-btn::before, .tab.active::before, .btn-big::before {
  padding: 1px;
  background: conic-gradient(from var(--halo-a), rgba(205, 174, 122, 0) 0deg, rgba(232, 220, 198, 0.9) 40deg, rgba(205, 174, 122, 0) 90deg, rgba(160, 20, 28, 0.6) 200deg, rgba(205, 174, 122, 0) 260deg);
  animation-duration: 9s;
  opacity: .8;
}
.btn-red::after, .icon-btn::after, .tab.active::after, .btn-big::after { opacity: .25; filter: blur(8px); }

/* Navegación */
.tab { font-family: var(--body); font-weight: 500; letter-spacing: .04em; }
.tab.active { background: rgba(120, 14, 22, 0.22); border-color: rgba(205, 174, 122, 0.4); color: var(--champagne); }
@media (min-width: 900px) {
  .sb-item { font-weight: 500; letter-spacing: .02em; border-radius: 10px; }
  .sb-item.on { background: linear-gradient(90deg, rgba(120, 14, 22, 0.35), rgba(120, 14, 22, 0.05)); border-color: transparent; border-left: 2px solid var(--gold); border-radius: 4px 10px 10px 4px; color: var(--champagne); }
  .sb-brand { padding-bottom: 14px; border-bottom: 1px solid var(--gold-line); margin-bottom: 4px; }
  .h1 { font-size: 56px; }
}

/* Avatares con aro dorado fino */
.avatar.lg, .avatar.xl { box-shadow: 0 0 0 1px rgba(205, 174, 122, 0.55), 0 0 0 4px rgba(205, 174, 122, 0.08); border-bottom: 0; }

/* Barra de progreso dorada */
.progress > div, .hs-bar > div { background: linear-gradient(90deg, #8E1418, #CDAE7A); }

/* Saludo */
.greet-eyebrow { font-family: var(--regal); font-size: 11px; font-weight: 600; letter-spacing: .32em; color: var(--gold); text-transform: uppercase; }
.gold-rule { height: 1px; width: 64px; background: linear-gradient(90deg, var(--gold), transparent); border: 0; margin: 4px 0 0; }

/* Acceso de club privado */
.login-card { background: linear-gradient(165deg, rgba(255, 245, 230, 0.08), rgba(255, 245, 230, 0.02) 45%, rgba(120, 14, 22, 0.1)); border-color: rgba(205, 174, 122, 0.35); }
.login-eyebrow { font-family: var(--regal); font-size: 11px; font-weight: 600; letter-spacing: .34em; color: var(--gold); }
.login-title { font-size: 54px; font-weight: 600; color: #FBF4EA; }
.login-sub { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 19px; color: var(--text-2); }
.field input { border-color: rgba(205, 174, 122, 0.4); }
.field input:focus { border-color: var(--champagne); box-shadow: 0 0 0 3px rgba(205, 174, 122, 0.15); }
.login-btn { background: linear-gradient(180deg, rgba(163, 22, 28, 0.85), rgba(110, 14, 19, 0.85)); border-color: rgba(205, 174, 122, 0.6); color: #FBF4EA; }
.login-btn:hover { background: linear-gradient(180deg, #A3161C, #6E0E13); border-color: var(--gold); }
.remember { font-weight: 500; color: var(--text-2); }
.remember input { accent-color: #8E1418; }
.login-foot { font-weight: 400; color: var(--muted); font-size: 13px; }
.login-person { border-color: var(--gold-line); }
@media (max-width: 899px) { .chip { letter-spacing: .14em; padding: 0 11px; font-size: 9.5px; } .h1 { font-size: 38px; } }

/* =====================================================================
   GRAFITO: fondo negro con resplandor gris oliva al centro y letra
   Space Grotesk en toda la app. Tarjetas de vidrio ahumado.
   ===================================================================== */
:root {
  --body: 'Space Grotesk', 'Barlow', system-ui, -apple-system, sans-serif;
  --serif: var(--body);
  --regal: var(--body);
  --display: var(--body);
  --glass: linear-gradient(150deg, rgba(74, 74, 64, 0.42) 0%, rgba(40, 40, 36, 0.46) 45%, rgba(24, 24, 22, 0.55) 100%);
  --glass-2: rgba(255, 255, 255, 0.035);
  --glass-strong: rgba(24, 24, 22, 0.86);
  --glass-line: rgba(255, 255, 255, 0.11);
  --glass-line-2: rgba(255, 255, 255, 0.2);
  --text: #F2F2EE;
  --text-2: #CFCFC8;
  --muted: #8E8E86;
}
html, body {
  background: #0A0A09;
  background-image: radial-gradient(70% 55% at 50% 42%, #2C2D26 0%, #1A1A17 42%, #0B0B0A 78%, #080807 100%);
  background-attachment: fixed;
}
#fondo { display: none; }
body::after { opacity: .045; }

/* Letra: grotesca geométrica, títulos firmes y un poco cerrados */
body, .btn, .tab, .input, .chip, .tag, .section-label, .sb-label, .field-label, .col-k-head, .brand-name b, .brand-name span, .count-pill { font-family: var(--body); }
.h1, .ai-title, .up-title, .sheet h2, .login-title, .doc-preview h3 { font-weight: 500; letter-spacing: -.025em; }
.h1 { font-size: 40px; line-height: 1.04; }
@media (min-width: 900px) { .h1 { font-size: 52px; } }
.task-title-big, .aviso-title-big, .w-task .t, .kcard.prio .k-title { font-weight: 500; font-size: 22px; line-height: 1.18; letter-spacing: -.01em; }
.k-title, .hs-title, .task-row .t { font-weight: 500; font-size: 16px; letter-spacing: -.005em; }
.brand-name b, .sb-brand b { font-weight: 600; font-size: 18px; letter-spacing: .14em; }
.brand-name span { font-size: 9px; letter-spacing: .26em; }
.section-label, .sb-label, .field-label, .col-k-head, .vc-name, .greet-eyebrow, .login-eyebrow { font-weight: 500; font-size: 11px; letter-spacing: .16em; }
.tag, .tag-prioridad { font-weight: 600; font-size: 9.5px; letter-spacing: .12em; }
.chip { font-weight: 500; font-size: 11px; letter-spacing: .1em; }
.btn-big, .login-btn, .up-btn { font-weight: 600; font-size: 13px; letter-spacing: .16em; }
.big-time, .huge-time, .hs-num, .dc-pct, .display { font-weight: 400; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.huge-time { font-size: 64px; }
.login-title { font-size: 46px; }
.login-sub { font-style: normal; font-weight: 400; font-size: 15px; color: var(--muted); }
.bubble-me .tx, .bubble-ai .tx { font-weight: 400; }
.vc-text { font-weight: 400; letter-spacing: -.01em; }

/* Tarjetas: vidrio ahumado grafito con brillo en la esquina */
.card, .kcard, .col-k, .hs-stat, .hs-item, .entry, .opt, .bubble-ai, .sb-card, .sb-profile, .notif, .w-large, .dc-panel, .up-drop, .login-card, .vc-card, .dc-card, .up-card, .sheet {
  border-color: var(--glass-line);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.08), inset -1px -1px 0 rgba(255, 255, 255, 0.02), 0 18px 40px rgba(0, 0, 0, 0.35);
}
.card, .kcard, .hs-stat, .hs-item, .entry, .opt, .bubble-ai, .sb-card, .sb-profile, .notif, .w-large, .login-card, .dc-card, .up-card { background: var(--glass); }
.col-k { background: rgba(255, 255, 255, 0.02); }
.sheet { background: linear-gradient(150deg, rgba(60, 60, 52, 0.92), rgba(26, 26, 24, 0.94)); }
.vc-card { background: radial-gradient(70% 45% at 50% 108%, rgba(200, 40, 40, 0.5) 0%, transparent 70%), linear-gradient(150deg, rgba(64, 64, 56, 0.6), rgba(22, 22, 20, 0.7)); }
.card.prio, .kcard.prio, .w-task, .w-small.red { background: linear-gradient(150deg, rgba(120, 22, 26, 0.42), rgba(52, 18, 20, 0.5) 60%, rgba(26, 20, 20, 0.55)); border-color: rgba(220, 90, 85, 0.38); }
.card.amber, .w-small.amb { background: linear-gradient(150deg, rgba(120, 100, 60, 0.32), rgba(40, 36, 28, 0.5)); }
.inset, .file, .player, .action-chip, .doc-chip, .comment .b { background: rgba(255, 255, 255, 0.04); border-color: var(--glass-line); }
.sidebar { background: rgba(14, 14, 13, 0.6) !important; border-right-color: var(--glass-line) !important; }
.tabbar { background: rgba(14, 14, 13, 0.72); border-top-color: var(--glass-line); }
.ai-head, .composer { background: rgba(14, 14, 13, 0.6); }
.input, .field input { border-color: rgba(255, 255, 255, 0.2); }
.btn-dark, .back-btn, .chip { border-color: var(--glass-line); }
.btn-outline { border-color: var(--glass-line-2); color: var(--text-2); }
/* Separador con brillo, como el de las tarjetas de la referencia */
.gold-rule, .sb-brand { border-color: var(--glass-line) !important; }
.k-meta, .detail-side .o5, .pm-list + .pm-list { border-image: none; }
.kcard .k-meta { border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 8px; margin-top: 2px; }
.login-card { background: linear-gradient(150deg, rgba(74, 74, 64, 0.5), rgba(26, 26, 24, 0.6)); }
.pm-card { background: linear-gradient(150deg, rgba(70, 70, 60, 0.75), rgba(26, 26, 24, 0.88)); border-color: var(--glass-line-2); }
@media (max-width: 899px) { .h1 { font-size: 33px; } .h1.sm { font-size: 30px; } }
@media (min-width: 900px) { .h1 { font-size: 44px; } }

/* =====================================================================
   INICIO: bienvenida con fondo rojo profundo (degradado tipo malla con grano)
   ===================================================================== */
.inicio-screen {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(40% 34% at 56% 102%, rgba(214, 12, 40, 0.95) 0%, rgba(160, 8, 30, 0.65) 38%, transparent 72%),
    radial-gradient(34% 28% at 18% 86%, rgba(4, 0, 1, 0.97) 0%, rgba(4, 0, 1, 0.6) 40%, transparent 72%),
    radial-gradient(62% 48% at 26% 58%, rgba(120, 6, 20, 0.85) 0%, transparent 70%),
    radial-gradient(55% 46% at 92% 16%, rgba(0, 0, 0, 0.96) 0%, transparent 70%),
    radial-gradient(45% 30% at 95% 92%, rgba(6, 0, 2, 0.9) 0%, transparent 70%),
    linear-gradient(180deg, #160206 0%, #3C0510 40%, #6E0718 72%, #2C0208 100%);
}
/* Un brillo que se mueve muy despacio, como luz detrás de una tela */
.inicio-screen::before {
  content: ''; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background: radial-gradient(30% 26% at 60% 78%, rgba(230, 20, 50, 0.45), transparent 70%),
              radial-gradient(26% 22% at 30% 40%, rgba(140, 10, 26, 0.35), transparent 70%);
  filter: blur(30px); animation: inicio-drift 22s ease-in-out infinite alternate;
}
@keyframes inicio-drift { from { transform: translate(-3%, 2%) scale(1); } to { transform: translate(4%, -3%) scale(1.08); } }
[data-view="login"] .tabbar, [data-view="login"] .sidebar { display: none; }

.inicio {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center;
  padding: calc(64px + var(--safe-top)) 24px calc(40px + var(--safe-bottom)); min-height: 0; gap: 28px;
}
.inicio-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 6vh; }
.inicio-logo { width: 132px; height: 132px; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.55)); animation: inicio-in .9s cubic-bezier(.2,.8,.2,1) both; }
.inicio-name { font-family: var(--body); font-weight: 600; font-size: 34px; letter-spacing: .32em; margin-right: -.32em; color: #FBF2EE; animation: inicio-in .9s .15s cubic-bezier(.2,.8,.2,1) both; }
.inicio-by { font-family: var(--body); font-weight: 500; font-size: 11px; letter-spacing: .42em; margin-right: -.42em; color: rgba(251, 230, 225, 0.65); animation: inicio-in .9s .25s cubic-bezier(.2,.8,.2,1) both; }
.inicio-tag {
  margin: 0; max-width: 12ch; font-family: var(--body); font-weight: 500; font-size: clamp(44px, 12vw, 84px); line-height: .98; letter-spacing: -.035em;
  color: #FFF6F2; text-shadow: 0 10px 40px rgba(60, 0, 8, 0.6); animation: inicio-in 1s .4s cubic-bezier(.2,.8,.2,1) both;
}
.inicio-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(360px, 100%); animation: inicio-in 1s .6s cubic-bezier(.2,.8,.2,1) both; }
.inicio-btn {
  width: 100%; height: 56px; border-radius: 28px; font-family: var(--body); font-weight: 600; font-size: 16px; letter-spacing: .06em; color: #fff;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 235, 230, 0.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px rgba(40, 0, 6, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: background .2s, transform .1s, border-color .2s;
}
.inicio-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.inicio-btn:active { transform: translateY(1px) scale(.99); }
.inicio-foot { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 230, 225, 0.55); }
@keyframes inicio-in { from { opacity: 0; transform: translateY(14px); } }

/* El formulario de acceso usa el mismo fondo rojo */
.inicio-screen .login { position: relative; }
.inicio-back {
  position: absolute; top: calc(16px + var(--safe-top)); left: 16px; display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px 0 8px; border-radius: 18px; color: #fff; font-weight: 500; font-size: 14px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 235, 230, 0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.inicio-screen .login-card { background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03) 50%, rgba(80, 0, 10, 0.2)); border-color: rgba(255, 225, 220, 0.3); }
@media (min-width: 900px) {
  .inicio { justify-content: center; gap: 44px; }
  .inicio-brand { margin-top: 0; }
  .inicio-tag { max-width: none; }
}

/* Inicio con letra de póster de cine: Archivo expandida y negra, en rojo con brillo borroso */
.inicio { --poster: 'Archivo', 'Arial Black', 'Helvetica Neue', sans-serif; --poster-red: #E8231E; }
.inicio-brand { gap: 0; margin-top: 4vh; }
.inicio-logo { width: 104px; height: 104px; margin-bottom: 22px; }
.inicio-by {
  font-family: var(--poster); font-stretch: 125%; font-weight: 800; font-size: 11px; letter-spacing: .14em; margin: 0 0 10px;
  color: var(--poster-red); text-shadow: 0 0 6px rgba(232, 35, 30, 0.6);
}
.inicio-name, .inicio-tag {
  position: relative; margin: 0; font-family: var(--poster); font-stretch: 125%; text-transform: uppercase; color: var(--poster-red);
  /* brillo de luz borrosa, como impreso con movimiento */
  text-shadow: 0 0 1px rgba(255, 70, 60, 0.9), 6px 0 14px rgba(232, 35, 30, 0.45), -6px 0 14px rgba(232, 35, 30, 0.45), 0 0 34px rgba(232, 35, 30, 0.35);
  filter: blur(.35px);
}
.inicio-name::before, .inicio-tag::before {
  content: attr(data-text); position: absolute; inset: 0; color: rgba(255, 60, 50, 0.55); filter: blur(5px);
  transform: scaleX(1.04); z-index: -1; pointer-events: none;
}
.inicio-name { font-weight: 900; font-size: clamp(54px, 17vw, 150px); line-height: .9; letter-spacing: -.015em; margin-right: 0; animation: inicio-in 1s .15s cubic-bezier(.2,.8,.2,1) both, inicio-glow 5s 1.2s ease-in-out infinite alternate; }
.inicio-tag { font-weight: 800; font-size: clamp(17px, 5.2vw, 40px); line-height: 1; letter-spacing: .01em; max-width: none; margin-top: 10px; animation: inicio-in 1s .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes inicio-glow { from { filter: blur(.35px); } to { filter: blur(.9px); } }
.inicio-btn { font-family: var(--poster); font-stretch: 125%; font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.inicio-foot { font-family: var(--poster); font-stretch: 125%; font-weight: 700; font-size: 10px; letter-spacing: .12em; color: rgba(255, 210, 205, 0.6); }
@media (min-width: 900px) { .inicio-brand { margin-top: 0; } .inicio-logo { width: 120px; height: 120px; } }
/* Más contraste del título rojo sobre el fondo rojo: más brillante, más nítido y con sombra oscura detrás */
.inicio { --poster-red: #FF3B2F; }
.inicio-name, .inicio-tag {
  filter: none;
  text-shadow: 0 0 1px rgba(255, 120, 100, 0.9), 5px 0 10px rgba(255, 50, 40, 0.35), -5px 0 10px rgba(255, 50, 40, 0.35), 0 6px 30px rgba(0, 0, 0, 0.75), 0 0 60px rgba(0, 0, 0, 0.55);
}
.inicio-name::before, .inicio-tag::before { color: rgba(255, 60, 50, 0.35); filter: blur(6px); }
.inicio-name { font-size: clamp(46px, 15vw, 150px); }
@keyframes inicio-glow { from { filter: blur(0); } to { filter: blur(.45px); } }
.inicio-by { color: #FF6A5E; }
.inicio-tag { white-space: nowrap; font-size: clamp(13px, 4.1vw, 40px); }

/* Inicio: todo cabe en cualquier celular (angosto, bajo o dentro de la app de Claude).
   Los tamaños se ajustan al alto y al ancho; si aun así no cabe, se desplaza en vez de cortarse. */
.inicio-screen { overflow-y: auto; overflow-x: hidden; }
.inicio {
  flex: 1 0 auto; min-height: 100%; overflow-x: hidden;
  padding: calc(clamp(18px, 6vh, 64px) + var(--safe-top)) 20px calc(clamp(14px, 4vh, 40px) + var(--safe-bottom));
  gap: clamp(14px, 3vh, 28px);
}
.inicio-brand { margin-top: clamp(0px, 3vh, 40px); max-width: 100%; }
.inicio-logo { width: clamp(60px, 13vh, 120px); height: clamp(60px, 13vh, 120px); margin-bottom: clamp(8px, 2.5vh, 22px); }
.inicio-name { max-width: 100%; font-size: clamp(34px, min(13.5vw, 10vh), 150px); }
.inicio-tag { max-width: 100%; font-size: clamp(11px, min(3.9vw, 3vh), 40px); }
.inicio-name::before, .inicio-tag::before { transform: none; }
.inicio-btn { height: clamp(46px, 7vh, 56px); }
@supports (height: 1dvh) {
  .inicio { padding-top: calc(clamp(18px, 6dvh, 64px) + var(--safe-top)); padding-bottom: calc(clamp(14px, 4dvh, 40px) + var(--safe-bottom)); gap: clamp(14px, 3dvh, 28px); }
  .inicio-brand { margin-top: clamp(0px, 3dvh, 40px); }
  .inicio-logo { width: clamp(60px, 13dvh, 120px); height: clamp(60px, 13dvh, 120px); margin-bottom: clamp(8px, 2.5dvh, 22px); }
  .inicio-name { font-size: clamp(34px, min(13.5vw, 10dvh), 150px); }
  .inicio-tag { font-size: clamp(11px, min(3.9vw, 3dvh), 40px); }
  .inicio-btn { height: clamp(46px, 7dvh, 56px); }
}
@media (min-width: 900px) { .inicio-name { font-size: clamp(64px, min(9vw, 14vh), 150px); } .inicio-tag { font-size: clamp(16px, min(2.6vw, 4vh), 40px); } }
/* El brillo animado del fondo no debe agrandar el área desplazable */
.inicio-screen::before { position: fixed; }
/* El título y la frase nunca se parten; la app los achica si no caben */
.inicio-name, .inicio-tag { white-space: nowrap; display: inline-block; }
.inicio-brand { width: 100%; }


/* ===== EXPLICACIONES ===== */
.ex-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 900px) { .ex-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.ex-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; color: inherit; text-decoration: none; min-width: 0; transition: transform .15s ease, border-color .15s ease; }
.ex-card:hover { transform: translateY(-2px); }
.ex-pinned { border-color: rgba(255, 59, 47, .45); background: linear-gradient(160deg, rgba(200, 30, 30, .22), rgba(200, 30, 30, .04)), var(--glass-2, var(--surface)); }
.ex-title { font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.ex-text { color: var(--text-2); font-size: 14px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ex-detail { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 760px; }
.ex-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; font-size: 15px; }