/* Panel de alo · Turno Seguro (HTML + HTMX). Misma identidad que el panel anterior en Flet. */
:root {
--primary:#0F5C68; --primary-dark:#0B454E; --bg:#F5F6FB; --surface:#fff; --border:#E5E7EB;
--text:#111827; --muted:#6B7280; --success:#16A34A; --success-bg:#DCFCE7; --warning:#D97706; --warning-bg:#FEF3C7;
--danger:#DC2626; --danger-bg:#FEE2E2; --neutral:#F3F4F6; --tint:#E5F2F3; --on-primary:#fff; --accent:#E8993A;
--shadow:0 4px 16px rgba(15,23,42,.08); --radius:16px; color-scheme:light;
}
:root[data-tema="dark"] {
--primary:#3FB6C4; --primary-dark:#2C8A96; --bg:#0E141B; --surface:#161F29; --border:#263241;
--text:#E8EDF3; --muted:#93A1B2; --success:#4ADE80; --success-bg:#12331F; --warning:#FBBF24; --warning-bg:#3A2D0B;
--danger:#F87171; --danger-bg:#3B1618; --neutral:#1C2733; --tint:#15303A; --on-primary:#06222A;
--shadow:0 4px 16px rgba(0,0,0,.4); color-scheme:dark;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); min-height:100vh;
font:15px/1.5 Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
a { color:var(--primary); }
h1,h2,h3 { margin:0; }
[hidden] { display:none !important; }
/* fondo decorativo: dos trazos curvos muy tenues */
.fondo { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.9;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cpath d='M-50 230C300 40 800 420 1150 200S1500 120 1700 260' fill='none' stroke='%230F5C68' stroke-opacity='.14' stroke-width='2.5'/%3E%3Cpath d='M-50 700C260 860 700 520 1050 690S1450 640 1700 580' fill='none' stroke='%23E8993A' stroke-opacity='.16' stroke-width='2.5'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.wrap { max-width:1280px; margin:0 auto; padding:16px 24px 32px; }
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0 10px; }
.top .izq { display:flex; align-items:center; gap:12px; min-width:0; }
.top img.logo { height:44px; width:auto; }
.saludo { font-size:22px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top .der { display:flex; align-items:center; gap:4px; }
/* botones */
.btn { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--primary); background:var(--primary);
color:var(--on-primary); padding:9px 16px; border-radius:10px; font:inherit; font-weight:600; cursor:pointer;
text-decoration:none; line-height:1.2; }
.btn:hover { background:var(--primary-dark); border-color:var(--primary-dark); }
.btn-ghost { background:transparent; color:var(--primary); border-color:transparent; }
.btn-ghost:hover { background:var(--tint); border-color:transparent; }
.btn-out { background:transparent; color:var(--text); border-color:var(--border); }
.btn-out:hover { background:var(--neutral); }
.btn-ok { background:transparent; color:var(--success); border-color:var(--border); }
.btn-ok.on { background:var(--success-bg); border-color:var(--success); }
.btn-bad { background:transparent; color:var(--danger); border-color:var(--border); }
.btn-bad.on { background:var(--danger-bg); border-color:var(--danger); }
.btn-danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-danger:hover { background:#b91c1c; border-color:#b91c1c; }
.btn-sm { padding:6px 10px; font-size:13px; }
.btn-icon { padding:7px; border-radius:50%; width:34px; height:34px; justify-content:center; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.ic { width:1.15em; height:1.15em; flex:none; vertical-align:-.2em; }
/* pestañas tipo carpeta */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { display:flex; align-items:center; gap:8px; padding:11px 18px; border-radius:12px 12px 0 0; text-decoration:none;
color:var(--muted); font-weight:600; background:var(--neutral); white-space:nowrap; border:1px solid transparent;
border-bottom:none; margin-bottom:-1px; }
.tab:hover { color:var(--text); }
.tab.activa { background:var(--surface); color:var(--text); border-color:var(--border); border-top:3px solid var(--primary);
padding-top:9px; }
/* tarjetas y secciones */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px;
box-shadow:var(--shadow); }
.card + .card { margin-top:16px; }
.contenido { padding-top:16px; }
.sec-titulo { font-size:13px; font-weight:700; color:var(--muted); margin:0 0 8px; }
.ayuda { color:var(--muted); font-size:13px; margin:0 0 12px; }
hr { border:none; border-top:1px solid var(--border); margin:20px 0; }
.vacio { color:var(--muted); font-style:italic; padding:16px 0; }
.fila-item { display:flex; align-items:center; gap:10px; background:var(--neutral); border-radius:10px;
padding:6px 8px 6px 16px; margin-bottom:8px; }
.fila-item .txt { flex:1; min-width:0; }
.fila-item .muted { color:var(--muted); font-size:13px; }
/* formularios */
label { display:block; font-size:12px; color:var(--muted); font-weight:600; margin:0 0 4px; }
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=time],
input[type=tel],select,textarea { width:100%; font:inherit; color:var(--text); background:var(--neutral);
border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
input:focus,select:focus,textarea:focus { outline:2px solid var(--primary); outline-offset:-1px; background:var(--surface); }
textarea { resize:vertical; min-height:64px; }
.campo { margin-bottom:12px; }
.fila { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.fila > .campo { flex:1 1 150px; margin-bottom:0; }
.fila > .campo.chico { flex:0 1 120px; }
.chk { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text); font-weight:500; margin:0; cursor:pointer; }
.chk input { width:18px; height:18px; accent-color:var(--primary); }
.err { background:var(--danger-bg); color:var(--danger); border-radius:8px; padding:10px 12px; font-size:13px; font-weight:600;
margin:10px 0; }
.info { background:var(--tint); color:var(--primary); border-radius:8px; padding:10px 12px; font-size:13px; font-weight:600;
margin:10px 0; }
.ok { background:var(--success-bg); color:var(--success); border-radius:8px; padding:10px 12px; font-size:13px;
font-weight:600; margin:10px 0; }
.switch { position:relative; width:42px; height:24px; flex:none; }
.switch input { opacity:0; width:0; height:0; }
.switch span { position:absolute; inset:0; background:var(--border); border-radius:999px; transition:.2s; cursor:pointer; }
.switch span::before { content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff;
border-radius:50%; transition:.2s; }
.switch input:checked + span { background:var(--primary); }
.switch input:checked + span::before { transform:translateX(18px); }
/* chips */
.chip { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; background:var(--neutral);
color:var(--muted); }
.chip.confirmado,.chip.activo { background:var(--success-bg); color:var(--success); }
.chip.pendiente,.chip.reprogramado,.chip.pendiente_pago { background:var(--warning-bg); color:var(--warning); }
.chip.cancelado,.chip.suspendido { background:var(--danger-bg); color:var(--danger); }
/* tabla */
.tabla-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:13px; color:var(--text); background:var(--neutral); padding:12px 14px; white-space:nowrap; }
td { padding:12px 14px; border-top:1px solid var(--border); vertical-align:middle; }
th:first-child { border-radius:10px 0 0 10px; } th:last-child { border-radius:0 10px 10px 0; }
td.acc { white-space:nowrap; text-align:right; }
.barra-busq { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.barra-busq input { flex:1; }
.cab-fila { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
/* agenda */
.agenda-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start; }
.ag-cab { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ag-cab .titulo { flex:1; text-align:center; min-width:180px; }
.ag-cab .titulo h2 { font-size:22px; font-weight:800; text-transform:none; }
.ag-cab .titulo small { color:var(--muted); }
.leyenda { display:flex; flex-wrap:wrap; gap:6px 16px; margin:14px 0 0; }
.leyenda .p { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.avatar { border-radius:50%; object-fit:cover; display:inline-flex; align-items:center; justify-content:center;
font-weight:800; background:var(--tint); color:var(--primary); border:3px solid var(--border); flex:none; overflow:hidden; }
.tl-scroll { margin-top:16px; }
.tl { position:relative; }
.tl-fila { position:absolute; left:0; right:0; border-top:1px solid var(--border); display:flex; }
.tl-fila .hh { width:56px; font-size:11px; color:var(--muted); text-align:right; padding:2px 8px 0 0; flex:none; }
.tl-fila.pasado { background:var(--neutral); }
.tl-fila.pasado .hh { opacity:.55; }
.tl-fila.libre { cursor:pointer; }
.tl-fila.libre:hover { background:var(--tint); }
.tl-sep { position:absolute; left:0; right:0; background:var(--neutral); color:var(--muted); font-size:10px; font-style:italic;
text-align:center; display:flex; align-items:center; justify-content:center; }
.tl-zona { position:absolute; left:56px; right:0; top:0; bottom:0; pointer-events:none; }
.blk { position:absolute; pointer-events:auto; border-radius:10px; padding:5px 10px; overflow:hidden; cursor:pointer;
border-left:4px solid var(--primary); background:var(--tint); font-size:12px; line-height:1.3;
box-shadow:0 1px 3px rgba(0,0,0,.08); }
.blk b { display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.blk small { color:var(--muted); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.blk.no-asistio { border-left-color:var(--danger) !important; background:var(--danger-bg); }
.blk.asistio { opacity:.85; }
.blk.cancelado { border-left-color:var(--muted) !important; background:var(--neutral); opacity:.6; text-decoration:line-through; }
.blk.pagopend::after { content:"pago pendiente"; position:absolute; right:6px; top:4px; font-size:10px; color:var(--warning);
font-weight:700; }
.tl-ahora { position:absolute; left:56px; right:0; height:2px; background:var(--danger); pointer-events:none; }
.banner-box { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--neutral);
min-height:120px; display:flex; align-items:center; justify-content:center; color:var(--muted); text-align:center; padding:0; }
.banner-box img { width:100%; display:block; }
.banner-box p { padding:20px; margin:0; font-size:13px; }
.cal { padding:16px; }
.cal-cab { display:flex; align-items:center; justify-content:space-between; font-weight:700; margin-bottom:8px; }
.cal-g { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; font-size:13px; }
.cal-g .dn { color:var(--muted); font-size:11px; padding:4px 0; }
.cal-g a { display:flex; align-items:center; justify-content:center; height:34px; border-radius:9px; text-decoration:none;
color:var(--text); position:relative; }
/* tono segun que tan cargado esta el dia: mas oscuro = menos lugar libre */
.cal-g a.n1, .cal-ley .n1 { background:color-mix(in srgb, var(--primary) 16%, transparent); }
.cal-g a.n2, .cal-ley .n2 { background:color-mix(in srgb, var(--primary) 32%, transparent); }
.cal-g a.n3, .cal-ley .n3 { background:color-mix(in srgb, var(--primary) 58%, transparent); }
.cal-g a.n4, .cal-ley .n4 { background:var(--primary); }
.cal-g a.n3, .cal-g a.n4 { color:var(--on-primary); font-weight:600; }
.cal-g a.pasado.n1, .cal-g a.pasado.n2, .cal-g a.pasado.n3, .cal-g a.pasado.n4 { opacity:.7; }
.cal-g a:hover { box-shadow:inset 0 0 0 1.5px var(--primary); }
.cal-g a.fuera { color:var(--border); }
.cal-g a.cerrado { color:var(--muted); opacity:.6; }
.cal-g a.hoy { font-weight:800; }
.cal-g a.hoy::after { content:""; position:absolute; bottom:4px; width:12px; height:2px; border-radius:2px; background:currentColor; }
.cal-g a.sel { box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent); z-index:1; opacity:1; }
.cal-ley { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:10px; font-size:11px; color:var(--muted); }
.cal-ley i { width:14px; height:14px; border-radius:4px; }
.cal-ley span { margin:0 4px; }
/* equipo / opciones */
.dos-col { display:grid; grid-template-columns:340px minmax(0,1fr); gap:28px; }
.paleta { display:flex; flex-wrap:wrap; gap:8px; }
.paleta label { margin:0; cursor:pointer; }
.paleta input { display:none; }
.paleta span { display:block; width:30px; height:30px; border-radius:50%; border:3px solid transparent; }
.paleta input:checked + span { border-color:var(--text); }
/* modal */
dialog#modal { border:none; border-radius:var(--radius); padding:0; background:var(--surface); color:var(--text);
box-shadow:0 20px 60px rgba(0,0,0,.35); width:min(560px,calc(100vw - 24px)); max-height:calc(100vh - 24px); }
dialog#modal::backdrop { background:rgba(15,23,42,.5); }
dialog.cartel-plan { border:none; border-radius:var(--radius); padding:0; background:var(--surface); color:var(--text);
box-shadow:0 20px 60px rgba(0,0,0,.35); width:min(460px,calc(100vw - 24px)); }
dialog.cartel-plan::backdrop { background:rgba(15,23,42,.5); }
dialog.cartel-plan p { margin:0 0 10px; }
.plan-vencido .rec-tit { margin-top:6px; }
.plan-vencido .ayuda { margin:0 0 12px; }
.modal-in { padding:22px 24px; max-height:calc(100vh - 24px); overflow:auto; }
.modal-in h3 { font-size:19px; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.modal-acc { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap; }
.sugs { display:grid; gap:6px; margin-top:8px; }
.sug { background:var(--neutral); border-radius:8px; padding:8px 12px; cursor:pointer; font-size:13px; border:none; text-align:left;
color:var(--text); font:inherit; }
.sug:hover { background:var(--tint); }
.sug small { display:block; color:var(--muted); }
.nota { background:var(--neutral); border-radius:10px; padding:8px 12px; margin-bottom:8px; }
.nota small { color:var(--muted); font-size:11px; display:block; }
.htmx-indicator { opacity:0; transition:opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity:1; }
#toast { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:var(--text); color:var(--bg);
padding:10px 18px; border-radius:10px; font-weight:600; z-index:99; }
/* pie */
.pie { margin-top:28px; padding-top:14px; border-top:1px solid var(--border); font-size:12px; color:var(--muted); }
.pie .marcas { display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; margin-bottom:6px; }
.pie .marcas span { display:flex; align-items:center; gap:6px; }
.pie .marcas img { height:16px; width:auto; }
.pie .contacto { display:flex; flex-wrap:wrap; gap:0 6px; margin-bottom:4px; }
/* login */
.login-pag { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; gap:24px; }
.login-card { width:min(380px,100%); text-align:center; }
.login-card img.logo { width:min(300px,80%); height:auto; margin:0 auto 6px; display:block; }
.login-card form { text-align:left; }
.login-banner { width:260px; height:505px; border-radius:20px; overflow:hidden; border:1px solid var(--border);
box-shadow:var(--shadow); }
.login-banner img { width:100%; height:100%; object-fit:cover; display:block; }
.theme-fab { position:fixed; top:14px; right:16px; }
@media (max-width:900px) {
.agenda-grid { grid-template-columns:1fr; }
.dos-col { grid-template-columns:1fr; }
.login-banner { display:none; }
}
@media (max-width:600px) {
.wrap { padding:10px 12px 24px; }
.card { padding:16px; }
.saludo { font-size:18px; }
.top img.logo { height:38px; }
.tab { padding:10px 14px; }
.modal-in { padding:18px 16px; }
.btn-txt-hide { display:none; }
}
.pie .contacto a { display:inline-flex; align-items:center; gap:4px; margin-right:14px; text-decoration:none; }
#btn-avisos.on { color:var(--accent); }
#btn-avisos.on svg { fill:currentColor; }
/* =====================================================================
Rediseño 2026-09: misma linea visual que aloturnos.com.ar
(mas aire, tipografia grande, tarjetas redondeadas, menos ruido).
Va al final para pisar lo anterior sin tocarlo.
===================================================================== */
:root {
--primary:#2F5D6B; --primary-dark:#244A55; --bg:#F7FAFB; --surface:#fff; --border:#E3EAEE;
--text:#16232B; --muted:#56646D; --neutral:#F1F5F7; --tint:#E6F0F3; --accent:#E8993A;
--shadow:0 1px 2px rgba(22,35,43,.04), 0 8px 24px rgba(22,35,43,.05); --radius:24px;
}
:root[data-tema="dark"] {
--primary:#6FB3C4; --primary-dark:#8CC4D2; --bg:#0D1A20; --surface:#14242C; --border:#23363F;
--text:#EAF1F4; --muted:#9FB5BE; --neutral:#1A2C35; --tint:#18323C; --on-primary:#0D1A20;
--shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}
body { font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; }
.fondo { display:none; }
.wrap { max-width:1240px; padding:0 28px 40px; }
/* encabezado: barra fija y liviana, como la de la pagina */
.top { position:sticky; top:0; z-index:20; margin:0 -28px; padding:12px 28px;
background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(1.4) blur(12px);
-webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--border); }
.top img.logo { height:40px; }
.top .quien { display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.top .quien b { font-size:17px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top .quien small { color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* pestañas: control segmentado (escritorio) / barra inferior tipo app (celular) */
.tabs { border:0; margin:22px 0 0; padding:4px; gap:2px; background:var(--neutral); border-radius:999px;
display:inline-flex; max-width:100%; }
.tab { border:0 !important; border-radius:999px; background:transparent; padding:9px 18px !important; margin:0;
font-size:14.5px; color:var(--muted); }
.tab.activa { background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(22,35,43,.12); }
.contenido { padding-top:22px; }
/* tarjetas y titulos de seccion */
.card { border-radius:var(--radius); padding:28px; }
.card + .card { margin-top:18px; }
.sec-h { font-size:24px; font-weight:800; letter-spacing:-.03em; line-height:1.15; margin:0 0 6px; }
.sec-sub { color:var(--muted); font-size:15px; margin:0 0 20px; max-width:640px; }
.sec-titulo { font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.fila-item { border-radius:14px; padding:8px 10px 8px 16px; background:var(--neutral); }
hr { margin:26px 0; }
/* botones y campos: mas redondos */
.btn { border-radius:12px; padding:10px 18px; }
.btn-sm { border-radius:10px; padding:7px 12px; }
.btn-icon { border-radius:50%; padding:7px; }
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=time],
input[type=tel],select,textarea { border-radius:12px; padding:11px 14px; background:var(--surface); }
label { font-size:12.5px; }
/* subir archivo: boton propio en vez del control del navegador */
.subir { display:inline-flex; align-items:center; gap:8px; cursor:pointer; margin:0; font-size:14px; font-weight:600;
color:var(--primary); background:var(--tint); border-radius:12px; padding:9px 14px; }
.subir input { display:none; }
.subir .nombre-arch { color:var(--muted); font-weight:500; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ---- agenda ---- */
.resumen { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.dato { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:12px 18px; box-shadow:var(--shadow);
display:flex; align-items:baseline; gap:10px; }
.dato b { font-size:28px; line-height:1; font-weight:800; letter-spacing:-.05em; color:var(--primary); }
.dato span { color:var(--muted); font-size:13.5px; line-height:1.2; }
.dato.alerta b { color:var(--accent); }
.dato.baja b { color:var(--muted); }
.ag-cab .titulo h2 { font-size:26px; letter-spacing:-.03em; }
.blk { border-radius:12px; box-shadow:none; border:1px solid color-mix(in srgb, var(--primary) 12%, transparent); border-left-width:4px; }
.blk.pagopend::after { content:none; }
.blk .tag { display:inline-block; margin-left:6px; font-size:10.5px; font-weight:700; color:var(--accent);
background:color-mix(in srgb, var(--accent) 14%, transparent); padding:0 6px; border-radius:999px; vertical-align:1px; }
.blk.pendiente { background:var(--surface); border-style:dashed; border-left-style:solid; }
.tl-fila .hh { font-variant-numeric:tabular-nums; }
.tl-ahora::before { content:""; position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--danger); }
.cal { padding:20px; }
.cal-cab { font-size:16px; letter-spacing:-.01em; }
.banner-box { min-height:0; border-radius:20px; margin-top:14px; }
.banner-box.vacio-b { border-style:dashed; background:transparent; }
.banner-box p { padding:14px; }
.leyenda-estados { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:12px; color:var(--muted); }
.leyenda-estados i { display:inline-block; width:14px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px;
background:var(--tint); border:1px solid color-mix(in srgb, var(--primary) 25%, transparent); }
.leyenda-estados i.pend { background:var(--surface); border-style:dashed; }
.leyenda-estados i.sena { background:color-mix(in srgb, var(--accent) 25%, transparent); border-color:var(--accent); }
/* ---- servicios: tarjetas ---- */
.serv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.serv { background:var(--neutral); border-radius:20px; padding:18px 18px 14px; display:flex; flex-direction:column; gap:10px; }
.serv h3 { font-size:18px; letter-spacing:-.02em; }
.serv .meta { display:flex; gap:8px; flex-wrap:wrap; }
.pill { display:inline-block; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:3px 10px;
font-size:13px; font-weight:600; color:var(--muted); }
.pill.precio { color:var(--text); }
.serv .acc { display:flex; gap:2px; justify-content:flex-end; margin-top:auto; }
/* ---- whatsapp: estado grande ---- */
.estado-hero { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.estado-hero .ico-g { width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center;
background:var(--neutral); color:var(--muted); flex:none; }
.estado-hero.on .ico-g { background:#DCF5E4; color:#127A3F; }
.estado-hero .txt { flex:1; min-width:220px; }
.estado-hero h2 { font-size:24px; font-weight:800; letter-spacing:-.03em; }
.estado-hero p { margin:4px 0 0; color:var(--muted); }
details.avanzado { margin-top:22px; border-top:1px solid var(--border); padding-top:14px; }
details.avanzado summary { cursor:pointer; color:var(--muted); font-weight:600; font-size:14px; }
details.avanzado[open] summary { margin-bottom:12px; }
.switch input:disabled + span { opacity:.45; cursor:not-allowed; }
/* ---- clientes ---- */
td .tel { font-variant-numeric:tabular-nums; white-space:nowrap; }
/* ---- pie ---- */
.pie { margin-top:40px; }
/* ---- celular ---- */
@media (max-width:760px) {
.wrap { padding:0 16px calc(96px + env(safe-area-inset-bottom)); }
.top { margin:0 -16px; padding:10px 16px; }
.top img.logo { height:34px; }
.top .quien b { font-size:16px; }
.tabs { position:fixed; left:0; right:0; bottom:0; z-index:30; margin:0; display:flex; justify-content:space-around;
border-radius:0; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--surface) 92%, transparent);
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--border); overflow:visible; }
.tab { flex:1; flex-direction:column; gap:3px; padding:6px 2px !important; font-size:11px; border-radius:12px; min-width:0; }
.tab .ic { width:22px !important; height:22px !important; }
.tab.activa { background:transparent; box-shadow:none; color:var(--primary); }
.contenido { padding-top:14px; }
.card { padding:18px; border-radius:20px; }
.resumen { gap:6px; margin-bottom:12px; }
.dato { padding:8px 6px; border-radius:14px; flex-direction:column; align-items:center; gap:3px; text-align:center; }
.dato b { font-size:22px; }
.dato span { font-size:10.5px; }
.ag-cab .titulo h2 { font-size:20px; }
.ag-cab > .btn:not(.btn-icon) { width:100%; justify-content:center; order:5; }
.blk .tag { display:none; }
.blk.pagopend { border-left-color:var(--accent) !important; }
.sec-h { font-size:21px; }
#toast { bottom:calc(84px + env(safe-area-inset-bottom)); }
/* clientes: la tabla pasa a tarjetas */
#tabla-clientes thead { display:none; }
#tabla-clientes, #tabla-clientes tbody, #tabla-clientes tr, #tabla-clientes td { display:block; width:100%; }
#tabla-clientes tr { position:relative; background:var(--neutral); border-radius:16px; padding:12px 14px; margin-bottom:10px; }
#tabla-clientes tr[hidden] { display:none; }
#tabla-clientes td { border:0; padding:2px 0; font-size:14px; }
#tabla-clientes td[data-l] { display:flex; justify-content:space-between; gap:12px; color:var(--text) !important; }
#tabla-clientes td[data-l]::before { content:attr(data-l); color:var(--muted); }
#tabla-clientes td.vacia { display:none; }
#tabla-clientes td.acc { position:absolute; top:6px; right:6px; width:auto; }
.tabla-wrap { overflow:visible; }
}
/* ---- horarios de atencion (Opciones) ---- */
.semana { display:grid; gap:8px; }
.semana .dia { display:flex; align-items:center; gap:16px; background:var(--neutral); border-radius:14px; padding:10px 14px; min-height:52px; }
.semana .dia .nom { width:96px; flex:none; font-weight:700; }
.semana .dia.cerrado .nom { color:var(--muted); font-weight:600; }
.semana .franjas { display:flex; flex-wrap:wrap; gap:8px; }
.franja { display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border);
border-radius:999px; padding:4px 6px 4px 14px; font-weight:600; font-variant-numeric:tabular-nums; }
.franja button { border:0; background:transparent; color:var(--muted); font-size:18px; line-height:1; width:26px; height:26px;
border-radius:50%; cursor:pointer; }
.franja button:hover { background:var(--danger-bg); color:var(--danger); }
.cerrado-txt { color:var(--muted); font-size:14px; }
.nuevo-horario { margin-top:22px; padding-top:20px; border-top:1px solid var(--border); }
.nuevo-horario .sub-t { font-weight:700; margin:0 0 10px; }
.dias-pick { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.dias-pick label { margin:0; cursor:pointer; }
.dias-pick input { display:none; }
.dias-pick label span { display:inline-block; min-width:52px; text-align:center; padding:8px 12px; border-radius:999px;
border:1px solid var(--border); background:var(--surface); color:var(--text); font-weight:600; font-size:14px; }
.dias-pick input:checked + span { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.dias-pick .atajos { display:inline-flex; gap:4px; margin-left:4px; }
@media (max-width:760px) {
.semana .dia { flex-direction:column; align-items:flex-start; gap:6px; }
.dias-pick label span { min-width:44px; padding:7px 8px; }
}
/* login: olvide mi contraseña */
.olvide { display:block; text-align:center; margin-top:14px; font-size:14px; font-weight:600; text-decoration:none; }
.olvide:hover { text-decoration:underline; }
/* ---- agenda: selector dia/semana y vista semanal ---- */
.vistas { display:inline-flex; background:var(--neutral); border-radius:999px; padding:3px; margin-bottom:14px; }
.vistas a { padding:6px 16px; border-radius:999px; text-decoration:none; color:var(--muted); font-weight:600; font-size:14px; }
.vistas a.on { background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(22,35,43,.12); }
.sem-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin-top:16px; }
.sem-dia { background:var(--neutral); border-radius:16px; padding:10px 8px; min-height:220px; display:flex; flex-direction:column; gap:6px; }
.sem-dia.cerrado { background:transparent; border:1px dashed var(--border); }
.sem-dia.pasado { opacity:.72; }
.sem-dia.hoy { background:var(--tint); box-shadow:inset 0 0 0 2px var(--primary); }
.sem-cab { display:flex; align-items:baseline; gap:6px; text-decoration:none; color:var(--text); padding:0 4px; }
.sem-cab .dn { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.sem-cab .num { font-size:22px; font-weight:800; letter-spacing:-.03em; }
.sem-dia.hoy .sem-cab .num { color:var(--primary); }
.sem-cab .cant { margin-left:auto; font-size:11px; font-weight:700; background:var(--surface); border-radius:999px; padding:1px 8px; color:var(--muted); }
.sem-cab:hover .num { text-decoration:underline; }
.sem-dia .hor { color:var(--muted); font-size:11px; padding:0 4px; min-height:15px; }
.sem-turnos { display:flex; flex-direction:column; gap:5px; }
.st { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--primary); border-radius:10px;
padding:5px 7px; font-size:12px; line-height:1.3; cursor:pointer; overflow:hidden; }
.st:hover { box-shadow:var(--shadow); }
.st b { font-variant-numeric:tabular-nums; }
.st .cli { font-weight:600; }
.st .cli, .st small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st small { display:block; color:var(--muted); font-size:11px; }
.st.pendiente { border-style:dashed; border-left-style:solid; }
.st.pagopend { border-left-color:var(--accent) !important; background:color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.st.no-asistio { border-left-color:var(--danger) !important; }
.st.cancelado { opacity:.55; text-decoration:line-through; border-left-color:var(--muted); }
.sem-mas { margin-top:auto; align-self:center; border:1px dashed var(--border); background:transparent; color:var(--muted);
width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sem-mas:hover { color:var(--primary); border-color:var(--primary); background:var(--surface); }
@media (max-width:1100px) and (min-width:761px) {
.st .cli { display:block; }
}
@media (max-width:760px) {
.vistas { display:flex; }
.vistas a { flex:1; text-align:center; }
.sem-grid { grid-template-columns:1fr; gap:8px; }
.sem-dia { min-height:0; display:grid; grid-template-columns:64px 1fr auto; column-gap:10px; row-gap:4px; align-items:start; padding:10px 12px; }
.sem-cab { grid-row:1 / span 2; flex-direction:column; align-items:flex-start; gap:0; padding:0; }
.sem-cab .cant { margin:4px 0 0; }
.sem-dia .hor { grid-column:2; padding:0; }
.sem-turnos { grid-column:2; }
.sem-mas { grid-column:3; grid-row:1; margin:0; }
.sem-dia.cerrado .sem-turnos:empty { display:none; }
.st .cli { font-size:13px; }
}
/* vista semanal: la semana usa todo el ancho; el almanaque chico y el banner pasan abajo */
.agenda-grid.semanal { grid-template-columns:1fr; }
.agenda-grid.semanal aside { display:grid; grid-template-columns:minmax(0,340px) minmax(0,340px); gap:18px; align-items:start; }
.agenda-grid.semanal aside .banner-box { margin-top:0; }
.agenda-grid.semanal aside form { grid-column:2; margin-top:-8px !important; }
@media (max-width:760px) { .agenda-grid.semanal aside { grid-template-columns:1fr; } .agenda-grid.semanal aside form { grid-column:1; } }
@media (max-width:760px) {
.sem-dia.sin-turnos { grid-template-columns:auto 1fr auto; padding:8px 12px; align-items:center; }
.sem-dia.sin-turnos .sem-cab { grid-row:1; flex-direction:row; align-items:baseline; gap:6px; min-width:64px; }
.sem-dia.sin-turnos .sem-cab .num { font-size:18px; }
.sem-dia.sin-turnos .hor { grid-row:1; }
.sem-dia.sin-turnos .sem-turnos { display:none; }
}
/* ---- escribirle al cliente por WhatsApp ---- */
.contacto-cli { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 10px; }
.contacto-cli .tel { font-variant-numeric:tabular-nums; color:var(--muted); font-size:14px; }
.btn-wa-sm { background:#128C4A; border-color:#128C4A; color:#fff; padding:7px 14px; font-size:14px; border-radius:999px; }
.btn-wa-sm:hover { background:#0E7A40; border-color:#0E7A40; }
.btn-wa-ic { color:#128C4A; }
/* ---- cobro: sesion terminada, QR y estado del pago ---- */
.btn-cobrar { width:100%; justify-content:center; margin:0 0 10px; padding:12px 18px; font-size:15px; }
.cobro-desglose { background:var(--neutral); border-radius:14px; padding:10px 14px; display:grid; gap:4px; }
.cobro-desglose div { display:flex; justify-content:space-between; font-size:14px; }
.cobro-desglose span { color:var(--muted); }
.cobro-total { display:flex; justify-content:space-between; align-items:baseline; margin:16px 0 4px; font-weight:600; }
.cobro-total b { font-size:28px; letter-spacing:-.03em; color:var(--primary); }
.cobro-acc { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.cobro-acc .btn { justify-content:center; }
.cobro-qr h3 { font-size:22px; }
.qr-caja { background:#fff; border-radius:18px; padding:14px; width:min(280px,100%); aspect-ratio:1; margin:0 auto; box-shadow:var(--shadow);
border:1px solid var(--border); }
.qr-caja svg { display:block; width:100%; height:100%; }
.qr-ayuda { text-align:center; color:var(--muted); font-size:13px; margin:10px 0 12px; }
.pago-espera, .pago-ok { display:flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; padding:10px 12px;
font-weight:700; font-size:14px; }
.pago-espera { background:var(--neutral); color:var(--muted); }
.pago-espera .punto { width:9px; height:9px; border-radius:50%; background:var(--accent); animation:latido 1.2s infinite; }
.pago-ok { background:#DCF5E4; color:#127A3F; font-size:16px; padding:14px; }
@keyframes latido { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.7); } }
.cobro-qr .cobro-acc { flex-direction:row; justify-content:center; flex-wrap:wrap; }
/* ---- mensajes de clientes ---- */
.badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
background:var(--accent); color:#fff; font-size:11.5px; font-weight:800; margin-left:6px; vertical-align:2px; letter-spacing:0; }
.tab .badge { margin-left:4px; }
.mensajes { display:grid; gap:10px; margin-top:14px; }
.msj { background:var(--neutral); border-radius:16px; padding:12px 14px; }
.msj.nuevo { background:var(--surface); border:1px solid var(--border); box-shadow:inset 3px 0 0 var(--accent); }
.msj-cab { display:flex; justify-content:space-between; gap:10px; }
.msj-cab small { color:var(--muted); white-space:nowrap; }
.msj p { margin:6px 0 10px; white-space:pre-wrap; }
.msj-acc { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:760px) {
.tab { position:relative; }
.tab .badge { position:absolute; top:0; right:calc(50% - 22px); margin:0; min-width:18px; height:18px; font-size:10.5px; }
}
/* ---- detalle del turno: mismo estilo del panel, botones en pares parejos ---- */
.td { display:flex; flex-direction:column; gap:12px; }
.td-cab { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.td-hora { font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1.1; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.td-hora .chip { font-size:12px; letter-spacing:0; }
.td-fecha { color:var(--muted); font-size:14px; margin-top:2px; }
.td-x { margin:-6px -4px 0 0; color:var(--muted); flex:none; }
.modal-in.td { overflow-x:hidden; }
.td-cli { display:flex; align-items:center; gap:12px; background:var(--neutral); border-radius:16px; padding:12px 14px; }
.td-av { width:44px; height:44px; font-size:17px; }
.td-cli-txt { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.td-cli-txt b { font-size:16px; }
.td-cli-txt small { color:var(--muted); font-size:13.5px; }
.td-cli-txt .tel { font-variant-numeric:tabular-nums; }
.td-par { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
.td-par .btn { overflow:hidden; text-overflow:ellipsis; }
@media (max-width:520px) { .solo-ancho { display:none; } }
.td-par > form { display:flex; margin:0; }
.td-par .btn, .td-ancho { width:100%; justify-content:center; min-height:46px; white-space:nowrap; }
.td-ancho { font-size:15px; }
.td-peligro { color:var(--danger) !important; }
.td-peligro:hover { background:var(--danger-bg) !important; }
/* botones de marca */
.btn-marca img { width:22px; height:22px; object-fit:contain; flex:none; }
.btn-marca.wa { background:var(--surface); border-color:var(--border); color:var(--text); text-decoration:none; }
.btn-marca.wa:hover { background:#E8F8EE; border-color:#25D366; }
.btn-marca.mp { background:#009EE3; border-color:#009EE3; color:#fff; }
.btn-marca.mp:hover { background:#0089C6; border-color:#0089C6; }
.btn-marca.mp img { background:#fff; border-radius:50%; padding:2px; width:26px; height:26px; }
:root[data-tema="dark"] .btn-marca.wa:hover { background:#153A26; }
.td-det { margin:0; color:var(--muted); font-size:13.5px; }
.td-cobro { border:1px solid var(--border); border-radius:16px; padding:4px 14px; }
.td-cobro div { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; font-size:14px; }
.td-cobro div + div { border-top:1px solid var(--border); }
.td-cobro span { color:var(--muted); }
.td-cobro b { font-variant-numeric:tabular-nums; white-space:nowrap; }
.td-cobro .tot b { font-size:16px; }
.td-cobro em { font-style:normal; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:1px; }
.td-cobro em.ok { background:var(--success-bg); color:var(--success); }
.td-cobro em.pend { background:var(--warning-bg); color:var(--warning); }
.td-pagado { display:flex; align-items:center; justify-content:center; gap:10px; min-height:46px; border-radius:12px;
background:var(--success-bg); color:var(--success); font-weight:700; }
.td-pagado img { width:24px; height:24px; background:#fff; border-radius:50%; padding:2px; }
.td-aviso { display:flex; align-items:center; gap:8px; margin:0; color:var(--muted); font-size:13.5px; background:var(--neutral);
border-radius:12px; padding:10px 12px; }
.td-nota { border-top:1px solid var(--border); padding-top:10px; }
.td-nota summary { cursor:pointer; color:var(--primary); font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; list-style:none; }
.td-nota summary::-webkit-details-marker { display:none; }
.td-nota form { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.td-nota form .btn { align-self:flex-end; }
@media (max-width:420px) { .td-par .btn { font-size:14px; padding-left:10px; padding-right:10px; } .btn-marca img { width:20px; height:20px; } }
/* =====================================================================
Cabecera compacta: pestañas dentro de la barra, numeros en una franja,
encabezado de la agenda en una sola linea
===================================================================== */
.top { gap:16px; background:var(--bg); border-bottom:1px solid var(--border); }
.top .izq { flex:none; }
.top .der { flex:none; }
.top .tabs { margin:0 auto; padding:3px; background:var(--neutral); }
.top .tab { padding:7px 14px !important; font-size:14px; gap:7px; }
.top .tab .ic { width:17px !important; height:17px !important; }
.contenido { padding-top:18px; }
/* numeros del dia: una sola tarjeta con divisores */
.resumen { display:flex; gap:0; background:var(--surface); border:1px solid var(--border); border-radius:18px;
box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden; }
.resumen .dato { flex:1; border:0; border-radius:0; box-shadow:none; background:transparent; padding:12px 20px;
display:flex; align-items:baseline; gap:10px; }
.resumen .dato + .dato { border-left:1px solid var(--border); }
.resumen .dato b { font-size:26px; }
.resumen .dato span { font-size:13.5px; }
/* encabezado de la agenda: navegacion a la izquierda, vista + nuevo turno a la derecha */
.ag-cab { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ag-nav { display:flex; align-items:center; gap:4px; min-width:0; }
.ag-nav .titulo { flex:none; text-align:left; min-width:0; padding:0 6px; }
.ag-cab .titulo h2, .ag-nav .titulo h2 { font-size:22px; letter-spacing:-.02em; line-height:1.15; white-space:nowrap; }
.ag-nav .titulo small { color:var(--muted); font-size:13px; }
.hoy-tag { color:var(--primary); font-weight:700; }
.ag-acc { display:flex; align-items:center; gap:10px; }
.ag-acc .vistas { margin:0; }
.ag-acc .btn { min-height:40px; }
/* pantallas medianas: pestañas solo con icono para que entre todo en la barra */
@media (max-width:1180px) and (min-width:761px) {
.top .quien small { display:none; }
.top .der .btn-txt-hide { display:none; }
}
@media (max-width:1000px) and (min-width:761px) {
.top .tab .tab-txt { display:none; }
.top .tab { padding:8px 12px !important; }
}
@media (max-width:760px) {
/* el blur crea un contenedor para lo "fixed": sin el, la barra de pestañas vuelve a quedar abajo de la pantalla */
.top { backdrop-filter:none; -webkit-backdrop-filter:none; }
.top .tabs { margin:0; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); border-radius:0;
background:color-mix(in srgb, var(--surface) 96%, transparent); }
.top .tab { padding:6px 2px !important; font-size:11px; gap:3px; }
.top .tab .ic { width:22px !important; height:22px !important; }
.resumen .dato { padding:8px 4px; flex-direction:column; align-items:center; gap:2px; text-align:center; }
.resumen .dato b { font-size:21px; }
.resumen .dato span { font-size:10.5px; }
.ag-cab { gap:10px; }
.ag-nav { width:100%; justify-content:space-between; }
.ag-nav .titulo { text-align:center; flex:1; }
.ag-cab .titulo h2, .ag-nav .titulo h2 { font-size:19px; white-space:normal; }
.ag-acc { width:100%; }
.ag-acc .vistas { flex:1; }
.ag-acc .btn { flex:1; justify-content:center; width:auto !important; order:0 !important; }
}
/* navegacion de la agenda fija: Hoy y las flechas no se mueven aunque cambie el largo del titulo */
.ag-nav { gap:8px; }
.ag-flechas { display:flex; gap:2px; flex:none; }
.ag-hoy { flex:none; min-width:58px; justify-content:center; }
.ag-hoy.off { opacity:.4; pointer-events:none; }
.ag-hoy-movil { display:none; }
.ag-nav .titulo { padding:0 0 0 4px; }
@media (max-width:760px) {
.ag-nav { display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:4px; }
.ag-nav > .ag-hoy { display:none; }
.ag-flechas { display:contents; }
.ag-ant { grid-column:1; grid-row:1; }
.ag-sig { grid-column:3; grid-row:1; }
.ag-nav .titulo { grid-column:2; grid-row:1; text-align:center; padding:0; }
.ag-hoy-movil { display:inline-flex; flex:none !important; min-width:0; padding-left:14px; padding-right:14px; }
}
/* logo: version clara con fondo blanco / version para modo oscuro (sin fondo y con el "alo" aclarado) */
.logo-oscuro { display:none !important; }
:root[data-tema="dark"] .logo-claro { display:none !important; }
:root[data-tema="dark"] .logo-oscuro { display:block !important; }
.top img.logo-oscuro { width:auto; }
:root[data-tema="dark"] .login-card img.logo-oscuro { width:auto; height:150px; margin:0 auto 12px; }
/* =====================================================================
Agenda del dia v2: columnas por profesional, lupa en la hora actual,
tarjetas de turno grandes con el color de cada profesional
===================================================================== */
.dia { --gut:66px; position:relative; margin-top:14px; }
.dia.multi { min-width:calc(var(--gut) + var(--cols) * 150px); }
.dia-cabs { display:grid; grid-template-columns:var(--gut) repeat(var(--cols), minmax(0,1fr)); margin-bottom:8px; }
.dia-cab { display:flex; align-items:center; gap:10px; margin:0 3px; padding:8px 10px; border-radius:14px; background:var(--neutral); min-width:0; }
.dia-cab-txt { display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.dia-cab-txt b { font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dia-cab-txt small { color:var(--muted); font-size:12px; }
.dia .tl { position:relative; }
.dia .tl-fila { position:absolute; left:0; right:0; border-top:1px solid var(--border); display:flex; background:none; }
.dia .tl-fila.pasado { background:color-mix(in srgb, var(--neutral) 60%, transparent); }
.dia .tl-fila .hh { width:var(--gut); flex:none; text-align:right; padding:4px 12px 0 0; color:var(--muted);
font-variant-numeric:tabular-nums; letter-spacing:-.01em; opacity:1; }
/* lupa: la hora en curso grande y las dos siguientes van bajando */
.dia .tl-fila.n0 .hh { font-size:11px; opacity:.55; }
.dia .tl-fila.n1 .hh { font-size:12.5px; }
.dia .tl-fila.n2 .hh { font-size:14px; font-weight:600; color:var(--text); }
.dia .tl-fila.n3 .hh { font-size:16.5px; font-weight:700; color:var(--text); }
.dia .tl-fila.n4 .hh { font-size:21px; font-weight:800; color:var(--primary); padding-top:6px; }
.dia .tl-fila.n4 { background:color-mix(in srgb, var(--primary) 5%, transparent); }
.dia .tl-sep { position:absolute; left:0; right:0; }
.tl-cols { position:absolute; left:var(--gut); right:0; top:0; bottom:0; }
.tl-col { position:absolute; top:0; bottom:0; left:calc(var(--i) * 100% / var(--cols)); width:calc(100% / var(--cols));
border-left:1px dashed var(--border); pointer-events:none; }
.dia:not(.multi) .tl-col { border-left:0; }
/* huecos libres: aparecen al pasar el mouse (en el celular, con un toque) */
.tl-libre { position:absolute; left:calc(var(--i) * 100% / var(--cols) + 3px); width:calc(100% / var(--cols) - 6px);
border:0; padding:0; margin:0; background:transparent; border-radius:12px; cursor:pointer; font:inherit; color:var(--primary); }
.tl-libre span { display:none; align-items:center; justify-content:center; gap:6px; height:100%; font-size:13px; font-weight:600; }
.tl-libre:hover, .tl-libre:focus-visible { background:var(--tint); outline:1px dashed color-mix(in srgb, var(--primary) 40%, transparent); }
.tl-libre:hover span, .tl-libre:focus-visible span { display:flex; }
/* tarjeta del turno */
.turno { position:absolute; left:calc((var(--i) + var(--l) / 100) * (100% / var(--cols)) + 3px);
width:calc(var(--w) / 100 * (100% / var(--cols)) - 6px);
background:color-mix(in srgb, var(--c) 13%, var(--surface)); border:1px solid color-mix(in srgb, var(--c) 30%, transparent);
border-left:4px solid var(--c); border-radius:12px; padding:6px 10px; overflow:hidden; cursor:pointer;
display:flex; flex-direction:column; gap:1px; transition:box-shadow .15s, transform .15s; z-index:1; }
.turno:hover { box-shadow:0 6px 18px rgba(22,35,43,.14); transform:translateY(-1px); z-index:3; }
.t-hora { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
color:color-mix(in srgb, var(--c) 75%, var(--text)); white-space:nowrap; }
.t-fin { font-weight:500; opacity:.75; }
.t-cli { font-size:14.5px; font-weight:700; color:var(--text); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t-serv, .t-det { font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.turno:not(.mediano) .t-fin, .turno:not(.mediano) .t-serv, .turno:not(.grande) .t-det { display:none; }
.turno.grande { padding:10px 12px; gap:3px; }
.turno.grande .t-hora { font-size:13.5px; }
.turno.grande .t-cli { font-size:17px; }
.turno.grande .t-serv { font-size:13.5px; }
.t-tag { margin-left:auto; font-size:10.5px; font-weight:800; padding:1px 7px; border-radius:999px; letter-spacing:.02em; }
.t-tag.ahora { background:var(--danger); color:#fff; }
.t-tag.sena { background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--accent); }
.t-tag.ok { background:var(--success-bg); color:var(--success); }
.t-tag.mal { background:var(--danger-bg); color:var(--danger); }
.turno.pendiente { border-style:dashed; border-left-style:solid; background:var(--surface); }
.turno.pagopend { --c:var(--accent); }
.turno.asistio { opacity:.8; }
.turno.no-asistio { --c:var(--danger); opacity:.65; }
.turno.pasado:not(.en-curso) { opacity:.7; }
.turno.en-curso { box-shadow:0 0 0 2px var(--c), 0 8px 22px color-mix(in srgb, var(--c) 30%, transparent); z-index:2; }
/* linea de "ahora" con la hora exacta */
.dia .tl-ahora { position:absolute; left:calc(var(--gut) - 6px); right:0; height:2px; background:var(--danger); z-index:4; pointer-events:none; }
.dia .tl-ahora::before { left:-5px; }
.dia .tl-ahora span { position:absolute; right:100%; top:-10px; margin-right:6px; background:var(--danger); color:#fff;
font-size:11px; font-weight:800; padding:2px 6px; border-radius:999px; font-variant-numeric:tabular-nums; }
/* cancelados: fuera de la grilla, para no ensuciarla */
.dia-cancel { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; }
.dc-tit { font-size:12px; color:var(--muted); font-weight:700; margin-right:4px; }
.dc { border:1px solid var(--border); background:var(--surface); color:var(--muted); text-decoration:line-through; font:inherit;
font-size:12.5px; padding:4px 10px; border-radius:999px; cursor:pointer; }
.dc:hover { color:var(--text); }
.tl-scroll { overflow-x:auto; }
@media (max-width:760px) {
.dia { --gut:50px; }
.dia.multi { min-width:calc(var(--gut) + var(--cols) * 138px); }
.dia .tl-fila.n4 .hh { font-size:17px; }
.dia .tl-fila.n3 .hh { font-size:14.5px; }
.dia .tl-fila .hh { padding-right:8px; }
.dia-cab { padding:6px 8px; gap:6px; }
.dia .tl-ahora span { display:none; }
.tl-libre:active { background:var(--tint); }
}
/* la tarjeta se adapta a su propio ancho (columnas angostas con 4 o 5 profesionales) */
.turno { container-type:inline-size; }
.t-hora { overflow:hidden; }
.t-tag { flex:none; }
@container (max-width:150px) { .t-fin { display:none !important; } }
@container (max-width:92px) { .t-tag:not(.ahora) { display:none; } .t-cli { font-size:13px !important; } }
.dia .tl-ahora { z-index:0; } .dia .tl-ahora span, .dia .tl-ahora::before { z-index:5; }
.agenda-grid > section, .agenda-grid > aside { min-width:0; } .turno { line-height:1.25; }
@media (max-width:760px) { .top .izq { flex:1 1 auto; min-width:0; } .top .quien { min-width:0; } .top .der { gap:0; } }
.ag-acc .btn { white-space:nowrap; }
@media (max-width:760px) { .ag-acc { gap:6px; } .ag-acc > * { min-width:0; } .ag-acc .vistas a { padding:6px 10px; } .ag-acc .btn { padding-left:12px; padding-right:12px; } .ag-hoy-movil { padding-left:10px !important; padding-right:10px !important; } }
/* tarjeta: el nombre nunca se achica ni queda tapado; las etiquetas no agrandan la fila de la hora */
.turno > * { flex-shrink:0; }
.t-hora { line-height:18px; min-height:18px; }
.t-tag { display:inline-flex; align-items:center; height:16px; line-height:16px; font-family:inherit; }
/* horas pasadas: cada vez mas chicas */
.dia .tl-fila.n-1 .hh { font-size:11.5px; opacity:.7; }
.dia .tl-fila.n-2 .hh { font-size:10.5px; opacity:.5; padding-top:2px; }
.dia .tl-fila.n-1, .dia .tl-fila.n-2 { background:color-mix(in srgb, var(--neutral) 60%, transparent); }
.t-hora { height:18px; }
.t-tag { overflow:hidden; }
.t-tag .ic { width:12px !important; height:12px !important; }
/* turnos que ya pasaron: una sola linea, discretos */
.turno.pasado:not(.en-curso) { flex-direction:row; align-items:center; gap:8px; padding:3px 8px; border-radius:9px; }
.turno.pasado:not(.en-curso) .t-hora { flex:none; height:auto; font-size:11.5px; }
.turno.pasado:not(.en-curso) .t-cli { flex:1; min-width:0; font-size:13px; }
.turno.pasado:not(.en-curso) .t-fin, .turno.pasado:not(.en-curso) .t-serv, .turno.pasado:not(.en-curso) .t-det { display:none !important; }
.turno.pasado:not(.en-curso) .t-tag { order:3; margin-left:0; }
.turno.pasado:not(.en-curso) .t-hora { display:contents; }
.turno.pasado:not(.en-curso) .t-cli { order:2; }
.turno.pasado:not(.en-curso) .t-tag { order:3; flex:none; margin-left:auto; }
.turno.pasado:not(.en-curso) { font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums;
color:color-mix(in srgb, var(--c) 75%, var(--text)); }
.t-tag.mal { gap:3px; }
.turno.pasado:not(.en-curso) { gap:6px; padding:3px 7px; }
.turno.pasado:not(.en-curso) .t-tag { background:none; padding:0; height:auto; }
.turno.pasado:not(.en-curso) .t-tag .t-txt { display:none; }
.turno.pasado:not(.en-curso) .t-tag .ic { width:14px !important; height:14px !important; }
/* atender ahora (el cliente llego antes) */
.td-adelantar { background:var(--accent); border-color:var(--accent); color:#fff; }
.td-adelantar:hover { background:#D4852A; border-color:#D4852A; }
.td-nota-chica { margin:-4px 0 0; text-align:center; color:var(--muted); font-size:12.5px; }
/* abrir el WhatsApp propio con el link de pago ya escrito */
.btn-marca.wa-lleno { background:#128C4A; border-color:#128C4A; color:#fff; text-decoration:none; margin-top:12px; min-height:48px; }
.btn-marca.wa-lleno:hover { background:#0E7A40; border-color:#0E7A40; }
.btn-marca.wa-lleno img { background:#fff; border-radius:50%; padding:2px; width:26px; height:26px; }
/* agenda del dia: scroll propio con los profesionales fijos arriba */
/* al llegar arriba/abajo del almanaque, la rueda sigue moviendo la pagina (no se traba adentro) */
.dia-scroll { overflow:auto; overscroll-behavior-x:contain; overscroll-behavior-y:auto; border-radius:14px; scroll-behavior:auto; }
.dia-scroll .dia { margin-top:0; }
.dia-scroll .dia-cabs { position:sticky; top:0; z-index:8; background:var(--surface); padding:6px 0 8px; margin-bottom:0; }
.dia-scroll .tl-scroll { overflow:visible; }
/* campana de avisos: apagada se ve como "pendiente" (punto + texto), prendida queda solo el icono naranja */
#btn-avisos { position:relative; }
#btn-avisos:not(.on)::after { content:""; position:absolute; top:5px; left:22px; width:8px; height:8px; border-radius:50%;
background:#E5484D; box-shadow:0 0 0 2px var(--bg); }
#btn-avisos.on .avisos-txt { display:none; }
#toast { max-width:min(560px, calc(100vw - 32px)); text-align:center; line-height:1.35; }
/* servicios: alta a la izquierda (fija al scrollear), lista a la derecha */
/* servicios: equipo y como se dan los turnos a la izquierda (ancha); alta y lista de servicios a la derecha */
.serv-layout { display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:20px; align-items:start; }
.serv-principal, .serv-lateral { display:flex; flex-direction:column; gap:20px; min-width:0; }
.serv-principal > .card, .serv-lateral > .card { margin:0; }
.serv-lateral .sv-fila { grid-template-columns:minmax(0,1fr) auto auto; row-gap:0; }
.serv-lateral .sv-dur { grid-column:1; grid-row:2; text-align:left; font-size:12px; }
.serv-lateral .sv-precio { grid-column:2; grid-row:1 / span 2; }
.serv-lateral .sv-acc { grid-column:3; grid-row:1 / span 2; }
@media (max-width:1180px) { .serv-principal .dos-col { grid-template-columns:1fr; } }
.serv-alta .fila { margin:12px 0 16px; }
.serv-alta .fila > .campo { flex:1 1 120px; }
.serv-lista .serv-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
@media (max-width:860px) {
.serv-layout { grid-template-columns:1fr; }
.serv-lateral { order:-1; } /* en el celular, los servicios primero */
}
/* opciones: horarios en resumen (se editan en /opciones/horarios) */
.hor-cab { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.hor-cab .sec-sub { margin-bottom:0; }
.hor-cab .btn { flex:none; }
.hor-res { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.hor-res li { display:flex; flex-direction:column; gap:2px; background:var(--neutral); border-radius:14px; padding:10px 16px; min-width:170px; }
.hor-res li b { font-size:14px; }
.hor-res li span { color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums; }
.hor-res li.cerrado b, .hor-res li.cerrado span { color:var(--muted); font-weight:600; }
/* editor de horarios */
.hor-volver { margin:0 0 12px; }
.hor-volver .btn { padding-left:6px; }
.serv-alta .nuevo-horario { margin-top:14px; padding-top:0; border-top:0; }
.serv-alta .dias-pick .atajos { margin:6px 0 0; width:100%; }
.semana .dia { min-height:46px; padding:6px 14px; }
.hor-listo { margin-top:18px; }
@media (max-width:760px) { .hor-cab .btn { width:100%; justify-content:center; } .hor-res li { flex:1 1 100%; } }
/* ================= ausencias ================= */
.aus-form { max-width:860px; }
.aus-t { display:flex; align-items:center; gap:10px; font-weight:700; margin:22px 0 10px; }
.aus-t span { width:24px; height:24px; border-radius:50%; background:var(--primary); color:var(--on-primary);
display:inline-grid; place-items:center; font-size:13px; flex:none; }
.aus-chips { display:flex; flex-wrap:wrap; gap:8px; }
.aus-chips label { margin:0; cursor:pointer; }
.aus-chips input { position:absolute; opacity:0; pointer-events:none; }
.aus-chips span { display:inline-block; padding:9px 16px; border-radius:999px; border:1px solid var(--border);
background:var(--surface); font-weight:600; font-size:14px; }
.aus-chips input:checked + span { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.aus-chips input:focus-visible + span { outline:2px solid var(--primary); outline-offset:2px; }
.aus-rapidos { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.aus-fechas { max-width:520px; }
.aus-chk { display:flex; align-items:center; gap:8px; margin:12px 0 0; font-weight:600; }
.aus-horas { max-width:520px; margin-top:10px; }
.aus-form:has(input[name=todo_el_dia]:checked) .aus-horas { display:none; }
.solo-baja { display:none; }
.aus-form:has(input[name=motivo][value=baja]:checked) .solo-baja { display:flex; }
.aus-form:has(input[name=motivo][value=baja]:checked):has(input[name=no_vuelve]:checked) :is(.aus-hasta, .aus-horas, .aus-chk:has([name=todo_el_dia])) { display:none; }
.aus-ver { margin-top:20px; }
.aus-p2 { margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }
.aus-p2:empty { display:none; }
.aus-res { background:var(--neutral); border-radius:14px; padding:12px 16px; font-size:15px; }
.aus-err { margin-top:16px; }
.aus-opc { display:grid; gap:8px; }
.aus-opc label { display:flex; gap:12px; align-items:flex-start; margin:0; padding:12px 14px; border:1px solid var(--border);
border-radius:14px; cursor:pointer; background:var(--surface); }
.aus-opc label:has(input:checked) { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.aus-opc input { margin-top:3px; accent-color:var(--primary); }
.aus-opc b { display:block; }
.aus-opc em { display:block; font-style:normal; color:var(--muted); font-size:14px; margin-top:2px; }
.aus-lista { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:6px; }
.aus-lista li { display:grid; grid-template-columns:minmax(150px,auto) 1fr auto; gap:12px; align-items:center;
background:var(--neutral); border-radius:12px; padding:9px 14px; font-size:14px; }
.aus-lista .cuando { font-weight:700; font-variant-numeric:tabular-nums; }
.aus-lista .quien em { font-style:normal; color:var(--muted); margin-left:4px; }
.aus-lista .quien em.sena { color:var(--accent); font-weight:600; }
.aus-lista .dest { font-weight:600; text-align:right; white-space:nowrap; }
.dest-reasig { color:var(--primary); } .dest-reasig.no, .dest-cancela { color:var(--danger); } .dest-nada { color:var(--muted); }
/* segun la opcion elegida se ve el destino de cada turno y el mensaje que corresponde */
.dest-cancela, .dest-nada, .aus-burbuja.dest-reasig { display:none; }
.aus-p2:has(input[value=cancelar]:checked) .dest-cancela { display:inline; }
.aus-p2:has(input[value=cancelar]:checked) .dest-reasig, .aus-p2:has(input[value=nada]:checked) .dest-reasig { display:none; }
.aus-p2:has(input[value=nada]:checked) .dest-nada { display:inline; }
.aus-p2:has(input[value=reasignar]:checked) .dest-reasig.no + .dest-cancela { display:inline; }
.aus-p2:has(input[value=reasignar]:checked) .dest-reasig.no { display:none; }
.aus-p2:has(input[value=reasignar]:checked) .aus-burbuja.dest-reasig { display:block; }
.aus-p2:has(input[value=nada]:checked) .aus-msj { display:none; }
.aus-p2:has(input[value=nada]:checked) .aus-confirmar::after { content:""; }
.aus-aviso { margin-top:10px; }
.aus-msj textarea { width:100%; resize:vertical; min-height:64px; }
.aus-burbuja { margin-top:8px; max-width:440px; background:#DCF8C6; color:#111; border-radius:4px 14px 14px 14px;
padding:10px 12px; font-size:14px; line-height:1.45; box-shadow:0 1px 1px rgba(0,0,0,.08); }
:root[data-tema=dark] .aus-burbuja { background:#005C4B; color:#E9EDEF; }
.aus-burbuja .boton { display:block; margin:10px -12px -10px; padding:9px; border-top:1px solid rgba(0,0,0,.1);
text-align:center; color:#0B7FCE; font-weight:600; }
:root[data-tema=dark] .aus-burbuja .boton { color:#53BDEB; border-color:rgba(255,255,255,.12); }
.aus-confirmar { margin-top:18px; }
.aus-hecha .sec-h svg { color:var(--success); vertical-align:-3px; }
.aus-stats { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 4px; }
.aus-stats div { background:var(--neutral); border-radius:14px; padding:12px 16px; min-width:140px; }
.aus-stats b { display:block; font-size:24px; }
.aus-stats span { color:var(--muted); font-size:14px; }
.aus-avisos .env-ok { color:var(--success); display:inline-flex; gap:4px; align-items:center; }
.aus-avisos .env-no { color:var(--muted); }
.aus-vig li { position:relative; padding-right:84px; }
.aus-vig li form { position:absolute; right:8px; top:50%; transform:translateY(-50%); }
.aus-vig li b em { font-style:normal; font-size:12px; background:var(--accent); color:#fff; border-radius:999px; padding:1px 8px; margin-left:4px; }
/* en la agenda */
.tl-ausente { position:absolute; left:calc(var(--i) * 100% / var(--cols) + 3px); width:calc(100% / var(--cols) - 6px);
border-radius:12px; border:1px dashed color-mix(in srgb, var(--muted) 60%, transparent);
background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 14%, transparent) 0 8px, transparent 8px 16px);
display:flex; align-items:flex-start; justify-content:center; padding-top:8px; pointer-events:none; overflow:hidden; }
.tl-ausente span { background:var(--surface); color:var(--muted); font-size:12px; font-weight:600; border-radius:999px;
padding:3px 10px; border:1px solid var(--border); white-space:nowrap; max-width:calc(100% - 12px); overflow:hidden; text-overflow:ellipsis; }
.aus-banner { display:flex; align-items:center; gap:6px; flex-wrap:wrap; background:var(--neutral); border-radius:12px;
padding:9px 14px; margin:0 0 10px; font-size:14px; font-weight:600; }
@media (max-width:760px) {
.aus-lista li { grid-template-columns:1fr auto; }
.aus-lista .cuando { grid-column:1 / -1; }
}
.aus-opc label, .aus-chk { font-size:15px; color:var(--text); font-weight:500; }
.aus-opc b { font-weight:700; }
.aus-p2 .aus-burbuja.dest-cancela, .aus-p2:has(input[value=cancelar]:checked) .aus-burbuja.dest-cancela { display:block; }
/* ================= recordatorios internos (nota amarilla) ================= */
.tl-recor { position:absolute; left:calc(var(--i) * 100% / var(--cols) + 2px); width:calc(var(--span) * 100% / var(--cols) - 4px);
border-left:3px solid #E0A800; border-radius:4px 10px 10px 4px; pointer-events:none;
background:linear-gradient(90deg, color-mix(in srgb, #F5C542 16%, transparent), color-mix(in srgb, #F5C542 4%, transparent)); }
.tl-recor.bloquea { background:repeating-linear-gradient(135deg, color-mix(in srgb, #F5C542 20%, transparent) 0 8px, transparent 8px 16px); }
.tl-recor-et { position:absolute; top:3px; right:4px; max-width:calc(100% - 10px); z-index:4; pointer-events:auto;
display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 7px; border:1px solid #E9C45A; border-radius:8px;
background:#FFF3C4; color:#5C4700; font:inherit; font-size:12.5px; cursor:pointer; box-shadow:0 2px 6px rgba(92,71,0,.14);
transform:rotate(-.6deg); }
.tl-recor-et:hover { transform:none; box-shadow:0 4px 12px rgba(92,71,0,.2); }
.tl-recor-et b { font-variant-numeric:tabular-nums; flex:none; }
.tl-recor-et span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.tl-recor-et em { font-style:normal; opacity:.75; flex:none; }
.tl-recor-et svg { flex:none; }
.tl-recor.hecho { opacity:.55; } .tl-recor.hecho .tl-recor-et span { text-decoration:line-through; }
:root[data-tema="dark"] .tl-recor-et { background:#4A3C0A; color:#FFE8A3; border-color:#7A6414; }
.st.st-recor { background:#FFF3C4; border-left-color:#E0A800; color:#5C4700; }
.st.st-recor.hecho { opacity:.55; text-decoration:line-through; }
:root[data-tema="dark"] .st.st-recor { background:#3A300A; color:#FFE8A3; }
.btn-recor svg { color:#C99700; }
/* agenda: un solo boton "Nuevo" (turno, recordatorio, alquiler o venta), un poco mas grande */
.btn-nuevo { padding:10px 22px; font-size:15px; min-height:42px; gap:8px; }
.rec-chk { display:flex; align-items:center; gap:8px; margin:14px 0 0; font-size:14px; color:var(--text); font-weight:500; }
.rec-opc { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.rec-t { font-weight:700; margin:0 0 8px; }
.rec-turnos { list-style:none; margin:0 0 12px; padding:0; display:grid; gap:4px; }
.rec-turnos li { background:var(--neutral); border-radius:10px; padding:7px 12px; font-size:14px; }
.rec-turnos em { font-style:normal; color:var(--muted); margin-left:4px; }
.rec-msj { margin-top:12px; }
.rec-msj textarea { width:100%; }
.rec-aviso { margin-top:12px; }
.rec-nota { background:#FFF3C4; color:#5C4700; border-radius:12px; padding:14px 16px; font-size:17px; font-weight:600;
border-left:4px solid #E0A800; white-space:pre-wrap; }
:root[data-tema="dark"] .rec-nota { background:#4A3C0A; color:#FFE8A3; }
.rec-nota.hecho { text-decoration:line-through; opacity:.7; }
.rec-cuando { color:var(--muted); margin:10px 0 6px; }
.rec-tags { display:flex; gap:6px; flex-wrap:wrap; }
.rec-form textarea { width:100%; }
/* celular: la barra de la agenda en dos filas (Hoy + Día/Semana arriba, Recordatorio + Nuevo turno abajo),
asi el selector no se monta sobre los botones */
@media (max-width:760px) {
.ag-acc { flex-wrap:wrap; row-gap:8px; }
.ag-acc .vistas { flex:1 1 55%; }
.ag-acc .vistas a { white-space:nowrap; }
.ag-acc .btn-nuevo { flex:1 1 40%; }
}
/* recuperar contraseña */
.rec-tit { font-size:20px; margin:4px 0 10px; text-align:center; }
.login-card .ok { margin-bottom:10px; }
/* login: volver a la pagina publica */
.volver-web { position:fixed; top:14px; left:16px; z-index:5; text-decoration:none; color:var(--muted); padding-left:8px; }
.volver-web:hover { color:var(--text); }
@media (max-width:520px) { .login-pag { padding-top:64px; } }
/* registro de comercios */
.reg-card { width:min(420px,100%); }
.reg-sub { margin:0 0 16px; text-align:center; }
.reg-otro { display:none; }
form:has(#rubro option[value="__otro__"]:checked) .reg-otro { display:block; }
.reg-trampa { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.reg-acepto { display:flex; gap:8px; align-items:flex-start; margin:4px 0 14px; font-size:13.5px; color:var(--text); font-weight:500; }
.reg-acepto input { margin-top:3px; }
.reg-link { text-align:center; margin:14px 0 0; font-size:14px; color:var(--muted); }
.link-btn { background:none; border:0; padding:0; color:inherit; text-decoration:underline; font:inherit; cursor:pointer; }
/* primeros pasos de un comercio nuevo */
.pasos { margin-bottom:16px; }
.pasos-cab { margin-bottom:12px; }
.pasos-lista { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; }
.pasos-lista a { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:14px;
text-decoration:none; color:var(--text); background:var(--surface); height:100%; }
.pasos-lista a:hover { border-color:var(--primary); }
.pasos-n { width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:700;
background:var(--primary); color:var(--on-primary); font-variant-numeric:tabular-nums; }
.pasos-t { flex:1; min-width:0; display:grid; gap:2px; }
.pasos-t small { color:var(--muted); font-size:13px; }
.pasos-ir { color:var(--muted); flex:none; }
.pasos-lista li.hecho .pasos-n { background:var(--success-bg); color:var(--success); }
.pasos-lista li.hecho b { text-decoration:line-through; color:var(--muted); }
/* tocar un hueco de la agenda: ¿turno o recordatorio? */
.elegir-cuando { margin:-8px 0 14px; }
.elegir-opc { display:grid; gap:10px; }
.elegir-btn { display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:14px 16px; border-radius:14px;
border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; cursor:pointer; }
.elegir-btn:hover, .elegir-btn:focus-visible { border-color:var(--primary); outline:none; background:var(--tint); }
.elegir-btn b { display:block; font-size:16px; }
.elegir-btn small { color:var(--muted); font-size:13.5px; }
.elegir-ic { width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center;
background:var(--tint); color:var(--primary); font-size:20px; }
.elegir-btn.recor .elegir-ic { background:#FFF3C4; color:#9A7400; }
:root[data-tema="dark"] .elegir-btn.recor .elegir-ic { background:#4A3C0A; color:#FFE8A3; }
/* recordatorio como tarjeta en su carril: al lado del turno del mismo horario, nunca encima */
.tl-recor { position:absolute; left:calc((var(--i) + var(--l) / 100) * (100% / var(--cols)) + 3px);
width:calc(var(--w) / 100 * (100% / var(--cols)) - 6px); border:1px solid #E9C45A; border-left:4px solid #E0A800;
border-radius:12px; background:#FFF3C4; color:#5C4700; padding:6px 9px; font:inherit; text-align:left; cursor:pointer;
pointer-events:auto; display:flex; flex-direction:column; gap:2px; overflow:hidden; z-index:1;
box-shadow:0 1px 3px rgba(92,71,0,.12); }
.tl-recor:hover { box-shadow:0 6px 16px rgba(92,71,0,.18); z-index:3; }
.tl-recor.bloquea { background:repeating-linear-gradient(135deg, #FFF3C4 0 9px, #FBE7A1 9px 18px); }
.tl-recor .tr-hora { display:flex; align-items:center; gap:5px; font-size:12.5px; font-variant-numeric:tabular-nums; }
.tl-recor .tr-txt { font-size:13px; font-weight:600; line-height:1.3; overflow:hidden; display:-webkit-box;
-webkit-line-clamp:3; -webkit-box-orient:vertical; word-break:break-word; }
.tl-recor em { font-style:normal; font-size:12px; opacity:.8; }
.tl-recor.angosto { padding:5px 7px; }
.tl-recor.angosto .tr-txt { -webkit-line-clamp:2; font-size:12.5px; }
.tl-recor.hecho { opacity:.55; } .tl-recor.hecho .tr-txt { text-decoration:line-through; }
:root[data-tema="dark"] .tl-recor { background:#3F3409; color:#FFE8A3; border-color:#6B5712; border-left-color:#E0A800; }
:root[data-tema="dark"] .tl-recor.bloquea { background:repeating-linear-gradient(135deg, #3F3409 0 9px, #4A3D0C 9px 18px); }
.tl-recor.corto { flex-direction:row; align-items:center; gap:6px; padding-top:4px; padding-bottom:4px; }
.tl-recor.corto .tr-txt { display:block; white-space:nowrap; text-overflow:ellipsis; min-width:0; flex:1; }
.tl-recor.corto em { display:none; }
/* turno terminado y pagado: tachado y mas clarito, como un recordatorio hecho */
.turno.cerrado { opacity:.55; }
.turno.cerrado .t-cli, .turno.cerrado .t-serv, .turno.cerrado .t-det { text-decoration:line-through; }
.turno.cerrado:hover { opacity:.9; }
.st.cerrado { opacity:.55; }
.st.cerrado .cli, .st.cerrado small { text-decoration:line-through; }
/* legajo: notas del comercio (principal) y eventos automaticos (columna chica a la derecha) */
dialog#modal:has(.legajo) { width:min(860px, calc(100vw - 24px)); }
.leg-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:18px; align-items:start; }
.leg-tit { font-weight:700; margin:0 0 4px; }
.leg-form { display:grid; gap:8px; margin:10px 0 12px; }
.leg-form textarea { width:100%; resize:vertical; }
.leg-form .btn { justify-self:end; }
.leg-lista { max-height:320px; overflow:auto; }
.leg-eventos { background:var(--neutral); border-radius:14px; padding:12px 12px 6px; }
.leg-resumen { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
.leg-resumen span { background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:3px 9px; font-size:12.5px; }
.leg-resumen b { font-variant-numeric:tabular-nums; }
.leg-resumen .ok b { color:var(--success); } .leg-resumen .mal b { color:var(--danger); }
.leg-linea { list-style:none; margin:0; padding:0 0 0 12px; border-left:2px solid var(--border); max-height:320px; overflow:auto;
display:grid; gap:10px; font-size:13.5px; }
.leg-linea li { position:relative; line-height:1.35; }
.leg-linea li::before { content:""; position:absolute; left:-18px; top:4px; width:10px; height:10px; border-radius:50%;
background:var(--muted); box-shadow:0 0 0 3px var(--neutral); }
.leg-linea li.ev-cancelado::before, .leg-linea li.ev-falta::before { background:var(--danger); }
.leg-linea li.ev-mensaje::before { background:var(--primary); }
.leg-linea li.ev-vacio { color:var(--muted); }
.leg-linea li.ev-vacio::before { display:none; }
.leg-linea small { display:block; color:var(--muted); font-size:11.5px; }
.leg-linea em { font-style:normal; color:var(--muted); }
@media (max-width:700px) { .leg-grid { grid-template-columns:1fr; } }
.leg-resumen span { display:inline-flex; align-items:baseline; gap:3px; white-space:nowrap; line-height:1.4; }
/* legajo: resumen como tabla de 4 datos iguales (reemplaza las pastillas) */
.leg-resumen { display:grid !important; grid-template-columns:repeat(4, 1fr); gap:0 !important; margin:8px 0 12px !important;
background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.leg-resumen > div { display:grid; place-items:center; padding:8px 2px 7px; text-align:center; }
.leg-resumen > div + div { border-left:1px solid var(--border); }
.leg-resumen dt { font-size:20px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; margin:0; }
.leg-resumen dd { margin:2px 0 0; font-size:11.5px; color:var(--muted); white-space:nowrap; }
.leg-resumen .es-ok dt { color:var(--success); } .leg-resumen .es-mal dt { color:var(--danger); }
.leg-linea li.ev-vacio { font-size:13px; line-height:1.4; }
.leg-linea:has(.ev-vacio) { border-left:0; padding-left:0; }
/* despues de atender: darle el proximo turno o terminar */
.prox { text-align:center; }
.prox-ok { width:52px; height:52px; margin:4px auto 10px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:var(--success-bg); color:var(--success); }
.prox h3 { justify-content:center; }
.prox-aviso { margin:4px 0 0; font-size:13px; color:var(--muted); }
.prox-ya { margin:12px auto 0; max-width:420px; }
.prox-preg { margin:16px 0 10px; font-weight:700; }
.prox-ops { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; text-align:left; }
.prox-op { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:1px solid var(--border); border-radius:12px;
background:var(--surface); color:var(--text); font:inherit; cursor:pointer; }
.prox-op:hover { border-color:var(--primary); background:var(--tint); }
.prox-op b { font-size:15px; }
.prox-op small { color:var(--muted); font-size:12.5px; }
.prox .modal-acc { justify-content:center; }
.prox .modal-acc .btn { min-width:180px; justify-content:center; }
/* borrar cliente */
.borrar-lista { margin:6px 0 12px; padding-left:20px; }
.borrar-lista li { margin:3px 0; }
/* buscador rapido de clientes (lupa de arriba) */
.busq { padding-top:14px; }
.busq-cab { display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border); padding-bottom:10px; }
.busq-lupa { color:var(--muted); display:flex; }
.busq-cab input { flex:1; border:none; outline:none; background:transparent; font:inherit; font-size:17px; color:var(--text);
padding:8px 2px; min-width:0; }
.busq-cab input::-webkit-search-cancel-button { display:none; }
.busq-res { max-height:min(62vh, 560px); overflow-y:auto; padding-top:6px; }
.busq-vacio { color:var(--muted); font-size:14px; margin:14px 4px; }
.bq-cli { padding:10px 2px 12px; border-bottom:1px solid var(--border); }
.bq-cli:last-child { border-bottom:none; }
.bq-cab { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bq-nom { display:flex; flex-direction:column; min-width:0; }
.bq-nom b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bq-nom small { color:var(--muted); font-size:12.5px; }
.bq-acc { display:flex; flex:none; }
.bq-turnos { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.bq-t { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 12px; border-radius:10px;
border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; font-size:14px; cursor:pointer; }
.bq-t:hover { border-color:var(--primary); background:var(--tint); }
.bq-t.hoy { border-color:var(--primary); background:var(--tint); }
.bq-t.hoy .bq-cuando b:first-child { color:var(--primary); }
.bq-t.hecho { opacity:.65; }
.bq-cuando { flex:none; }
.bq-que { flex:1; min-width:0; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bq-que em { font-style:normal; }
.bq-t > .ic { color:var(--muted); flex:none; }
.bq-sin { color:var(--muted); font-size:13px; margin:6px 0 0; }
.bq-mas { color:var(--muted); font-size:12.5px; padding-left:4px; }
@media (max-width: 560px) {
.bq-t { flex-wrap:wrap; row-gap:2px; }
.bq-que { flex-basis:calc(100% - 30px); order:3; white-space:normal; }
}
dialog#modal:has(.busq) { margin-top:min(10vh, 90px); width:min(620px, calc(100vw - 24px)); }
/* legajo: proximos turnos arriba de los eventos */
.leg-prox { display:flex; flex-direction:column; gap:6px; margin:0 0 14px; }
.leg-prox .leg-tit { margin:0; }
.leg-prox-lista { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:6px; }
.leg-prox .bq-t { font-size:13.5px; padding:8px 10px; }
.leg-prox .bq-sin { grid-column:1 / -1; margin:0 !important; }
.leg-dar { align-self:flex-start; }
.leg-dar-fila { display:flex; flex-wrap:wrap; gap:4px; }
/* nuevo turno: circulo con quien atiende */
.tn-cab { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.tn-cab h3 { margin:0; }
.tn-quien { display:flex; align-items:center; gap:10px; min-width:0; }
.tn-av { width:52px; height:52px; flex:none; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
border:2px solid var(--primary); color:var(--primary); background:var(--tint); font-weight:800; font-size:20px; }
.tn-av img { width:100%; height:100%; object-fit:cover; display:block; }
.tn-quien-txt { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.tn-quien-txt small { color:var(--muted); font-size:11.5px; }
.tn-quien-txt b { font-size:14px; max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tn-cambio .tn-av { animation:tn-pop .25s ease-out; }
@keyframes tn-pop { from { transform:scale(.8); opacity:.4; } to { transform:scale(1); opacity:1; } }
@media (max-width: 480px) { .tn-av { width:44px; height:44px; font-size:17px; } .tn-quien-txt b { max-width:110px; } }
/* opciones: logo y horarios arriba, en dos columnas */
.op-top { display:grid; grid-template-columns:200px minmax(0,1fr); gap:18px; align-items:stretch; }
.op-top > .card { margin:0; }
.op-top + .card { margin-top:18px; }
.logo-card { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.logo-card .sec-h { align-self:stretch; text-align:left; margin-bottom:2px; }
.logo-circ { width:92px; height:92px; flex:none; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
border:2px solid var(--primary); background:var(--tint); color:var(--primary); font-size:34px; font-weight:800; }
.logo-circ img { width:100%; height:100%; object-fit:cover; display:block; }
.logo-card form { margin:0; }
@media (max-width: 720px) {
.op-top { grid-template-columns:1fr; gap:14px; }
.logo-card { flex-direction:row; justify-content:flex-start; gap:14px; padding-top:16px; padding-bottom:16px; }
.logo-card .sec-h { align-self:center; flex:none; margin:0; font-size:20px; }
.logo-circ { width:52px; height:52px; font-size:20px; order:-1; }
}
.card[id] { scroll-margin-top:96px; }
/* guia de inicio (comercio recien registrado): sin menus, paso a paso */
.guia-activa { padding-bottom:32px !important; }
.guia-activa .hor-volver { display:none; }
.guia-barra { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:14px 0 18px;
padding:14px 18px; border-radius:var(--radius); background:var(--tint); border:1px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.gb-txt { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 260px; }
.gb-txt small { color:var(--primary); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.gb-txt b { font-size:18px; }
.gb-txt span { color:var(--muted); font-size:14px; }
.gb-acc { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gb-acc .btn[aria-disabled="true"], .guia-fin .btn[disabled] { opacity:.45; cursor:not-allowed; }
.guia-card { max-width:760px; margin:18px auto 0; }
.guia-tit { font-weight:700; margin:22px 0 8px; color:var(--text); }
.guia-tit small { color:var(--muted); font-weight:500; }
.guia-pasos { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.guia-pasos li { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.guia-pasos li.actual { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
.guia-pasos li.hecho .pasos-t b { text-decoration:line-through; color:var(--muted); }
.guia-pasos li.hecho .pasos-n { background:var(--success-bg); color:var(--success); }
.guia-pasos .pasos-n { width:32px; height:32px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:var(--neutral); font-weight:800; }
.guia-pasos .pasos-t { flex:1; min-width:0; display:flex; flex-direction:column; }
.guia-pasos .pasos-t small { color:var(--muted); font-size:13px; }
.guia-pasos .btn { flex:none; }
.guia-pasos.bloqueados li { opacity:.55; }
.guia-fin { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:24px; padding-top:18px; border-top:1px solid var(--border); }
.guia-fin form { margin:0; }
.guia-fin small { color:var(--muted); }
.guia-pasos li.actual .pasos-n { background:var(--primary); color:var(--on-primary); }
/* logos oficiales en la pestaña WhatsApp */
.marca-logo { background:#fff !important; border:1px solid var(--border); box-shadow:0 2px 8px rgba(15,23,42,.06); }
.marca-logo img { width:34px; height:34px; object-fit:contain; display:block; }
.estado-hero .ico-g.marca-logo { border-radius:18px; }
.marca-cab { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.marca-cab .sec-h { margin:0; }
.marca-cab .marca-logo { width:48px; height:48px; flex:none; border-radius:14px; display:flex; align-items:center; justify-content:center; }
.marca-cab .marca-logo img { width:36px; height:36px; }
.btn-marca.wa-verde { background:#25D366; border-color:#25D366; color:#0B3D1F; font-weight:700; text-decoration:none; }
.btn-marca.wa-verde:hover { background:#1EBE5A; border-color:#1EBE5A; }
.btn-marca.wa-verde img { background:#fff; border-radius:50%; padding:2px; width:26px; height:26px; }
.btn-marca.mp { text-decoration:none; }
/* admin: abono de los comercios */
.ab-resumen { display:grid !important; grid-template-columns:repeat(6, minmax(0,1fr)); }
.ab-resumen .dato b { font-size:22px; }
@media (max-width: 900px) { .ab-resumen { grid-template-columns:repeat(3, minmax(0,1fr)); } .ab-resumen .dato:nth-child(4) { border-left:0; } }
.ab-chip { display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; border:0; border-radius:10px;
padding:6px 10px; font:inherit; cursor:pointer; min-width:150px; }
.ab-chip b { font-size:13px; }
.ab-chip small { font-size:11.5px; opacity:.85; }
.ab-ok { background:var(--success-bg); color:var(--success); }
.ab-info { background:var(--tint); color:var(--primary); }
.ab-aviso { background:var(--warning-bg); color:var(--warning); }
.ab-mal { background:var(--danger-bg); color:var(--danger); }
.ab-neutro { background:var(--neutral); color:var(--muted); }
dialog#modal:has(.abono) { width:min(720px, calc(100vw - 24px)); }
.ab-estado { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px; margin-bottom:10px; }
.ab-estado b { font-size:16px; }
.ab-bloque { border-top:1px solid var(--border); padding-top:12px; margin-top:14px; }
.ab-bloque .sec-titulo { margin:0 0 8px; }
.ab-planes { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.ab-plan { display:flex; flex-direction:column; gap:3px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; cursor:pointer;
background:var(--surface); }
.ab-plan:has(input:checked) { border-color:var(--primary); background:var(--tint); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.ab-plan input { position:absolute; opacity:0; pointer-events:none; }
.ab-plan b { font-size:15px; }
.ab-precio { font-weight:800; color:var(--primary); }
.ab-precio small { font-weight:500; color:var(--muted); }
.ab-plan > small { color:var(--muted); font-size:12px; line-height:1.3; }
@media (max-width: 640px) { .ab-planes { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.ab-hist { display:flex; flex-direction:column; gap:6px; }
.ab-pago { display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:8px; align-items:center;
padding:8px 10px; border:1px solid var(--border); border-radius:10px; }
.ab-pago small { color:var(--muted); font-size:12.5px; grid-column:1; }
.ab-pago .btn { grid-column:2; grid-row:1 / span 2; }
/* plan / dias de prueba, chiquito al lado del modo oscuro */
.plan-chip { font-size:11px; font-weight:600; line-height:1; padding:4px 8px; border-radius:999px; white-space:nowrap;
background:var(--neutral); color:var(--muted); border:1px solid var(--border); cursor:default; }
.plan-chip.aviso { background:var(--warning-bg); color:var(--warning); border-color:transparent; }
.plan-chip .pc-corto { display:none; }
@media (max-width: 760px) {
.plan-chip { font-size:10px; padding:3px 6px; }
.plan-chip .pc-largo { display:none; }
.plan-chip .pc-corto { display:inline; }
}
/* admin compacto: una linea por comercio, el detalle en una ventana */
.adm-res { display:flex; flex-wrap:wrap; gap:6px 16px; margin:18px 2px 12px; font-size:13px; color:var(--muted); }
.adm-res b { color:var(--text); font-size:15px; }
.adm-res .mal b { color:var(--danger); } .adm-res .aviso b { color:var(--warning); }
.adm-card { padding:6px !important; }
.adm-lista { display:flex; flex-direction:column; }
.adm-fila { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr) 80px minmax(0,1.2fr) 20px; align-items:center; gap:12px; width:100%;
text-align:left; border:0; border-radius:10px; background:transparent; color:var(--text); font:inherit; padding:8px 12px; cursor:pointer; }
.adm-fila + .adm-fila { border-top:1px solid var(--border); border-radius:0; }
.adm-fila:hover { background:var(--tint); border-radius:10px; }
.adm-fila.susp { opacity:.6; }
.af-nom { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.af-nom b, .af-nom small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.af-nom small { color:var(--muted); font-size:12px; }
.af-plan { font-size:13px; font-weight:600; color:var(--muted); }
.af-ab { justify-self:start; font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; max-width:100%;
overflow:hidden; text-overflow:ellipsis; }
.af-ir { color:var(--muted); display:flex; }
@media (max-width: 600px) {
.adm-fila { grid-template-columns:minmax(0,1fr) auto 16px; row-gap:4px; }
.af-plan, .af-rec { display:none; }
}
@media (min-width: 601px) and (max-width: 900px) {
.adm-fila { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.2fr) 20px; } .adm-fila .af-plan { display:none; }
}
.adm-cab { cursor:default; padding-top:4px; padding-bottom:6px; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.adm-cab:hover { background:transparent; }
.adm-cab + .adm-fila { border-top:1px solid var(--border); }
.af-rec { display:flex; flex-direction:column; min-width:0; line-height:1.25; font-size:13px; }
.af-rec b, .af-rec small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .af-rec b { font-weight:600; }
.af-rec small, .af-abc small { color:var(--muted); font-size:12px; }
.adm-cab .af-rec { font-size:11.5px; }
.af-abc { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.af-abc small.vencido, .ad-datos dd.vencido { color:var(--danger); }
.ad-rec { margin-bottom:4px; } .ad-rec dd small { color:var(--muted); font-weight:500; }
.ad-rec-link { margin:0 0 4px; font-size:13px; } .ad-rec-link a { display:inline-flex; align-items:center; gap:4px; color:var(--primary); }
.ad-rec-link svg { width:14px; height:14px; }
dialog#modal:has(.adm-det) { width:min(620px, calc(100vw - 24px)); }
.ad-cab { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
.ad-cab h3 { margin:0 0 2px; }
.ad-cab small { color:var(--muted); font-size:13px; }
.ad-abono { width:100%; flex-direction:row !important; align-items:center; justify-content:space-between; gap:10px; border:0;
font:inherit; text-align:left; cursor:pointer; }
.ad-abono > span:first-child { display:flex; flex-direction:column; gap:2px; }
.ad-abono small { font-size:12.5px; opacity:.85; }
.ad-link { font-size:13px; font-weight:700; white-space:nowrap; display:flex; align-items:center; gap:2px; }
.ad-datos { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin:12px 0 14px; }
.ad-datos div { background:var(--neutral); border-radius:10px; padding:8px 10px; }
.ad-datos dt { font-size:11.5px; color:var(--muted); }
.ad-datos dd { margin:0; font-weight:700; }
.ad-datos dd.si { color:var(--success); } .ad-datos dd.no { color:var(--muted); font-weight:600; }
.ad-acc { display:flex; flex-wrap:wrap; gap:6px; }
.ad-acc form { margin:0; }
.ad-acc .btn { font-size:14px; padding:7px 12px; }
@media (max-width: 480px) { .ad-datos { grid-template-columns:repeat(2, minmax(0,1fr)); } }
/* ================= Cuentas (contabilidad del comercio) ================= */
/* Estilo sobrio: superficies neutras, bordes finos, color solo como acento (puntos, deltas, etiquetas). */
:root { --cu-ing:#2F7D5B; --cu-gas:#B4534B; --cu-ing-bg:#EAF4EE; --cu-gas-bg:#F8ECEA; --cu-linea:#E7EAEE; }
:root[data-tema="dark"] { --cu-ing:#5FB38A; --cu-gas:#E08A82; --cu-ing-bg:#16291F; --cu-gas-bg:#2E1C1A; --cu-linea:#243040; }
.cu-cab { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:4px 0 16px; }
.cu-mes { display:flex; align-items:center; gap:10px; }
.cu-mes h2 { font-size:20px; font-weight:700; letter-spacing:-.02em; margin:0; min-width:170px; text-align:center; }
.cu-nav { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border);
border-radius:8px; color:var(--muted); background:var(--surface); text-decoration:none; }
.cu-nav:hover { color:var(--text); border-color:var(--muted); }
.cu-hoy { font-size:13px; color:var(--muted); text-decoration:none; border-bottom:1px dashed var(--border); }
.cu-hoy:hover { color:var(--text); }
.cu-acc { display:flex; gap:8px; }
/* indicadores */
.cu-kpis { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); background:var(--surface); border:1px solid var(--border);
border-radius:14px; margin-bottom:12px; }
.cu-kpi { padding:16px 20px 14px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.cu-kpi + .cu-kpi { border-left:1px solid var(--cu-linea); }
.cu-lbl { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; color:var(--muted); letter-spacing:.01em; }
.cu-kpi b { font-size:28px; font-weight:650; letter-spacing:-.025em; line-height:1.05; color:var(--text);
font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cu-kpi b.neg { color:var(--cu-gas); }
.cu-sub { font-size:12.5px; display:flex; align-items:center; gap:4px; min-height:18px; }
.cu-vs { color:var(--muted); }
.cu-delta { font-weight:600; font-variant-numeric:tabular-nums; padding:1px 6px; border-radius:6px; }
.cu-delta.bien { color:var(--cu-ing); background:var(--cu-ing-bg); }
.cu-delta.mal { color:var(--cu-gas); background:var(--cu-gas-bg); }
.cu-pt { display:inline-block; width:7px; height:7px; border-radius:50%; flex:none; }
.cu-pt.ing { background:var(--cu-ing); } .cu-pt.gas { background:var(--cu-gas); } .cu-pt.aviso { background:#D69E2E; }
.cu-tag { font-style:normal; font-size:11px; font-weight:600; padding:1px 7px; border-radius:999px; margin-left:2px; }
.cu-tag.pos { color:var(--cu-ing); background:var(--cu-ing-bg); }
.cu-tag.neg { color:var(--cu-gas); background:var(--cu-gas-bg); }
/* por cobrar */
.cu-pend { background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-bottom:12px; }
.cu-pend summary { display:flex; align-items:center; gap:10px; padding:10px 16px; cursor:pointer; list-style:none; font-size:13.5px; color:var(--muted); }
.cu-pend summary::-webkit-details-marker { display:none; }
.cu-pend summary b { color:var(--text); font-weight:650; }
.cu-pend summary span { flex:1; }
.cu-pend summary em { font-style:normal; font-weight:600; color:var(--text); display:inline-flex; align-items:center; gap:2px; font-size:13px; }
.cu-pend[open] summary em { display:none; }
.cu-pend .cu-lista { border-top:1px solid var(--cu-linea); padding:4px 12px 10px; }
.cu-todo { padding-top:8px; text-align:right; }
/* bloques */
.cu-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.cu-grid .card, .cu-movs { padding:16px 20px; margin:0 !important; border-radius:14px; box-shadow:none; }
.cu-tit { font-weight:600; margin:0 0 14px; font-size:14px; color:var(--text); letter-spacing:-.005em; }
.cu-tit-fila { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.cu-tit-fila .cu-tit { margin:0; }
.cu-vacio { color:var(--muted); font-size:13px; margin:4px 0; }
/* grafico de 6 meses */
.cu-barras { display:flex; align-items:flex-end; gap:8px; height:140px; border-bottom:1px solid var(--cu-linea); }
.cu-col { flex:1; height:100%; display:flex; flex-direction:column; align-items:center; text-decoration:none; color:var(--muted); position:relative; }
.cu-par { flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; gap:3px; }
.cu-par i { width:28%; max-width:14px; border-radius:3px 3px 0 0; min-height:2px; transition:opacity .15s; }
.cu-par i.i, .cu-ley i.i { background:var(--cu-ing); }
.cu-par i.g, .cu-ley i.g { background:#C9CFD6; }
:root[data-tema="dark"] .cu-par i.g, :root[data-tema="dark"] .cu-ley i.g { background:#4A5666; }
.cu-col:not(.actual) .cu-par i.i { opacity:.45; }
.cu-col:hover .cu-par i { opacity:1; }
.cu-col small { position:absolute; bottom:-20px; font-size:11px; text-transform:capitalize; }
.cu-col.actual small { color:var(--text); font-weight:600; }
.cu-ley { display:flex; gap:16px; justify-content:flex-end; margin-top:28px; font-size:11.5px; color:var(--muted); }
.cu-ley i { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; vertical-align:0; }
/* barras horizontales */
.cu-bar { display:grid; grid-template-columns:minmax(0,1fr) auto 38px; grid-template-areas:"n m p" "t t t"; column-gap:10px; row-gap:6px; margin-bottom:12px; }
.cu-bn { grid-area:n; font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cu-bm { grid-area:m; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.cu-bp { grid-area:p; font-size:12px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; }
.cu-bt { grid-area:t; height:4px; background:var(--cu-linea); border-radius:99px; overflow:hidden; }
.cu-bt i { display:block; height:100%; border-radius:99px; }
/* listas */
.cu-lista { display:flex; flex-direction:column; }
.cu-item { display:grid; grid-template-columns:44px minmax(0,1fr) auto 20px; align-items:center; gap:12px; padding:10px 4px;
border-bottom:1px solid var(--cu-linea); }
.cu-lista > .cu-item:last-child, .cu-lista > details:last-child > summary.cu-item { border-bottom:0; }
.cu-item[role="button"] { cursor:pointer; }
.cu-item[role="button"]:hover { background:var(--neutral); border-radius:8px; }
.cu-pend .cu-item { grid-template-columns:44px minmax(0,1fr) auto auto; }
.cu-fecha { color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; display:flex; }
.cu-txt { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.cu-txt b { font-size:14px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cu-txt small { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cu-monto { font-weight:600; font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--text); }
.cu-monto.ing { color:var(--cu-ing); }
.cu-monto.gas { color:var(--text); }
.cu-ir { color:var(--border); display:flex; }
.cu-item:hover .cu-ir { color:var(--muted); }
.cu-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; vertical-align:1px; }
.cu-turnos summary { list-style:none; cursor:pointer; }
.cu-turnos summary::-webkit-details-marker { display:none; }
.cu-turnos summary:hover { background:var(--neutral); border-radius:8px; }
.cu-turnos .cu-item.sub { padding-left:12px; }
.cu-turnos .cu-item.sub .cu-txt b { font-weight:500; }
/* gastos fijos */
.cu-fijo { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:10px 0;
border-bottom:1px solid var(--cu-linea); }
.cu-fijo:last-child { border-bottom:0; }
.cu-fijo.pagado .cu-txt b { color:var(--muted); }
.cu-fijo.vencido .cu-txt small { color:var(--cu-gas); }
.cu-ok { color:var(--cu-ing); display:flex; }
.cu-falta { font-weight:500; color:var(--muted); font-size:12.5px; }
.cu-editable { border:0; background:transparent; font:inherit; cursor:pointer; color:var(--text); display:inline-flex; align-items:center;
gap:5px; padding:3px 6px; border-radius:6px; }
.cu-editable:hover { background:var(--neutral); }
.cu-editable .ic { color:var(--muted); opacity:.6; }
.cu-editable small { color:var(--muted); font-weight:500; }
.btn.cu-cargar { background:transparent; border:1px dashed #D69E2E; color:#B7791F; font-weight:600; }
.btn.cu-cargar:hover { background:#FFF8EB; }
:root[data-tema="dark"] .btn.cu-cargar { color:#F6C66E; }
:root[data-tema="dark"] .btn.cu-cargar:hover { background:#2E2412; }
/* filtros y pie */
.cu-filtro { display:flex; border:1px solid var(--border); border-radius:8px; padding:2px; }
.cu-filtro a { padding:3px 10px; border-radius:6px; font-size:12.5px; text-decoration:none; color:var(--muted); font-weight:500; }
.cu-filtro a.on { background:var(--neutral); color:var(--text); }
.cu-pie { display:flex; gap:6px; flex-wrap:wrap; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:1px solid var(--cu-linea); }
.cu-pie .btn { color:var(--muted); font-weight:500; }
.cu-pie .btn:hover { color:var(--text); }
/* formularios */
.cu-monto-in { display:flex; align-items:baseline; gap:8px; border-bottom:1px solid var(--border); margin:6px 0 16px; padding-bottom:6px; }
.cu-monto-in span { font-size:20px; font-weight:500; color:var(--muted); white-space:nowrap; flex:none; }
.cu-monto-in input { border:0 !important; outline:none; background:transparent; font:inherit; font-size:32px; font-weight:600;
letter-spacing:-.02em; width:100%; color:var(--text); padding:0 !important; box-shadow:none !important; font-variant-numeric:tabular-nums; }
.cu-monto-in:focus-within { border-color:var(--text); }
.cu-cats { display:flex; flex-wrap:wrap; gap:6px; }
.cu-cat input { position:absolute; opacity:0; pointer-events:none; }
.cu-cat span { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--border); border-radius:8px;
font-size:12.5px; cursor:pointer; background:var(--surface); color:var(--text); }
.cu-cat span i { width:6px; height:6px; border-radius:50%; }
.cu-cat input:checked + span { border-color:var(--text); background:var(--neutral); font-weight:600; }
.cu-cat-fila { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.cu-cat-fila input[type="text"] { flex:1; min-width:0; }
.cu-colores { display:flex; gap:4px; flex:none; }
.cu-colores input { display:none; }
.cu-colores i { display:block; width:14px; height:14px; border-radius:50%; cursor:pointer; opacity:.3; }
.cu-colores input:checked + i { opacity:1; box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--text); }
@media (max-width: 900px) { .cu-grid { grid-template-columns:1fr; } }
@media (max-width: 640px) {
.cu-mes h2 { font-size:18px; min-width:0; }
.cu-acc { width:100%; }
.cu-acc .btn { flex:1; justify-content:center; }
.cu-kpis { grid-template-columns:1fr 1fr; }
.cu-kpi { padding:12px 14px; }
.cu-kpi:nth-child(3) { grid-column:1 / -1; border-left:0; border-top:1px solid var(--cu-linea); }
.cu-kpi b { font-size:22px; }
.cu-colores i { width:12px; height:12px; }
.cu-item { grid-template-columns:38px minmax(0,1fr) auto 16px; gap:8px; }
}
/* =====================================================================
Estilo sobrio para todo el panel (la misma linea que Cuentas):
superficies neutras, bordes finos, sombras minimas, pesos medios,
el color solo como acento. Va al final para pisar lo anterior.
===================================================================== */
:root { --radius:14px; --shadow:0 1px 2px rgba(15,23,42,.04); --linea:#E7EAEE; }
:root[data-tema="dark"] { --shadow:0 1px 2px rgba(0,0,0,.35); --linea:#243040; }
/* tarjetas y titulos */
.card { border-radius:14px; box-shadow:none; padding:22px; }
.card + .card { margin-top:14px; }
.sec-h { font-size:18px; font-weight:650; letter-spacing:-.015em; line-height:1.25; }
.sec-sub { font-size:13.5px; line-height:1.5; }
.sec-titulo { font-size:11.5px; letter-spacing:.06em; font-weight:600; color:var(--muted); }
.estado-hero h2 { font-size:20px; font-weight:650; letter-spacing:-.015em; }
.estado-hero .ico-g { border-radius:14px; }
.saludo { font-weight:700; letter-spacing:-.01em; }
.top .quien b { font-weight:650; }
/* botones */
.btn:not(.btn-icon) { border-radius:10px; padding:8px 14px; font-weight:600; font-size:14px; }
.btn.btn-sm:not(.btn-icon) { padding:5px 10px; font-size:13px; border-radius:8px; }
.btn-out { border-color:var(--border); }
.btn-out:hover { border-color:color-mix(in srgb, var(--muted) 45%, var(--border)); background:var(--neutral); }
.btn-ghost { font-weight:500; }
/* formularios */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=time],
input[type=tel],input[type=search],select,textarea { border-radius:10px; padding:9px 12px; border:1px solid var(--border); background:var(--surface); }
input:focus,select:focus,textarea:focus { outline:2px solid color-mix(in srgb, var(--primary) 30%, transparent); outline-offset:0;
border-color:color-mix(in srgb, var(--primary) 60%, var(--border)); }
.campo label, label { font-weight:500; }
/* etiquetas */
.chip { font-weight:600; font-size:11.5px; border-radius:6px; padding:2px 8px; }
/* tablas */
th { background:transparent; color:var(--muted); font-weight:600; font-size:12px; letter-spacing:.02em; border-bottom:1px solid var(--border); padding:10px 14px; }
th:first-child, th:last-child { border-radius:0; }
td { border-top:1px solid var(--linea); }
/* ventanas */
dialog#modal { border-radius:16px; }
.modal-in h3 { font-size:17px; font-weight:650; letter-spacing:-.01em; }
/* resumen del dia (arriba de la agenda) */
.resumen { border-radius:14px; box-shadow:none; }
.resumen .dato { padding:12px 18px; gap:4px; }
.resumen .dato + .dato { border-left-color:var(--linea); }
.resumen .dato b, .dato b { font-size:22px; font-weight:650; letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums; }
.dato.alerta b { color:#B7791F; }
:root[data-tema="dark"] .dato.alerta b { color:#F6C66E; }
.dato.baja b { color:var(--muted); }
.resumen .dato span, .dato span { font-size:12.5px; }
/* pestañas y vistas */
.tab { font-weight:500; }
.tab.activa { font-weight:600; }
.vistas { background:transparent; border:1px solid var(--border); border-radius:8px; padding:2px; }
.vistas a { border-radius:6px; padding:4px 12px; font-size:13px; font-weight:500; }
.vistas a.on { background:var(--neutral); box-shadow:none; color:var(--text); }
/* agenda: encabezado */
.ag-nav .titulo h2 { font-size:20px; font-weight:700; letter-spacing:-.02em; }
.hoy-tag { font-weight:600; }
.dia-cab { background:transparent; border:1px solid var(--linea); border-radius:10px; }
.dia-cab-txt b { font-weight:600; }
.avatar { border-width:1.5px !important; }
/* agenda: horas de la linea de tiempo (la "lupa" sigue, pero sin gritar) */
.dia .tl-fila.n2 .hh { font-size:13px; font-weight:500; }
.dia .tl-fila.n3 .hh { font-size:14.5px; font-weight:600; }
.dia .tl-fila.n4 .hh { font-size:17px; font-weight:650; color:var(--text); }
.dia .tl-fila.n4 { background:color-mix(in srgb, var(--primary) 3%, transparent); }
.tl-fila { border-top-color:var(--linea); }
/* agenda: tarjetas de turno */
.turno { background:color-mix(in srgb, var(--c) 7%, var(--surface)); border:1px solid color-mix(in srgb, var(--c) 16%, var(--border));
border-left:3px solid var(--c); border-radius:8px; }
.turno:hover { box-shadow:0 4px 14px rgba(15,23,42,.08); transform:none; }
.turno.en-curso { box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.turno.pendiente { background:var(--surface); }
.t-hora { font-weight:600; color:color-mix(in srgb, var(--c) 55%, var(--muted)); }
.t-cli { font-weight:600; }
.turno.grande .t-cli { font-size:15.5px; }
.turno.grande .t-hora { font-size:12.5px; }
.t-tag { font-weight:600; font-size:10.5px; border-radius:5px; letter-spacing:0; padding:1px 6px; }
.t-tag.ahora { background:var(--text); color:var(--surface); }
.t-tag.sena { background:#FDF3E1; color:#B7791F; }
:root[data-tema="dark"] .t-tag.sena { background:#2E2412; color:#F6C66E; }
.dia .tl-ahora, .tl-ahora { height:1.5px; background:#D9534F; }
.tl-ahora::before { width:8px; height:8px; top:-3.5px; left:-4px; background:#D9534F; }
.dia .tl-ahora span { background:#D9534F; font-weight:600; border-radius:6px; padding:1px 6px; }
.tl-libre { border-radius:8px; }
.dc { border-radius:6px; }
.leyenda-estados i { border-radius:2px; }
/* agenda: vista semana */
.sem-dia { background:var(--surface); border:1px solid var(--linea); border-radius:12px; }
.sem-dia.hoy { background:color-mix(in srgb, var(--primary) 4%, var(--surface)); box-shadow:none; border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); }
.sem-cab .num { font-size:18px; font-weight:650; }
.sem-cab .cant { background:var(--neutral); font-weight:600; }
.st { border-left-width:3px; border-radius:8px; }
.st:hover { box-shadow:0 4px 12px rgba(15,23,42,.07); }
/* almanaque chico */
.cal-g a.sel { box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--text); }
.cal-cab { font-size:15px; font-weight:650; }
/* recordatorios en la agenda: amarillo mas apagado */
.tl-recor { border-radius:8px; }
/* guia, primeros pasos y otras tarjetas destacadas */
.pasos-lista li a, .guia-pasos li { border-radius:12px; }
.guia-barra { border-radius:12px; background:color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.gb-txt b { font-size:16px; font-weight:650; }
.ab-chip, .af-ab { font-weight:600; }
/* servicios, horarios, listas: bloques con borde fino en vez de relleno gris */
.serv-grid { gap:10px; }
.serv { background:var(--surface); border:1px solid var(--linea); border-radius:12px; padding:14px 16px 10px; gap:8px; }
.serv:hover { border-color:color-mix(in srgb, var(--muted) 40%, var(--border)); }
.serv h3 { font-size:15.5px; font-weight:650; letter-spacing:-.01em; }
.pill { border-radius:6px; padding:2px 8px; font-size:12px; font-weight:500; background:var(--neutral); border-color:transparent; }
.pill.precio { font-weight:600; font-variant-numeric:tabular-nums; }
.fila-item { background:var(--surface); border:1px solid var(--linea); border-radius:10px; }
.hor-res li { background:var(--surface); border:1px solid var(--linea); border-radius:10px; padding:8px 14px; }
.hor-res li b { font-size:13px; font-weight:600; }
.hor-res li span { font-size:13px; }
.semana .dia { background:var(--surface); border:1px solid var(--linea); border-radius:10px; }
.franja { font-weight:500; }
@media (max-width: 760px) {
/* barra de arriba en el celular: que entre el nombre del comercio */
.top .der { gap:0; }
.top .der .btn { padding:6px !important; }
.top .der .btn-icon { width:32px; height:32px; }
.plan-chip:not(.aviso) { display:none; }
.top .quien { min-width:0; }
.top .quien b { font-size:15px; }
}
/* barra de arriba compactada por panel.js cuando las pestañas no entran */
.top.top-compacto .der .btn-txt-hide, .top.top-compacto .quien small { display:none; }
.top.top-compacto .plan-chip .pc-largo { display:none; }
.top.top-compacto .plan-chip .pc-corto { display:inline; }
.top.top-iconos .tab .tab-txt { display:none; }
.top.top-iconos .tab { padding:7px 11px !important; }
/* barra de arriba: un poco mas de ancho util en pantallas grandes y pestañas mas compactas */
@media (min-width: 761px) {
.wrap { max-width:1360px; }
.top .tabs { gap:2px; }
.top .tab { padding:7px 12px !important; gap:6px; font-size:13.5px; }
}
.top.top-mini .quien { display:none; }
.top.top-mini .plan-chip { display:none; }
/* servicios en lista: una linea por servicio */
.serv-lista-filas { display:flex; flex-direction:column; margin-top:6px; }
.sv-fila { display:grid; grid-template-columns:minmax(0,1fr) 80px 110px auto; align-items:center; gap:12px; padding:8px 4px 8px 6px;
border-bottom:1px solid var(--linea); }
.sv-fila:last-child { border-bottom:0; }
.sv-fila:hover { background:var(--neutral); border-radius:8px; }
.sv-nom { font-weight:550; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-dur { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; text-align:right; }
.sv-precio { font-weight:600; font-size:14px; font-variant-numeric:tabular-nums; text-align:right; }
.sv-precio.sin { color:var(--muted); font-weight:400; font-size:13px; }
.sv-acc { display:flex; gap:0; }
.sv-acc form { margin:0; }
.sv-acc .btn-icon { width:30px; height:30px; padding:6px; color:var(--muted); }
.sv-acc .btn-icon:hover { color:var(--text); }
@media (max-width: 560px) {
.sv-fila { grid-template-columns:minmax(0,1fr) auto auto; row-gap:0; }
.sv-dur { grid-column:1; grid-row:2; text-align:left; font-size:12px; }
.sv-precio { grid-column:2; grid-row:1 / span 2; }
.sv-acc { grid-column:3; grid-row:1 / span 2; }
}
/* clientes en lista: una linea por cliente, como planilla (nombre, celular, ultima visita, turnos, botones) */
.cl-lista { display:flex; flex-direction:column; margin-top:10px; border:1px solid var(--border); border-radius:12px; overflow:hidden;
container-type:inline-size; }
.cl-fila { display:grid; grid-template-columns:26px minmax(120px,1.3fr) 150px minmax(150px,1fr) 64px auto; align-items:center;
gap:10px; padding:4px 6px 4px 10px; border-bottom:1px solid var(--linea); min-height:38px; }
.cl-fila[hidden] { display:none; }
.cl-fila.alt { background:color-mix(in srgb, var(--neutral) 55%, var(--surface)); }
.cl-fila:last-of-type { border-bottom:0; }
.cl-fila:hover { background:var(--tint); }
.cl-av { width:26px; height:26px; border-radius:50%; background:var(--neutral); color:var(--muted); display:flex; align-items:center;
justify-content:center; font-weight:600; font-size:12px; }
.cl-fila:hover .cl-av { background:var(--surface); }
.cl-nom { min-width:0; }
.cl-nom b { display:block; font-weight:550; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-tel { color:var(--muted); font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cl-tag { font-style:normal; font-size:10.5px; font-weight:600; color:var(--muted); background:var(--neutral); padding:1px 6px; border-radius:5px; margin-left:4px; vertical-align:1px; }
.cl-cuando { font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-cuando small { color:var(--muted); font-size:12px; }
.cl-n { color:var(--muted); font-size:12.5px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cl-acc { display:flex; }
.cl-acc .btn-icon { width:28px; height:28px; padding:5px; color:var(--muted); }
.cl-acc .btn-icon:hover { color:var(--text); }
.cl-acc .btn-wa-ic { color:#25D366; }
/* si no entra, se van soltando columnas; el nombre queda siempre y al tocarlo se abre el legajo con todo */
@container (max-width:720px) {
.cl-fila { grid-template-columns:26px minmax(0,1fr) 140px auto; }
.cl-cuando, .cl-n { display:none; }
}
@container (max-width:480px) {
.cl-fila { grid-template-columns:minmax(0,1fr) auto; padding-left:12px; }
.cl-av, .cl-tel { display:none; }
}
/* linea de "ahora": fina, en azules que se desvanecen hacia la derecha, con la puntita de flecha a la izquierda */
:root { --ahora-1:#1D4ED8; --ahora-2:#3B82F6; --ahora-3:#38BDF8; }
:root[data-tema="dark"] { --ahora-1:#3B82F6; --ahora-2:#60A5FA; --ahora-3:#7DD3FC; }
.dia .tl-ahora, .tl-ahora { height:1.5px; border-radius:2px;
background:linear-gradient(90deg, var(--ahora-1) 0%, var(--ahora-2) 18%, color-mix(in srgb, var(--ahora-3) 70%, transparent) 45%, transparent 92%); }
.dia .tl-ahora::after, .tl-ahora::after { content:""; position:absolute; left:0; right:40%; top:-2px; height:5px; pointer-events:none;
background:linear-gradient(90deg, color-mix(in srgb, var(--ahora-2) 45%, transparent), transparent); filter:blur(3px); }
.dia .tl-ahora::before, .tl-ahora::before { width:11px; height:10px; top:-4.25px; left:-3px; border-radius:0;
background:linear-gradient(90deg, var(--ahora-1), var(--ahora-3));
clip-path:polygon(0 0, 100% 50%, 0 100%, 32% 50%); filter:drop-shadow(0 0 3px color-mix(in srgb, var(--ahora-3) 70%, transparent)); }
.dia .tl-ahora span { background:linear-gradient(135deg, var(--ahora-1), var(--ahora-2)); color:#fff; font-weight:600; font-size:11px;
border-radius:6px; padding:1px 7px; box-shadow:0 1px 6px color-mix(in srgb, var(--ahora-2) 35%, transparent); letter-spacing:.01em; }
/* sin la etiqueta de la hora: queda solo la linea */
.dia .tl-ahora span { display:none; }
/* vista semana: la linea de "ahora" en el dia de hoy, entre los turnos que ya pasaron y los que vienen */
.sem-ahora { position:relative; height:1.5px; margin:3px 0 3px 6px; border-radius:2px;
background:linear-gradient(90deg, var(--ahora-1) 0%, var(--ahora-2) 25%, color-mix(in srgb, var(--ahora-3) 70%, transparent) 60%, transparent 100%); }
.sem-ahora::before { content:""; position:absolute; width:9px; height:8px; top:-3.25px; left:-7px;
background:linear-gradient(90deg, var(--ahora-1), var(--ahora-3)); clip-path:polygon(0 0, 100% 50%, 0 100%, 32% 50%);
filter:drop-shadow(0 0 3px color-mix(in srgb, var(--ahora-3) 70%, transparent)); }
.sem-ahora::after { content:""; position:absolute; left:0; right:35%; top:-2px; height:5px; pointer-events:none;
background:linear-gradient(90deg, color-mix(in srgb, var(--ahora-2) 45%, transparent), transparent); filter:blur(3px); }
/* cruz de cerrar fija en todas las ventanas (el click afuera ya no las cierra) */
dialog#modal { position:fixed; }
.modal-x { position:absolute; top:12px; right:12px; z-index:5; width:32px; height:32px; border-radius:8px; border:0;
background:transparent; color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.modal-x:hover { background:var(--neutral); color:var(--text); }
dialog#modal:has(.td-x, .busq) .modal-x { display:none; } /* esas ya traen su propia cruz */
.modal-in h3 { padding-right:36px; }
.tn-cab, .ad-cab { padding-right:36px; }
.cl-fila[role="button"] { cursor:pointer; }
.sv-fila[role="button"] { cursor:pointer; }
/* ================= Mi plan (abono del comercio) ================= */
a.plan-chip { text-decoration:none; cursor:pointer; }
a.plan-chip:hover { border-color:var(--muted); color:var(--text); }
.abono-aviso { display:flex; align-items:center; gap:12px; justify-content:space-between; margin:12px 0 14px; padding:10px 16px;
border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); text-decoration:none; font-size:13.5px; }
.abono-aviso b { display:inline-flex; align-items:center; gap:2px; font-weight:600; white-space:nowrap; }
.abono-aviso::before { content:""; width:7px; height:7px; border-radius:50%; flex:none; background:var(--ahora-2, #3B82F6); }
.abono-aviso span { flex:1; }
.abono-aviso.aviso::before { background:#D69E2E; }
.abono-aviso.mal { border-color:color-mix(in srgb, #B4534B 35%, var(--border)); }
.abono-aviso.mal::before { background:#B4534B; }
.abono-aviso:hover { border-color:var(--muted); }
.mp-wrap { max-width:820px; margin:0 auto; }
.mp-cab { margin:6px 0 12px; }
.mp-estado { display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0 !important; }
.mp-estado > div { padding:16px 20px; display:flex; flex-direction:column; gap:3px; }
.mp-estado > div + div { border-left:1px solid var(--linea); }
.mp-lbl { font-size:12px; color:var(--muted); font-weight:500; }
.mp-estado b { font-size:18px; font-weight:650; letter-spacing:-.01em; display:inline-flex; align-items:center; gap:6px; }
.mp-estado small { color:var(--muted); font-size:12.5px; }
.mp-deb.on b { color:var(--cu-ing, #2F7D5B); }
.mp-planes { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mp-plan { position:relative; display:flex; flex-direction:column; gap:4px; padding:14px 16px; border:1px solid var(--border);
border-radius:12px; cursor:pointer; background:var(--surface); margin:0; }
.mp-plan input[type=radio] { position:absolute; opacity:0; pointer-events:none; }
.mp-plan:has(input:checked), .mp-plan.on { border-color:var(--text); box-shadow:0 0 0 1px var(--text); }
.mp-plan b { font-size:15px; font-weight:650; }
.mp-precio { font-weight:650; font-size:20px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.mp-precio small { font-size:12px; color:var(--muted); font-weight:500; }
.mp-plan > small { color:var(--muted); font-size:12.5px; line-height:1.4; }
.mp-plan .btn { align-self:flex-start; margin-top:6px; }
.mp-actual { align-self:flex-start; margin-top:6px; font-size:12px; font-weight:600; color:var(--muted); background:var(--neutral); padding:2px 8px; border-radius:6px; }
.mp-nota { color:var(--muted); font-size:13.5px; margin:0 0 12px; }
.mp-opciones { display:flex; gap:6px; margin-bottom:14px; border:1px solid var(--border); border-radius:10px; padding:3px; width:max-content; max-width:100%; flex-wrap:wrap; }
.mp-op { display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; padding:6px 12px; border-radius:8px;
font:inherit; font-size:13.5px; font-weight:500; color:var(--muted); cursor:pointer; }
.mp-op img { width:18px; height:18px; }
.mp-op.on { background:var(--neutral); color:var(--text); font-weight:600; }
.mp-seguro { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12.5px; margin:10px 0 0; }
.mp-cancelar { margin-top:14px; padding-top:12px; border-top:1px solid var(--linea); }
.aviso-suave { font-size:13.5px; color:var(--muted); border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-bottom:12px; }
@media (max-width: 640px) {
.mp-estado, .mp-planes { grid-template-columns:1fr; }
.mp-estado > div + div { border-left:0; border-top:1px solid var(--linea); }
.abono-aviso { flex-direction:column; align-items:flex-start; gap:4px; }
}
/* Opciones: tarjeta con el plan actual y como paga */
.op-plan { display:grid; grid-template-columns:auto minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr) auto; align-items:center; gap:18px;
padding:14px 20px !important; margin-bottom:14px; text-decoration:none; color:var(--text); }
.op-plan:hover { border-color:color-mix(in srgb, var(--muted) 45%, var(--border)); }
.op-plan-ic { width:36px; height:36px; border-radius:10px; background:var(--neutral); color:var(--muted); display:flex; align-items:center; justify-content:center; }
.op-plan-txt { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.op-plan-txt small { font-size:11.5px; color:var(--muted); min-height:14px; }
.op-plan-txt b { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op-plan-txt b.ok-txt { color:var(--cu-ing, #2F7D5B); }
.op-plan-ir { font-size:13px; font-weight:600; color:var(--muted); display:inline-flex; align-items:center; gap:2px; white-space:nowrap; }
.op-plan:hover .op-plan-ir { color:var(--text); }
.op-plan + .op-top { margin-top:0; }
@media (max-width: 760px) {
.op-plan { grid-template-columns:auto minmax(0,1fr) auto; row-gap:8px; }
.op-plan-txt:nth-of-type(3), .op-plan-txt:nth-of-type(4) { grid-column:2 / 4; }
.op-plan-ir { grid-column:3; grid-row:1; }
}
/* Mi cuenta: acceso a Mi plan */
.cuenta-plan { display:flex; align-items:center; gap:8px; padding:10px 12px; margin:0 0 16px; border:1px solid var(--border);
border-radius:10px; text-decoration:none; color:var(--text); font-weight:500; font-size:14px; }
.cuenta-plan span { flex:1; }
.cuenta-plan:hover { background:var(--neutral); }
/* idioma del panel (Mi cuenta y login) */
.cuenta-idioma { display:flex; align-items:center; gap:8px; padding:8px 8px 8px 12px; margin:0 0 16px; border:1px solid var(--border);
border-radius:10px; font-weight:500; font-size:14px; }
.cuenta-idioma span { flex:1; }
.cuenta-idioma a { padding:5px 10px; border-radius:8px; text-decoration:none; color:var(--muted); font-size:13px; }
.cuenta-idioma a:hover { background:var(--neutral); color:var(--text); }
.cuenta-idioma a.on { background:var(--neutral); color:var(--text); font-weight:600; }
.idioma-fab { position:fixed; top:14px; right:64px; text-decoration:none; color:var(--muted); }
.idioma-fab:hover { color:var(--text); }
/* ayuda y soporte */
.sop-opciones { display:flex; flex-direction:column; gap:8px; margin:14px 0 10px; }
.sop-op { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:12px;
text-decoration:none; color:var(--text); }
.sop-op:hover { background:var(--neutral); border-color:color-mix(in srgb, var(--muted) 40%, var(--border)); }
.sop-op img { width:26px; height:26px; }
.sop-ic { width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.sop-op > span:not(.sop-ic) { flex:1; display:flex; flex-direction:column; line-height:1.3; }
.sop-op b { font-weight:600; font-size:14.5px; }
.sop-op small { color:var(--muted); font-size:12.5px; }
.sop-op > .ic { color:var(--muted); }
.sop-ref { font-size:12.5px; color:var(--muted); margin:4px 0 0; }
.cuenta-plan + .cuenta-plan { margin-top:-8px; }
/* tope de personas del plan */
.tope-plan { border:1px solid var(--border); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.tope-plan p { margin:0; font-size:13.5px; color:var(--muted); line-height:1.5; }
.tope-plan p b { color:var(--text); font-weight:600; }
.mp-plan.deshab { opacity:.55; cursor:not-allowed; }
.mp-noalc { color:#B7791F !important; font-weight:500; }
.mp-arrep { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.mp-arrep form { margin:0; }
/* datos de factura y links en Mi plan */
.mp-fact-cab { display:flex; flex-direction:column; gap:2px; cursor:pointer; list-style:none; }
.mp-fact-cab::-webkit-details-marker { display:none; }
.mp-fact-cab small { color:var(--muted); font-size:12.5px; }
.mp-fact { margin-top:12px; }
.mp-fact-falta { border-color:var(--ahora-2, #3B82F6); box-shadow:0 0 0 3px color-mix(in srgb, var(--ahora-2, #3B82F6) 12%, transparent); }
.mp-fac { display:flex; gap:10px; font-size:12.5px; white-space:nowrap; }
.mp-fac a { color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:3px; }
.mp-fac a:hover { color:var(--text); }
/* ---------- Super-admin: tablero de Cobros (reusa los estilos de Cuentas) ---------- */
.cb-titulo { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--muted); }
.cb-ayuda { font-size:12px; color:var(--muted); font-weight:400; }
.cu-tit .cb-ayuda { margin-left:6px; }
.cu-tag.cb-neutro { color:var(--muted); background:var(--neutral); }
.cu-item.cb-ev { grid-template-columns:44px minmax(0,1fr) auto; }
.cu-item.cb-pago { grid-template-columns:44px minmax(0,1fr) auto auto; }
.cb-grid { align-items:start; }
.cu-txt b .cu-tag { vertical-align:1px; }
.cu-txt small a { color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
.cu-txt small a:hover { color:var(--text); }
.cu-monto.cb-devuelto { color:var(--muted); text-decoration:line-through; }
.cu-par i.cb-barra { width:46%; max-width:26px; }
.adm-res a.adm-link { color:inherit; text-decoration:none; border-bottom:1px dashed var(--border); }
.adm-res a.adm-link:hover { color:var(--text); border-color:var(--muted); }
@media (max-width:640px) { .cu-item.cb-pago .cu-txt small, .cu-item.cb-ev .cu-txt small { white-space:normal; } .cu-item.cb-ev .cu-txt b { white-space:normal; } }
/* ---------- recomendaciones ---------- */
.reg-ref { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--border); border-radius:10px; padding:10px 14px;
margin:4px 0 16px; font-size:14px; line-height:1.45; background:var(--tint); }
.reg-ref svg { color:var(--primary); flex:none; margin-top:2px; }
.recomendar .rec-link { display:flex; gap:8px; margin:14px 0 4px; }
.recomendar .rec-link input { flex:1; min-width:0; font-size:13.5px; color:var(--muted); }
.recomendar .rec-lista { margin-top:18px; border-top:1px solid var(--border); padding-top:12px; }
.recomendar .rec-pend { color:var(--success); font-weight:600; text-transform:none; letter-spacing:0; }
.recomendar .rec-fila { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; }
.recomendar .rec-fila + .rec-fila { border-top:1px solid var(--border); }
.recomendar .rec-fila span { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.recomendar .rec-fila small { color:var(--muted); font-size:12px; }
.recomendar .rec-est { font-style:normal; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap;
border:1px solid var(--border); color:var(--muted); }
.recomendar .rec-est.ok { color:var(--success); border-color:color-mix(in srgb, var(--success) 35%, transparent); }
.recomendar .rec-est.info { color:var(--primary); border-color:color-mix(in srgb, var(--primary) 35%, transparent); }
.inv-card { max-width:520px; display:flex; flex-direction:column; gap:12px; text-align:left; }
.inv-card .olvide { text-align:center; }
.inv-card .inv-img { width:100%; height:auto; border-radius:12px; border:1px solid var(--border); }
.inv-card .rec-tit { text-align:left; margin:6px 0 0; }
.inv-lista { list-style:none; margin:4px 0 6px; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14.5px; }
.inv-lista li { display:flex; gap:9px; align-items:flex-start; }
.inv-lista svg { color:var(--primary); flex:none; margin-top:3px; }
.inv-card .inv-btn { width:100%; justify-content:center; }
.recomendar .rec-mail { display:flex; gap:8px; margin-top:8px; }
.recomendar .rec-mail input { flex:1; min-width:0; }
/* ---------- Chats (charlas de WhatsApp) ---------- */
.ch-wrap { display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:12px; align-items:stretch;
height:calc(100vh - 190px); min-height:460px; }
.ch-conectar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px !important; margin-bottom:12px !important; }
.ch-conectar p { margin:0; flex:1; min-width:220px; font-size:14px; color:var(--muted); }
.ch-conectar p b { color:var(--text); font-weight:600; }
.ch-conectar .marca-logo { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ch-conectar .marca-logo img { width:24px; height:24px; }
.ch-wrap > .card { margin:0 !important; display:flex; flex-direction:column; min-height:0; padding:14px; }
.ch-cab { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
.ch-nota { color:var(--muted); font-size:12px; }
.ch-col-lista #ch-lista { overflow-y:auto; min-height:0; flex:1; margin:0 -6px; }
.ch-item { display:grid; grid-template-columns:36px minmax(0,1fr); gap:10px; align-items:center; padding:9px 8px; border-radius:10px;
text-decoration:none; color:var(--text); }
.ch-item + .ch-item { margin-top:1px; }
.ch-item:hover { background:var(--neutral); }
.ch-item.on { background:var(--tint); }
.ch-av { width:36px; height:36px; border-radius:50%; background:var(--neutral); color:var(--muted); display:flex; align-items:center;
justify-content:center; font-weight:600; font-size:14px; }
.ch-txt { display:flex; flex-direction:column; min-width:0; gap:2px; }
.ch-fila1, .ch-fila2 { display:flex; justify-content:space-between; align-items:center; gap:8px; min-width:0; }
.ch-fila1 b { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-fila1 small { color:var(--muted); font-size:11.5px; white-space:nowrap; }
.ch-fila2 small { color:var(--muted); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-item.nuevo .ch-fila1 b, .ch-item.nuevo .ch-fila2 small { color:var(--text); }
.ch-num { font-style:normal; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--primary); color:var(--on-primary);
font-size:11px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
.ch-pausa { font-style:normal; font-size:10.5px; color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:0 5px; }
.ch-vacio { margin:auto; text-align:center; max-width:360px; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:6px; }
.ch-vacio p { margin:0; }
.ch-vacio b { color:var(--text); }
.ch-aviso { font-size:13px; color:var(--muted); border:1px solid var(--border); border-radius:10px; padding:9px 12px; margin:0; }
.ch-charla-cab { display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.ch-quien { display:flex; flex-direction:column; min-width:0; flex:1; }
.ch-quien b { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-quien small { color:var(--muted); font-size:12.5px; }
.ch-volver { display:none; }
.ch-corto { display:none; }
.ch-charla-cab form { flex-shrink:0; }
.ch-charla-cab small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-estado { font-size:12.5px; color:var(--muted); background:var(--neutral); border-radius:8px; padding:6px 10px; margin-top:8px; }
.ch-mensajes { flex:1; min-height:0; overflow-y:auto; padding:12px 4px; display:flex; flex-direction:column; gap:6px; }
.ch-dia { text-align:center; margin:8px 0 4px; }
.ch-dia span { font-size:11.5px; color:var(--muted); background:var(--neutral); border-radius:8px; padding:2px 10px; }
.ch-msg { max-width:78%; padding:7px 11px 5px; border-radius:12px; font-size:14px; line-height:1.4; border:1px solid var(--border); }
.ch-msg p { margin:0; white-space:pre-wrap; word-break:break-word; }
.ch-msg.entra { align-self:flex-start; background:var(--surface); border-top-left-radius:4px; }
.ch-msg.sale { align-self:flex-end; background:var(--tint); border-color:transparent; border-top-right-radius:4px; }
.ch-msg.sale.a-persona { background:color-mix(in srgb, var(--primary) 14%, var(--surface)); }
.ch-autor { display:block; font-size:11px; color:var(--muted); font-weight:600; margin-bottom:2px; }
.ch-hora { display:block; text-align:right; font-size:10.5px; color:var(--muted); margin-top:2px; }
.ch-escribir { border-top:1px solid var(--border); padding-top:10px; }
.ch-caja { display:flex; gap:8px; align-items:flex-end; }
.ch-caja textarea { flex:1; min-width:0; resize:none; max-height:140px; }
@media (max-width:760px) {
.ch-wrap { grid-template-columns:1fr; height:calc(100vh - 170px); }
.ch-wrap.con-sel .ch-col-lista, .ch-wrap:not(.con-sel) .ch-col-charla { display:none; }
.ch-volver { display:inline-flex; }
.ch-largo { display:none; }
.ch-corto { display:inline; }
.ch-msg { max-width:88%; }
}
/* agenda: arrastrar un turno a otro horario */
/* punteros del sistema (nitidos en cualquier pantalla): la manito al pasar y la flecha de mover al arrastrar.
grab/grabbing no: en Windows son los punteros viejos y pixelados */
.turno.movible, .tl-recor.movible { cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.dia.mv-activo, .dia.mv-activo * { cursor:move !important; }
.dia.mv-activo .tl-libre { pointer-events:none; }
.mv-origen { opacity:.35; }
.mv-fantasma { z-index:30; pointer-events:none; box-shadow:0 10px 28px rgba(15,23,42,.22);
outline:2px solid var(--c, #E0A800); outline-offset:-1px; }
.mv-fantasma.mv-no { opacity:.55; outline-style:dashed; }
.mv-fantasma .mv-etq { font-size:13px; }
.tl-recor.mv-fantasma { opacity:1; } .tl-recor.mv-fantasma .tr-hora { display:none; }
.tl-recor.mv-fantasma .mv-etq { font-weight:700; font-variant-numeric:tabular-nums; }
.mv-res { display:flex; align-items:center; gap:14px; margin-top:6px; }
.mv-res > span:not(.mv-fl) { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:10px;
padding:8px 14px; min-width:84px; }
.mv-res small { color:var(--muted); font-size:11.5px; }
.mv-res b { font-size:20px; font-variant-numeric:tabular-nums; }
.mv-res em { font-style:normal; color:var(--muted); font-size:12px; }
.mv-res .mv-a { border-color:var(--primary); }
.mv-fl { color:var(--muted); }
.mv-avisar { margin-top:12px; }
/* alquiler de productos: configuracion en Servicios */
.alq-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.alq-cab .sec-sub { margin-bottom:0; }
.alq-cab form { margin:4px 0 0; flex-shrink:0; }
.alq-sec { border-top:1px solid var(--border); margin-top:16px; padding-top:14px; }
.alq-tit { font-weight:600; margin:0 0 8px; }
.alq-prod { display:grid; grid-template-columns:minmax(0,1fr) 110px 110px auto; align-items:center; gap:12px;
padding:8px 4px 8px 6px; border-bottom:1px solid var(--border); }
.alq-prod > span:not(.sv-acc) { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.alq-prod b { font-weight:600; font-size:14px; font-variant-numeric:tabular-nums; }
.alq-nom b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14.5px; }
.alq-prod small { color:var(--muted); font-size:12px; }
.alq-precio, .alq-gar { text-align:right; }
.alq-alta { margin-top:14px; }
.alq-alta .fila, .alq-nuevo .fila { align-items:flex-end; }
.fila > .campo.alq-c-nom { flex:2 1 220px; }
.fila > .campo.alq-c-n { flex:0 1 100px; min-width:80px; }
.alq-ops { display:flex; flex-wrap:wrap; gap:10px 22px; }
.alq-op { display:flex; gap:6px; }
.alq-op input { width:76px; }
.alq-op select { width:auto; }
.alq-horarios { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:4px 28px; margin-top:18px; }
.alq-hor-dia { display:grid; grid-template-columns:34px 1fr 14px 1fr; align-items:center; gap:6px; margin-top:6px; }
.alq-hor-dia span { font-size:13px; color:var(--muted); }
.alq-hor-dia input { min-width:0; }
@media (max-width:700px) {
.alq-ops { grid-template-columns:1fr; }
.alq-prod { grid-template-columns:minmax(0,1fr) auto auto; row-gap:2px; }
.alq-gar { grid-column:1; grid-row:2; text-align:left; flex-direction:row !important; gap:4px; }
.alq-precio { grid-column:2; grid-row:1 / span 2; }
.alq-prod .sv-acc { grid-column:3; grid-row:1 / span 2; }
}
/* nuevo alquiler y detalle */
.alq-dt { display:flex; gap:6px; }
.alq-dt input[type=date] { flex:1 1 auto; min-width:0; }
.alq-dt input[type=time] { flex:0 0 108px; }
.alq-rapidas { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.alq-rapidas form { margin:0; }
.alq-rapidas .btn.on { border-color:var(--primary); color:var(--primary); background:var(--tint); }
.alq-res { display:flex; flex-wrap:wrap; gap:0; margin-top:14px; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.alq-res > div { flex:1 1 90px; display:flex; flex-direction:column; padding:8px 12px; border-right:1px solid var(--border); }
.alq-res > div:last-child { border-right:0; }
.alq-res small { color:var(--muted); font-size:11.5px; }
.alq-res b { font-size:16px; font-variant-numeric:tabular-nums; }
.alq-res .alq-total { background:var(--tint); }
.alq-res.mal { opacity:.6; }
.alq-det-cab { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-right:34px; }
.alq-calc .fila + .fila { margin-top:10px; }
.alq-det-cab h3 { margin:0; }
.alq-fechas { margin-top:14px; }
.alq-fechas em { white-space:nowrap; }
.alq-venc { border-color:var(--warning) !important; }
.alq-acc { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-top:16px; }
.alq-acc form { margin:0; }
.alq-devolver { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.alq-cobrar { display:flex; align-items:flex-end; gap:10px; margin-top:14px; flex-wrap:wrap; }
.alq-cobrar .campo { margin:0; flex:0 1 220px; }
.alq-ext { margin-top:14px; border-top:1px solid var(--border); padding-top:10px; }
.alq-ext summary { cursor:pointer; color:var(--muted); font-size:13.5px; }
.alq-ext .fila { align-items:flex-end; }
/* agenda: franja de alquileres del dia y en la semana */
.alq-dia { display:flex; flex-direction:column; gap:8px; margin:0 0 12px; padding:10px 12px; border:1px solid var(--border);
border-radius:12px; background:var(--surface); }
.alq-grupo { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.alq-g-tit { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--muted);
min-width:104px; text-transform:uppercase; letter-spacing:.03em; }
.alq-grupo.vencidos .alq-g-tit { color:var(--warning); }
.alq-item { display:inline-flex; align-items:baseline; gap:6px; padding:5px 10px; border:1px solid var(--border);
border-radius:9px; background:var(--surface); cursor:pointer; font:inherit; font-size:13px; color:var(--text); max-width:100%; }
.alq-item:hover { background:var(--neutral); }
.alq-item b { font-variant-numeric:tabular-nums; font-size:12.5px; }
.alq-item span { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alq-item small { color:var(--muted); font-size:12px; white-space:nowrap; }
.alq-grupo.vencidos .alq-item { border-color:color-mix(in srgb, var(--warning) 45%, var(--border)); }
.st.st-alq { border-left-color:var(--muted); background:var(--surface); border-style:dashed; border-left-style:solid; }
.st.st-alq.vuelve { border-left-color:var(--primary); }
.elegir-btn.alq .elegir-ic { color:var(--primary); }
/* servicios: datos de cada turno, compacto (todo el alta en una fila) */
.dt-card .sec-sub { margin-bottom:10px; }
.dt-item { padding:6px 4px; }
.dt-item .txt b { font-weight:600; }
.dt-alta { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-top:10px; }
.dt-alta .campo { margin:0; }
.dt-alta .dt-nom { flex:1.3 1 150px; }
.dt-alta .dt-tipo { flex:1 1 130px; }
.dt-alta .dt-ops { flex:1.6 1 180px; }
.dt-alta .dt-oblig { margin:0 4px 10px; white-space:nowrap; }
/* facturacion electronica: guia en Opciones */
.fe-listo { display:flex; gap:10px; align-items:flex-start; margin-top:14px; padding:10px 12px; border:1px solid var(--border);
border-radius:10px; background:var(--tint); font-size:14px; }
.fe-listo .ic, .fe-listo svg { color:var(--primary); flex-shrink:0; margin-top:2px; }
.fe-pasos { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; }
.fe-paso { border-top:1px solid var(--border); padding:12px 0; }
.fe-paso.off { opacity:.5; }
.fe-p-cab { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fe-p-cab b { font-weight:600; }
.fe-p-cab small { color:var(--muted); font-size:12.5px; flex-basis:100%; padding-left:36px; margin-top:-2px; }
.fe-n { width:26px; height:26px; border-radius:50%; border:1px solid var(--border); display:inline-flex; align-items:center;
justify-content:center; font-size:13px; font-weight:600; color:var(--muted); flex-shrink:0; }
.fe-paso.hecho .fe-n { border-color:var(--primary); color:var(--primary); background:var(--tint); }
.fe-det { margin:8px 0 0 36px; }
.fe-det summary { cursor:pointer; color:var(--primary); font-size:13.5px; font-weight:500; }
.fe-det[open] summary { margin-bottom:8px; }
.fe-form .fila { margin-bottom:0; }
.fe-guia { margin:0 0 10px; padding-left:20px; font-size:14px; line-height:1.55; }
.fe-guia li { margin-bottom:6px; }
.fe-guia .btn { margin-left:6px; vertical-align:middle; }
.fe-copiar { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--border); border-radius:8px; padding:0 2px 0 8px;
margin:2px 2px; }
.fe-inline { display:flex; align-items:flex-end; gap:10px; }
.fe-inline .campo { margin:0; max-width:220px; }
.fe-probar { margin:8px 0 0 36px; }
.fe-sin { margin:6px 0 0 36px; }
.fe-modo { border-top:1px solid var(--border); padding-top:12px; margin-top:4px; display:flex; flex-direction:column; gap:8px; }
.fe-modo .chk { align-items:flex-start; font-weight:400; }
.fe-modo .chk span { line-height:1.4; }
.fe-modo .alq-tit { margin-bottom:0; }
.fe-ultimas { border-top:1px solid var(--border); padding-top:12px; margin-top:12px; }
.fe-fila { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; padding:6px 4px; border-bottom:1px solid var(--border);
color:var(--text); text-decoration:none; font-size:13.5px; }
.fe-fila:hover { background:var(--neutral); }
.fe-fila small { color:var(--muted); grid-column:1; font-size:12px; }
.fe-fila b { grid-column:2; grid-row:1 / span 2; align-self:center; font-variant-numeric:tabular-nums; }
.fe-fila em { font-style:normal; font-size:11px; color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:0 5px; }
/* recuadro de factura en el turno / alquiler */
.fe-caja { margin:12px 0 0; }
.fe-caja:empty { display:none; }
.fe-hecha { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--border); border-radius:12px; }
.fe-ic { color:var(--primary); display:inline-flex; }
.fe-txt { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.fe-txt b { font-size:14px; font-weight:600; }
.fe-txt small { color:var(--muted); font-size:12px; }
.fe-acc { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.fe-acc form { margin:0; }
.fe-nota { margin:0; font-size:13px; color:var(--muted); }
.fe-no { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.fe-no form { margin:0; }
.fe-emitir summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fe-emitir summary::-webkit-details-marker { display:none; }
.fe-emitir summary .ayuda { margin:0; }
.fe-emitir form { margin-top:10px; padding:12px; border:1px solid var(--border); border-radius:12px; }
.fe-emitir .fila { align-items:flex-end; }
.fe-recep { display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:10px; }
.fe-recep .chk { font-weight:400; }
.fe-no-aut { margin:6px 0 0; }
.fe-nc { margin:6px 0 0; font-size:12.5px; }
/* catalogo de productos */
.cat-boton { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); padding:14px 16px !important; }
.cat-boton:hover { border-color:var(--primary); }
.cat-b-ic { width:38px; height:38px; border-radius:10px; background:var(--tint); color:var(--primary); display:inline-flex;
align-items:center; justify-content:center; flex-shrink:0; }
.cat-b-txt { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.cat-b-txt b { font-weight:600; font-size:15px; }
.cat-b-txt small { color:var(--muted); font-size:12.5px; }
.cat-top { margin-bottom:12px; }
.cat-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.cat-buscar { max-width:260px; }
.cat-lista { margin-top:10px; }
.cat-fila { display:grid; grid-template-columns:80px minmax(0,1fr) 90px 110px auto; gap:12px; align-items:center;
padding:8px 4px; border-bottom:1px solid var(--border); }
.cat-fila:last-of-type { border-bottom:0; }
.cat-cod { color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-nom { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.cat-nom b { font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-nom small { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-stock, .cat-precio { display:flex; flex-direction:column; text-align:right; line-height:1.25; }
.cat-stock small, .cat-precio small { color:var(--muted); font-size:11.5px; }
.cat-precio b, .cat-stock b { font-variant-numeric:tabular-nums; font-weight:600; }
.cat-poco { color:var(--warning); }
.cat-alta .fila { margin-bottom:0; }
.cat-alta > .btn { margin-top:10px; }
.cat-c-cod { flex:0 1 120px; }
.cat-campo { display:flex; align-items:center; justify-content:space-between; padding:4px 4px 4px 10px; border:1px solid var(--border);
border-radius:8px; margin-bottom:6px; font-size:14px; }
.cat-campo form { margin:0; }
@media (max-width:700px) {
.cat-fila { grid-template-columns:minmax(0,1fr) auto auto; row-gap:0; }
.cat-cod { grid-column:1; grid-row:2; }
.cat-nom { grid-column:1; grid-row:1; }
.cat-stock { display:none; }
.cat-precio { grid-column:2; grid-row:1 / span 2; }
.cat-fila .sv-acc { grid-column:3; grid-row:1 / span 2; }
}
/* productos dentro de un turno / alquiler / venta */
.it-caja { margin:10px 0 0; }
.it-lista { border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.it-lista:empty { display:none; }
.it-fila { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:6px 6px 6px 12px;
border-bottom:1px solid var(--border); font-size:14px; }
.it-fila:last-child { border-bottom:0; }
.vn-lista .it-fila { grid-template-columns:minmax(0,1fr) 64px auto auto; }
.it-nom { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.it-nom small { color:var(--muted); }
.it-nom em { font-style:normal; font-size:11px; color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:0 5px; margin-left:4px; }
.it-fila b { font-variant-numeric:tabular-nums; font-weight:600; }
.it-fila form { margin:0; }
.it-hueco { width:30px; }
.it-cant { width:64px; }
.it-nota { margin:6px 0 0; }
.it-cobrar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; font-size:13.5px; }
.it-cobrar select { width:auto; }
.it-agregar { margin-top:6px; }
.it-agregar summary { list-style:none; cursor:pointer; display:inline-block; }
.it-agregar summary::-webkit-details-marker { display:none; }
.it-busq { display:flex; gap:8px; margin-top:6px; }
.it-busq input[type=search] { flex:1; min-width:0; }
.it-sug { display:flex; flex-direction:column; gap:4px; margin-top:6px; max-height:230px; overflow-y:auto; }
.it-s { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; padding:7px 10px; border:1px solid var(--border);
border-radius:9px; background:var(--surface); color:var(--text); font:inherit; font-size:14px; cursor:pointer; text-align:left; }
.it-s:hover { background:var(--neutral); }
.it-s small { color:var(--muted); font-size:12px; }
.it-s-der { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.vn-vacio { margin:8px 0 0; }
.vn-cli { margin-top:12px; }
.vn-cli summary { cursor:pointer; color:var(--muted); font-size:13.5px; }
/* factura por renglones */
.fe-renglones { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.fe-renglon { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:6px 10px;
border:1px solid var(--border); border-radius:9px; font-size:14px; cursor:pointer; }
.fe-renglon b { font-variant-numeric:tabular-nums; }
.fe-r-nom { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.fe-r-nom em { font-style:normal; font-size:11px; color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:0 5px; }
.fe-monto { width:120px; }
/* catalogo como planilla: encabezado, renglones con tonos alternados, detalle cortado que se despliega */
.cat-planilla { border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-top:14px; container-type:inline-size; }
.cat-planilla .cat-enc, .cat-planilla .cat-fila { display:grid;
grid-template-columns:72px minmax(110px,1.1fr) minmax(90px,1.6fr) 64px 96px 64px; gap:10px; align-items:center; padding:7px 10px; }
.cat-planilla .sv-acc .btn-icon { width:28px; height:28px; padding:5px; }
@container (max-width:620px) { /* angosto: sin la columna Detalle (se ve al tocar el renglon) */
.cat-planilla .cat-enc, .cat-planilla .cat-fila { grid-template-columns:64px minmax(0,1fr) 56px 92px 64px; }
.cat-planilla .cat-col-det, .cat-planilla .cat-det { display:none; }
.cat-planilla .cat-fila.con-det .cat-nom b::after { content:" ›"; color:var(--muted); font-weight:400; }
}
.cat-enc { background:var(--neutral); border-bottom:1px solid var(--border); font-size:11.5px; font-weight:600; color:var(--muted);
text-transform:uppercase; letter-spacing:.04em; }
.cat-der { text-align:right; }
.cat-planilla .cat-fila { border-bottom:1px solid var(--border); }
.cat-planilla .cat-fila:last-of-type { border-bottom:0; }
.cat-planilla .cat-fila.alt { background:color-mix(in srgb, var(--neutral) 55%, var(--surface)); }
.cat-planilla .cat-fila[hidden] { display:none; }
.cat-planilla .cat-fila.con-det { cursor:pointer; }
.cat-planilla .cat-fila.con-det:hover { background:var(--tint); }
.cat-planilla .cat-fila.abierto { background:var(--tint); }
.cat-det { color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cat-det em { font-style:normal; opacity:.6; }
.cat-planilla .cat-stock b { font-size:14px; }
.cat-planilla .cat-stock, .cat-planilla .cat-precio { flex-direction:column; }
.cat-planilla .sv-acc { justify-content:flex-end; }
.cat-abierto { grid-column:1 / -1; padding:4px 0 4px 82px; font-size:13.5px; color:var(--text); }
.cat-abierto p { margin:0 0 6px; white-space:pre-wrap; }
.cat-abierto dl { display:grid; grid-template-columns:auto 1fr; gap:2px 12px; margin:0; }
.cat-abierto dt { color:var(--muted); }
.cat-abierto dd { margin:0; }
@media (max-width:760px) {
.cat-planilla .cat-enc { display:none; }
.cat-planilla .cat-fila { grid-template-columns:minmax(0,1fr) auto auto; row-gap:0; }
.cat-planilla .cat-cod { grid-column:1; grid-row:2; }
.cat-planilla .cat-nom { grid-column:1; grid-row:1; }
.cat-planilla .cat-det { grid-column:1; grid-row:3; }
.cat-planilla .cat-stock { display:none; }
.cat-planilla .cat-precio { grid-column:2; grid-row:1 / span 3; }
.cat-planilla .sv-acc { grid-column:3; grid-row:1 / span 3; }
.cat-abierto { padding-left:0; }
}
/* agenda: notas chicas de alquileres (sale / vuelve) y ventas, distintas de los recordatorios (amarillos) */
.tl-marca { position:absolute; left:calc((var(--i) + var(--l) / 100) * (100% / var(--cols)) + 3px);
width:calc(var(--w) / 100 * (100% / var(--cols)) - 6px); display:flex; align-items:center; gap:6px; padding:0 9px;
border-radius:8px; border:1px solid; border-left-width:4px; font:inherit; font-size:12.5px; text-align:left;
cursor:pointer; overflow:hidden; white-space:nowrap; z-index:2; }
.tl-marca b { font-variant-numeric:tabular-nums; flex:none; }
.tl-marca .tm-que { font-weight:600; flex:none; }
.tl-marca .tm-txt { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.tl-marca svg { flex:none; }
.tl-marca:hover { box-shadow:0 4px 12px rgba(15,23,42,.14); z-index:3; }
.tl-marca.sale { background:#EAF1F8; border-color:#C4D6EA; border-left-color:#5B84B1; color:#23405F; }
.tl-marca.vuelve { background:#F8EDE6; border-color:#E8CDBB; border-left-color:#C0724A; color:#5E3218; }
.tl-marca.venta { background:#EDF4EF; border-color:#C9DDCF; border-left-color:#5E9A72; color:#24452F; }
.tl-marca.hecho { opacity:.55; } .tl-marca.hecho .tm-txt { text-decoration:line-through; }
.tl-marca.angosto .tm-que { display:none; }
:root[data-tema="dark"] .tl-marca.sale { background:#1D2B3A; color:#C9DDF2; border-color:#34506E; border-left-color:#7FA6D1; }
:root[data-tema="dark"] .tl-marca.vuelve { background:#35251C; color:#F2D3C2; border-color:#6A4432; border-left-color:#D9906A; }
:root[data-tema="dark"] .tl-marca.venta { background:#1E2F24; color:#CBE6D3; border-color:#3E5E48; border-left-color:#7DBB92; }
.ag-sin-dev { color:#C0724A; border:1px solid #E8CDBB; }
.leg-datos { margin:-4px 0 12px; color:var(--muted); font-size:13.5px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
/* agenda: el turno como nota de color (relleno del color de quien atiende) */
.turno { background:color-mix(in srgb, var(--c) 28%, var(--surface)); border:1px solid color-mix(in srgb, var(--c) 45%, var(--surface));
border-left:4px solid var(--c); border-radius:10px;
box-shadow:0 1px 2px rgba(15,23,42,.06), 0 3px 10px color-mix(in srgb, var(--c) 16%, transparent); }
.turno:hover { box-shadow:0 2px 4px rgba(15,23,42,.08), 0 8px 20px color-mix(in srgb, var(--c) 24%, transparent); }
.turno.pendiente { background:color-mix(in srgb, var(--c) 9%, var(--surface)); border-style:dashed; border-left-style:solid; }
.turno.pagopend { background:color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.t-hora { color:color-mix(in srgb, var(--c) 70%, var(--text)); }
.t-serv, .t-det { color:color-mix(in srgb, var(--c) 30%, var(--muted)); }
/* con una sola columna la nota no va de punta a punta: ocupa hasta ~460px */
.dia:not(.multi) .turno, .dia:not(.multi) .tl-recor, .dia:not(.multi) .tl-marca {
--pista:min(100%, 460px);
left:calc(var(--l) / 100 * var(--pista) + 3px); width:calc(var(--w) / 100 * var(--pista) - 6px); }
/* semana: tambien con relleno de color */
.st:not(.st-recor):not(.st-alq):not(.cancelado):not(.pagopend) { background:color-mix(in srgb, var(--c, var(--primary)) 16%, var(--surface));
border-color:color-mix(in srgb, var(--c, var(--primary)) 30%, var(--surface)); border-left-color:var(--c, var(--primary)); }
.st.pendiente:not(.cancelado) { background:color-mix(in srgb, var(--c, var(--primary)) 7%, var(--surface)); border-style:dashed; border-left-style:solid; }
/* nota chica (turno corto): el servicio va al lado de la hora, para que la nota diga algo */
.t-serv-min { font-weight:500; opacity:.85; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.turno.mediano .t-serv-min, .turno.pasado:not(.en-curso) .t-serv-min { display:none; }
/* nota: el color va en degradé de tonos del mismo color; contorno siempre liso */
.turno { background:linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, var(--surface)) 0%,
color-mix(in srgb, var(--c) 28%, var(--surface)) 55%, color-mix(in srgb, var(--c) 42%, var(--surface)) 100%); }
.turno.pendiente { border-style:solid; background:linear-gradient(135deg, color-mix(in srgb, var(--c) 5%, var(--surface)) 0%,
color-mix(in srgb, var(--c) 16%, var(--surface)) 100%); }
.turno.pagopend { background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)) 0%,
color-mix(in srgb, var(--accent) 30%, var(--surface)) 100%); }
.st.pendiente, .st.pendiente:not(.cancelado) { border-style:solid; }
.st:not(.st-recor):not(.st-alq):not(.cancelado):not(.pagopend):not(.pendiente) {
background:linear-gradient(135deg, color-mix(in srgb, var(--c, var(--primary)) 10%, var(--surface)),
color-mix(in srgb, var(--c, var(--primary)) 30%, var(--surface))); }
.leyenda-estados i.pend { border-style:solid !important; }
/* fondo: red de lineas y puntos (tipo "plexus") arriba a la derecha, que se apaga hacia el centro; queda detras de todo */
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
background:url(/assets/panel/fondo_red.svg) right top / min(1300px, 95vw) auto no-repeat,
radial-gradient(ellipse 70% 80% at 100% 0%, color-mix(in srgb, #7FD3E6 16%, transparent), transparent 70%);
opacity:.75; }
:root[data-tema="dark"] body::before { opacity:.32; }
@media print { body::before { display:none; } }
/* turno corto pegado al siguiente: una sola linea (hora, servicio y cliente) */
.turno.linea { flex-direction:row; align-items:center; gap:6px; padding:2px 8px; }
.turno.linea .t-hora { display:contents; }
.turno.linea .t-fin, .turno.linea .t-serv, .turno.linea .t-det { display:none !important; }
.turno.linea .t-cli { order:2; flex:1; min-width:0; font-size:13px; }
.turno.linea .t-serv-min { order:3; flex:none; max-width:45%; font-size:11.5px; }
.turno.linea .t-tag { order:4; margin-left:0; }
/* choque: el turno se pisa con otro de la misma persona */
.turno.choque { outline:1.5px solid color-mix(in srgb, var(--danger) 70%, transparent); outline-offset:-1px; }
.t-tag.choque { display:inline-flex; gap:3px; background:var(--danger-bg); color:var(--danger); }
.turno.choque .t-tag.choque { display:inline-flex !important; } /* tambien en tarjetas angostas */
@container (max-width:92px) { .t-tag.choque .t-txt { display:none; } .t-tag.choque { padding:0 3px; } }
.turno.pasado:not(.en-curso) .t-tag.choque .t-txt { display:none; }
.choque-banner { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 30%, var(--border)); background:color-mix(in srgb, var(--danger-bg) 55%, var(--surface)); }
@container (max-width:150px) {
.turno.choque .t-tag.choque { position:absolute; top:3px; right:3px; margin:0; padding:0 3px; z-index:1; }
.turno.choque .t-tag.choque .t-txt { display:none; }
}
/* choques en la vista semana */
.st.choque { outline:1.5px solid color-mix(in srgb, var(--danger) 70%, transparent); outline-offset:-1px; }
.st-choque { display:inline-flex; align-items:center; gap:2px; font-size:10.5px; font-weight:600; color:var(--danger);
background:var(--danger-bg); border-radius:5px; padding:0 4px; vertical-align:1px; }
.sem-cab .cant.choque { display:inline-flex; align-items:center; gap:2px; background:var(--danger-bg); color:var(--danger); }
.sem-cab .cant.choque + .cant { margin-left:4px; }
.choques-lista { list-style:none; margin:10px 0; padding:0; max-height:260px; overflow:auto; border:1px solid var(--border); border-radius:10px; }
.choques-lista li { padding:7px 10px; border-top:1px solid var(--border); font-size:13.5px; }
.choques-lista li:first-child { border-top:0; }
.choques-lista small { display:block; color:var(--danger); font-size:12px; }
.adelantar-choca { border:1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); background:color-mix(in srgb, var(--danger-bg) 45%, var(--surface));
border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.adelantar-choca p { margin:0; color:var(--danger); font-size:14px; display:flex; gap:6px; align-items:flex-start; }
.adelantar-choca p b { color:var(--text); }
.ok-msg { display:flex; gap:6px; align-items:center; color:var(--success); background:var(--success-bg); border-radius:10px; padding:8px 12px; font-size:14px; }
/* agenda: ocultar el almanaque (circulito con flecha en el borde) */
.agenda-grid { position:relative; }
.ag-plegar { position:absolute; top:22px; right:calc(300px + 10px - 15px); z-index:6; width:30px; height:30px; border-radius:50%;
display:grid; place-items:center; padding:0; cursor:pointer; background:var(--surface); color:var(--muted);
border:1px solid var(--border); box-shadow:0 1px 3px rgba(15,23,42,.10); transition:right .2s, color .15s; }
.ag-plegar:hover { color:var(--text); border-color:var(--muted); }
.ag-plegar .si-plegada, body.ag-plegada .ag-plegar .si-abierta { display:none; }
body.ag-plegada .ag-plegar .si-plegada { display:inline; }
body.ag-plegada .agenda-grid:not(.semanal) { grid-template-columns:minmax(0,1fr); }
body.ag-plegada .agenda-grid:not(.semanal) > aside { display:none; }
body.ag-plegada .ag-plegar { right:-15px; } /* contra la pared */
@media (max-width:900px) { .ag-plegar { display:none; } body.ag-plegada .agenda-grid > aside { display:block; } }
/* agenda: pantalla completa (solo la agenda, sin barra ni almanaque) */
.ag-full-btn .si-grande, body.ag-full .ag-full-btn .si-chica { display:none; }
body.ag-full .ag-full-btn .si-grande { display:inline-flex; }
.ag-full-btn span { display:inline-flex; }
body.ag-full { overflow:hidden; }
body.ag-full .agenda-grid > section { position:fixed; inset:0; z-index:40; margin:0; border-radius:0; overflow:auto;
padding:14px 18px; background:var(--surface); }
body.ag-full .ag-plegar { display:none; }
/* boton de pantalla completa: solo el icono (dos flechas en diagonal), sin borde, tamaño fijo */
.ag-acc .ag-full-btn, .ag-full-btn { flex:none !important; width:36px; height:36px; min-width:0; padding:0; border:0; border-radius:8px;
background:transparent; color:var(--muted); display:inline-grid; place-items:center; cursor:pointer; }
.ag-full-btn:hover { color:var(--text); background:var(--neutral); }
.ag-full-btn .ic { width:20px !important; height:20px !important; }
/* resumen de arriba: en pantallas chicas una sola tira finita (la agenda es lo que importa) */
.res-largo { font-style:normal; }
@media (max-width:900px) {
.resumen { margin-bottom:8px; border-radius:12px; }
.resumen .dato { flex-direction:row; align-items:baseline; justify-content:center; gap:4px; padding:6px 4px; min-width:0; }
.resumen .dato b { font-size:16px; letter-spacing:-.02em; }
.resumen .dato span { font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.res-largo { display:none; }
}
/* Opciones: direccion del local con mapa */
.ubi { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; margin-top:10px; }
.ubi-form { display:flex; flex-direction:column; gap:10px; }
.ubi-form .campo { margin:0; }
.ubi-link summary { cursor:pointer; color:var(--muted); font-size:13.5px; }
.ubi-link[open] summary { margin-bottom:6px; }
.ubi-link small { color:var(--muted); font-size:12.5px; }
.ubi-acc { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ubi-mapa { border:1px solid var(--border); border-radius:12px; overflow:hidden; min-height:220px; background:var(--neutral); }
.ubi-mapa iframe { display:block; width:100%; height:240px; border:0; }
.ubi-mapa.vacio-b { display:grid; place-items:center; text-align:center; color:var(--muted); padding:16px; }
@media (max-width:760px) { .ubi { grid-template-columns:1fr; } }
/* pestañas reorganizadas: selector dentro de Servicios, imagen del negocio, estado de WhatsApp, cobros en Cuentas */
.sub-nav { display:inline-flex; background:var(--neutral); border-radius:10px; padding:3px; margin:0 0 16px; gap:2px; }
.sub-nav a { padding:7px 18px; border-radius:8px; text-decoration:none; color:var(--muted); font-weight:600; font-size:14px; }
.sub-nav a.on { background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(22,35,43,.12); }
@media (max-width:760px) { .sub-nav { display:flex; } .sub-nav a { flex:1; text-align:center; padding:7px 8px; } }
.img-neg { display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:start; }
.img-neg-logo { display:flex; flex-direction:column; align-items:center; gap:6px; }
.img-neg-logo small { color:var(--muted); font-size:12px; }
.img-neg-banner { display:flex; flex-direction:column; gap:6px; align-items:flex-start; min-width:0; }
.img-neg-banner .banner-box { margin-top:0; width:100%; }
.img-neg-banner .banner-box img { max-height:150px; object-fit:cover; }
@media (max-width:520px) { .img-neg { grid-template-columns:1fr; } }
.wa-estado { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; margin-bottom:14px; }
.wa-estado p { margin:0; flex:1; min-width:200px; }
.wa-estado.on b { color:var(--success); display:inline-flex; align-items:center; gap:4px; }
#conexion { margin-top:16px; }
.cu-sec-tit { font-size:18px; margin:28px 0 12px; }
.agenda-grid.semanal aside { grid-template-columns:minmax(0,340px); }
/* Mi negocio: la tarjeta de imagen (logo + banner) mas ancha que la del logo solo */
.op-top { grid-template-columns:minmax(300px, 400px) minmax(0,1fr); }
.op-top .logo-card { align-items:stretch; text-align:left; }
.op-top .logo-card .img-neg { width:100%; }
@media (max-width:900px) {
.op-top { grid-template-columns:1fr; }
.op-top .logo-card { flex-direction:column; }
}
/* linea de "ahora": arranca desde el borde izquierdo (cruza la columna de las horas) con la hora en una etiqueta
siempre visible; sigue por debajo de los turnos para no taparlos */
.dia .tl-ahora { left:0 !important; }
.dia .tl-ahora::before { left:calc(var(--gut) - 4px) !important; }
.dia .tl-ahora span { display:block !important; right:auto !important; left:2px; top:-9px; margin:0; font-size:11px;
line-height:16px; padding:0 6px; z-index:6; box-shadow:0 0 0 2px var(--surface); }
/* Mi negocio: QR de reservas */
.qr-card { display:flex; gap:18px; align-items:center; }
.qr-mini { width:112px; height:112px; flex:none; padding:8px; border:1px solid var(--border); border-radius:12px; background:#fff; }
.qr-mini svg { width:100%; height:100%; display:block; }
.qr-txt { flex:1; min-width:0; }
.qr-acc { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.qr-url { display:block; margin-top:8px; color:var(--muted); font-size:12.5px; word-break:break-all; }
@media (max-width:600px) { .qr-card { flex-direction:column; align-items:flex-start; } }
.sv-precios { display:flex; flex-direction:column; gap:2px; margin:0 0 10px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; }
.sv-precios small { color:var(--muted); font-size:12.5px; padding-left:52px; }
/* ---- revendedores */
.rv-card { width:min(560px,100%); text-align:left; }
.rv-card .logo, .rv-card .rec-tit { display:block; margin-left:auto; margin-right:auto; text-align:center; }
.rv-card .fila { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; align-items:start; }
.rv-card .fila .campo { min-width:0; }
@media (max-width:480px) { .rv-card .fila { grid-template-columns:1fr; } }
.rv-cond { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 12px; }
.rv-cond > div { border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.rv-cond b { display:block; font-size:20px; color:var(--primary); letter-spacing:-.02em; }
.rv-cond small { color:var(--muted); font-size:12.5px; line-height:1.35; }
.rv-datos-top { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0; }
.rv-datos-top .dato { display:block; border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--card); }
.rv-datos-top b { display:block; font-size:20px; letter-spacing:-.02em; }
.rv-datos-top span { color:var(--muted); font-size:12.5px; }
.rv-grid { display:grid; grid-template-columns:3fr 2fr; gap:16px; margin-bottom:16px; }
.rv-grid .card { margin:0; }
.rv-link { font-size:14px; font-weight:600; word-break:break-all; padding:8px 10px; border:1px solid var(--border); border-radius:8px; }
.rv-lista { display:flex; flex-direction:column; }
.rv-fila { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 10px; border-radius:6px; }
.rv-fila:nth-child(even) { background:var(--soft, rgba(127,127,127,.06)); }
.rv-fila > span { display:flex; flex-direction:column; min-width:0; }
.rv-fila small { color:var(--muted); font-size:12.5px; }
.rv-fila.anulada { opacity:.55; } .rv-fila.anulada .rv-monto b { text-decoration:line-through; }
.rv-monto { text-align:right; flex:none; }
.rv-est { font-style:normal; font-size:12.5px; color:var(--muted); flex:none; }
.rv-est.ok { color:var(--primary); font-weight:600; } .rv-est.mal { color:var(--text); opacity:.6; }
.rv-adm { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:10px 12px; border-radius:8px; }
.rv-adm:nth-child(even) { background:var(--soft, rgba(127,127,127,.06)); }
.rv-adm.pend { box-shadow:inset 3px 0 0 var(--primary); } .rv-adm.susp { opacity:.55; }
.rv-adm-nom { display:flex; flex-direction:column; gap:2px; min-width:0; }
.rv-adm-nom small { color:var(--muted); font-size:12.5px; }
.rv-adm-acc { display:flex; align-items:center; gap:8px; flex:none; }
.rv-saldo { display:flex; flex-direction:column; align-items:flex-end; font-weight:650; margin-right:4px; }
.rv-saldo small { color:var(--muted); font-weight:400; font-size:11.5px; } .rv-saldo.listo { color:var(--primary); }
.legal h3 { font-size:15px; margin:18px 0 6px; } .legal p, .legal li { font-size:14px; line-height:1.55; color:var(--text); }
@media (max-width:800px) { .rv-datos-top { grid-template-columns:1fr 1fr; } .rv-grid { grid-template-columns:1fr; }
.rv-adm { flex-direction:column; align-items:flex-start; } }
@media (max-width:480px) { .rv-cond { grid-template-columns:1fr; } }
.reg-nombre { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
.reg-nombre .campo { min-width:0; }
/* ---- asistente de inicio (/bienvenida) */
.wiz { max-width:620px; margin:18px auto 0; }
.wiz-cab { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.wiz-cab .sec-h { margin:0; }
.wiz-n { color:var(--muted); font-size:13px; white-space:nowrap; }
.wiz-barra { list-style:none; display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin:14px 0 18px; padding:0; }
.wiz-barra li { display:flex; flex-direction:column; gap:5px; min-width:0; }
.wiz-barra span { height:4px; border-radius:2px; background:var(--border); }
.wiz-barra li.hecho span, .wiz-barra li.actual span { background:var(--primary); }
.wiz-barra small { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wiz-barra li.actual small { color:var(--text); font-weight:600; }
.wiz-form { display:flex; flex-direction:column; gap:12px; }
.wiz-sub { margin:0; color:var(--muted); font-size:14.5px; line-height:1.5; }
.wiz-sub b { color:var(--text); font-weight:600; }
.wiz-ya { display:flex; gap:6px; align-items:flex-start; margin:0; font-size:13.5px; color:var(--muted); }
.wiz-ya svg { color:var(--success); flex:none; width:16px; height:16px; margin-top:2px; }
.wiz-2 { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.wiz-2 .campo, .wiz-persona .campo { min-width:0; margin:0; }
.wiz-dias { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.wiz-dias label { cursor:pointer; }
.wiz-dias input { position:absolute; opacity:0; pointer-events:none; }
.wiz-dias span { display:block; text-align:center; padding:9px 0; border:1px solid var(--border); border-radius:10px; font-size:13.5px; font-weight:600; color:var(--muted); }
.wiz-dias input:checked + span { border-color:var(--primary); color:var(--primary); background:color-mix(in srgb, var(--primary) 8%, transparent); }
.wiz-dias input:focus-visible + span { outline:2px solid var(--primary); outline-offset:1px; }
.wiz-corte { font-size:14px; }
.wiz-persona { display:flex; flex-direction:column; gap:12px; padding:14px; border:1px solid var(--border); border-radius:12px; }
.wiz-colores { display:flex; flex-wrap:wrap; gap:8px; }
.wiz-colores label { cursor:pointer; }
.wiz-colores input { position:absolute; opacity:0; pointer-events:none; }
.wiz-colores span { display:block; width:28px; height:28px; border-radius:50%; background:var(--c); box-shadow:0 0 0 2px var(--surface), 0 0 0 3px transparent; }
.wiz-colores input:checked + span { box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.wiz-equipo { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.wiz-equipo li { display:flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border:1px solid var(--border); border-radius:999px; font-size:14px; font-weight:600; }
.wiz-av { width:28px; height:28px; border-radius:50%; background:var(--c); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; overflow:hidden; box-shadow:0 0 0 2px var(--c); }
.wiz-av img { width:100%; height:100%; object-fit:cover; }
.wiz-con { display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--border); border-radius:12px; }
.wiz-con > div { flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.wiz-con small { color:var(--muted); font-size:13px; line-height:1.45; }
.wiz-con .marca-logo { flex:none; }
.wiz-con.on b { color:var(--success); }
.wiz-acc { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:6px; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; }
.wiz-acc-der { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.wiz-acc .btn svg { width:16px; height:16px; }
@media (max-width:520px) {
.wiz-barra small { display:none; }
.wiz-dias span { padding:8px 0; font-size:12.5px; }
.wiz-con { flex-direction:column; align-items:flex-start; }
.wiz-acc-der { width:100%; } .wiz-acc-der .btn { flex:1; justify-content:center; }
}
/* campos personalizados: nombre y como se completa arriba; la lista (si va) abajo a lo ancho; obligatorio y Agregar al final */
.dt-alta { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; align-items:end; }
.dt-alta .dt-ops { grid-column:1 / -1; }
.dt-alta .dt-oblig { margin:0; align-self:center; }
.dt-alta > .btn { justify-self:end; }
@media (max-width:520px) { .dt-alta { grid-template-columns:1fr; } .dt-alta > .btn { justify-self:stretch; justify-content:center; } }
.dt-ayuda { margin:8px 0 0; }
/* agenda: lineas y horas con mas contraste (se leian muy lavadas) */
:root { --linea-hora:#D3DAE0; --texto-hora:#3B4850; }
:root[data-tema="dark"] { --linea-hora:#34474F; --texto-hora:#C3D2D9; }
.tl-fila, .dia .tl-fila { border-top-color:var(--linea-hora); }
.dia .tl-fila .hh, .tl-fila .hh { color:var(--texto-hora); }
.dia .tl-fila.n0 .hh { opacity:.8; }
.dia .tl-fila.n-1 .hh { opacity:.85; } .dia .tl-fila.n-2 .hh { opacity:.7; }
.dia .tl-fila.pasado .hh, .tl-fila.pasado .hh { opacity:.7; }
/* charlas personales (familia, pareja, amigos): boton junto al nombre y seccion al fondo de la lista */
.ch-nombre { display:flex; align-items:center; gap:8px; min-width:0; }
.ch-nombre form { flex:none; margin:0; }
.ch-personal { display:inline-flex; align-items:center; gap:4px; font:inherit; font-size:11.5px; font-weight:600; color:var(--muted);
background:transparent; border:1px solid var(--border); border-radius:999px; padding:2px 9px; cursor:pointer; white-space:nowrap; }
.ch-personal:hover { color:var(--text); border-color:var(--muted); }
.ch-personal.on { color:var(--warning); border-color:var(--warning); background:var(--warning-bg); }
.ch-personal.on:hover { color:var(--warning); border-color:var(--warning); filter:brightness(.97); }
.ch-personal-quitar { font-weight:500; text-decoration:underline; text-underline-offset:2px; }
.ch-personal svg { width:13px; height:13px; }
.ch-sep { margin:12px 8px 4px; padding-top:10px; border-top:1px solid var(--border); font-size:11.5px; font-weight:700;
color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.ch-sep small { text-transform:none; letter-spacing:0; font-weight:500; }
.ch-item.personal .ch-av { opacity:.6; }
.ch-item.personal .ch-fila1 b { font-weight:600; color:var(--muted); }
/* campo personalizado de varias opciones: boton que despliega la lista (en vez de todas las casillas a la vista) */
.multi-sel { position:relative; }
.multi-sel > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px;
font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:11px 14px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.multi-sel > summary::-webkit-details-marker { display:none; }
.multi-sel > summary::after { content:""; flex:none; width:8px; height:8px; margin:-3px 2px 0 0; border:solid var(--muted);
border-width:0 1.6px 1.6px 0; transform:rotate(45deg); transition:transform .15s; }
.multi-sel[open] > summary::after { transform:rotate(-135deg); margin-top:3px; }
.multi-sel[open] > summary { outline:2px solid var(--primary); outline-offset:-1px; }
.multi-sel > summary.vacio { color:var(--muted); }
/* la lista flota por encima (fixed: no la recorta la ventana del turno); el JS la ubica abajo o arriba del boton */
.multi-sel-lista { position:fixed; z-index:1000; background:var(--surface); border:1px solid var(--border); border-radius:12px;
box-shadow:0 12px 32px rgba(15,23,42,.18); padding:6px; max-height:260px; overflow:auto; }
.multi-sel-lista .chk { padding:8px 8px; border-radius:8px; margin:0; }
.multi-sel-lista .chk:hover { background:var(--neutral); }
/* ============================== plan Enterprise ============================== */
.ent-cab { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.ent-cab .sec-sub { margin:0; }
.ent-cab-acc { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ent-tit { font-size:15px; font-weight:650; margin:0 0 10px; display:flex; align-items:center; gap:6px; }
.ent-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.ent-grid > .card { margin:0; }
.ent-lado { display:flex; flex-direction:column; gap:14px; }
.ent-lado .card { margin:0; }
.ent-barra { display:grid; grid-template-columns:minmax(140px,220px) minmax(0,1fr) 120px; gap:12px; align-items:center;
padding:8px 4px; border-top:1px solid var(--border); color:inherit; text-decoration:none; }
.ent-barra:first-of-type { border-top:0; }
.ent-barra:hover { background:var(--neutral); }
.ent-b-nom { display:flex; align-items:center; gap:8px; min-width:0; }
.ent-b-nom i { width:9px; height:9px; border-radius:50%; flex:none; }
.ent-b-nom b { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ent-b-nom small { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ent-b-bar { height:8px; background:var(--neutral); border-radius:99px; overflow:hidden; }
.ent-b-bar span { display:block; height:100%; border-radius:99px; opacity:.85; }
.ent-b-num { font-size:12.5px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; }
.ent-dl { margin:0; display:grid; gap:6px; }
.ent-dl > div { display:flex; justify-content:space-between; gap:12px; font-size:14px; border-bottom:1px solid var(--border); padding:5px 0; }
.ent-dl dt { color:var(--muted); }
.ent-dl dd { margin:0; font-weight:600; text-align:right; }
.ent-aus { margin:0 0 6px; display:flex; flex-direction:column; font-size:14px; }
.ent-aus small { color:var(--muted); }
.ent-aviso { display:flex; gap:8px; align-items:flex-start; color:inherit; text-decoration:none; font-size:14px; }
.ent-tabla-wrap { overflow-x:auto; }
.ent-tabla { width:100%; border-collapse:collapse; font-size:14px; }
.ent-tabla th { text-align:left; font-weight:600; color:var(--muted); font-size:12.5px; padding:8px; border-bottom:1px solid var(--border); white-space:nowrap; }
.ent-tabla td { padding:8px; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; }
.ent-tabla tr.aud-mal td { color:var(--danger); }
@media (max-width:900px) { .ent-grid { grid-template-columns:1fr; } .ent-barra { grid-template-columns:minmax(0,1fr) 90px; } .ent-b-bar { grid-column:1 / -1; order:3; } }
/* organigrama */
.org { display:flex; flex-direction:column; gap:18px; }
.org-raiz { display:flex; justify-content:center; position:relative; }
.org-raiz::after { content:""; position:absolute; left:50%; bottom:-18px; height:18px; border-left:1px solid var(--border); }
.org-ramas { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px; padding-top:14px; border-top:1px solid var(--border); }
.org-caja { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.org-dir { min-width:min(100%, 420px); }
.org-etq { font-weight:650; font-size:14px; display:flex; align-items:center; gap:6px; }
.org-sub { font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.org-gente { display:flex; flex-direction:column; gap:6px; }
.org-p { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--neutral); border:1px solid transparent;
border-radius:10px; padding:7px 9px; font:inherit; color:inherit; cursor:pointer; }
.org-p:hover { border-color:var(--border); background:var(--surface); }
.org-p[disabled] { cursor:default; }
.org-txt { display:flex; flex-direction:column; min-width:0; flex:1; }
.org-txt b { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.org-txt small { color:var(--muted); font-size:12px; }
.org-est { font-size:11.5px; color:var(--muted); white-space:nowrap; }
.org-p.est-suspendida { opacity:.6; }
.org-p.est-sin_cuenta .org-est, .org-p.est-pendiente .org-est { color:var(--warning); }
.org-sin { border-style:dashed; }
/* ficha de persona */
.persona .per-estado { margin:-4px 0 10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.persona .per-estado small { color:var(--muted); }
.per-roles { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.per-rol { display:flex; gap:8px; align-items:flex-start; border:1px solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer; }
.per-rol:has(input:checked) { border-color:var(--primary); background:var(--tint); }
.per-rol span { display:flex; flex-direction:column; gap:2px; }
.per-rol small { color:var(--muted); font-size:12px; line-height:1.35; }
.per-chips { display:flex; flex-wrap:wrap; gap:6px; }
.per-chip { cursor:pointer; position:relative; }
.per-chip input { position:absolute; opacity:0; pointer-events:none; }
.per-chip span { display:inline-block; border:1px solid var(--border); border-radius:8px; padding:5px 10px; font-size:13.5px; }
.per-chip input:checked + span { border-color:var(--primary); background:var(--tint); color:var(--primary); }
.per-chip input:focus-visible + span { outline:2px solid var(--primary); }
.per-mas { margin:10px 0; border:1px solid var(--border); border-radius:10px; padding:8px 12px; }
.per-mas summary { cursor:pointer; color:var(--muted); font-size:14px; }
.per-mas[open] summary { margin-bottom:10px; }
.per-serv { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:6px; }
.per-sv { display:flex; align-items:center; gap:8px; font-size:13.5px; }
.per-sv span { flex:1; min-width:0; }
.per-sv input[type=number] { width:86px; }
.per-pie { display:flex; gap:6px; flex-wrap:wrap; border-top:1px solid var(--border); margin-top:12px; padding-top:10px; }
@media (max-width:620px) { .per-roles { grid-template-columns:1fr; } }
/* configuracion */
.cfg-accesos { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin-bottom:16px; }
.cfg-a { display:flex; gap:10px; align-items:flex-start; color:inherit; text-decoration:none; margin:0; }
.cfg-a:hover { border-color:var(--primary); }
.cfg-a span { display:flex; flex-direction:column; gap:2px; }
.cfg-a small { color:var(--muted); font-size:12.5px; }
.cfg-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; align-items:start; }
.cfg-grid .card { margin:0; }
.cfg-item { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); }
.cfg-item input[type=text] { flex:1; min-width:0; }
.cfg-item .txt { flex:1; }
.cfg-item.off { opacity:.6; }
.cfg-alta { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.cfg-alta input[type=text] { flex:1; min-width:160px; }
.cfg-num { width:120px; }
.cfg-reglas { margin:12px 0 0; padding-left:18px; color:var(--muted); font-size:13.5px; display:grid; gap:4px; }
@media (max-width:900px) { .cfg-grid { grid-template-columns:1fr; } }
/* pacientes */
.pac-lista { display:flex; flex-direction:column; }
.pac-fila { display:grid; grid-template-columns:minmax(0,1fr) 110px 110px auto; gap:12px; align-items:center; padding:9px 6px; border-top:1px solid var(--border); }
.pac-fila.alt { background:color-mix(in srgb, var(--neutral) 50%, transparent); }
.pac-nom { display:flex; flex-direction:column; min-width:0; }
.pac-nom small { color:var(--muted); font-size:12.5px; }
.pac-f { display:flex; flex-direction:column; font-size:13.5px; font-variant-numeric:tabular-nums; }
.pac-f small { color:var(--muted); font-size:11.5px; }
.pac-acc { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.pac-turnos p { margin:0; padding:5px 0; border-bottom:1px solid var(--border); font-size:14px; }
.pac-turnos p.fut b { color:var(--primary); }
.pac-turnos small { color:var(--muted); margin-left:6px; }
@media (max-width:760px) { .pac-fila { grid-template-columns:minmax(0,1fr) auto; } .pac-f { display:none; } }
/* historia clinica */
.hc-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; }
.hc-col, .hc-lado { display:flex; flex-direction:column; gap:14px; min-width:0; }
.hc-col .card, .hc-lado .card { margin:0; }
.hc-linea { display:flex; flex-direction:column; gap:12px; }
.hc-comp { display:flex; flex-direction:column; gap:4px; margin:6px 0 12px; font-size:14px; }
.hc-comp > span { font-weight:600; }
.hc-e header { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; margin-bottom:6px; }
.hc-e header small { color:var(--muted); }
.hc-vis { margin-left:auto; font-size:11.5px; color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:1px 7px; display:inline-flex; gap:4px; align-items:center; }
.hc-e.restr { border-left:3px solid var(--warning); }
.hc-txt { white-space:pre-wrap; margin:0 0 8px; font-size:14.5px; line-height:1.5; overflow-wrap:anywhere; }
.hc-adj { display:inline-flex; align-items:center; gap:6px; margin:2px 8px 2px 0; font-size:13.5px; border:1px solid var(--border); border-radius:8px; padding:4px 9px; text-decoration:none; color:var(--primary); }
.hc-adj small { color:var(--muted); }
.hc-enm { border-left:2px solid var(--border); padding:4px 0 2px 10px; margin-top:8px; }
.hc-enm small { color:var(--muted); font-size:12px; }
.hc-mio { margin-top:8px; font-size:13.5px; }
.hc-mio summary { cursor:pointer; color:var(--muted); }
.hc-mio form { margin-top:8px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.hc-mio .hc-vis-f { flex-direction:row; align-items:center; }
.hc-rec { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 0; border-top:1px solid var(--border); }
.hc-rec small { color:var(--muted); }
.hc-rec-f { display:flex; gap:6px; flex-wrap:wrap; }
.hc-oc { display:flex; flex-direction:column; gap:6px; padding:8px 0; border-top:1px solid var(--border); }
.hc-oc > span { display:flex; flex-direction:column; }
.hc-oc small { color:var(--muted); font-size:12.5px; }
.hc-pedir { display:flex; gap:6px; }
.hc-pedir input { flex:1; min-width:0; }
@media (max-width:980px) { .hc-grid { grid-template-columns:1fr; } }
/* historias compartidas */
.acc-fila { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:10px 0; border-top:1px solid var(--border); }
.acc-fila > span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.acc-fila small { color:var(--muted); font-size:12.5px; }
.acc-form { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
/* agenda general: filtros y vista mes */
.ag-filtros { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:space-between; border-top:1px solid var(--border);
border-bottom:1px solid var(--border); padding:8px 0; margin:0 0 12px; }
.agf-form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.agf-c { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); margin:0; }
.agf-c select { font-size:13.5px; padding:5px 8px; min-height:0; width:auto; }
.agf-multi { position:relative; }
.agf-multi summary { list-style:none; display:flex; gap:6px; align-items:center; cursor:pointer; border:1px solid var(--border); border-radius:8px; padding:5px 10px; }
.agf-multi summary::-webkit-details-marker { display:none; }
.agf-multi summary b { color:var(--text); font-weight:600; }
.agf-lista { position:absolute; z-index:30; top:calc(100% + 4px); left:0; min-width:220px; max-height:320px; overflow:auto;
background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 30px rgba(15,23,42,.14); padding:8px 10px;
display:flex; flex-direction:column; gap:2px; color:var(--text); }
.agf-lista .btn { margin-top:6px; align-self:flex-start; }
.agf-vistas { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.agf-vista { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:99px; font-size:12.5px; }
.agf-vista a { padding:3px 4px 3px 10px; color:var(--text); text-decoration:none; }
.agf-vista form { margin:0; }
.agf-vista form button { border:0; background:none; color:var(--muted); cursor:pointer; padding:3px 8px 3px 2px; display:inline-flex; }
.agf-guardar { position:relative; font-size:13px; }
.agf-guardar summary { cursor:pointer; color:var(--primary); list-style:none; display:inline-flex; gap:4px; align-items:center; }
.agf-g-form { position:absolute; right:0; top:calc(100% + 4px); z-index:30; display:flex; gap:6px; background:var(--surface);
border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 30px rgba(15,23,42,.14); padding:8px; }
.mes-grid { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.mes-dn { text-align:center; font-size:12px; color:var(--muted); padding:2px 0; }
.mes-d { min-height:84px; border:1px solid var(--border); border-radius:10px; padding:6px 7px; display:flex; flex-direction:column; gap:3px;
color:inherit; text-decoration:none; background:var(--surface); min-width:0; }
.mes-d:hover { border-color:var(--primary); }
.mes-d.fuera { opacity:.35; }
.mes-d.pasado { background:var(--neutral); }
.mes-d.hoy { border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
.mes-d.n3 { background:color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.mes-d.n4 { background:color-mix(in srgb, var(--primary) 13%, var(--surface)); }
.mes-num { font-weight:650; font-size:14px; }
.mes-n { font-size:12px; color:var(--muted); }
.mes-n b { color:var(--text); }
.mes-profs { display:flex; gap:3px; align-items:center; flex-wrap:wrap; }
.mes-profs i { width:8px; height:8px; border-radius:50%; }
.mes-profs small { font-size:11px; color:var(--muted); }
.mes-cerr { font-size:11.5px; color:var(--muted); }
@media (max-width:760px) { .mes-d { min-height:58px; padding:4px; } .mes-n { font-size:11px; } }
.td-ent { color:var(--muted); }
.tn-sobre { margin:6px 0 2px; }
.ad-ent { display:flex; flex-direction:column; gap:3px; border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin:10px 0; font-size:13.5px; }
.ad-ent span { color:var(--muted); }
.ad-ent .btn { align-self:flex-start; margin-top:4px; }
.per-hor-dias { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.per-hor-d { display:grid; grid-template-columns:120px auto auto; gap:10px; align-items:center; font-size:13.5px; }
.per-hor-n { display:flex; flex-direction:column; line-height:1.25; }
.per-hor-t { display:inline-flex; gap:4px; align-items:center; color:var(--muted); }
.per-hor-t input { width:auto; padding:4px 6px; font-size:13.5px; }
.per-hor-d small { color:var(--muted); font-size:12px; }
@media (max-width:620px) { .per-hor-d { grid-template-columns:1fr; gap:4px; } }
/* duracion de un servicio: horas y minutos uno al lado del otro */
.dur-hm { display:flex; gap:8px; }
.dur-p { flex:1; display:flex; align-items:center; gap:6px; min-width:0; }
.dur-p input { width:100%; min-width:0; }
.dur-p span { color:var(--muted); font-size:14px; }
.dur-p input { min-width:64px; }
/* WhatsApp conectado: el numero a la vista (sin poder borrarlo) y el boton para desconectar con confirmacion */
.wa-conectado { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
border-top:1px solid var(--border); margin-top:16px; padding-top:14px; }
.wa-num { display:flex; flex-direction:column; gap:2px; }
.wa-num .muted { font-size:13px; }
/* =====================================================================
DISEÑO 2026 (maqueta aprobada el 30/10/2026): fondo neutro, tarjetas con sombra suave, menu en una barra,
indicadores con icono y color, y el naranja del logo como acento ("ahora" y el dia de hoy).
Va al final para pisar lo anterior sin tocarlo. Arranca por la Agenda y la cabecera (que es de todo el panel).
===================================================================== */
:root {
--bg:#F3F5F7; --surface:#fff; --border:#E4E9ED; --linea:#EEF2F4; --text:#0F1E26; --muted:#5E6E78;
--primary:#1F5866; --primary-dark:#174652; --tint:#E9F2F4; --neutral:#F1F4F6; --accent:#E8993A;
--sombra-1:0 1px 2px rgba(15,30,38,.05);
--sombra-2:0 1px 2px rgba(15,30,38,.04), 0 6px 20px rgba(15,30,38,.06);
--shadow:var(--sombra-2); --radius:14px;
--ahora-1:#E8993A; --ahora-2:#EFA955; --ahora-3:#F5C38A;
}
:root[data-tema="dark"] {
--bg:#0D151B; --surface:#141E26; --border:#24323D; --linea:#1E2A33; --text:#E8EEF1; --muted:#9FB0BA;
--primary:#5FB3C4; --primary-dark:#7CC4D2; --tint:#16303A; --neutral:#18232C; --accent:#F0A95A; --on-primary:#0D151B;
--sombra-1:0 1px 2px rgba(0,0,0,.3);
--sombra-2:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
--shadow:var(--sombra-2);
--ahora-1:#F0A95A; --ahora-2:#F2B66E; --ahora-3:#F5C38A;
}
body { background:var(--bg); }
/* cabecera: barra blanca con sombra suave; el menu como botonera */
.top { background:color-mix(in srgb, var(--surface) 94%, transparent);
border-bottom:1px solid var(--border); box-shadow:var(--sombra-1); }
/* el blur solo en compu: en el celular crea un contenedor para lo "fixed" y la barra de pestañas tapa la cabecera */
@media (min-width:761px) { .top { -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } }
.top .tabs { background:var(--neutral); border:1px solid var(--linea); border-radius:12px; padding:4px; }
.top .tab { border-radius:9px; }
.top .tab.activa { background:var(--surface); color:var(--primary); box-shadow:var(--sombra-1); font-weight:600; }
/* tarjetas */
.card { border:1px solid var(--linea); border-radius:14px; box-shadow:var(--sombra-2); }
/* numeros del dia: cuatro tarjetas con icono y color propio */
.resumen.resumen-ic { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; background:none; border:0;
box-shadow:none; overflow:visible; border-radius:0; }
.resumen.resumen-ic .dato { background:var(--surface); border:1px solid var(--linea); border-radius:14px; box-shadow:var(--sombra-2);
padding:14px 16px; display:flex; align-items:center; gap:12px; min-width:0; }
.resumen.resumen-ic .dato + .dato { border-left:1px solid var(--linea); }
.resumen.resumen-ic .dato > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.resumen.resumen-ic .dato b { font-size:24px; font-weight:700; line-height:1; color:var(--text); }
.resumen.resumen-ic .dato span { color:var(--muted); }
.dato-ic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none; }
.dato-ic .ic { width:20px !important; height:20px !important; }
.d-turnos .dato-ic { background:var(--tint); color:var(--primary); }
.d-atendidos .dato-ic { background:var(--success-bg); color:var(--success); }
.d-sena .dato-ic { background:var(--warning-bg); color:var(--warning); }
.d-cancel .dato-ic { background:var(--danger-bg); color:var(--danger); }
.resumen.resumen-ic .dato.alerta b { color:var(--warning); }
/* en la agenda del dia los numeros van arriba de la agenda, a la altura del almanaque (no a todo el ancho) */
@media (min-width:901px) {
/* la fila de los numeros mide lo justo: lo que sobra del almanaque (mas alto) va a la fila de la agenda */
.agenda-grid:not(.semanal) { grid-template-rows:auto 1fr; row-gap:12px; }
.agenda-grid:not(.semanal) > .resumen { grid-column:1; grid-row:1; margin-bottom:0; }
.agenda-grid:not(.semanal) > section { grid-column:1; grid-row:2; }
.agenda-grid:not(.semanal) > aside { grid-column:2; grid-row:1 / span 2; }
.agenda-grid:not(.semanal) > .resumen.resumen-ic { gap:10px; }
.agenda-grid:not(.semanal) > .resumen.resumen-ic .dato { padding:10px 12px; gap:10px; }
.agenda-grid:not(.semanal) > .resumen.resumen-ic .dato b { font-size:21px; }
.agenda-grid:not(.semanal) > .resumen.resumen-ic .dato-ic { width:32px; height:32px; border-radius:10px; }
.agenda-grid:not(.semanal) > .resumen.resumen-ic .dato-ic .ic { width:17px !important; height:17px !important; }
}
.agenda-grid > .resumen { min-width:0; }
@media (max-width:760px) {
.resumen.resumen-ic { grid-template-columns:1fr 1fr; gap:10px; }
.resumen.resumen-ic .dato { padding:12px; gap:10px; }
.dato-ic { width:34px; height:34px; border-radius:10px; }
.resumen.resumen-ic .dato b { font-size:20px; }
}
/* encabezado de la agenda */
.hoy-tag { color:var(--accent); }
.vistas { background:var(--neutral); border:1px solid var(--linea); border-radius:10px; padding:3px; }
.vistas a { border-radius:8px; }
.vistas a.on { box-shadow:var(--sombra-1); }
.btn-nuevo { box-shadow:0 1px 2px rgba(15,30,38,.15), inset 0 1px 0 rgba(255,255,255,.15); }
/* almanaque: hoy con el naranja del logo */
.cal-g a.hoy { outline:2px solid var(--accent); outline-offset:-2px; font-weight:700; }
.cal-g a.hoy::after { display:none; }
/* hoy elegido: solo el borde naranja (sin el anillo de "elegido" encima) */
.cal-g a.hoy.sel { box-shadow:none; }
/* --- Diseño 2026: Servicios --- */
/* titulos de tarjeta con su icono */
.sec-h:has(.sec-ic) { display:flex; align-items:center; gap:10px; }
.sec-ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none;
background:var(--tint); color:var(--primary); }
.sec-ic .ic { width:18px !important; height:18px !important; }
/* Servicios / Productos / Alquileres: botonera como Dia/Semana */
.sub-nav { background:var(--neutral); border:1px solid var(--linea); padding:4px; border-radius:12px; }
.sub-nav a { border-radius:9px; }
.sub-nav a.on { color:var(--primary); box-shadow:var(--sombra-1); }
/* filas de servicios: la duracion como etiqueta y el precio destacado */
.sv-fila { padding:10px 8px 10px 10px; border-bottom-color:var(--linea); }
.sv-fila:hover { border-radius:10px; }
.sv-dur { justify-self:end; background:var(--tint); color:var(--primary); padding:3px 10px; border-radius:999px;
font-size:12.5px; font-weight:600; white-space:nowrap; }
.sv-precio { font-weight:700; }
@media (max-width:760px) { .sv-dur { justify-self:start; } }
.serv-lateral .sv-dur { justify-self:start; }
/* --- Diseño 2026: Agenda, columna del costado (proximos turnos y estado del WhatsApp) --- */
.agenda-grid aside { display:flex; flex-direction:column; gap:14px; }
.agenda-grid aside .card + .card { margin-top:0; }
.prox { padding:16px 18px; text-align:left; }
.prox-tit { font-size:15px; font-weight:700; margin:0 0 8px; }
.prox-item { display:flex; gap:12px; align-items:center; width:100%; padding:9px 6px; border:0; border-top:1px solid var(--linea);
background:none; text-align:left; color:var(--text); font:inherit; cursor:pointer; border-radius:8px; }
.prox-item:first-of-type { border-top:0; }
.prox-item:hover { background:var(--neutral); }
.prox-h { min-width:52px; text-align:center; border-radius:9px; background:var(--neutral); padding:6px 4px; font-weight:700;
font-size:13px; font-variant-numeric:tabular-nums; line-height:1.2; }
.prox-h small { display:block; font-size:10.5px; color:var(--muted); font-weight:500; }
.prox-txt { min-width:0; display:flex; flex-direction:column; }
.prox-txt b { font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prox-txt small { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prox-est { font-style:normal; }
.prox-est.e-ok { color:var(--success); } .prox-est.e-sena { color:var(--warning); }
.prox-vacio { margin:4px 0 0; font-size:13px; }
.wa-mini { display:flex; gap:12px; align-items:center; padding:14px 18px; text-decoration:none; color:var(--text); }
.wa-mini b { display:block; font-weight:600; font-size:14px; } .wa-mini small { color:var(--muted); font-size:12px; }
.wa-punto { width:9px; height:9px; border-radius:50%; flex:none; background:var(--warning);
box-shadow:0 0 0 4px var(--warning-bg); }
.wa-mini.on .wa-punto { background:var(--success); box-shadow:0 0 0 4px var(--success-bg); }
.wa-mini:hover { box-shadow:var(--sombra-2), 0 0 0 1px var(--border); }
/* --- Diseño 2026: Mi negocio --- */
/* el plan arriba: icono en su cuadradito como los indicadores */
.op-plan-ic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none;
background:var(--tint); color:var(--primary); }
/* "Atención simultánea": cuadro suave (antes quedaba un hueco grande al costado del equipo) */
#atencion { background:var(--neutral); border:1px solid var(--linea); border-radius:12px; padding:16px 18px; align-self:start; }
#atencion .sec-h { font-size:16px; }
/* equipo: cada persona como una fila de tarjeta */
.cfg-a > .ic, .cfg-a > svg:first-child { box-sizing:content-box; padding:9px; border-radius:12px; background:var(--tint); color:var(--primary); }
/* equipo: a la izquierda la gente y la atencion simultanea; a la derecha, agregar a alguien */
.eq-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:28px; align-items:start; }
#atencion { margin-top:16px; }
.eq-alta { background:var(--neutral); border:1px solid var(--linea); border-radius:12px; padding:18px; }
.eq-alta-tit { font-size:16px; font-weight:700; margin:0 0 12px; }
@media (max-width:860px) { .eq-grid { grid-template-columns:1fr; gap:18px; } }
/* fotos de los productos del catalogo */
.cat-nom { display:flex; align-items:center; gap:10px; min-width:0; }
.cat-nom b { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.cat-foto { width:40px; height:40px; border-radius:9px; object-fit:cover; flex:none; border:1px solid var(--linea); background:var(--surface); }
.cat-foto.sin { display:grid; place-items:center; color:var(--muted); background:var(--neutral); opacity:.7; }
.cat-foto.sin.grande { width:96px; height:96px; border-radius:12px; }
.prod-foto-ed { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.prod-foto-ed img { width:96px; height:96px; border-radius:12px; object-fit:cover; border:1px solid var(--linea); }
/* --- Cuenta del turno (productos, otros cargos y cuanto lleva gastado) --- */
.it-caja.cuenta { background:var(--neutral); border:1px solid var(--linea); border-radius:12px; padding:14px 16px; margin:12px 0 4px; }
.cuenta-tit { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 6px; }
.cuenta-fila, .it-caja.cuenta .it-fila { display:grid; grid-template-columns:minmax(0,1fr) auto 32px; align-items:center; gap:8px;
padding:6px 0; border-bottom:1px solid var(--linea); font-size:14px; }
.cuenta-fila b, .it-caja.cuenta .it-fila b { font-variant-numeric:tabular-nums; font-weight:600; }
.cuenta-fila.chica { font-size:13px; color:var(--muted); border-bottom:0; padding:3px 0; }
.it-x { font-weight:700; color:var(--primary); font-size:13px; }
.it-uni { display:block; color:var(--muted); font-size:12px; }
.cuenta-total { display:flex; justify-content:space-between; align-items:baseline; padding:10px 0 4px; }
.cuenta-total span { font-weight:600; }
.cuenta-total b { font-size:22px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.cuenta-total small { font-size:12px; font-weight:500; color:var(--muted); }
.it-botones { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; margin-top:10px; }
.it-botones .it-agregar { margin:0; }
.it-botones .it-agregar[open] { flex-basis:100%; }
/* buscador de productos: el buscador ancho y la cantidad chica (antes salia al reves) */
.it-busq { display:flex; gap:8px; align-items:flex-end; margin-top:8px; }
.it-busq input[type=search] { flex:1 1 auto; width:auto; min-width:0; }
.it-cant-lbl { display:flex; flex-direction:column; font-size:11px; color:var(--muted); flex:none; }
.it-busq .it-cant { width:72px !important; flex:none; }
.it-s-nom { display:flex; align-items:center; gap:8px; min-width:0; }
.it-s-foto { width:30px; height:30px; border-radius:7px; object-fit:cover; flex:none; }
.it-extra-form { display:flex; gap:8px; margin-top:8px; }
.it-extra-form input[type=text] { flex:1 1 auto; min-width:0; }
.it-extra-form input[type=number] { width:110px; flex:none; }
/* "¿Que se reserva?" arriba del equipo */
.rec-tipo { display:flex; align-items:center; gap:10px; margin:4px 0 8px; flex-wrap:wrap; }
.rec-tipo label { font-size:13px; color:var(--muted); font-weight:600; margin:0; }
.rec-tipo select { width:auto; min-width:220px; }
/* Politicas de reserva (Mi negocio) */
.pol-form { display:flex; flex-direction:column; gap:10px; }
.pol-form .campo { margin:0; }
.pol-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px 14px; }
.pol-ve { margin:2px 0 0; padding:10px 12px; font-size:13px; color:var(--muted); background:var(--tint, var(--neutral)); border-radius:10px; }
.pol-ve b { color:var(--text); }
.pol-form .btn { align-self:flex-start; }
.rec-modos { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:8px; }
.rec-modo { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--border); border-radius:12px; cursor:pointer; }
.rec-modo:has(input:checked) { border-color:var(--primary); background:var(--tint, var(--neutral)); }
.rec-modo input { margin-top:3px; }
.rec-modo span { display:flex; flex-direction:column; gap:2px; }
.rec-modo small, .rec-form .chk small { color:var(--muted); font-size:12.5px; }
.rec-form [hidden] { display:none !important; }
/* Mi plan: mensajes de WhatsApp del mes */
.mwa-barra { height:10px; border-radius:999px; background:var(--neutral, var(--border)); overflow:hidden; margin:6px 0 8px; }
.mwa-barra span { display:block; height:100%; border-radius:inherit; background:var(--primary); transition:width .4s; }
.mwa-barra.lleno span { background:var(--warning); }
.mwa-num { margin:0 0 6px; font-size:14px; color:var(--muted); }
.mwa-num b { color:var(--text); font-size:16px; }
#mensajes-wa form { margin-top:10px; }
/* Agenda › Recordar desde tu WhatsApp */
.rw-modal { max-width:560px; }
.rw-cab { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-right:34px; } /* la × del modal va arriba a la derecha */
.rw-cab h3 { margin:0; text-align:center; font-size:18px; }
.rw-cab h3 small { display:block; font-size:13px; font-weight:500; color:var(--muted); }
.rw-sub { margin:10px 0 14px; font-size:13.5px; line-height:1.5; color:var(--muted); }
.rw-lista { display:flex; flex-direction:column; gap:8px; max-height:55vh; overflow:auto; }
.rw-fila { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; }
.rw-fila.hecho { opacity:.7; }
.rw-hora { font-weight:700; font-variant-numeric:tabular-nums; min-width:44px; }
.rw-cli { flex:1; min-width:0; display:flex; flex-direction:column; }
.rw-cli b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rw-cli small { color:var(--muted); font-size:12.5px; }
.rw-ok { color:var(--success); font-weight:600; }
.rw-est { font-size:12.5px; color:var(--muted); }
.rw-fila .btn img { width:16px; height:16px; }
@media (max-width:620px) { .ag-recordar span { display:none; } }
/* ---------- admin: respaldos en la nube (templates/admin/_nube.html) ---------- */
.nube { padding:14px 16px; margin-bottom:12px; }
.nube-cab { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 12px; }
.nube-tit { display:inline-flex; align-items:center; gap:7px; font-weight:600; }
.nube-num { font-size:13px; color:var(--muted); }
.nube-num b { color:var(--text); }
.nube-barra { height:8px; border-radius:999px; background:var(--border); overflow:hidden; margin:10px 0 8px; }
.nube-barra span { display:block; height:100%; border-radius:inherit; background:var(--success, #16a34a); }
.nube-alerta .nube-barra span { background:var(--danger); }
.nube-txt { margin:0; font-size:13px; color:var(--muted); }
.nube-err { margin:8px 0 0; font-size:13px; color:var(--danger); display:flex; gap:6px; align-items:center; }
.nube-aviso { margin-top:10px; padding:10px 12px; border-radius:10px; display:flex; flex-wrap:wrap; gap:8px 14px;
align-items:center; justify-content:space-between; font-size:13px;
background:color-mix(in srgb, var(--danger) 10%, transparent); border:1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.nube-aviso small { color:var(--muted); }
/* Mi negocio en grilla de dos columnas (menos para bajar): imagen y horarios arriba, equipo abajo de la imagen a lo
ancho, ausencias junto al QR (las dos cortas), politicas y direccion a lo ancho y el recordatorio al final. En el celular, una columna en
el orden del HTML (imagen, equipo, horarios...). */
.op-grid { display:grid; grid-template-columns:minmax(300px, 400px) minmax(0,1fr); gap:14px; align-items:start;
grid-template-areas:"img hor" "eq eq" "aus qr" "pol pol" "ubi ubi" "rec rec"; }
.op-grid > .card, .op-grid > div > .card { margin:0; padding:18px 20px; }
.op-plan + .op-grid { margin-top:0; }
.op-a-img { grid-area:img; align-self:stretch; } .op-a-hor { grid-area:hor; align-self:stretch; }
.op-a-eq { grid-area:eq; min-width:0; } .op-a-aus { grid-area:aus; align-self:stretch; } .op-a-pol { grid-area:pol; }
.op-a-ubi { grid-area:ubi; } .op-a-qr { grid-area:qr; align-self:stretch; } .op-a-rec { grid-area:rec; }
.op-grid .logo-card { align-items:stretch; text-align:left; }
.op-grid .logo-card .img-neg { width:100%; }
.op-grid .img-neg-banner .banner-box img { max-height:110px; }
.op-grid .sec-h { margin-bottom:4px; }
.op-grid .sec-sub { margin:0 0 10px; }
.op-grid .eq-grid { gap:20px; }
.op-grid .op-a-ubi .ubi-mapa { min-height:150px; }
.op-grid .op-a-ubi .ubi-mapa iframe { height:190px; }
.op-grid .op-a-qr .qr-card { align-items:flex-start; }
.op-grid .op-a-qr .qr-mini { width:96px; height:96px; }
.op-grid .op-a-aus .hor-cab, .op-grid .op-a-hor .hor-cab { flex-wrap:wrap; gap:8px; }
@media (max-width:900px) {
.op-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:none; }
.op-grid > * { grid-area:auto !important; }
}
.rec-plus { font-style:normal; font-size:11px; font-weight:700; padding:1px 7px; margin-left:4px; border-radius:999px;
color:var(--primary); background:var(--tint, var(--neutral)); border:1px solid var(--primary); vertical-align:1px; }
/* Basico: al querer conectar WhatsApp se ofrecen Standard y Plus (comercio/_wa_planes.html) */
.wa-planes { display:flex; flex-direction:column; gap:12px; max-width:640px; padding:20px 22px 16px; }
.wa-planes .sec-sub { margin:0; }
.wa-planes-op { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px; }
.wa-plan { display:flex; flex-direction:column; gap:6px; padding:14px 16px; border:1px solid var(--border); border-radius:12px; }
.wa-plan b { font-size:16px; }
.wa-plan-precio { font-size:20px; font-weight:800; color:var(--text); }
.wa-plan-precio small { font-size:12px; font-weight:500; color:var(--muted); margin-left:2px; }
.wa-plan > small { color:var(--muted); font-size:13px; flex:1; }
.wa-plan .btn { align-self:flex-start; margin-top:4px; }
.wa-planes-acc { display:flex; justify-content:flex-end; }
/* Super admin › Costos: lo que entra y lo que sale del mes, en total y por comercio */
.cs-dolar { display:flex; align-items:center; gap:8px; margin:0; }
.cs-dolar label { font-size:13px; color:var(--muted); }
.cs-dolar input { width:96px; padding:6px 10px; }
.cs-kpis b.neg, .cs-tabla .neg { color:var(--danger); }
.cs-tabla .ing { color:var(--success); }
.cs-tabla { display:flex; flex-direction:column; }
.cs-fila { display:grid; grid-template-columns:minmax(0,2.2fr) repeat(4, minmax(0,1fr)); gap:10px; align-items:center;
padding:10px 4px; border-top:1px solid var(--border); font-variant-numeric:tabular-nums; }
.cs-fila > span { display:flex; flex-direction:column; gap:2px; text-align:right; }
.cs-fila > span:first-child { text-align:left; }
.cs-fila small { color:var(--muted); font-size:12px; }
.cs-cab { border-top:0; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.cs-nuevo { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto auto; gap:10px; align-items:end; margin-top:14px; }
.cs-nuevo .campo { margin:0; }
.cs-nuevo .chk { white-space:nowrap; padding-bottom:10px; }
@media (max-width:760px) {
.cs-fila { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.cs-fila > span:first-child { grid-column:1 / -1; }
.cs-cab { display:none; }
.cs-nuevo { grid-template-columns:1fr 1fr; }
.cs-nuevo .campo:first-child { grid-column:1 / -1; }
}
/* --- Diseño 2026: Clientes --- */
/* buscador con la lupa adentro (sirve para cualquier .busq-ic) */
.busq-ic { position:relative; flex:1; display:flex; align-items:center; margin:0; font-weight:400; }
.busq-ic > .ic { position:absolute; left:12px; color:var(--muted); pointer-events:none; }
.busq-ic input { flex:1; width:100%; padding-left:36px !important; background:var(--neutral); border-color:var(--linea); }
.busq-ic input:focus { background:var(--surface); }
.barra-busq #cuenta-clientes { background:var(--neutral); border-radius:999px; padding:4px 10px; font-size:12.5px; font-weight:600; color:var(--muted); }
/* la lista: filas aireadas, sin rayado, avatar en el color de la marca y la fecha como etiqueta */
.cl-lista { border-color:var(--linea); border-radius:12px; }
.cl-fila { grid-template-columns:34px minmax(120px,1.3fr) 150px minmax(160px,1fr) 70px auto; padding:8px 8px 8px 12px; min-height:52px; }
.cl-fila.alt { background:transparent; }
.cl-fila:hover { background:var(--neutral); }
.cl-av { width:34px; height:34px; background:var(--tint); color:var(--primary); font-size:13.5px; font-weight:700; }
.cl-fila:hover .cl-av { background:var(--surface); box-shadow:var(--sombra-1); }
.cl-nom b { font-weight:600; }
.cl-tag { background:var(--warning-bg); color:var(--warning); border-radius:999px; padding:1px 8px; }
.cl-cuando { justify-self:start; max-width:100%; background:var(--neutral); color:var(--text); border-radius:999px; padding:3px 10px; font-size:12.5px; font-weight:600; }
.cl-cuando small { font-weight:500; }
.cl-cuando.prox { background:color-mix(in srgb, var(--primary) 12%, var(--surface)); color:var(--primary); }
.cl-cuando.prox small { color:inherit; opacity:.8; }
.cl-acc { gap:2px; }
.cl-acc .btn-icon { width:32px; height:32px; padding:7px; border-radius:9px; }
.cl-acc .btn-icon:hover { background:var(--surface); box-shadow:var(--sombra-1); }
@container (max-width:720px) { .cl-fila { grid-template-columns:34px minmax(0,1fr) 140px auto; } }
@container (max-width:480px) {
.cl-fila { grid-template-columns:34px minmax(0,1fr) auto; padding-left:10px; }
.cl-av { display:flex; }
.cl-acc .btn-icon { width:30px; height:30px; padding:6px; }
}
@media (max-width:480px) {
.barra-busq { flex-wrap:wrap; gap:8px; }
.barra-busq #cuenta-clientes { order:2; }
}
/* --- Diseño 2026: Cuentas --- */
/* el mes con flechas como botones de la cabecera */
.cu-nav { width:34px; height:34px; border-radius:10px; background:var(--surface); border-color:var(--linea); box-shadow:var(--sombra-1); }
.cu-nav:hover { border-color:var(--border); background:var(--neutral); }
.cu-mes h2 { font-weight:750; letter-spacing:-.025em; }
.cu-hoy { color:var(--accent); border-bottom-color:currentColor; font-weight:600; }
/* ingresos, gastos y resultado: tres tarjetas con icono y color, como los numeros de la agenda */
.cu-kpis:has(.dato-ic) { gap:14px; background:none; border:0; border-radius:0; box-shadow:none; }
.cu-kpis:has(.dato-ic) .cu-kpi { flex-direction:row; align-items:flex-start; gap:12px; background:var(--surface); border:1px solid var(--linea);
border-radius:14px; box-shadow:var(--sombra-2); padding:16px 18px; }
.cu-kpis:has(.dato-ic) .cu-kpi + .cu-kpi { border-left:1px solid var(--linea); }
.cu-kpi > div { display:flex; flex-direction:column; gap:6px; min-width:0; }
.cu-kpi .cu-lbl .cu-pt { display:none; }
.cu-kpi .dato-ic { margin-top:2px; }
.k-ing .dato-ic { background:var(--success-bg); color:var(--success); }
.k-gas .dato-ic { background:var(--danger-bg); color:var(--danger); }
.k-res .dato-ic { background:var(--tint); color:var(--primary); }
.k-res.neg .dato-ic { background:var(--danger-bg); color:var(--danger); }
.cu-kpi b { font-weight:750; }
/* "por cobrar": aviso en ambar */
.cu-pend { background:color-mix(in srgb, var(--warning-bg) 55%, var(--surface)); border-color:color-mix(in srgb, var(--warning) 30%, transparent);
border-radius:14px; box-shadow:var(--sombra-1); }
.cu-pend summary em { color:var(--warning); }
.cu-pend .cu-lista { border-top-color:color-mix(in srgb, var(--warning) 20%, transparent); }
/* tarjetas: misma sombra que el resto y titulos con icono */
.cu-grid .card, .cu-movs { box-shadow:var(--sombra-2); border-color:var(--linea); padding:18px 20px; }
.cu-tit:has(.sec-ic) { display:flex; align-items:center; gap:10px; font-size:15.5px; font-weight:700; }
.cu-tit .sec-ic { width:30px; height:30px; border-radius:9px; }
.cu-tit .sec-ic .ic { width:16px !important; height:16px !important; }
.cu-tit-fila { margin-bottom:10px; }
/* Todo / Ingresos / Gastos: botonera como Dia/Semana */
.cu-filtro { background:var(--neutral); border-color:var(--linea); border-radius:10px; padding:3px; }
.cu-filtro a { border-radius:8px; padding:4px 12px; }
.cu-filtro a.on { background:var(--surface); color:var(--primary); box-shadow:var(--sombra-1); font-weight:600; }
/* movimientos: la fecha como etiqueta y los montos mas firmes */
.cu-fecha { justify-content:center; background:var(--neutral); border-radius:8px; padding:4px 0; font-weight:600; color:var(--muted); }
.cu-turnos summary .cu-fecha { background:var(--tint); color:var(--primary); }
.cu-item { border-bottom-color:var(--linea); }
.cu-item[role="button"]:hover, .cu-turnos summary:hover { border-radius:10px; }
.cu-monto { font-weight:700; }
.cu-bt { height:6px; }
.cu-par i { border-radius:4px 4px 0 0; }
@media (max-width:640px) {
.cu-kpis:has(.dato-ic) { gap:10px; }
.cu-kpis:has(.dato-ic) .cu-kpi { padding:12px; gap:10px; }
.cu-kpis:has(.dato-ic) .cu-kpi:nth-child(3) { border-top:1px solid var(--linea); border-left:1px solid var(--linea); }
.cu-kpi .dato-ic { width:32px; height:32px; border-radius:10px; }
.cu-kpi .dato-ic .ic { width:17px !important; height:17px !important; }
.cu-kpi b { font-size:20px; }
}
/* --- Diseño 2026: WhatsApp (charlas, mensajes dejados, instrucciones, excepciones y conexion) --- */
/* aviso de arriba: tarjeta liviana con el punto verde, como el estado del costado de la agenda */
.wa-estado { padding:12px 18px; gap:14px; }
.wa-estado .marca-logo { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:none; }
.wa-estado .marca-logo img { width:22px; height:22px; }
.wa-estado p { font-size:14px; color:var(--muted); }
.wa-estado.on b { font-weight:700; }
/* las dos columnas de las charlas */
.ch-wrap { gap:14px; }
.ch-wrap > .card { padding:16px; }
.ch-cab { align-items:center; margin-bottom:10px; }
.ch-cab .sec-h { font-size:17px; }
.ch-nota { background:var(--neutral); border-radius:999px; padding:2px 9px; font-weight:500; }
.ch-escribir .ch-nota { background:none; padding:0; display:block; margin-top:6px; }
.ch-item { padding:9px 10px; border-radius:12px; }
.ch-item.on { background:var(--tint); box-shadow:inset 3px 0 0 var(--primary); }
.ch-av { width:38px; height:38px; background:var(--tint); color:var(--primary); font-weight:700; }
.ch-item.on .ch-av { background:var(--surface); }
.ch-pausa { background:var(--warning-bg); color:var(--warning); border-color:transparent; border-radius:999px; padding:1px 7px; font-weight:600; }
.ch-sep { border-top-color:var(--linea); }
/* la charla: cabecera, burbujas y la caja para escribir */
.ch-charla-cab { border-bottom-color:var(--linea); padding-bottom:12px; }
.ch-estado { background:var(--warning-bg); color:color-mix(in srgb, var(--warning) 80%, var(--text)); border-radius:10px; padding:8px 12px; }
.ch-mensajes { padding:14px 8px; gap:8px; margin:0 -4px; background:var(--neutral); border-radius:12px; margin-top:10px; }
.ch-dia span { background:var(--surface); box-shadow:var(--sombra-1); border-radius:999px; font-weight:600; }
.ch-msg { border:0; border-radius:14px; box-shadow:var(--sombra-1); padding:8px 12px 6px; }
.ch-msg.entra { background:var(--surface); }
.ch-msg.sale { background:var(--tint); }
.ch-msg.sale.a-persona { background:color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.ch-escribir { border-top:0; padding-top:12px; }
.ch-caja { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:6px 6px 6px 4px; box-shadow:var(--sombra-1); }
.ch-caja:focus-within { border-color:color-mix(in srgb, var(--primary) 60%, var(--border)); }
.ch-caja textarea { border:0 !important; outline:none !important; background:transparent; }
.ch-caja .btn { border-radius:10px; }
.ch-aviso { background:var(--neutral); border-color:var(--linea); }
.ch-vacio > .ic { box-sizing:content-box; padding:14px; border-radius:16px; background:var(--tint); color:var(--primary); margin-bottom:6px; }
/* mensajes que te dejaron */
.msj { background:var(--surface); border:1px solid var(--linea); border-radius:14px; box-shadow:var(--sombra-1); }
.msj.nuevo { border-color:color-mix(in srgb, var(--accent) 45%, var(--linea)); box-shadow:inset 3px 0 0 var(--accent), var(--sombra-1); }
.sec-h .badge { background:var(--accent); color:#fff; }
/* instrucciones y excepciones */
#instrucciones textarea { background:var(--neutral); border-color:var(--linea); line-height:1.5; }
#instrucciones textarea:focus { background:var(--surface); }
#excepciones .fila-item { border-radius:12px; padding:10px 10px 10px 16px; }
#excepciones .fila-item .txt { font-weight:600; font-variant-numeric:tabular-nums; }
#excepciones > form { background:var(--neutral); border:1px solid var(--linea); border-radius:12px; padding:14px 16px; margin-top:14px; }
#excepciones > form .fila { align-items:flex-end; }
/* conexion */
#whatsapp .wa-conectado { border-top-color:var(--linea); }
#whatsapp .wa-num b { font-size:16px; font-variant-numeric:tabular-nums; }
@media (max-width:760px) {
.wa-estado .btn { margin-left:auto; }
.ch-mensajes { margin:10px -8px 0; border-radius:10px; }
}
/* --- Diseño 2026: ventanas (detalle de turno, alquiler, venta, legajo, nuevo turno, etc.) --- */
dialog#modal, dialog.cartel-plan { border-radius:18px; border:1px solid var(--linea);
box-shadow:0 2px 6px rgba(15,30,38,.06), 0 24px 64px rgba(15,30,38,.22); }
:root[data-tema="dark"] dialog#modal, :root[data-tema="dark"] dialog.cartel-plan { box-shadow:0 24px 64px rgba(0,0,0,.6); }
dialog#modal::backdrop, dialog.cartel-plan::backdrop { background:rgba(15,30,38,.42); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
/* el icono del titulo en su cuadradito, como los titulos de las tarjetas */
.modal-in h3 > svg.ic:first-child { box-sizing:content-box; width:17px !important; height:17px !important; padding:7px; border-radius:10px;
background:var(--tint); color:var(--primary); flex:none; }
.modal-in h3 { gap:10px; font-size:17.5px; font-weight:700; }
/* cajas internas: mismo gris suave y bordes finos */
.td-cli { border:1px solid var(--linea); border-radius:14px; }
.td-av, .td-cli .avatar { background:var(--surface); }
.leg-tit { font-weight:700; }
.td .btn-out, .td-par .btn-out { border-color:var(--linea); box-shadow:var(--sombra-1); }
.td-x, .modal-in .td-x { border-radius:10px; }
.bq-t { border-radius:12px; }
@media (max-width:760px) {
/* la charla no puede ensanchar la pagina: el nombre se corta y "Marcar como personal" baja abajo del nombre */
.ch-wrap { grid-template-columns:minmax(0,1fr); }
.ch-nombre { flex-wrap:wrap; row-gap:4px; }
.ch-nombre b { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.ch-charla-cab { gap:8px; }
}
/* detalle de alquiler en el celular: desde y hasta reparten el ancho y la fecha puede bajar de linea */
@media (max-width:480px) {
.alq-fechas.mv-res { gap:8px; }
.alq-fechas.mv-res > span:not(.mv-fl) { flex:1 1 0; min-width:0; padding:8px 10px; }
.alq-fechas em { white-space:normal; }
}
/* super-admin: tarjetas del QR para mandar a los locales */
.tq-fila { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:10px; }
.tq-com { display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 260px; }
.tq-logo { width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--border); }
.tq-ini { display:flex; align-items:center; justify-content:center; background:var(--tint); color:var(--primary); font-weight:800; }
.tq-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.tq-txt small { color:var(--muted); font-size:12.5px; overflow-wrap:anywhere; }
.tq-avisos { display:flex; flex-wrap:wrap; gap:4px 10px; color:#B7791F !important; }
.tq-avisos span { display:inline-flex; align-items:center; gap:3px; }
.tq-acc { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tq-acc form { margin:0; }
.tq-mail { display:flex; gap:6px; align-items:center; }
.tq-mail input[type=email] { width:200px; padding:6px 10px; }
.tq-mandadas { margin-top:22px; }
.tq-mandadas summary { cursor:pointer; }
/* Mi negocio en el celular: «Imagen del negocio» con el titulo arriba (no al costado), el logo en una fila con sus
botones y el banner a todo el ancho con «Cambiar banner» abajo, en una linea */
@media (max-width:720px) {
.op-grid .logo-card { flex-direction:column; align-items:stretch; gap:14px; }
.op-grid .logo-card .sec-h { align-self:stretch; margin:0; font-size:18px; }
.op-grid .img-neg { grid-template-columns:1fr; gap:16px; }
.op-grid .img-neg-logo { flex-direction:row; align-items:center; gap:12px; }
.op-grid .img-neg-logo .logo-circ { width:60px; height:60px; font-size:22px; order:0; }
.op-grid .img-neg-logo small { flex:1; font-size:14px; color:var(--text); font-weight:600; }
.op-grid .img-neg-logo form { flex:none; }
.op-grid .img-neg-banner .banner-box img { max-height:180px; object-fit:cover; }
.op-grid .img-neg-banner .btn { white-space:nowrap; padding-left:0; }
}