/* Panel de Jorge — sistema "visor": oscuro, editorial, con marcas de encuadre */
:root {
  --bg: #08080a; --panel: #0e0e11; --panel-2: #131317; --line: rgba(255,255,255,.075); --line-2: rgba(255,255,255,.14);
  --ink: #f2ede5; --mute: #8a857c; --dim: #5c5851;
  --amber: #f0b560; --amber-2: #e0a85c; --teal: #6fe0cc; --red: #ff7461;
  --mono: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;
  --r: 16px;
}
body { background: var(--bg); background-image: radial-gradient(1200px 600px at 78% -10%, rgba(240,181,96,.07), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(111,224,204,.04), transparent 60%); background-attachment: fixed; }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .045; mix-blend-mode: overlay; z-index: 90; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.mono { font-family: var(--mono); letter-spacing: .06em; }
.up { text-transform: uppercase; }

/* ---------- Estructura ---------- */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100svh; }
.rail { position: sticky; top: 0; height: 100svh; padding: 22px 16px; display: flex; flex-direction: column; gap: 26px; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.015), transparent); }
.rail .brand img { height: 42px; width: auto; }
.nav { display: grid; gap: 2px; }
.nav a { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 10px; color: var(--mute); text-decoration: none; font-size: .92rem; position: relative; transition: color .25s, background .25s; }
.nav a .n { font-family: var(--mono); font-size: .66rem; color: var(--dim); }
.nav a .soon { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.nav a:hover { color: var(--ink); background: rgba(255,255,255,.03); }
.nav a.on { color: var(--ink); background: rgba(240,181,96,.08); }
.nav a.on::before { content: ''; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--amber); box-shadow: 0 0 16px var(--amber); }
.nav a.on .n { color: var(--amber); }
.rail .foot { margin-top: auto; display: grid; gap: 10px; font-size: .78rem; color: var(--mute); }
.live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(111,224,204,.6); animation: ping 2.2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(111,224,204,0); } 100% { box-shadow: 0 0 0 0 rgba(111,224,204,0); } }
.stage { min-width: 0; }
.bar { position: sticky; top: 0; z-index: 30; display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 14px clamp(16px, 3vw, 40px); backdrop-filter: blur(14px); background: rgba(8,8,10,.72); border-bottom: 1px solid var(--line); }
.cmdk { display: flex; align-items: center; gap: 12px; min-width: min(420px, 100%); padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--mute); cursor: pointer; font-size: .9rem; transition: border-color .25s, color .25s; }
.cmdk:hover { border-color: var(--line-2); color: var(--ink); }
.cmdk kbd { margin-left: auto; font-family: var(--mono); font-size: .68rem; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--mute); }
.me { display: flex; gap: 12px; align-items: center; font-size: .82rem; color: var(--mute); }
#app.wrap { max-width: 1280px; padding: clamp(22px, 4vh, 44px) clamp(16px, 3vw, 40px) 90px; }
body.locked .rail, body.locked .bar { display: none; }
body.locked .shell { grid-template-columns: 1fr; }

/* ---------- Tipografía ---------- */
.display { font-family: var(--serif); font-weight: 400; font-size: clamp(2.8rem, 7.2vw, 6.4rem); line-height: .92; letter-spacing: -.02em; margin: 14px 0 18px; }
.display em { color: var(--amber); font-style: italic; }
.lead { color: var(--mute); max-width: 62ch; font-size: 1.05rem; }
.lead b { color: var(--ink); font-weight: 500; }
.k { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.big { font-family: var(--serif); font-size: clamp(3rem, 5.6vw, 5.2rem); line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.big small { font-size: .38em; color: var(--mute); margin-left: 4px; letter-spacing: 0; }

/* ---------- Mosaico ---------- */
.bento { display: grid; gap: 14px; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 34px; }
.tile { --mx: 50%; --my: 0%; position: relative; grid-column: span 4; padding: clamp(18px, 2.2vw, 28px); border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: border-color .3s, transform .5s cubic-bezier(.22,1,.36,1); opacity: 0; transform: translateY(18px); animation: rise .8s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(240,181,96,.11), transparent 60%); opacity: 0; transition: opacity .35s; }
.tile:hover { border-color: var(--line-2); }
.tile:hover::before { opacity: 1; }
/* marcas de encuadre en las esquinas */
.tile::after { content: ''; position: absolute; inset: 9px; pointer-events: none; opacity: 0; transition: opacity .3s, inset .3s; --c: var(--amber); --t: 1.5px; --l: 14px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l) no-repeat; }
.tile:hover::after { opacity: .85; inset: 12px; }
.tile { display: flex; flex-direction: column; }
.tile .pipe, .tile .cal { margin: auto 0; }
.tile.s6 { grid-column: span 6; } .tile.s8 { grid-column: span 8; } .tile.s12 { grid-column: span 12; } .tile.s5 { grid-column: span 5; } .tile.s7 { grid-column: span 7; }
.tile .head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.tile.link { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.tile.ghost { background: transparent; border-style: dashed; }
.tile.ghost .big { color: var(--dim); }
.pill { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--mute); }
.pill.amber { color: var(--amber); border-color: rgba(240,181,96,.45); } .pill.teal { color: var(--teal); border-color: rgba(111,224,204,.4); } .pill.red { color: var(--red); border-color: rgba(255,116,97,.45); }
@media (max-width: 1000px) { .tile, .tile.s5, .tile.s7, .tile.s8 { grid-column: span 6; } .tile.s12 { grid-column: span 12; } }
@media (max-width: 640px) { .tile, .tile.s5, .tile.s6, .tile.s7, .tile.s8 { grid-column: span 12; } }

/* ---------- Piezas del inicio ---------- */
.event { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.event .date { text-align: center; padding-right: 24px; border-right: 1px solid var(--line); }
.event .date .d { font-family: var(--serif); font-size: clamp(4rem, 7vw, 6.4rem); line-height: .85; }
.event .date .m { font-family: var(--mono); font-size: .72rem; letter-spacing: .24em; color: var(--amber); margin-top: 6px; }
.event h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.02; margin-bottom: 8px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.spark { display: block; width: 100%; height: 46px; margin-top: 14px; overflow: visible; }
.spark path.l { fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(240,181,96,.55)); stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.6s .4s cubic-bezier(.22,1,.36,1) forwards; }
.spark path.a { fill: url(#sg); opacity: .35; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.pipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pipe .st { padding-top: 14px; border-top: 2px solid var(--line-2); position: relative; }
.pipe .st.on { border-color: var(--amber); }
.pipe .st .num { font-family: var(--serif); font-size: clamp(2.2rem, 3.4vw, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.pipe .st .val { font-family: var(--mono); font-size: .68rem; color: var(--mute); margin-top: 6px; }
.pipe .st.win { border-color: var(--teal); } .pipe .st.lose { border-color: var(--red); }
@media (max-width: 640px) { .pipe { grid-template-columns: repeat(2, 1fr); } }
.legend { display: flex; gap: 16px; margin-top: 14px; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: var(--mute); text-transform: uppercase; flex-wrap: wrap; }
.legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; background: var(--c); }
.exp { display: grid; gap: 4px; }
.exp a { display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: center; padding: 10px 8px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .2s; }
.exp a:hover { background: rgba(255,255,255,.035); }
.ring { position: relative; width: 54px; height: 54px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.5; } .ring .bg { stroke: rgba(255,255,255,.07); } .ring .fg { stroke: var(--c, var(--teal)); stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 1.15rem; font-weight: 400; }
.feed { display: grid; gap: 0; }
.feed div { display: grid; grid-template-columns: 10px 1fr auto; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.feed div:last-child { border: 0; }
.feed i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--amber)); transform: translateY(-1px); }
.soon-box { display: grid; place-items: center; text-align: center; min-height: 150px; color: var(--mute); gap: 8px; }
.soon-box .big { color: var(--dim); font-size: 2.4rem; }
.demo-flag { position: fixed; right: 14px; bottom: 14px; z-index: 80; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: rgba(240,181,96,.14); border: 1px solid rgba(240,181,96,.5); color: var(--amber); backdrop-filter: blur(8px); }

/* ---------- Paleta de comandos ---------- */
.palette { position: fixed; inset: 0; z-index: 100; display: none; place-items: start center; padding-top: 14vh; background: rgba(4,4,6,.72); backdrop-filter: blur(10px); }
.palette.open { display: grid; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.palette .box { width: min(640px, 92vw); border-radius: 18px; background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: 0 40px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(240,181,96,.08); overflow: hidden; animation: pop .28s cubic-bezier(.22,1,.36,1); }
@keyframes pop { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.palette input { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 20px 22px; font-size: 1.1rem; }
.palette ul { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow: auto; }
.palette li { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 11px 14px; border-radius: 10px; cursor: pointer; color: var(--mute); font-size: .95rem; }
.palette li b { color: var(--ink); font-weight: 500; }
.palette li.sel { background: rgba(240,181,96,.1); color: var(--ink); }
.palette li .kind { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); align-self: center; }
.palette .hint { padding: 10px 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: var(--dim); display: flex; gap: 18px; }

/* ---------- Pantallas existentes con el nuevo estilo ---------- */
.card { background: var(--panel); border-color: var(--line); border-radius: var(--r); }
.dcard h3 { font-size: 1.8rem; }
.btn { background: var(--ink); } .btn:hover { background: var(--amber); }
h1.title { font-size: clamp(2.6rem, 6vw, 4.8rem); }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.row.between { gap: 18px; }

/* ---------- Móvil ---------- */
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; padding-bottom: 72px; }
  .rail { position: fixed; z-index: 40; inset: auto 0 0 0; height: auto; flex-direction: row; padding: 8px 10px; border: 0; border-top: 1px solid var(--line-2); background: rgba(10,10,12,.92); backdrop-filter: blur(16px); }
  .rail .brand, .rail .foot { display: none; }
  .nav { grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  .nav a { grid-template-columns: 1fr; justify-items: center; padding: 9px 4px; font-size: .72rem; }
  .nav a .n, .nav a .soon { display: none; }
  .nav a.on::before { left: 20%; right: 20%; top: -9px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .cmdk { min-width: 0; flex: 1; }
  .event { grid-template-columns: 1fr; } .event .date { border: 0; padding: 0; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .tile { animation: none; opacity: 1; transform: none; } .spark path.l { animation: none; stroke-dashoffset: 0; } .live i { animation: none; } }

/* ---------- Acceso (login propio) ---------- */
.gate { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 100svh; }
.gate-art { position: relative; overflow: hidden; background: #000; }
.gate-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; animation: gate-zoom 26s ease-in-out infinite alternate; }
@keyframes gate-zoom { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.gate-art::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8,8,10,.92), rgba(8,8,10,.1) 55%, rgba(8,8,10,.45)), linear-gradient(to right, transparent 60%, rgba(8,8,10,.85)); }
.gate-art::after { content: ''; position: absolute; inset: 28px; z-index: 2; pointer-events: none; --c: rgba(255,255,255,.7); --t: 1.5px; --l: 26px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l) no-repeat; }
.gate-cap { position: absolute; z-index: 3; left: clamp(36px, 5vw, 72px); bottom: clamp(40px, 7vh, 80px); display: grid; gap: 4px; }
.gate-cap .display { font-size: clamp(3rem, 6vw, 5.6rem); margin: 8px 0 12px; }
.gate-side { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(28px, 5vw, 72px); max-width: 560px; width: 100%; margin: 0 auto; }
.gate-logo { height: 42px; width: auto; align-self: flex-start; margin-bottom: 14px; }
.gate-h { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: .96; letter-spacing: -.015em; margin: 0; }
.gate-h em { color: var(--amber); font-style: italic; }
.gate-side .muted { max-width: 44ch; }
.gate-side form { margin-top: 6px; }
.gate-side input[type=email], .gate-side input[type=password], .gate-side input[type=text] { background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; padding: 15px 16px; font-size: 1.02rem; transition: border-color .2s, box-shadow .2s; }
.gate-side input:focus { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(240,181,96,.12); outline: none; }
.gate-side input.otp { font-family: var(--mono); font-size: 1.6rem; letter-spacing: .5em; text-align: center; padding-left: 1.2em; }
.big-btn { padding: 16px 24px; font-size: .8rem; width: 100%; }
.linklike { background: none; border: 0; color: var(--mute); font-size: .86rem; cursor: pointer; padding: 6px 0; text-align: left; width: fit-content; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); }
.linklike:hover { color: var(--amber); }
.gate-err { color: var(--red); font-size: .9rem; min-height: 1.3em; margin: 0; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; color: var(--dim); }
.rules li::before { content: '○ '; } .rules li.ok { color: var(--teal); } .rules li.ok::before { content: '● '; }
.big-rules { grid-template-columns: 1fr; font-family: var(--sans); font-size: 1.05rem; letter-spacing: 0; color: var(--mute); gap: 12px; }
.big-rules li::before { content: '→ '; color: var(--amber); }
.qr { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.qr svg { width: 150px; height: 150px; background: #fff; border-radius: 10px; padding: 6px; }
.secret { display: block; margin-top: 6px; font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; word-break: break-all; color: var(--amber); }
@media (max-width: 860px) {
  .gate { grid-template-columns: 1fr; }
  .gate-art { height: 34svh; min-height: 220px; }
  .gate-art::before { background: linear-gradient(to top, rgba(8,8,10,1), rgba(8,8,10,.15) 70%); }
  .gate-art::after { inset: 16px; }
  .gate-cap .display { font-size: 2.6rem; margin: 4px 0 6px; }
  .gate-cap { left: 24px; bottom: 22px; }
  .qr { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

.display.greet { font-size: clamp(2.4rem, 5.4vw, 4.6rem); margin: 12px 0 14px; }

/* Calendario: semanas en columnas, días de la semana en filas */
.cal { display: grid; grid-auto-flow: column; grid-template-rows: auto repeat(7, 1fr); grid-template-columns: 18px repeat(14, minmax(0, 1fr)); gap: 4px; }
.cal i { display: grid; place-items: center; font-style: normal; border-radius: 6px; min-width: 0; }
.cal .lab { font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; color: var(--dim); text-transform: uppercase; }
.cal .mes { color: var(--amber); justify-content: start; text-align: left; font-size: .64rem; padding-bottom: 4px; white-space: nowrap; overflow: visible; }
.cal .day { aspect-ratio: 1; font-family: var(--mono); font-size: .66rem; color: var(--mute); background: rgba(255,255,255,.05); transition: transform .2s, background .2s; cursor: default; }
.cal .day:hover { transform: scale(1.22); z-index: 2; background: rgba(255,255,255,.14); color: var(--ink); }
.cal .day.past { opacity: .35; }
.cal .day.first { box-shadow: -3px 0 0 var(--amber); }
.cal .day.h { background: rgba(240,181,96,.2); color: var(--amber); }
.cal .day.b { background: var(--amber); color: #0a0a0b; font-weight: 700; box-shadow: 0 0 14px rgba(240,181,96,.5); }
.cal .day.t { outline: 1.5px solid var(--teal); outline-offset: 2px; color: var(--teal); font-weight: 700; }
.cal .day.b.t { color: #0a0a0b; }
@media (max-width: 640px) { .cal { gap: 2px; grid-template-columns: 14px repeat(14, minmax(0, 1fr)); } .cal .day { font-size: .5rem; border-radius: 4px; } }

/* ---------- Agenda ---------- */
.ag-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 18px; }
.ag-ask input[type=date] { width: auto; padding: 9px 12px; color-scheme: dark; }
.ag-answer { font-size: 1rem; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); }
.ag-answer.free { color: var(--teal); border-color: rgba(111,224,204,.45); } .ag-answer.maybe { color: var(--amber); border-color: rgba(240,181,96,.5); } .ag-answer.busy { color: var(--red); border-color: rgba(255,116,97,.5); }
.ag-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ag-title { min-width: 9ch; text-align: center; }
.ag-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ag-dow { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); padding: 4px 6px; }
.ag-day { min-height: clamp(86px, 11vw, 132px); padding: 8px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color .2s, background .2s; min-width: 0; }
.ag-day:hover { border-color: var(--line-2); background: var(--panel-2); }
.ag-day.out { opacity: .38; } .ag-day.past { opacity: .6; } .ag-day.out.past { opacity: .3; }
.ag-day.today { border-color: var(--teal); box-shadow: inset 0 0 0 1px rgba(111,224,204,.4); }
.ag-n { font-family: var(--mono); font-size: .76rem; color: var(--mute); }
.ag-day.today .ag-n { color: var(--teal); font-weight: 700; }
.ag-ev { display: block; width: 100%; text-align: left; border: 0; border-radius: 6px; padding: 3px 7px; font-size: .74rem; line-height: 1.25; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0a0a0b; background: var(--amber); font-weight: 600; }
.ag-ev i { font-style: normal; font-family: var(--mono); font-weight: 400; margin-right: 6px; opacity: .75; }
.ag-ev.posible { background: rgba(240,181,96,.16); color: var(--amber); border: 1px dashed rgba(240,181,96,.6); font-weight: 500; }
.ag-ev.bloqueo { background: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 6px, rgba(255,255,255,.05) 6px 12px); color: var(--ink); font-weight: 500; }
.ag-ev:hover { filter: brightness(1.12); }
.ag-more { font-family: var(--mono); font-size: .64rem; color: var(--mute); padding-left: 4px; }
.modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; background: rgba(4,4,6,.72); backdrop-filter: blur(8px); animation: fade .2s; overflow: auto; }
.modal-box { width: min(560px, 100%); max-height: 94svh; overflow: auto; border-radius: 20px; background: var(--panel-2); border: 1px solid var(--line-2); padding: clamp(20px, 3vw, 32px); box-shadow: 0 40px 120px rgba(0,0,0,.7); animation: pop .28s cubic-bezier(.22,1,.36,1); }
.modal-box select { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; font: inherit; color: var(--ink); width: 100%; }
.modal-box input[type=date], .modal-box input[type=time] { color-scheme: dark; }
@media (max-width: 700px) { .ag-grid { gap: 3px; } .ag-day { padding: 5px; min-height: 74px; border-radius: 8px; } .ag-ev i { display: none; } .ag-ev { font-size: .64rem; padding: 2px 4px; } .ag-dow { padding: 2px; font-size: .56rem; letter-spacing: .04em; } }

/* ---------- Propuestas ---------- */
.stack { display: grid; gap: 14px; }
.pr-tabs { display: flex; gap: 6px; margin: 4px 0 22px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.pr-tabs a { padding: 10px 16px; color: var(--mute); text-decoration: none; font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.pr-tabs a:hover { color: var(--ink); }
.pr-tabs a.on { color: var(--ink); border-color: var(--amber); }
.pr-tabs b { font-family: var(--mono); font-size: .62rem; background: var(--amber); color: #0a0a0b; border-radius: 999px; padding: 1px 7px; }
.pr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.pr-stat { display: grid; gap: 4px; background: var(--panel); border-radius: var(--r); padding: 18px 20px; opacity: 0; animation: rise .7s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(var(--i) * 70ms); }
.pr-stat b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pr-board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 14px; align-items: start; }
.pr-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.pr-colh { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 6px; }
.pr-count { font-family: var(--mono); font-size: .7rem; color: var(--dim); }
.pr-card { display: grid; gap: 6px; text-decoration: none; color: inherit; background: var(--panel); border-radius: 14px; padding: 14px 16px; transition: border-color .25s, transform .35s cubic-bezier(.22,1,.36,1); }
.pr-card:hover { border-color: rgba(240,181,96,.5); transform: translateY(-2px); }
.pr-card h3 { margin: 2px 0 0; font-weight: 500; font-size: 1rem; line-height: 1.25; }
.pr-total { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.pr-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.pr-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.pr-seen { color: var(--teal); }
.pr-empty { border: 1px dashed var(--line); border-radius: 12px; padding: 16px; text-align: center; }
.pr-req { background: var(--panel); border-radius: var(--r); display: grid; gap: 8px; }
.pr-req.new { border-color: rgba(240,181,96,.4); }
.pr-req h3 { margin: 0; font-weight: 500; font-size: 1.2rem; }
.pr-msg { margin: 0; padding: 12px 14px; border-left: 2px solid var(--amber); background: rgba(255,255,255,.03); border-radius: 0 10px 10px 0; color: var(--ink); }
.pr-prices { display: grid; gap: 8px; }
.pr-prow { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; }
.pr-prow.head { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.pr-prow input, .pr-lrow input, .pr-payrow input, .pr-adj input[type=text], .pr-adj select, .pr-side input[type=text], .pr-prices input { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: .92rem; color: var(--ink); width: 100%; min-width: 0; }
.pr-prow input:focus, .pr-lrow input:focus, .pr-payrow input:focus { outline: 1px solid var(--amber); border-color: var(--amber); }
.pr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; margin-top: 18px; }
.pr-side { position: sticky; top: 84px; display: grid; gap: 14px; }
.pr-sum { background: linear-gradient(160deg, rgba(240,181,96,.1), var(--panel) 55%); border-color: rgba(240,181,96,.3); display: grid; gap: 10px; }
.pr-big { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pr-sumrow { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--mute); }
.pr-sumrow b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.pr-sumrow.save b { color: var(--amber); }
.pr-split { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.pr-split div { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.pr-split b { font-weight: 500; font-size: .92rem; }
.pr-lines { display: grid; gap: 8px; overflow-x: auto; }
.pr-lrow { display: grid; grid-template-columns: minmax(180px, 3fr) 70px minmax(100px, 1.2fr) 70px minmax(100px, 1fr) 40px; gap: 8px; align-items: start; min-width: 640px; }
.pr-lrow.head { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); align-items: center; }
.pr-lname { display: grid; gap: 4px; }
.pr-ldesc { font-size: .8rem !important; color: var(--mute) !important; padding: 6px 10px !important; }
.pr-ltot { padding-top: 10px; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.pr-adj { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pr-pay { display: grid; gap: 8px; }
.pr-payrow { display: grid; grid-template-columns: 1fr 80px 18px 40px; gap: 8px; align-items: center; }
.pr-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--mute); cursor: pointer; }
.chip:hover { color: var(--ink); border-color: var(--amber); }
.pr-log { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; font-size: .85rem; }
.pr-log li { display: grid; gap: 2px; padding-left: 14px; border-left: 1px solid var(--line-2); }
.pr-log b { text-transform: capitalize; font-weight: 500; }
.pr-side select { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: inherit; color: var(--ink); max-width: 100%; }
.pr-lines + .row select { max-width: 100%; flex: 1; min-width: 220px; }
@media (max-width: 1100px) { .pr-layout { grid-template-columns: 1fr; } .pr-side { position: static; order: -1; } .pr-board { grid-template-columns: repeat(5, 260px); } }
@media (max-width: 720px) { .pr-stats { grid-template-columns: 1fr 1fr; } .pr-adj { grid-template-columns: 1fr; } .pr-prow { grid-template-columns: 1fr 1fr; } .pr-prow.head { display: none; } }
input[type=tel], input[type=date], input[type=time], .f select { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; font: inherit; color: var(--ink); width: 100%; color-scheme: dark; letter-spacing: 0; text-transform: none; }
.f input:focus, .f textarea:focus, .f select:focus { outline: 1px solid var(--amber); border-color: var(--amber); }

.pr-covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }
.pr-cover { display: grid; gap: 4px; padding: 5px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; color: var(--mute); text-align: left; font: inherit; }
.pr-cover img, .pr-cover .pr-auto { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 6px; display: grid; place-items: center; background: var(--panel-2); font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; }
.pr-cover small { font-size: .68rem; line-height: 1.2; padding: 0 2px 2px; }
.pr-cover:hover { border-color: var(--line-2); } .pr-cover.on { border-color: var(--amber); color: var(--ink); box-shadow: 0 0 0 1px var(--amber); }
/* Desplegables de Propuestas: mismo alto y estilo que los campos, con flecha propia */
.pr-lines + .row select, .pr-adj select, .pr-side select {
  appearance: none; -webkit-appearance: none; min-height: 46px; height: 46px; padding: 0 40px 0 14px; width: 100%; font: inherit; font-size: .95rem; color: var(--ink); color-scheme: dark; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23f0b560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 16px center;
  border: 1px solid var(--line-2); border-radius: 12px; text-overflow: ellipsis;
}
.pr-lines + .row { align-items: stretch; }
.pr-lines + .row select { flex: 1 1 320px; }
.pr-lines + .row .btn { white-space: nowrap; }
.pr-lines + .row select:focus, .pr-adj select:focus { outline: 1px solid var(--amber); border-color: var(--amber); }
.pr-lines + .row option, .pr-lines + .row optgroup, .pr-adj option { background: #131317; color: var(--ink); font-size: .95rem; }
.pr-adj { align-items: start; }
.pr-adj .f > .row { gap: 8px; flex-wrap: nowrap; align-items: center; min-height: 46px; }
.pr-adj .f > .row select { flex: 1 1 auto; }
.pr-adj .f > .row input[type=text] { width: 110px; min-height: 46px; }
.pr-adj label.f > .row { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: .95rem; }

.pr-state { display: grid; gap: 6px; } .pr-state p { margin: 0; color: var(--mute); }
.pr-send { background: var(--amber); color: #0a0a0b; padding: 17px 24px; }
.pr-trk { display: flex; flex-wrap: wrap; gap: 6px; } .pr-trk span { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--dim); } .pr-trk span.on { color: var(--teal); border-color: rgba(111,224,204,.5); }
/* Portada "Automática": mismo tamaño que las fotos y sin estirarse */
.pr-cover { align-content: start; align-self: start; }
.pr-cover .pr-auto { aspect-ratio: 8 / 5; height: auto; border: 1px dashed rgba(240,181,96,.45); background: linear-gradient(135deg, rgba(240,181,96,.16), rgba(111,224,204,.1)); color: var(--amber); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; text-align: center; line-height: 1.5; }
.pr-cover .pr-auto::before { content: '✦'; display: block; font-size: 1.1rem; letter-spacing: 0; margin-bottom: 2px; }
.pr-cover .pr-auto { align-content: center; justify-items: center; }

/* ---------- Baúl ---------- */
.vt-stat { display: grid; gap: 2px; text-align: right; } .vt-stat b { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1; } .vt-stat span { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; color: var(--mute); }
.vt-search { margin: 6px 0 20px; } .vt-search input { width: 100%; padding: 15px 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line-2); color: var(--ink); font: inherit; font-size: 1rem; } .vt-search input:focus { outline: 1px solid var(--amber); border-color: var(--amber); }
.vt-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.vt-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .95rem; } .vt-crumbs a { color: var(--mute); text-decoration: none; padding: 5px 10px; border-radius: 8px; border: 1px solid transparent; } .vt-crumbs a:hover { color: var(--ink); border-color: var(--line-2); } .vt-crumbs a.on { color: var(--ink); font-weight: 500; } .vt-crumbs span { color: var(--dim); }
.vt-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 22px; }
.vt-folder { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, transform .3s cubic-bezier(.22,1,.36,1), background .2s; user-select: none; }
.vt-folder:hover { border-color: rgba(240,181,96,.5); transform: translateY(-2px); } .vt-folder.over { border-color: var(--amber); background: rgba(240,181,96,.1); } .vt-folder.sel { border-color: var(--teal); background: rgba(111,224,204,.08); }
.vt-folder b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.vt-ico { width: 34px; height: 26px; position: relative; flex: none; } .vt-ico i { position: absolute; inset: 4px 0 0 0; border-radius: 3px 5px 5px 5px; background: linear-gradient(160deg, #f6c978, #d4902f); } .vt-ico i::before { content: ''; position: absolute; left: 0; top: -4px; width: 14px; height: 6px; border-radius: 3px 3px 0 0; background: #d4902f; }
.vt-act { display: flex; gap: 2px; opacity: 0; transition: opacity .2s; } .vt-folder:hover .vt-act, .vt-folder:focus-within .vt-act { opacity: 1; } .vt-act button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg); color: var(--mute); cursor: pointer; } .vt-act button:hover { color: var(--ink); border-color: var(--amber); }
.vt-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.vt-th { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); cursor: pointer; } .vt-th img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1); } .vt-th:hover img { transform: scale(1.05); } .vt-th.sel { outline: 2px solid var(--teal); outline-offset: -2px; }
.vt-th .ph { display: grid; place-items: center; height: 100%; color: var(--mute); font-size: 2rem; } .vt-th .tag { position: absolute; top: 8px; left: 8px; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; background: rgba(8,8,10,.75); padding: 3px 8px; border-radius: 999px; }
.vt-th .cap { position: absolute; inset: auto 0 0 0; padding: 22px 10px 8px; font-size: .74rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.78)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .25s; } .vt-th:hover .cap, .vt-th:focus .cap { opacity: 1; }
.vt-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; background: rgba(8,8,10,.4); } .vt-th.sel .vt-check { background: var(--teal); border-color: var(--teal); }
.vt-selbar { position: sticky; top: 70px; z-index: 20; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--panel-2); border: 1px solid rgba(111,224,204,.4); backdrop-filter: blur(10px); }
.vt-selbar[hidden] { display: none; }
.vt-empty { text-align: center; padding: 60px 20px; border: 1.5px dashed var(--line-2); border-radius: 18px; } .vt-empty b { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; } .vt-hint { margin-top: 22px; }
.vt-results { display: grid; gap: 10px; } .vt-hit { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: inherit; } .vt-hit:hover { border-color: var(--amber); } .vt-fi { color: var(--amber); }
.vt-tree { display: grid; gap: 2px; max-height: 52vh; overflow: auto; } .vt-node { text-align: left; padding: 10px 12px; border-radius: 8px; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; } .vt-node:hover { background: rgba(240,181,96,.1); }
.vv { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-columns: minmax(0, 1fr) 320px; background: rgba(6,6,8,.97); animation: fade .2s; }
.vv-stage { display: grid; place-items: center; min-height: 0; padding: 20px; } .vv-stage img, .vv-stage video { max-width: 100%; max-height: calc(100svh - 40px); object-fit: contain; border-radius: 6px; }
.vv-side { padding: 70px 22px 22px; display: grid; gap: 14px; align-content: start; border-left: 1px solid var(--line); overflow: auto; background: var(--panel); }
.vv-side input, .vv-side textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: inherit; color: var(--ink); width: 100%; }
.vv-x { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); cursor: pointer; }
.vv-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(8,8,10,.7); color: var(--ink); font-size: 1.6rem; cursor: pointer; } .vv-nav.prev { left: 14px; } .vv-nav.next { right: 334px; }
.vv-none { color: var(--mute); }
@media (max-width: 860px) { .vv { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; } .vv-side { border-left: 0; border-top: 1px solid var(--line); padding: 16px; max-height: 46svh; } .vv-nav.next { right: 14px; } .vt-act { opacity: 1; } .vt-selbar { top: 62px; } }

/* ---------- Agenda: Google Calendar ---------- */
.ag-ev.g { border-left: 2px solid var(--teal); } .ag-ev.g::after { content: 'G'; margin-left: auto; padding-left: 6px; font-family: var(--mono); font-size: .55rem; color: var(--teal); }
.ag-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--mute); font-size: .92rem; } .ag-steps b { color: var(--ink); font-weight: 500; }
.ag-google input[type=text] { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; font: inherit; font-size: .92rem; color: var(--ink); width: 100%; min-width: 0; }
.ag-sep { height: 1px; background: var(--line); margin: 22px 0; } .ag-out .row { flex-wrap: nowrap; } .ag-out .row input { flex: 1; }

/* ---------- Mi web ---------- */
.modal-box.wide { width: min(880px, 100%); }
.wb-n { margin-left: 8px; font-family: var(--mono); font-size: .62rem; background: var(--line-2); color: var(--ink); border-radius: 999px; padding: 1px 7px; }
.wb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 16px; }
.wb-p { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); cursor: grab; transition: transform .25s cubic-bezier(.22,1,.36,1), opacity .2s; }
.wb-p img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .wb-p:hover { border-color: rgba(240,181,96,.5); }
.wb-p.drag { opacity: .35; transform: scale(.96); } .wb-p.off img { filter: grayscale(1) brightness(.5); }
.wb-i { position: absolute; top: 8px; left: 8px; font-family: var(--mono); font-size: .62rem; background: rgba(8,8,10,.75); border-radius: 999px; padding: 3px 8px; }
.wb-hide { position: absolute; top: 8px; right: 8px; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; background: var(--amber); color: #0a0a0b; border-radius: 999px; padding: 3px 8px; }
.wb-cap { position: absolute; inset: auto 0 0 0; padding: 26px 10px 10px; font-size: .78rem; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.wb-act { position: absolute; inset: auto 8px 8px auto; display: flex; gap: 4px; opacity: 0; transition: opacity .2s; } .wb-p:hover .wb-act, .wb-p:focus-within .wb-act { opacity: 1; }
.wb-act button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(8,8,10,.85); color: var(--ink); cursor: pointer; } .wb-act button:hover { border-color: var(--amber); color: var(--amber); }
.wb-prev { width: 100%; max-height: 240px; object-fit: contain; background: var(--bg); border-radius: 10px; }
.wb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-height: 44vh; overflow: auto; padding: 4px 2px; margin: 10px 0; }
.wb-list > p { grid-column: 1 / -1; }
.wb-crumbs { display: flex; gap: 6px; align-items: center; font-size: .9rem; color: var(--mute); flex-wrap: wrap; } .wb-crumbs a { color: var(--mute); text-decoration: none; } .wb-crumbs a:hover { color: var(--ink); }
.wb-f { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: .88rem; cursor: pointer; text-align: left; grid-column: span 2; }
.wb-f:hover { border-color: var(--amber); } .wb-f i { width: 22px; height: 16px; border-radius: 2px 4px 4px 4px; background: linear-gradient(160deg, #f6c978, #d4902f); flex: none; }
.wb-t { position: relative; aspect-ratio: 1; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: var(--panel-2); cursor: pointer; } .wb-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-t.sel { border-color: var(--teal); } .wb-t .vt-check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; background: rgba(8,8,10,.4); } .wb-t.sel .vt-check { background: var(--teal); border-color: var(--teal); }
.wb-foot { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.wb-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--ink); cursor: pointer; } .wb-consent input { margin-top: 4px; accent-color: var(--amber); width: 17px; height: 17px; flex: none; }
.wb-foot select { appearance: none; background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 13px; font: inherit; color: var(--ink); color-scheme: dark; max-width: 320px; }

/* ---------- Mi web: textos, secciones, videos y publicar ---------- */
.wb-status { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 2px 0 14px; }
.wb-main { margin-top: 6px; } .wb-view { margin-top: 16px; padding-bottom: 90px; }
.wb-hint { text-transform: none; letter-spacing: 0; }
.wb-sec.off { opacity: .6; } .wb-toggle { display: flex; gap: 12px; align-items: center; cursor: pointer; } .wb-toggle input { accent-color: var(--amber); width: 18px; height: 18px; } .wb-toggle b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.wb-ref { display: flex; gap: 14px; align-items: center; } .wb-ref img, .wb-ref-none { width: 150px; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); } .wb-ref-none { display: grid; place-items: center; color: var(--mute); font-size: .8rem; }
.wb-step { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; } .wb-step > b { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.wb-save { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 160%); z-index: 60; display: flex; gap: 12px; align-items: center; padding: 10px 12px 10px 22px; border-radius: 999px; background: rgba(14,14,17,.94); border: 1px solid rgba(240,181,96,.5); backdrop-filter: blur(14px); transition: transform .4s cubic-bezier(.22,1,.36,1); box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.wb-save.on { transform: translate(-50%, 0); } .wb-save span { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.wb-grid.vid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .wb-grid.vid .wb-p { aspect-ratio: 16 / 10; }
.wb-divider { grid-column: 1 / -1; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); padding: 6px 0; border-top: 1px dashed rgba(240,181,96,.5); }
.wb-state { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 14px; color: var(--mute); font-size: .85rem; background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px); }
.wb-p.proc .wb-state { animation: wbpulse 1.6s ease-in-out infinite; color: var(--amber); } @keyframes wbpulse { 50% { opacity: .45; } } .wb-p.fail { border-color: rgba(255,116,97,.55); } .wb-p.fail .wb-state { color: var(--red); }
.wb-dur { position: absolute; bottom: 8px; left: 8px; font-family: var(--mono); font-size: .62rem; background: rgba(8,8,10,.8); border-radius: 6px; padding: 3px 7px; }
.wb-err { position: absolute; inset: auto 8px 8px 8px; font-size: .72rem; color: var(--red); background: rgba(8,8,10,.85); border-radius: 8px; padding: 6px 8px; }
.wb-t.was img { filter: grayscale(.8) brightness(.55); } .wb-was { position: absolute; left: 6px; bottom: 6px; font-family: var(--mono); font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; background: var(--amber); color: #0a0a0b; border-radius: 999px; padding: 2px 7px; }
.wb-nov { display: grid; place-items: center; height: 100%; padding: 8px; font-size: .72rem; color: var(--mute); text-align: center; word-break: break-all; }
.wb-t .tag { position: absolute; top: 6px; left: 6px; font-family: var(--mono); font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; background: rgba(8,8,10,.8); padding: 2px 7px; border-radius: 999px; }
@media (max-width: 640px) { .wb-ref { flex-direction: column; align-items: flex-start; } .wb-save { width: calc(100vw - 24px); justify-content: center; flex-wrap: wrap; border-radius: 20px; } }

/* menú "+ Crear" de la barra superior */
.newmenu { position: relative; }
.newpop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: min(300px, 86vw); display: grid; gap: 2px; padding: 8px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0,0,0,.55); animation: popin .18s var(--ease, ease-out); }
.newpop[hidden] { display: none; }
.newpop > * { display: grid; gap: 2px; text-align: left; padding: 11px 14px; border-radius: 10px; background: transparent; border: 0; color: var(--ink); text-decoration: none; cursor: pointer; font: inherit; }
.newpop > *:hover, .newpop > *:focus-visible { background: rgba(240,181,96,.1); outline: none; }
.newpop b { font-weight: 500; font-size: .95rem; } .newpop span { color: var(--mute); font-size: .78rem; }
@keyframes popin { from { opacity: 0; transform: translateY(-6px); } }

/* selector de plantilla y fichas marcables */
.chip.on { color: var(--ink); border-color: var(--teal); background: rgba(111,224,204,.1); }
.pr-tplrow { padding: 8px 0; border-bottom: 1px solid var(--line); }

/* Inicio: franja "Para atender" y alineación de las tarjetas (7 + 5 columnas en cada fila) */
.tile.todo { padding: 0; }
.todo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.todo-i { display: grid; gap: 4px; align-content: start; padding: clamp(16px, 1.8vw, 24px); text-decoration: none; color: inherit; border-right: 1px solid var(--line); transition: background .25s; }
.todo-i:last-child { border-right: 0; }
.todo-i:hover { background: rgba(240,181,96,.06); }
.todo-i b { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 3.4vw, 3.2rem); line-height: 1; color: var(--dim); }
.todo-i.on b { color: var(--amber); }
.todo-i small { color: var(--mute); font-size: .8rem; }
.bento { align-items: stretch; }
.tile.ghost .soon-box { margin: auto 0; text-align: center; }
@media (max-width: 1000px) { .todo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .todo-i:nth-child(2) { border-right: 0; } .todo-i:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* Inicio: dinero */
.money-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: auto 0; }
.money-i { display: grid; gap: 6px; align-content: start; padding-left: 16px; border-left: 1px solid var(--line); }
.money-i:first-child { padding-left: 0; border-left: 0; }
.money-i b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 2.8vw, 2.8rem); line-height: 1.05; color: var(--ink); }
.money-i b.zero { color: var(--dim); }
.money-i small { color: var(--mute); font-size: .78rem; line-height: 1.35; }
@media (max-width: 640px) { .money-grid { grid-template-columns: 1fr; } .money-i { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--line); } .money-i:first-child { padding-top: 0; border-top: 0; } }