/* Plataforma. Diseño: fondo en degradado lavanda-rosa-durazno, tarjetas de cristal, botones negros en píldora. */
@font-face { font-family: "Outfit"; font-weight: 400; font-display: swap; src: url("video/fonts/outfit-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url("video/fonts/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("video/fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-display: swap; src: url("video/fonts/outfit-latin-700-normal.woff2") format("woff2"); }

:root {
  --ink: #1B1A22; --muted: #6F6B7B; --soft: #A29DB0; --line: rgba(27, 26, 34, .09);
  --glass: rgba(255, 255, 255, .72); --glass-2: rgba(255, 255, 255, .9);
  --lav: #E8DDF8; --rose: #F9D9E7; --peach: #FCE4D5;
  --pick: linear-gradient(135deg, #E9DEF8, #F9D9E7 58%, #FCE4D5); --pick-line: #E8B8D2;
  --accent: #7B5AC8; --brand: #A8456B; --btn: #17161D;
  --ok: #2E8F63; --ok-l: #DFF3E8; --warn: #B97A12; --warn-l: #FCEFD3; --bad: #CF4A5B; --bad-l: #FADFE3; --info: #4A63C4; --info-l: #E3E8FA;
  --r-lg: 26px; --r-md: 18px; --r-sm: 12px; --shadow: 0 10px 30px rgba(110, 70, 140, .10), 0 1px 2px rgba(27, 26, 34, .04);
  --font: "Outfit", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font); color: var(--ink); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 700px at 8% -8%, #E9DBF8 0%, transparent 62%),
    radial-gradient(900px 600px at 100% 2%, #FBDDEA 0%, transparent 58%),
    radial-gradient(1000px 700px at 78% 108%, #FDE5D3 0%, transparent 62%), #F6F0F8;
  background-attachment: fixed;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
.muted { color: var(--muted); } .small { font-size: 13px; } .xs { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
a { color: var(--accent); }

/* ------------------------------------------------------------------ estructura */
.app { display: grid; grid-template-columns: clamp(220px, 17vw, 292px) minmax(0, 1fr); gap: 18px; padding: 16px; min-height: 100vh; }
.side {
  position: sticky; top: 16px; align-self: start; height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 14px;
  background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 30px; padding: 20px 14px; box-shadow: var(--shadow);
}
.logo { display: flex; align-items: center; gap: 11px; padding: 2px 8px 10px; }
.logo i { width: 38px; height: 38px; border-radius: 13px; background: linear-gradient(135deg, #C8618A, #8B3A63); display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 700; }
.logo b { font-size: 19px; display: block; line-height: 1.1; } .logo span { font-size: 12px; color: var(--muted); }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-group { margin: 12px 10px 4px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); font-weight: 600; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; padding: 11px 14px;
  border-radius: 999px; font-weight: 500; color: #3A3745;
}
.nav-item svg { width: 19px; height: 19px; flex: none; opacity: .75; }
.nav-item:hover { background: rgba(255, 255, 255, .7); }
.nav-item.on { background: var(--btn); color: #fff; } .nav-item.on svg { opacity: 1; }
.nav-item .count { margin-left: auto; font-size: 12px; font-weight: 600; background: var(--rose); color: #8B3A63; border-radius: 999px; padding: 1px 8px; }
.nav-item.on .count { background: #fff; color: var(--ink); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.link-card { background: linear-gradient(135deg, #EFE6FB, #FBE4EE); border-radius: 22px; padding: 14px; }
.link-card b { display: block; margin-bottom: 2px; } .link-card p { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.link-box { display: flex; gap: 6px; background: rgba(255, 255, 255, .8); border-radius: 999px; padding: 4px 4px 4px 12px; align-items: center; font-size: 12.5px; }
.link-box span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.demo-tag { font-size: 12px; color: var(--muted); text-align: center; }

.main { min-width: 0; padding: 8px 6px 40px; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.head .date { color: var(--muted); font-size: 14px; }
.head h1 { font-size: clamp(28px, 1.2vw + 20px, 40px); line-height: 1.05; }
.week { display: flex; gap: 6px; }
.week button { border: 0; background: transparent; border-radius: 16px; padding: 6px 10px; text-align: center; color: var(--muted); font-size: 12px; }
.week button b { display: block; font-size: 17px; color: var(--ink); }
.week button.today { background: var(--glass-2); box-shadow: var(--shadow); } .week button.today b { color: var(--accent); }
.demo-banner { font-size: 12.5px; color: var(--muted); background: rgba(255, 255, 255, .6); border-radius: 999px; padding: 6px 14px; display: inline-flex; gap: 8px; align-items: center; }
.demo-banner i { width: 8px; height: 8px; border-radius: 50%; background: #E0A93B; }

/* ------------------------------------------------------------------ componentes */
.card { background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .85); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow); }
.card h3 { font-size: 17px; margin-bottom: 4px; } .card .sub { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.stack { display: flex; flex-direction: column; gap: 16px; } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .between { justify-content: space-between; }
.btn { border: 0; border-radius: 999px; padding: 11px 20px; background: var(--btn); color: #fff; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { background: #2D2B38; } .btn:disabled { opacity: .45; cursor: default; }
.btn.light { background: var(--glass-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } .btn.light:hover { background: #fff; }
.btn.sm { padding: 7px 14px; font-size: 13.5px; } .btn.danger { background: var(--bad); }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid transparent; background: var(--glass-2); border-radius: 999px; padding: 8px 16px; font-size: 14px; color: #3A3745; display: inline-flex; gap: 7px; align-items: center; box-shadow: 0 1px 2px rgba(27, 26, 34, .05); }
.chip:hover { background: #fff; }
.chip.on { background: var(--btn); color: #fff; }
.chip.pick.on { background: var(--pick); color: var(--ink); border-color: var(--pick-line); }
.chip .n { font-size: 12px; font-weight: 600; opacity: .75; }
.seg { display: inline-flex; background: rgba(255, 255, 255, .6); border-radius: 999px; padding: 4px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; color: var(--muted); font-size: 14px; }
.seg button.on { background: var(--btn); color: #fff; }
.inp, select.inp, textarea.inp { width: 100%; border: 1px solid var(--line); background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 10px 16px; outline: none; }
textarea.inp { border-radius: 18px; resize: vertical; }
/* flecha de los desplegables: personalizada y con aire a la derecha (la nativa quedaba pegada al borde) */
select.inp { -webkit-appearance: none; appearance: none; padding-right: 46px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236F6B7B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center; background-size: 14px; }
.inp:focus { border-color: #C5B1EA; box-shadow: 0 0 0 4px rgba(155, 120, 220, .16); }
.phone-wrap { display: flex; align-items: stretch; gap: 0; }
.phone-cc { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px 0 14px; border: 1px solid var(--line); border-right: 0; border-radius: 999px 0 0 999px; background: rgba(255, 255, 255, .92); font-size: 14px; white-space: nowrap; cursor: pointer; }
.phone-cc:hover { background: #fff; } .phone-cc .cc-chev { opacity: .55; margin-left: 2px; }
.cc-pop { position: fixed; z-index: 95; width: 300px; max-height: 340px; display: flex; flex-direction: column; background: #fcfaff; border-radius: 22px; box-shadow: 0 20px 50px rgba(60, 30, 90, .28); border: 1px solid rgba(255, 255, 255, .9); padding: 10px; gap: 8px; }
.cc-list { overflow: auto; flex: 1; min-height: 0; }
.cc-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 14px; padding: 8px 10px; font-size: 14px; }
.cc-item:hover { background: rgba(232, 221, 248, .55); } .cc-item.on { background: var(--pick); }
.cc-item img, .cc-item svg { flex: none; } .cc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-dial { color: var(--muted); font-variant-numeric: tabular-nums; }
.phone-cc b { font-weight: 500; }
.phone-wrap .inp { border-radius: 0 999px 999px 0; min-width: 0; flex: 1; }
.aj-bar { position: sticky; bottom: 12px; z-index: 15; margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-radius: 22px;
  background: rgba(255, 255, 255, .94); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow); color: var(--muted); }
.aj-bar.dirty { background: var(--warn-l); color: #7A5206; } .aj-bar .btn[disabled] { opacity: .45; cursor: default; }
.fecha-wrap { position: relative; display: block; } .fecha-wrap .inp { padding-right: 46px; }
.fecha-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.fecha-btn:hover { background: rgba(0, 0, 0, .05); color: var(--ink); } .fecha-btn svg { width: 18px; height: 18px; }
.fecha-nativo { position: absolute; right: 8px; bottom: 4px; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.search { position: relative; } .search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; color: var(--soft); } .search .inp { padding-left: 40px; }
label.f { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 500; color: #3A3745; }
.switch { position: relative; width: 44px; height: 26px; flex: none; } .switch input { opacity: 0; position: absolute; inset: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: #D9D3E3; transition: .15s; } .switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.switch input:checked + span { background: var(--btn); }
.switch { display: inline-block; vertical-align: middle; }
/* el clic debe llegar al checkbox (que va debajo del dibujo del interruptor) aunque no esté dentro de un <label> */
.switch span { pointer-events: none; }
/* interruptor verde (activo) / rojo (desactivado) */
.switch.gr span { background: var(--bad); } .switch.gr input:checked + span { background: var(--ok); } .switch input:checked + span::after { transform: translateX(18px); }
.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 500; white-space: nowrap; background: #EEE9F4; color: #5B5668; }
.badge.ok { background: var(--ok-l); color: var(--ok); } .badge.warn { background: var(--warn-l); color: var(--warn); } .badge.bad { background: var(--bad-l); color: var(--bad); } .badge.info { background: var(--info-l); color: var(--info); } .badge.lav { background: var(--lav); color: #5B3FA6; } .badge.rose { background: var(--rose); color: #8B3A63; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; color: #5B3FA6; background: linear-gradient(135deg, #E9DEF8, #F9D9E7); flex: none; }
.avatar.sm { width: 28px; height: 28px; font-size: 12px; } .avatar.lg { width: 56px; height: 56px; font-size: 20px; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; } .person b { display: block; font-weight: 500; } .person span { color: var(--muted); font-size: 12.5px; }
.empty { text-align: center; color: var(--muted); padding: 36px 16px; } .empty b { display: block; color: var(--ink); margin-bottom: 4px; font-size: 16px; }
.hint { color: var(--muted); font-size: 12.5px; }
.svc-ph { position: relative; display: inline-block; border-radius: 16px; overflow: hidden; flex: none; vertical-align: middle; } .svc-ph svg, .svc-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* tablas */
.tbl-wrap { overflow: auto; border-radius: var(--r-md); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12.5px; padding: 10px 14px; white-space: nowrap; position: sticky; top: 0; background: rgba(250, 246, 252, .96); z-index: 2; border-bottom: 1px solid var(--line); cursor: default; }
th.sort { cursor: pointer; } th.sort:hover { color: var(--ink); }
td { padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
tbody tr { cursor: pointer; transition: background .12s; } tbody tr:hover td { background: rgba(255, 255, 255, .7); }
td.sticky, th.sticky { position: sticky; left: 0; z-index: 3; background: rgba(250, 246, 252, .98); } th.sticky { z-index: 4; }
tbody tr:hover td.sticky { background: #fff; }
td.r, th.r { text-align: right; }

/* kpi */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .kpis.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kpis.k4 { grid-template-columns: 1fr; } }
.kpi { background: var(--glass); border: 1px solid rgba(255, 255, 255, .85); border-radius: 24px; padding: 16px 18px; box-shadow: var(--shadow); text-align: left; display: block; width: 100%; transition: transform .12s; }
button.kpi:hover { transform: translateY(-2px); background: #fff; }
.kpi.dark { background: var(--btn); color: #fff; } .kpi.dark .l, .kpi.dark .d { color: rgba(255, 255, 255, .72); }
.kpi .l { font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.kpi .v { font-size: 32px; font-weight: 600; line-height: 1.15; margin: 4px 0 2px; }
.kpi .d { font-size: 12.5px; color: var(--muted); }
.delta.up { color: var(--ok); } .delta.down { color: var(--bad); } .delta.flat { color: var(--muted); } .kpi.dark .delta.up { color: #8BE3B6; } .kpi.dark .delta.down { color: #FFA9B4; }
.tip { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(27, 26, 34, .08); font-size: 11px; font-weight: 600; cursor: help; flex: none; }
.section-title { font-size: 20px; margin: 10px 2px 2px; } .section-sub { color: var(--muted); margin: 0 2px 8px; font-size: 13.5px; }

/* gráficas (SVG propio) */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font-family: var(--font); font-size: 11px; fill: var(--muted); }
.chart .grid-line { stroke: rgba(27, 26, 34, .07); } .chart .axis { stroke: rgba(27, 26, 34, .18); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); margin-top: 6px; } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.hbar { display: grid; grid-template-columns: minmax(110px, 190px) minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 7px 0; font-size: 13.5px; }
.hbar .track { height: 12px; background: rgba(27, 26, 34, .06); border-radius: 999px; overflow: hidden; } .hbar .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #B79DEB, #F0A3C4); }
.funnel .stage { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 8px 0; }
.funnel .step { width: 28px; height: 28px; border-radius: 50%; background: var(--lav); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: #5B3FA6; }
.funnel .bar { height: 30px; border-radius: 999px; background: linear-gradient(90deg, #C9B3F0, #F4B0CB); display: flex; align-items: center; padding: 0 14px; font-size: 13px; font-weight: 500; color: #3B2A57; min-width: 150px; }
.heat { display: grid; gap: 3px; font-size: 11px; color: var(--muted); } .heat div { border-radius: 6px; min-height: 26px; display: grid; place-items: center; }
.opp { border-radius: 22px; background: rgba(255, 255, 255, .78); padding: 16px; border: 1px solid rgba(255, 255, 255, .9); display: flex; flex-direction: column; gap: 8px; }
.opp.done { opacity: .6; } .opp h4 { margin: 0; font-size: 16px; font-weight: 600; } .opp .why { font-size: 13px; color: var(--muted); }
.opp dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 12.5px; } .opp dt { color: var(--soft); } .opp dd { margin: 0; }

/* ------------------------------------------------------------------ agenda */
.ag-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ag-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 360px); gap: 16px; align-items: start; }
.cal { overflow: auto; max-height: calc(100vh - 250px); padding: 0; }
.cal-in { position: relative; min-width: 560px; }
.cal-head { display: grid; position: sticky; top: 0; z-index: 6; background: rgba(250, 246, 252, .97); border-bottom: 1px solid var(--line); }
.cal-head > div { padding: 10px 12px; border-left: 1px solid var(--line); font-size: 13.5px; min-width: 0; } .cal-head > div:first-child { border-left: 0; }
.cal-body { display: grid; position: relative; }
.cal-hours { position: relative; } .cal-hours span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11.5px; color: var(--soft); }
.cal-col { position: relative; border-left: 1px solid var(--line); cursor: cell; }
.cal-line { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(27, 26, 34, .06); pointer-events: none; }
.cal-off { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, rgba(120, 100, 150, .08), rgba(120, 100, 150, .08) 5px, transparent 5px, transparent 10px); font-size: 11px; color: var(--soft); padding: 3px 8px; pointer-events: none; }
.cal-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--bad); z-index: 4; pointer-events: none; } .cal-now::before { content: ""; position: absolute; left: -4px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }
.appt { position: absolute; z-index: 3; text-align: left; border: 0; border-radius: 14px; padding: 5px 9px; overflow: hidden; font-size: 12px; line-height: 1.25; background: color-mix(in srgb, var(--c) 16%, #fff); border-left: 4px solid var(--c); box-shadow: 0 2px 8px rgba(80, 50, 110, .08); }
.appt b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .appt span { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appt.unconfirmed { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 10%, #fff), color-mix(in srgb, var(--c) 10%, #fff) 6px, #fff 6px, #fff 12px); border-left-style: dashed; }
.appt.completed { background: color-mix(in srgb, var(--ok) 11%, #fff); } .appt.cancelled { opacity: .5; text-decoration: line-through; }
.appt.conflict { outline: 2px solid var(--bad); outline-offset: -2px; }
.appt.no_show { background: var(--bad-l); } .appt.sel { box-shadow: 0 0 0 2px var(--btn); z-index: 5; }
.month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .month .dow { text-align: center; color: var(--muted); font-size: 12.5px; padding: 4px; }
.month .day { min-height: 82px; border-radius: 16px; background: rgba(255, 255, 255, .7); padding: 8px; text-align: left; border: 0; font-size: 13px; } .month .day:hover { background: #fff; } .month .day.dim { opacity: .4; } .month .day.today { box-shadow: inset 0 0 0 2px var(--btn); }
.month .day .dot { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.time-btn { border: 1px solid var(--line); background: rgba(255, 255, 255, .85); border-radius: 999px; padding: 10px 6px; font-size: 14px; } .time-btn:hover { background: #fff; }
.time-btn.on { background: var(--pick); border-color: var(--pick-line); font-weight: 600; }

/* ------------------------------------------------------------------ conversaciones */
.sg-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.sg-card { text-align: left; border: 0; border-radius: 22px; padding: 14px 16px; background: var(--glass); box-shadow: var(--shadow); border: 1px solid rgba(255, 255, 255, .85); }
.sg-card:hover { background: #fff; } .sg-card b { font-size: 26px; display: block; line-height: 1.1; } .sg-card span { font-size: 13px; color: var(--muted); }
.sg-card.first { background: linear-gradient(135deg, #E9DEF8, #F9D9E7); }
.sg-next { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.cv-top { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.cv-grid { display: grid; grid-template-columns: clamp(260px, 22vw, 360px) minmax(0, 1fr) clamp(250px, 20vw, 320px); gap: 14px; height: calc(100vh - 220px); min-height: 520px; }
.cv-grid > .card { padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cv-list { overflow-y: auto; overflow-x: hidden; flex: 1; min-width: 0; } .cv-search { padding: 14px; }
.cv-listcard { min-width: 0; }
.cv-item { display: flex; gap: 11px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; text-align: left; border: 0; background: transparent; padding: 12px 14px; border-top: 1px solid var(--line); }
.cv-item .top b { flex: 1; min-width: 0; } .cv-item .avatar { flex: none; }
.cv-item:hover { background: rgba(255, 255, 255, .7); } .cv-item.on { background: var(--pick); }
.cv-item .t { flex: 1; min-width: 0; display: block; } .cv-item .top { display: flex; justify-content: space-between; gap: 8px; } .cv-item b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-item .time { font-size: 12px; color: var(--soft); white-space: nowrap; } .cv-item .last { display: block; max-width: 100%; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-item .tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; } .cv-item .unread { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none; align-self: center; }
.cv-head { padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cv-thread { flex: 1; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; background: rgba(255, 255, 255, .35); }
.cv-banner { margin: 12px 18px 0; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; background: var(--warn-l); color: #7A5206; }
.bubble { max-width: 76%; padding: 9px 14px; border-radius: 20px; font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 2px rgba(27, 26, 34, .06); }
.b-in { align-self: flex-start; background: #fff; border-bottom-left-radius: 6px; } .b-out { align-self: flex-end; background: linear-gradient(135deg, #E9DEF8, #F7D8E8); border-bottom-right-radius: 6px; }
.b-staff { align-self: flex-end; background: #FCE9D2; border-bottom-right-radius: 6px; }
.bubble .meta { display: block; font-size: 11px; color: var(--soft); margin-top: 3px; text-align: right; } .bubble .tag { display: block; font-size: 11px; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.cv-sys { align-self: center; font-size: 12px; color: var(--muted); background: rgba(255, 255, 255, .7); padding: 4px 12px; border-radius: 999px; }
.cv-compose { padding: 12px 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.cv-form { display: flex; gap: 8px; }
.cv-side, .cv-grid > .cv-side { padding: 22px 24px; overflow: auto; } .cv-side h4 { margin: 14px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.cv-side dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; margin: 0; font-size: 13.5px; } .cv-side dt { color: var(--muted); } .cv-side dd { margin: 0; text-align: right; }

/* ------------------------------------------------------------------ clientes y paneles */
.cl-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .cl-bar .search { flex: 1; min-width: 240px; max-width: 420px; }
.cl-card { padding: 0; overflow: hidden; } .cl-card .tbl-wrap { max-height: calc(100vh - 290px); }
.drawer-bg { position: fixed; inset: 0; background: rgba(40, 25, 60, .32); backdrop-filter: blur(3px); z-index: 50; display: flex; justify-content: flex-end; }
.drawer { width: min(520px, 100%); height: 100%; background: rgba(252, 249, 253, .97); padding: 24px; overflow: auto; box-shadow: -20px 0 50px rgba(60, 30, 90, .18); display: flex; flex-direction: column; gap: 16px; animation: slide .2s ease-out; }
@keyframes slide { from { transform: translateX(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.modal-bg { position: fixed; inset: 0; background: rgba(40, 25, 60, .38); backdrop-filter: blur(4px); z-index: 60; display: grid; place-items: center; padding: 16px; }
.modal { width: min(560px, 100%); max-height: 92vh; overflow: auto; background: #fcfaff; border-radius: 28px; padding: 24px; box-shadow: 0 30px 70px rgba(60, 30, 90, .3); display: flex; flex-direction: column; gap: 14px; }
.modal.wide { width: min(760px, 100%); }
/* la ✕ de cerrar siempre arriba a la derecha, aunque el título y el subtítulo sean largos */
.modal .card-head, .drawer .card-head { flex-wrap: nowrap; align-items: flex-start; margin-bottom: 0; }
.modal .card-head > :first-child, .drawer .card-head > :first-child { flex: 1; min-width: 0; }
.modal .card-head .icon-btn, .drawer .card-head .icon-btn { flex: none; margin-left: auto; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .form-grid .full { grid-column: 1 / -1; }
.form-grid.cols-sv { grid-template-columns: 2fr 1.4fr 1fr 1fr auto; align-items: end; } .form-grid.cols-ex { grid-template-columns: 2fr 1fr auto; align-items: end; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--btn); color: #fff; padding: 11px 20px; border-radius: 999px; z-index: 80; font-size: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
.bot-wrap { height: calc(100vh - 150px); min-height: 640px; padding: 0; overflow: hidden; } .bot-wrap iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; }

/* ------------------------------------------------------------------ ajustes y vista de recepción */
.link-btn { border: 0; background: none; padding: 0; font-size: 13px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mf label.f { font-weight: 500; margin-bottom: 6px; }
.mf textarea.inp { line-height: 1.5; }
.form-bar { position: sticky; bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--glass-2); backdrop-filter: blur(12px); border-radius: 999px; padding: 10px 12px 10px 20px; box-shadow: var(--shadow); }
.aj-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.day-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid var(--line); } .day-row:first-of-type { border-top: 0; }
.perm { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.perm li { padding-left: 28px; position: relative; } .perm li::before { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.perm.ok li::before { content: "✓"; background: var(--ok-l); color: var(--ok); } .perm.no li::before { content: "✕"; background: var(--bad-l); color: var(--bad); }
.role-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--info-l); color: #2A3C86; border-radius: 22px; padding: 10px 16px; margin-bottom: 14px; font-size: 14px; }
.cv-grid.rc { grid-template-columns: clamp(260px, 22vw, 360px) minmax(0, 1fr); }

/* ------------------------------------------------------------------ adaptable */
@media (min-width: 901px) and (max-width: 1100px) {
  .app { grid-template-columns: 76px minmax(0, 1fr); }
  .side { padding: 16px 8px; align-items: center; }
  .logo { padding: 2px 0 8px; } .logo > div, .nav-group, .side-foot, .demo-tag { display: none; }
  .nav { align-items: center; } .nav-item { width: 52px; height: 48px; padding: 0; justify-content: center; position: relative; }
  .nav-item > span:not(.count) { display: none; }
  .nav-item .count { position: absolute; top: 2px; right: 0; padding: 0 6px; font-size: 11px; }
}
@media (max-width: 1200px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cv-grid { grid-template-columns: clamp(240px, 32vw, 340px) minmax(0, 1fr); } .cv-grid .cv-side-card { display: none; } .cv-grid.rc { grid-template-columns: clamp(240px, 32vw, 340px) minmax(0, 1fr); } .ag-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .aj-grid { grid-template-columns: 1fr; }
  .app { grid-template-columns: 1fr; padding: 10px; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px; border-radius: 24px; }
  .nav { flex-direction: row; flex-wrap: wrap; flex: 1; } .nav-group, .side-foot, .logo span { display: none; } .logo { padding: 0 6px; }
  .g2, .g3, .g4, .g-21 { grid-template-columns: 1fr; } .head h1 { font-size: 30px; } .week { display: none; }
  .cv-grid { grid-template-columns: 1fr; height: auto; } .cv-grid .cv-listcard { max-height: 360px; } .cv-grid .cv-chatcard { height: 70vh; }
  .form-grid, .form-grid.cols-sv, .form-grid.cols-ex { grid-template-columns: 1fr; } .hbar { grid-template-columns: 90px minmax(0, 1fr) auto; }
}
/* Celular y tableta angosta: el menú es una barra delgada arriba (en el celular, solo íconos) en vez de una tarjeta que empuja todo hacia abajo */
@media (max-width: 900px) {
  .side { position: sticky; top: 8px; z-index: 20; flex-wrap: nowrap; padding: 8px 10px; gap: 8px; border-radius: 22px; }
  .logo { padding: 0; } .logo > div { display: none; } .logo i { width: 34px; height: 34px; border-radius: 12px; }
  .nav { flex-wrap: nowrap; gap: 2px; min-width: 0; }
  .nav-item { width: auto; flex: 1 1 0; min-width: 0; justify-content: center; gap: 8px; padding: 9px 12px; position: relative; font-size: 14px; }
  .nav-item .count { margin-left: 0; }
}
@media (max-width: 640px) {
  .nav-item > span:not(.count) { display: none; }
  .nav-item { padding: 9px 6px; }
  .nav-item .count { position: absolute; top: 0; right: 2px; padding: 0 5px; font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } * { transition: none !important; } }
.plan-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--warn-l); color: #7A5206; border-radius: 22px; padding: 10px 16px; margin-bottom: 14px; font-size: 14px; }
.status-card { background: rgba(255, 255, 255, .72); border-radius: 22px; padding: 6px; margin-top: 12px; display: flex; flex-direction: column; }
.st-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 16px; padding: 9px 11px; font: inherit; color: inherit; cursor: pointer; }
.st-row:hover { background: rgba(255, 255, 255, .85); }
.st-row b { font-weight: 500; font-size: 13.5px; display: block; line-height: 1.3; } .st-row small { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.st-dot { width: 9px; height: 9px; border-radius: 50%; background: #B9B4C6; flex: none; margin-top: 5px; } .st-dot.ok { background: #2E9E6B; } .st-dot.warn { background: #E0A93B; } .st-dot.bad { background: #CF4A5B; }