/* YAKUX: capa de diseño del panel (vidrio, botón líquido, logo y slogan) encima de styles.css.
   Colores de yakux.com: negro #08090d / blanco #f4f5f9, azul #547bff y verde #05b88c. */
:root {
  --bg: #f4f5f9;
  --surface: rgba(255, 255, 255, .72);
  --surface-2: rgba(15, 18, 31, .04);
  --ink: #0f121f;
  --ink-2: #3c4153;
  --muted: #5f6375;
  --faint: #a3a7b6;
  --line: rgba(15, 18, 31, .09);
  --line-2: rgba(15, 18, 31, .06);
  --blue: #547bff;
  --green: #05b88c;
  --amber: #f5a524;
  --red: #ff5d6c;
  --danger: #e2475a;
  --grad: linear-gradient(110deg, #4f7bff 0%, #06bb91 100%);
  --glass: linear-gradient(150deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .55));
  --glass-solid: rgba(255, 255, 255, .8);
  --glass-edge: rgba(255, 255, 255, .95);
  --glass-hi: rgba(255, 255, 255, 1);
  --chip-bg: rgba(15, 18, 31, .05);
  --shadow: 0 18px 44px rgba(40, 52, 100, .12);
  --focus: 0 0 0 3px rgba(84, 123, 255, .35);
  --orb-a: rgba(84, 123, 255, .28); --orb-b: rgba(5, 184, 140, .22); --orb-c: rgba(140, 160, 255, .25);
  --r-lg: 22px; --r: 14px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
:root[data-theme="dark"] {
  --bg: #08090d;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .05);
  --ink: #f6f7fb;
  --ink-2: #c3c6d2;
  --muted: #9799a6;
  --faint: #5d5f6b;
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .06);
  --glass: linear-gradient(150deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025));
  --glass-solid: rgba(18, 19, 26, .82);
  --glass-edge: rgba(255, 255, 255, .1);
  --glass-hi: rgba(255, 255, 255, .14);
  --chip-bg: rgba(255, 255, 255, .07);
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --orb-a: rgba(38, 72, 170, .55); --orb-b: rgba(0, 120, 98, .40); --orb-c: rgba(20, 40, 90, .45);
}
body { background: var(--bg); transition: background-color .4s var(--ease); }

/* ---------- fondo ---------- */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.orb-a { width: 56vw; height: 56vw; right: -12vw; top: -22vw; background: var(--orb-a); animation: drift 26s ease-in-out infinite; }
.orb-b { width: 36vw; height: 36vw; right: 4vw; top: 6vw; background: var(--orb-b); animation: drift 32s ease-in-out infinite reverse; }
.orb-c { width: 46vw; height: 46vw; left: -16vw; bottom: -20vw; background: var(--orb-c); animation: drift 38s ease-in-out infinite; }
@keyframes drift { 50% { transform: translate(-4vw, 3vw) scale(1.08); } }

/* ---------- vidrio ---------- */
.glass, .panel, .rows, .pipe, .rep, .rank-row, .pool, .empty-box, .drawer, .modal, .p-block, .toolbar, .board .col {
  background: var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow);
}
.drawer, .modal { background: var(--glass-solid); }

/* ---------- marca ---------- */
.brand-row { display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.brand-row img { width: 34px; height: auto; filter: drop-shadow(0 4px 14px rgba(84, 123, 255, .45)); }
.wordmark { font-size: 20px; font-weight: 700; letter-spacing: -.8px; color: var(--ink); }
.slogan, .m-slogan { font-size: 12.5px; line-height: 1.45; font-weight: 500; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.slogan { padding: 0 10px; }
.m-slogan, .m-brand, .m-only { display: none; }
.boot .brand-row { justify-content: center; margin-bottom: 8px; }

/* ---------- estructura ---------- */
.shell { grid-template-columns: 248px minmax(0, 1fr); gap: 20px; padding: 20px; max-width: 1560px; margin: 0 auto; }
.side { position: sticky; top: 20px; height: calc(100vh - 40px); border-radius: 28px; padding: 22px 14px 16px; color: var(--ink); }
.nav { margin-top: 26px; overflow: auto; }
.nav button { position: relative; color: var(--muted); border-radius: 14px; transition: color .2s, background .2s; }
.nav button:hover { color: var(--ink); background: var(--chip-bg); }
.nav button[aria-current="page"] { color: var(--ink); background: var(--chip-bg); }
.nav button[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); }
.side-foot { gap: 12px; }
.ghost-side { color: var(--muted); border-radius: 12px; }
.ghost-side:hover { color: var(--ink); background: var(--chip-bg); }
.me { border-top: 0; border-radius: 16px; background: var(--chip-bg); padding: 10px; }
.me small, .me .icon-btn { color: var(--muted); }
.me .icon-btn:hover { color: var(--ink); background: var(--chip-bg); }
.side .av, .av { background: var(--grad); color: #fff; box-shadow: none; border-radius: 12px; }
.av.sm { border-radius: 8px; }
.main-wrap { min-width: 0; display: flex; flex-direction: column; }
.main { padding: 0 0 40px; max-width: none; }
.main.enter { animation: rise .5s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 4px 22px; }
.hello h1 { font-size: 30px; font-weight: 700; letter-spacing: -1.1px; line-height: 1.15; }
.hello p { color: var(--muted); font-size: 14px; }
.top-tools { display: flex; gap: 10px; }
.icon-btn.round { width: 44px; height: 44px; border-radius: 50%; }
.page-head h1, .p-head h1 { font-size: 26px; font-weight: 700; letter-spacing: -.9px; }

/* ---------- botones ---------- */
.btn { border-radius: 99px; background: var(--glass-solid); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi); transition: transform .4s var(--spring); }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn-primary, .btn-next {
  position: relative; overflow: hidden; color: #fff !important; border: 0 !important; background: var(--grad) !important;
  box-shadow: 0 10px 26px rgba(84, 123, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -6px 14px rgba(0, 40, 60, .2);
}
.btn-primary::before, .btn-next::before { content: ""; position: absolute; left: 12%; right: 12%; top: 2px; height: 45%; border-radius: 99px; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); pointer-events: none; }
.btn-primary:hover:not(:disabled), .btn-next:hover:not(:disabled) { transform: translateY(-1px); }
.btn-call, .btn-wa { border-radius: 99px; }

.btn-liquid {
  position: relative; isolation: isolate; overflow: hidden; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 99px;
  font-weight: 600; font-size: 15.5px; color: #fff; background: var(--grad);
  box-shadow: 0 10px 30px rgba(84, 123, 255, .40), 0 4px 14px rgba(5, 184, 140, .25), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -8px 18px rgba(0, 40, 60, .25);
  transition: transform .45s var(--spring), box-shadow .3s;
}
.btn-liquid.sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-liquid > * { position: relative; z-index: 2; }
.btn-liquid .water {
  position: absolute; inset: -30%; z-index: 1; pointer-events: none;
  background: radial-gradient(40% 30% at 30% 35%, rgba(255, 255, 255, .55), transparent 70%), radial-gradient(30% 40% at 72% 65%, rgba(255, 255, 255, .35), transparent 70%), radial-gradient(25% 20% at 55% 20%, rgba(190, 255, 240, .45), transparent 70%);
  filter: url(#water); mix-blend-mode: soft-light; animation: caustic 7s ease-in-out infinite;
}
.btn-liquid::before { content: ""; position: absolute; z-index: 1; left: 12%; right: 12%; top: 3px; height: 45%; border-radius: 99px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); pointer-events: none; }
@keyframes caustic { 50% { transform: translate(6%, -4%) rotate(8deg) scale(1.1); } }
.btn-liquid:hover { transform: translateY(-2px) scale(1.02); }
.btn-liquid:active { transform: scale(.96); }
.btn-glass {
  position: relative; overflow: hidden; text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px; border-radius: 99px; font-weight: 600; font-size: 15px;
  background: var(--glass-solid); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 22px rgba(0, 0, 0, .12);
  transition: transform .45s var(--spring);
}
.btn-glass:hover { transform: translateY(-1px); }
.btn-glass:active { transform: scale(.96); }
.btn-glass .ic { color: var(--green); }
.btn-glass.ghost { background: transparent; box-shadow: none; border-color: var(--line); }
.btn-glass.ghost .ic { color: var(--muted); }
.btn-mini {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 99px; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--ink);
  background: var(--glass-solid); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi); transition: transform .35s var(--spring);
}
.btn-mini .ic { width: 15px; height: 15px; color: var(--green); }
.btn-mini:active { transform: scale(.94); }
.chip { border-radius: 99px; background: var(--glass-solid); }
.toast { background: var(--glass-solid); color: var(--ink); border: 1px solid var(--glass-edge); border-radius: 99px; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.toast button { background: var(--chip-bg); }

/* ---------- componentes heredados ---------- */
.rows, .panel, .pipe, .rep, .pool, .empty-box, .rank-row { border-radius: var(--r-lg); }
.row:hover, .row.is-open { background: var(--chip-bg); }
.drawer { border-radius: 28px 0 0 28px; border-right: 0; }
.modal { border-radius: 24px; }
.scrim { background: rgba(5, 6, 10, .35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
input, select, textarea { background: var(--chip-bg); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); }
select option { background: var(--bg); color: var(--ink); }
.login { background: transparent; }
.login-art { background: var(--grad); color: #fff; }

/* =====================================================
   PANTALLAS DEL PANEL (prefijo p-)
   ===================================================== */
.p-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.p-head p { color: var(--muted); font-size: 14px; margin-top: 2px; }
.p-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.p-actions .btn-liquid, .p-actions .btn-glass { height: 44px; padding: 0 18px; font-size: 14px; }
.p-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; margin-bottom: 18px; border-radius: 16px; font-size: 14px; background: color-mix(in srgb, var(--amber) 14%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); }
.p-banner .ic { color: var(--amber); margin-top: 1px; }
.p-block { position: relative; border-radius: var(--r-lg); padding: 22px; min-width: 0; overflow: hidden; }
.p-bh { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 16px; }
.p-bh h3 { font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.p-bh .muted { font-size: 13px; }
.p-link { color: var(--blue); font-size: 13px; font-weight: 600; }
.p-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.p-empty { color: var(--muted); font-size: 14px; padding: 4px 0 10px; }
.p-chip { font-style: normal; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; white-space: nowrap; background: var(--chip-bg); color: var(--muted); }
.p-chip.blue { color: var(--blue); background: rgba(84, 123, 255, .13); }
.p-chip.green { color: var(--green); background: rgba(5, 184, 140, .13); }
.p-chip.amber { color: var(--amber); background: rgba(245, 165, 36, .14); }
.p-ico { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--chip-bg); color: var(--muted); }
.p-ico .ic { width: 16px; height: 16px; }
.p-ico.green { color: var(--green); background: rgba(5, 184, 140, .13); }
.p-ico.blue { color: var(--blue); background: rgba(84, 123, 255, .13); }
.p-ico.amber { color: var(--amber); background: rgba(245, 165, 36, .14); }
.p-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: start; }

/* Hoy */
.p-hoy .p-hero { grid-column: span 7; grid-row: span 2; }
.p-hoy .p-pulse, .p-hoy .p-agenda-hoy, .p-hoy .p-proj, .p-hoy .p-rut { grid-column: span 5; }
.p-hoy .p-pend, .p-hoy .p-cont { grid-column: span 7; }
.p-hoy-rep .p-hero { grid-column: span 7; }
.p-hoy-rep .p-pend { grid-column: span 5; }
.p-hoy-rep .p-agenda-hoy { grid-column: span 4; }
.p-hoy-rep .p-alerts { grid-column: span 5; }
.p-hoy-rep .p-rank-mini { grid-column: span 3; }
.liquid-card { display: flex; flex-direction: column; gap: 20px; padding: 26px; }
.hero-glow { position: absolute; inset: -40% -20% auto auto; width: 80%; height: 120%; pointer-events: none; background: radial-gradient(closest-side, rgba(84, 123, 255, .38), transparent), radial-gradient(closest-side at 70% 70%, rgba(5, 184, 140, .30), transparent); filter: blur(30px); opacity: .9; animation: breathe 9s ease-in-out infinite; }
:root:not([data-theme="dark"]) .hero-glow { opacity: .5; }
@keyframes breathe { 50% { transform: translate(-6%, 6%) scale(1.06); } }
.liquid-card > * { position: relative; }
.p-hero-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.p-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.p-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: ping 2.2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(5, 184, 140, .6); } 70% { box-shadow: 0 0 0 9px rgba(5, 184, 140, 0); } 100% { box-shadow: 0 0 0 0 rgba(5, 184, 140, 0); } }
.p-count { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 99px; background: var(--chip-bg); }
.p-hero-body { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.p-hero-title { font-size: 26px; letter-spacing: -.8px; line-height: 1.2; max-width: 22ch; }
.p-hero-time { font-size: clamp(60px, 7.5vw, 100px); font-weight: 700; letter-spacing: -.06em; line-height: .85; background: linear-gradient(180deg, var(--ink) 30%, color-mix(in oklab, var(--ink) 55%, transparent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.p-hero-time small { font-size: .32em; letter-spacing: -.02em; margin-left: .18em; -webkit-text-fill-color: var(--muted); }
.p-hero-who h2 { font-size: 24px; font-weight: 700; letter-spacing: -.6px; }
.p-hero-who p { color: var(--muted); font-size: 14px; }
.p-hero-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.p-hero-facts div { padding: 14px 16px; border-radius: 16px; background: var(--chip-bg); border: 1px solid var(--line); }
.p-hero-facts small { display: block; margin-bottom: 3px; }
.p-hero-facts b { font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.p-quote { margin: 0; padding: 4px 0 4px 16px; border-left: 2px solid transparent; border-image: var(--grad) 1; }
.p-quote p { font-size: 16px; line-height: 1.5; max-width: 60ch; }
.p-quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--muted); }
.p-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.p-hero-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.p-hero-note .ic { width: 16px; height: 16px; color: var(--green); }
.p-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.p-stats li { padding: 14px; border-radius: 16px; background: var(--chip-bg); border: 1px solid var(--line); display: flex; flex-direction: column; }
.p-num { font-size: 28px; font-weight: 700; letter-spacing: -1px; line-height: 1.15; }
.p-num .of { font-size: 15px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.p-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.p-slot { display: grid; grid-template-columns: 58px 1fr; gap: 12px; }
.p-slot time { font-weight: 600; font-size: 14px; padding-top: 14px; color: var(--muted); line-height: 1.3; }
.p-slot-card { width: 100%; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--chip-bg); display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; }
.p-slot-card b { font-weight: 600; font-size: 14.5px; }
.p-slot-card span { grid-column: 1; color: var(--muted); font-size: 13px; }
.p-slot-card .p-chip { grid-column: 2; grid-row: 1 / span 2; }
.p-slot.next time { color: var(--ink); }
.p-slot.next .p-slot-card { border-color: color-mix(in oklab, var(--blue) 55%, transparent); background: color-mix(in oklab, var(--blue) 10%, transparent); }
.p-slot.free .p-slot-card { border-style: dashed; background: transparent; }
.p-tasks { list-style: none; margin: 0; padding: 0; }
.p-task { display: grid; grid-template-columns: 10px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.p-task:first-child { border-top: 0; padding-top: 0; }
.p-task b { display: block; font-weight: 600; font-size: 14.5px; }
.p-task span { color: var(--muted); font-size: 13px; }
.p-sev { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px rgba(255, 93, 108, .6); }
.p-sev.mid { background: var(--amber); box-shadow: 0 0 12px rgba(245, 165, 36, .5); }
.p-sev.new { background: var(--blue); box-shadow: 0 0 12px rgba(84, 123, 255, .6); }
.p-proj-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.p-proj-list button { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.p-proj-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.p-proj-foot { font-size: 13px; color: var(--muted); }
.p-steps { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.p-steps i { height: 6px; border-radius: 99px; background: var(--chip-bg); border: 1px solid var(--line); }
.p-steps i.on { background: var(--grad); border-color: transparent; }
.p-steps i.now { background: var(--blue); border-color: transparent; box-shadow: 0 0 10px rgba(84, 123, 255, .7); }
.p-steps.sm i { height: 4px; }
.p-reel { display: flex; gap: 16px; align-items: center; }
.p-reel b { display: block; font-weight: 600; font-size: 15.5px; line-height: 1.35; }
.p-reel-thumb { width: 60px; height: 90px; flex: none; border-radius: 14px; background: var(--grad); display: grid; place-items: end center; padding-bottom: 8px; color: #fff; font-size: 11px; font-weight: 700; }
.p-nets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.p-nets em { font-style: normal; font-size: 12px; padding: 3px 9px; border-radius: 99px; background: var(--chip-bg); border: 1px solid var(--line); }
.p-reel-st { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.p-ring-row { display: flex; gap: 18px; align-items: center; }
.p-ring { width: 64px; height: 64px; flex: none; transform: rotate(-90deg); }
.p-ring circle { fill: none; stroke-width: 5; }
.p-ring .bg { stroke: var(--chip-bg); }
.p-ring .fg { stroke: var(--green); stroke-linecap: round; stroke-dasharray: 113.1; transition: stroke-dashoffset .7s var(--spring); }
.p-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.p-checks label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.p-checks input { appearance: none; width: 20px; height: 20px; flex: none; margin: 0; padding: 0; border-radius: 7px; border: 1.5px solid var(--faint); background: transparent; display: grid; place-items: center; transition: background .3s, transform .35s var(--spring); }
.p-checks input:checked { background: var(--grad); border-color: transparent; transform: scale(1.05); }
.p-checks input:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.p-checks input:checked + span { color: var(--muted); text-decoration: line-through; }
.p-goal { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.p-goal-ring { width: 120px; height: 120px; transform: rotate(-90deg); }
.p-goal-ring circle { fill: none; stroke-width: 9; }
.p-goal-ring .bg { stroke: var(--chip-bg); }
.p-goal-ring .fg { stroke: url(#gGoal); stroke-linecap: round; stroke-dasharray: 314.16; transition: stroke-dashoffset .8s var(--spring); }
.p-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.p-feed li { display: flex; gap: 12px; align-items: flex-start; }
.p-feed b { display: block; font-weight: 600; font-size: 14px; }
.p-feed span { color: var(--muted); font-size: 12.5px; }
.p-podium { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.p-podium li { display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); }
.p-podium .pos { grid-row: span 2; align-self: center; font-weight: 700; font-size: 18px; color: var(--muted); }
.p-podium b { font-size: 14px; }
.p-podium span:last-child { color: var(--muted); font-size: 12.5px; }
.p-podium .me { background: color-mix(in oklab, var(--green) 10%, transparent); border-color: color-mix(in oklab, var(--green) 45%, transparent); }
.p-podium .me .pos { color: var(--green); }

/* Agenda */
.p-weeknav { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 4px; border-radius: 99px; font-size: 14px; font-weight: 600; }
.p-weeknav span { padding: 0 6px; white-space: nowrap; }
.p-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: start; margin-bottom: 20px; }
.p-day { display: flex; flex-direction: column; gap: 10px; }
.p-day header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.p-day header span { color: var(--muted); font-size: 13px; }
.p-day.today header b { color: var(--blue); }
.p-day.off { opacity: .6; }
.p-dayoff { padding: 16px 14px; border-radius: 16px; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; }
.p-sx { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; text-align: left; min-height: 112px;
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.p-sx time { font-weight: 700; font-size: 18px; letter-spacing: -.5px; }
.p-sx.free { border-style: dashed; background: transparent; box-shadow: none; color: var(--muted); justify-content: space-between; transition: border-color .25s, background .25s, transform .4s var(--spring); }
.p-sx.free em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--blue); }
.p-sx.free em .ic { width: 15px; height: 15px; }
.p-sx.free:hover { border-color: var(--blue); background: color-mix(in oklab, var(--blue) 8%, transparent); transform: translateY(-2px); }
.p-sx.taken { background: transparent; box-shadow: none; color: var(--faint); min-height: 64px; }
.p-sx.booked { border-color: color-mix(in oklab, var(--blue) 40%, transparent); }
.p-sx.booked.cancelada { opacity: .5; }
.p-sx-name { text-align: left; padding-right: 26px; }
.p-sx-name b { display: block; font-weight: 600; font-size: 14.5px; }
.p-sx-name span { font-size: 12.5px; color: var(--muted); }
.p-sx-name:hover b { color: var(--blue); }
.p-sx-foot { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: auto; flex-wrap: wrap; }
.p-sx-foot .p-chip { margin-left: auto; }
.p-sx-more { position: absolute; top: 12px; right: 10px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.p-sx-more:hover { background: var(--chip-bg); color: var(--ink); }
.p-sx-more .ic { width: 15px; height: 15px; }
.p-how h3 { font-size: 16px; margin-bottom: 14px; }
.p-how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.p-how-steps li { display: flex; gap: 12px; align-items: flex-start; }
.p-how-steps b { display: block; font-size: 14px; }
.p-how-steps span { font-size: 13px; color: var(--muted); }
.p-modal { width: min(500px, 100%); }
.p-field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.p-seg { display: inline-flex; padding: 4px; border-radius: 99px; background: var(--chip-bg); gap: 2px; flex-wrap: wrap; }
.p-seg button { height: 34px; padding: 0 14px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--muted); }
.p-seg button.on { color: var(--ink); background: var(--glass-solid); box-shadow: inset 0 1px 0 var(--glass-hi), 0 3px 10px rgba(0, 0, 0, .12); }
.p-res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-res-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 16px; text-align: left; border: 1px solid var(--line); background: var(--chip-bg); transition: transform .35s var(--spring), border-color .2s; }
.p-res-opt:hover { transform: translateY(-2px); border-color: var(--blue); }
.p-res-opt .ic { color: var(--muted); }
.p-res-opt.green .ic { color: var(--green); }
.p-res-opt.amber .ic { color: var(--amber); }
.p-res-opt b { font-size: 14.5px; }
.p-res-opt span { font-size: 12.5px; color: var(--muted); font-weight: 400; }

/* Clientes */
.p-split { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.p-clist { border-radius: var(--r-lg); padding: 8px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; }
.p-citem { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; text-align: left; transition: background .2s; }
.p-citem:hover { background: var(--chip-bg); }
.p-citem.on { background: var(--glass-solid); box-shadow: inset 0 1px 0 var(--glass-hi), 0 4px 14px rgba(0, 0, 0, .12); }
.p-ctop { display: flex; justify-content: space-between; gap: 8px; }
.p-ctop b { font-weight: 600; font-size: 14.5px; }
.p-ctop span, .p-csub { font-size: 12.5px; color: var(--muted); }
.p-citem .p-steps { margin-top: 6px; }
.p-cdetail { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.p-chero-top { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.p-chero-top h2 { font-size: 22px; letter-spacing: -.6px; }
.p-clinks { display: flex; gap: 8px; }
.p-clinks .icon-btn { width: 40px; height: 40px; border-radius: 50%; }
.p-stepper { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.p-stepper li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 11.5px; color: var(--muted); position: relative; }
.p-stepper li::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 2px; background: var(--line); }
.p-stepper li:first-child::before { display: none; }
.p-stepper li.done::before, .p-stepper li.now::before { background: var(--grad); }
.p-stepper i { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; background: var(--bg); border: 1.5px solid var(--line); }
.p-stepper i .ic { width: 14px; height: 14px; color: #fff; }
.p-stepper .done i { background: var(--grad); border-color: transparent; }
.p-stepper .now i { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 5px rgba(84, 123, 255, .15); }
.p-stepper .now { color: var(--ink); font-weight: 600; }
.p-next { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px; border-radius: 16px; background: var(--chip-bg); border: 1px solid var(--line); }
.p-next small { display: block; }
.p-next b { display: block; font-size: 18px; letter-spacing: -.3px; }
.p-next .muted { font-size: 12.5px; }
.p-next-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.p-next-btns .btn-liquid, .p-next-btns .btn-glass { height: 48px; }
.p-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: start; }
.p-pays { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-pay { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--chip-bg); }
.p-pay b { font-size: 22px; letter-spacing: -.6px; }
.p-pay span { font-size: 13px; color: var(--muted); }
.p-pay.ok { border-color: color-mix(in oklab, var(--green) 40%, transparent); }
.p-pay.ok span { color: var(--green); font-weight: 600; }
.p-pay .btn-mini { align-self: flex-start; margin-top: 6px; }
.p-form { display: flex; flex-direction: column; gap: 12px; }
.p-form.two { flex-direction: row; flex-wrap: wrap; }
.p-form.two label { flex: 1 1 160px; }
.p-form label, .p-tpl { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.p-form input, .p-form textarea, .p-tpl textarea { font-weight: 400; padding: 9px 12px; width: 100%; resize: vertical; }
.p-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.p-timeline li { position: relative; }
.p-timeline li::before { content: ""; position: absolute; left: -19.5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--blue); }
.p-timeline li:first-child::before { background: var(--blue); }
.p-timeline b { display: block; font-weight: 600; font-size: 14px; }
.p-timeline span { font-size: 12.5px; color: var(--muted); }

/* Comunicación */
.p-soon { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; }
.p-soon > div { flex: 1 1 300px; }
.p-soon h3 { font-size: 16px; margin-bottom: 4px; }
.p-tpls { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }

/* Contenido */
.p-cstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.p-cstats > div { padding: 14px 16px; border-radius: 16px; display: flex; flex-direction: column; }
.p-cstats b { font-size: 24px; font-weight: 700; letter-spacing: -.8px; }
.p-board { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; scrollbar-width: none; }
.p-col { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: var(--r-lg); background: var(--chip-bg); border: 1px solid var(--line); min-height: 220px; transition: border-color .2s, background .2s; }
.p-col.over { border-color: var(--blue); background: color-mix(in oklab, var(--blue) 8%, transparent); }
.p-col header { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px; }
.p-col header b { font-size: 13.5px; }
.p-col header em { font-style: normal; font-size: 12px; color: var(--muted); }
.p-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; cursor: grab; transition: transform .35s var(--spring); }
.p-card:hover { transform: translateY(-2px); }
.p-card.dragging { opacity: .5; }
.p-card .p-chip { align-self: flex-start; font-size: 11px; padding: 3px 8px; margin-right: 24px; }
.p-card b { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.p-card-foot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.p-card-foot .ic { width: 13px; height: 13px; }
.p-dots { display: flex; gap: 3px; margin-left: auto; }
.p-dots i { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; background: var(--glass-solid); border: 1px solid var(--line); }
.p-card-move { position: absolute; top: 10px; right: 8px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.p-card-move:hover { background: var(--chip-bg); color: var(--ink); }
.p-card-move .ic { width: 14px; height: 14px; }
.p-hint { font-size: 12.5px; text-align: center; color: var(--muted); margin-top: 10px; }
.p-cal { border-radius: var(--r-lg); padding: 14px; }
.p-cal-title { font-weight: 600; margin: 4px 4px 12px; }
.p-cal-week, .p-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.p-cal-week span { font-size: 12px; color: var(--muted); text-align: center; padding-bottom: 6px; }
.p-cal-cell { min-height: 92px; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); }
.p-cal-cell.empty { border: 0; }
.p-cal-cell.slot { background: var(--chip-bg); }
.p-cal-cell.today { border-color: var(--blue); }
.p-cal-d { font-size: 12px; font-weight: 600; color: var(--muted); }
.p-cal-cell.today .p-cal-d { color: var(--blue); }
.p-cal-item { font-size: 12px; font-weight: 600; text-align: left; line-height: 1.3; padding: 6px 8px; border-radius: 9px; background: var(--glass-solid); border-left: 3px solid var(--faint); }
.p-cal-item.blue { border-left-color: var(--blue); } .p-cal-item.green { border-left-color: var(--green); } .p-cal-item.amber { border-left-color: var(--amber); }
.p-cal-free { font-size: 11.5px; color: var(--faint); text-align: left; }
.p-cal-free:hover { color: var(--blue); }
.p-nets-check { display: flex; gap: 14px; flex-wrap: wrap; font-weight: 400; }

/* Métricas */
.p-mgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.p-mgrid .p-wide { grid-column: 1 / -1; }
.p-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.p-funnel li { display: grid; grid-template-columns: 100px 1fr 44px; gap: 12px; align-items: center; }
.p-funnel em { grid-column: 2 / -1; font-style: normal; font-size: 12px; color: var(--muted); margin-top: -8px; }
.p-funnel .k { font-size: 13.5px; font-weight: 500; }
.p-funnel .bar { height: 26px; border-radius: 9px; background: var(--chip-bg); overflow: hidden; }
.p-funnel .bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); }
.p-funnel b { font-size: 16px; text-align: right; }
.p-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.p-chart { width: 100%; height: auto; overflow: visible; }
.p-chart .line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.p-chart .dot { fill: var(--bg); stroke: var(--blue); stroke-width: 2.5; }
.p-chart .val { fill: var(--ink); font-size: 13px; font-weight: 600; }
.p-chart .lab { fill: var(--muted); font-size: 12px; }
.p-hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.p-hbars li { display: grid; grid-template-columns: minmax(120px, 1.2fr) 1fr 36px; gap: 12px; align-items: center; font-size: 13.5px; }
.p-hbars .hb { height: 10px; border-radius: 99px; background: var(--chip-bg); overflow: hidden; }
.p-hbars .hb i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.p-hbars.green .hb i { background: var(--green); }
.p-hbars b { text-align: right; }
.p-mgrid .pipe { box-shadow: none; border: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; margin: 0; }

/* Conexiones */
.p-conns { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-bottom: 20px; }
.p-conn { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.p-conn header { display: flex; gap: 12px; align-items: flex-start; }
.p-conn header b { display: block; font-size: 15px; }
.p-conn header .muted { font-size: 13px; line-height: 1.35; display: block; }
.p-conn-logo { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; font-weight: 700; font-size: 17px; background: var(--chip-bg); color: var(--muted); border: 1px solid var(--line); }
.p-conn.is-on .p-conn-logo { background: var(--grad); color: #fff; border-color: transparent; }
.p-conn-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.p-conn-foot .muted { font-size: 12.5px; }
.p-conn-st { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.p-conn-st.on { color: var(--green); }
.p-conn-st .ic { width: 15px; height: 15px; }
.p-days { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.p-daychk { cursor: pointer; }
.p-daychk input { position: absolute; opacity: 0; pointer-events: none; }
.p-daychk span { display: inline-grid; place-items: center; width: 52px; height: 38px; border-radius: 12px; border: 1px solid var(--line); font-weight: 600; font-size: 13.5px; color: var(--muted); transition: background .2s, color .2s; }
.p-daychk input:checked + span { background: var(--grad); color: #fff; border-color: transparent; }
.p-daychk input:focus-visible + span { box-shadow: var(--focus); }
.p-times { display: flex; gap: 8px; flex-wrap: wrap; }
.p-time { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px 0 14px; border-radius: 99px; font-weight: 600; font-size: 14px; background: var(--glass-solid); border: 1px solid var(--glass-edge); }
.p-time button { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--muted); }
.p-time button:hover { background: var(--chip-bg); color: var(--ink); }
.p-time .ic { width: 14px; height: 14px; }
.p-time.add { padding-left: 6px; }
.p-time.add input { height: 28px; border: 0; background: transparent; padding: 0 4px; width: 96px; }

/* Más (móvil) */
.p-more { display: flex; flex-direction: column; gap: 10px; }
.p-more-item { display: flex; align-items: center; gap: 14px; padding: 16px; text-align: left; width: 100%; }
.p-more-item b { flex: 1; font-size: 15px; }

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
  .shell { grid-template-columns: 84px minmax(0, 1fr); }
  .side { padding: 20px 10px; }
  .wordmark, .nav button span, .slogan, .ghost-side span, .me div { display: none; }
  .brand-row { justify-content: center; padding: 0; }
  .nav button { justify-content: center; }
  .nav button[aria-current="page"]::before { left: -10px; }
  .ghost-side { justify-content: center; }
  .me { flex-direction: column; background: none; padding: 0; }
  .p-hoy .p-hero, .p-hoy .p-pend, .p-hoy .p-cont, .p-hoy-rep .p-hero { grid-column: span 12; grid-row: auto; }
  .p-hoy .p-pulse, .p-hoy .p-agenda-hoy, .p-hoy .p-proj, .p-hoy .p-rut,
  .p-hoy-rep .p-pend, .p-hoy-rep .p-agenda-hoy, .p-hoy-rep .p-alerts, .p-hoy-rep .p-rank-mini { grid-column: span 6; }
  .p-week { grid-template-columns: repeat(3, 1fr); }
  .p-day.off { display: none; }
  .p-split { grid-template-columns: 240px 1fr; }
  .p-mgrid { grid-template-columns: 1fr; }
  .p-cstats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- móvil ---------- */
@media (max-width: 860px) {
  .shell { display: block; padding: 16px 16px calc(104px + env(safe-area-inset-bottom)); }
  .side { display: none; }
  .m-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 15px; letter-spacing: -.4px; }
  .m-brand img { width: 26px; height: auto; filter: drop-shadow(0 3px 10px rgba(84, 123, 255, .45)); }
  .m-slogan { display: block; text-align: center; margin: 4px 0 8px; }
  .m-only { display: grid; }
  .hello h1 { font-size: 25px; }
  .topbar { padding-bottom: 16px; align-items: flex-start; }
  .bottom { display: flex; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 68px; padding: 6px; border-radius: 26px; border-top: 1px solid var(--glass-edge); background: var(--glass-solid); }
  .bottom button { justify-content: center; border-radius: 20px; font-size: 11px; }
  .bottom button[aria-current="page"] { background: var(--chip-bg); }
  .bottom button[aria-current="page"] .ic { color: var(--blue); }
  .drawer { border-radius: 28px 28px 0 0; top: auto; max-height: 92vh; width: 100%; border-right: 1px solid var(--glass-edge); }
  #toast-root { bottom: 96px; }
  .p-grid { gap: 14px; }
  .p-grid > .p-block { grid-column: 1 / -1 !important; }
  .p-block { padding: 18px; }
  .liquid-card { padding: 20px; }
  .p-hero-facts, .p-pays, .p-res-grid { grid-template-columns: 1fr; }
  .p-hero-actions .btn-liquid { width: 100%; }
  .p-hero-actions .btn-glass { flex: 1; justify-content: center; padding: 0 14px; font-size: 14px; }
  .liquid-card .p-hero-head { order: 0; } .liquid-card .p-hero-body, .liquid-card .p-goal { order: 1; } .liquid-card .p-hero-actions { order: 2; margin-top: 0; }
  .liquid-card .p-hero-note { order: 3; } .liquid-card .p-hero-facts { order: 4; } .liquid-card .p-quote { order: 5; }
  .p-task { grid-template-columns: 10px 1fr; row-gap: 10px; }
  .p-task > .btn-mini { grid-column: 2; justify-self: start; }
  .p-week { grid-template-columns: 1fr; }
  .p-how-steps { grid-template-columns: 1fr; }
  .p-split { grid-template-columns: 1fr; }
  .p-clist { position: static; flex-direction: row; overflow-x: auto; max-height: none; scrollbar-width: none; }
  .p-citem { min-width: 220px; }
  .p-stepper { grid-template-columns: repeat(9, minmax(34px, 1fr)); overflow-x: auto; padding-bottom: 20px; scrollbar-width: none; }
  .p-stepper span { display: none; }
  .p-stepper li.now span { display: block; position: absolute; top: 36px; white-space: nowrap; }
  .p-board { grid-template-columns: repeat(6, 78vw); scroll-snap-type: x mandatory; }
  .p-col { scroll-snap-align: start; }
  .p-cal-cell { min-height: 60px; padding: 4px; }
  .p-cal-item { font-size: 0; padding: 0; height: 8px; border-left-width: 0; background: var(--blue); }
  .p-cal-item.green { background: var(--green); } .p-cal-item.amber { background: var(--amber); }
  .p-cal-free { display: none; }
  .p-cstats { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .orb, .hero-glow, .btn-liquid .water, .p-live i { animation: none !important; } }

/* Entrada */
.login-art p { color: rgba(255, 255, 255, .88); }
.login-art .ruta li { color: #fff; }
.login-main .slogan { padding: 0; margin: -4px 0 18px; font-size: 13.5px; }
.login-main .brand-row { padding: 0; margin-bottom: 6px; }
.p-hoy .p-hero { align-self: stretch; }
.p-free small { display: block; margin-bottom: 8px; }
.p-free-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.p-free-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 16px; border: 1px dashed var(--line); text-align: left; transition: border-color .2s, background .2s, transform .35s var(--spring); }
.p-free-slot b { font-size: 18px; letter-spacing: -.4px; }
.p-free-slot span { font-size: 12.5px; color: var(--muted); }
.p-free-slot:hover { border-color: var(--blue); background: color-mix(in oklab, var(--blue) 8%, transparent); transform: translateY(-2px); }
@media (max-width: 860px) { .p-free-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .liquid-card .p-free { order: 1; } }

/* Google */
.p-google { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.p-google > div { flex: 1 1 280px; }
.p-google h3 { font-size: 16px; margin-bottom: 2px; }
.p-google.on { border-color: color-mix(in oklab, var(--green) 45%, transparent); }
.btn-liquid:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.p-inbox { margin-bottom: 20px; }
.p-mails { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.p-mails li { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.p-mails li:first-child { border-top: 0; }
.p-mails a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 4px; color: inherit; text-decoration: none; border-radius: 12px; }
.p-mails a:hover { background: var(--chip-bg); }
.p-mail-top { display: flex; justify-content: space-between; gap: 10px; }
.p-mail-top b { font-weight: 500; }
.p-mail-top time { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.p-mail-subj { font-size: 14px; }
.p-mail-subj em { font-style: normal; font-size: 11.5px; color: var(--muted); padding: 1px 6px; border-radius: 99px; background: var(--chip-bg); }
.p-mail-snip { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-mails li.unread b, .p-mails li.unread .p-mail-subj { font-weight: 700; }
.p-mails li.known .p-mail-top b { color: var(--blue); }