:root{
  --ink:#f3f2f7; --muted:#c3c2b7; --faint:#938fa0; --line:rgba(255,255,255,.12);
  --bg:#0b0a10; --card:rgba(255,255,255,.06); --green:#f7055c; --green-dark:#cf0450; --green-text:#ff6a9c;
  --red:#f0576e; --ok:#0ca30c; --warn:#fab219;
  --glass-border:rgba(255,255,255,.14);
  --glass-blur:20px;
  /* Psicología de color del status (Ciclo 1): rojo = "Sin Contactar" (recién
     entró, ni la primera llamada) o sin respuesta/sin interés -- máxima
     prioridad de contacto. Morado = "Lead con Datos" (ya se llamó y sí se
     obtuvieron los datos -- un paso YA logrado, no pendiente). Amarillo =
     dar seguimiento, verde = cerrado, gris = proveedor (no es prioridad).
     Mismos colores adentro (ficha) y afuera (tabla). */
  --status-sincontactar:var(--red); --status-lead:#7c3aed; --status-seguimiento:#ca8a04; --status-aprobado:#16a34a; --status-proveedor:#8a8a8a;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Helvetica Neue', Arial, sans-serif; color:var(--ink); font-size:14px;
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(247,5,92,.30), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(122,58,237,.26), transparent 48%),
    radial-gradient(circle at 60% 92%, rgba(42,120,214,.24), transparent 55%),
    linear-gradient(160deg, #171120 0%, #0b0a10 55%, #0e0a12 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-color:var(--bg);
}
.serif{font-family:Georgia,'Times New Roman',serif;}
.wrap{max-width:1320px; margin:0 auto; padding:0 32px;}

/* ---- Shell: barra lateral fija a la izquierda + columna de contenido ---- */
.app-shell{display:flex; align-items:flex-start;}
.sidebar{
  width:272px; flex:0 0 272px;
  position:sticky; top:0; align-self:flex-start;
  height:100vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:22px;
  padding:24px 18px;
  background:var(--card);
  border-right:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
}
.main-col{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:100vh;}

.brand h1{font-size:21px; font-weight:normal; color:var(--ink);}
.brand p{color:var(--faint); font-size:12px; margin-top:2px;}
.brand p.live-clock{color:var(--muted); font-weight:600; margin-top:8px;}
.brand .meta{font-size:12px; color:var(--faint); display:flex; flex-direction:column; align-items:stretch; gap:8px; margin-top:14px;}
.brand .meta button{background:rgba(255,255,255,.04); border:1px solid var(--glass-border); border-radius:6px; color:var(--muted); cursor:pointer; font-size:12px; padding:7px 10px;}
.brand .meta button:hover{border-color:rgba(255,255,255,.35); color:var(--ink);}

.filters{display:flex; flex-direction:column; gap:14px;}
.fgroup{display:flex; flex-direction:column; gap:6px;}
.fgroup-inline{display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:12px;}
.stat-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;}
/* "Filtrar por ciclo": título + Sin Contactar + Eventos vendidos arriba,
   Todos/Primer/Segundo/Tercer Ciclo abajo -- las 4 columnas de ambas filas
   tienen que alinear exactas, por eso es un grid y no un flex-row aparte. */
.ciclo-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.ciclo-grid-title{grid-column:1; display:flex; align-items:center; margin:0;}
.stat-mini{flex:1 1 110px; background:rgba(255,255,255,.04); border:1px solid var(--glass-border); border-radius:12px; padding:10px 12px;}
.stat-mini .l{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:4px;}
.stat-mini .v{font-size:18px; font-weight:600; color:var(--ink);}
button.stat-mini{cursor:pointer; text-align:left; font:inherit; transition:all .15s;}
button.stat-mini:hover{border-color:rgba(255,255,255,.35);}
button.stat-mini.on{background:var(--green); border-color:var(--green);}
button.stat-mini.on .l, button.stat-mini.on .v{color:#fff;}
.stat-row.thin{margin-top:8px;}
.stat-mini.thin{padding:6px 10px;}
.stat-mini.thin .l{font-size:7px; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.stat-mini.thin .v{font-size:14px;}
button.stat-mini.thin.on{background:var(--red); border-color:var(--red);}
button.stat-mini.ciclo1:hover{background:rgba(0,217,255,.18); border-color:rgba(0,217,255,.7); box-shadow:0 0 10px rgba(0,217,255,.35);}
button.stat-mini.ciclo2:hover{background:rgba(255,138,0,.18); border-color:rgba(255,138,0,.7); box-shadow:0 0 10px rgba(255,138,0,.35);}
button.stat-mini.ciclo3:hover{background:rgba(0,255,136,.18); border-color:rgba(0,255,136,.7); box-shadow:0 0 10px rgba(0,255,136,.35);}
button.stat-mini.on.ciclo1{background:#00d9ff; border-color:#00d9ff; box-shadow:0 0 16px rgba(0,217,255,.55);}
button.stat-mini.on.ciclo1 .l, button.stat-mini.on.ciclo1 .v{color:#141018;}
button.stat-mini.on.ciclo2{background:#ff8a00; border-color:#ff8a00; box-shadow:0 0 16px rgba(255,138,0,.55);}
button.stat-mini.on.ciclo2 .l, button.stat-mini.on.ciclo2 .v{color:#141018;}
button.stat-mini.on.ciclo3{background:#00ff88; border-color:#00ff88; box-shadow:0 0 16px rgba(0,255,136,.55);}
button.stat-mini.on.ciclo3 .l, button.stat-mini.on.ciclo3 .v{color:#141018;}
button.stat-mini.thin.etapa-sub.on{background:#00d9ff; border-color:#00d9ff; box-shadow:0 0 16px rgba(0,217,255,.55);}
button.stat-mini.thin.etapa-sub.on .l, button.stat-mini.thin.etapa-sub.on .v{color:#141018;}
.stat-mini.thin.etapa-sub{display:flex; align-items:center; justify-content:center; gap:8px;}
.stat-mini.thin.etapa-sub .l{margin-bottom:0; font-size:9px; white-space:nowrap;}
.stat-mini.thin.etapa-sub .v{font-size:18px;}
.gradient-strip{background:linear-gradient(135deg,#f7055c,#7c3aed); border-radius:14px; padding:14px; margin-top:14px;}
.gradient-strip .stat-mini{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3);}
.gradient-strip .stat-mini .l{color:rgba(255,255,255,.8);}
.gradient-strip .stat-mini .v{color:#fff;}
.gradient-strip button.stat-mini:hover{border-color:rgba(255,255,255,.6);}
.gradient-strip button.stat-mini.on{background:#fff; border-color:#fff;}
.gradient-strip button.stat-mini.on .l, .gradient-strip button.stat-mini.on .v{color:#141018;}
/* Boda/XV Años/Revelación/Compromiso (los 4 grandes, no los combo ".thin" de
   abajo) -- fondo blanco siempre; al seleccionar, cambia de color según el
   Ciclo activo (mismo criterio que los botones de Ciclo: celeste/naranja/verde). */
.gradient-strip .stat-mini:not(.thin){background:#fff; border-color:#fff;}
.gradient-strip .stat-mini:not(.thin) .l{color:rgba(20,16,24,.65);}
.gradient-strip .stat-mini:not(.thin) .v{color:#141018;}
.gradient-strip button.stat-mini.on:not(.thin):not(.ciclo1):not(.ciclo2):not(.ciclo3):not(.sincontactar){border:3px solid #141018;}
.gradient-strip button.stat-mini.on.ciclo1{background:#00d9ff; border-color:#00d9ff;}
.gradient-strip button.stat-mini.on.ciclo1 .l, .gradient-strip button.stat-mini.on.ciclo1 .v{color:#141018;}
.gradient-strip button.stat-mini.on.ciclo2{background:#ff8a00; border-color:#ff8a00;}
.gradient-strip button.stat-mini.on.ciclo2 .l, .gradient-strip button.stat-mini.on.ciclo2 .v{color:#fff;}
.gradient-strip button.stat-mini.on.ciclo3{background:#00ff88; border-color:#00ff88;}
.gradient-strip button.stat-mini.on.ciclo3 .l, .gradient-strip button.stat-mini.on.ciclo3 .v{color:#141018;}
.gradient-strip button.stat-mini.on.sincontactar{background:var(--red); border-color:var(--red);}
.gradient-strip button.stat-mini.on.sincontactar .l, .gradient-strip button.stat-mini.on.sincontactar .v{color:#fff;}
/* Blanco sin seleccionar -- al pasar el cursor solo se opaca un poco (mismo
   efecto sin importar qué Ciclo/Sin Contactar esté activo). */
.gradient-strip .stat-mini:not(.thin):not(.on):hover{background:rgba(255,255,255,.82);}
.kpi.gradient-strip{background:linear-gradient(135deg,#f7055c,#7c3aed);}
.card.card-gradient{background:
  radial-gradient(circle at 8% 6%, rgba(88,88,232,.6) 0%, transparent 42%),
  radial-gradient(circle at 94% 96%, rgba(196,62,214,.5) 0%, transparent 45%),
  #3f1e82;
}
.card-gradient .flabel, .card-gradient .note{color:rgba(255,255,255,.85);}
.kpi.kpi-gradient{background:
  radial-gradient(circle at 8% 6%, rgba(88,88,232,.6) 0%, transparent 42%),
  radial-gradient(circle at 94% 96%, rgba(196,62,214,.5) 0%, transparent 45%),
  #3f1e82;
}
.kpi.kpi-status-venta{background:
  radial-gradient(circle at 12% 88%, rgba(255,175,190,.55) 0%, transparent 55%),
  radial-gradient(circle at 92% 85%, rgba(150,205,235,.5) 0%, transparent 55%),
  #f8f6f4;
}
.kpi-status-venta .flabel{color:#6b6570;}
.kpi-status-venta .stat-mini{background:rgba(255,255,255,.65); border-color:rgba(20,16,24,.1);}
.kpi-status-venta .stat-mini .v{color:#26232b;}
.kpi-status-venta button.stat-mini:hover{border-color:rgba(20,16,24,.3);}
.kpi-status-venta .chip{background:rgba(255,255,255,.7); border-color:rgba(20,16,24,.15); color:#26232b;}
/* Tonos por grupo: pálido al pasar el cursor, neón al seleccionar. */
.kpi-status-venta button.stat-mini.tone-red:hover{background:rgba(255,45,77,.16); border-color:rgba(255,45,77,.5);}
.kpi-status-venta button.stat-mini.tone-red.on{background:#ff2d4d; border-color:#ff2d4d; box-shadow:0 0 16px rgba(255,45,77,.55);}
.kpi-status-venta button.stat-mini.tone-red.on .v{color:#fff;}
.kpi-status-venta button.stat-mini.tone-yellow:hover{background:rgba(255,214,0,.18); border-color:rgba(255,214,0,.55);}
.kpi-status-venta button.stat-mini.tone-yellow.on{background:#ffe100; border-color:#ffe100; box-shadow:0 0 16px rgba(255,225,0,.6);}
.kpi-status-venta button.stat-mini.tone-yellow.on .v{color:#141018;}
.kpi-status-venta button.stat-mini.tone-blue:hover{background:rgba(0,217,255,.16); border-color:rgba(0,217,255,.5);}
.kpi-status-venta button.stat-mini.tone-blue.on{background:#00d9ff; border-color:#00d9ff; box-shadow:0 0 16px rgba(0,217,255,.55);}
.kpi-status-venta button.stat-mini.tone-blue.on .v{color:#141018;}
.kpi-status-venta button.stat-mini.tone-green:hover{background:rgba(0,255,136,.16); border-color:rgba(0,255,136,.5);}
.kpi-status-venta button.stat-mini.tone-green.on{background:#00ff88; border-color:#00ff88; box-shadow:0 0 16px rgba(0,255,136,.55);}
.kpi-status-venta button.stat-mini.tone-green.on .v{color:#141018;}
.kpi-status-venta button.stat-mini.tone-orange:hover{background:rgba(255,138,0,.18); border-color:rgba(255,138,0,.5);}
.kpi-status-venta button.stat-mini.tone-orange.on{background:#ff8a00; border-color:#ff8a00; box-shadow:0 0 16px rgba(255,138,0,.55);}
.kpi-status-venta button.stat-mini.tone-orange.on .v{color:#141018;}
#cicloFiltroCard button.stat-mini{text-align:center;}
#cicloFiltroCard button.stat-mini .l, #cicloFiltroCard button.stat-mini .v{text-align:center;}
.vendidos-btn{text-align:center;}
.vendidos-btn .l, .vendidos-btn .v{text-align:center;}
button.vendidos-btn{background:#00ff88; border-color:#00ff88; box-shadow:0 0 16px rgba(0,255,136,.55);}
button.vendidos-btn .l, button.vendidos-btn .v{color:#141018;}
button.vendidos-btn:hover{border-color:#00ff88; box-shadow:0 0 22px rgba(0,255,136,.75);}
button.sincontactar-btn.on{background:var(--red); border-color:var(--red);}
.flabel{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint);}
.chiprow{display:flex; flex-wrap:wrap; gap:6px;}
.mrow{display:flex; align-items:center; gap:6px;}
.mrow select{flex:1 1 auto; min-width:0;}
.chip{padding:6px 12px; border-radius:999px; font-size:12px; border:1px solid var(--glass-border); background:rgba(255,255,255,.04); color:var(--muted); cursor:pointer; transition:all .15s;}
.chip:hover{border-color:rgba(255,255,255,.35);}
.chip.on{background:rgba(255,255,255,.92); border-color:rgba(255,255,255,.92); color:#141018;}
.chip.on.green{background:var(--green); border-color:var(--green); color:#fff;}
.chip.on.ok{background:var(--ok); border-color:var(--ok); color:#fff;}
.chip.on.pago-pagado{background:var(--ok); border-color:var(--ok); color:#fff;}
.chip.on.pago-pendiente{background:var(--red); border-color:var(--red); color:#fff;}
.btn-check{width:26px; height:26px; border-radius:50%; border:none; background:var(--ok); color:#fff; font-size:14px; font-weight:700; cursor:pointer; margin-left:6px; line-height:1;}
.btn-check:hover{background:#0a8a0a;}
.btn-check-edit{width:22px; height:22px; border-radius:50%; border:1px solid var(--glass-border); background:rgba(255,255,255,.04); color:var(--muted); font-size:11px; cursor:pointer; margin-left:6px; line-height:1;}
.btn-check-edit:hover{border-color:rgba(255,255,255,.35); color:var(--ink);}
.chip.on.warn{background:var(--warn); border-color:var(--warn); color:#141018;}
.chip.on.chip-proveedor{background:#8a8a8a; border-color:#8a8a8a; color:#fff;}
.chip.chip-proveedor{border-color:rgba(138,138,138,.5); color:#b8b8b8;}
.chip.chip-proveedor:hover{background:rgba(138,138,138,.2); border-color:#8a8a8a; color:#fff;}
.chip.chip-seguimiento:hover{background:rgba(255,225,0,.18); border-color:rgba(255,225,0,.6);}
.chip.on.chip-seguimiento{background:#ffe100; border-color:#ffe100; color:#141018;}
.chip.chip-sininteres:hover{background:rgba(220,38,38,.25); border-color:rgba(220,38,38,.7);}
.chip.on.chip-sininteres{background:#dc2626; border-color:#dc2626; color:#fff;}
.filters select{border:1px solid var(--glass-border); border-radius:8px; padding:4px 8px; font-size:12px; background:rgba(255,255,255,.05); color:var(--ink);}
.fsummary{font-size:12px; color:var(--faint); line-height:1.5;}
.fsummary b{color:var(--ink); font-weight:500;}
.fsummary .active{color:var(--green-text);}
.clear{align-self:flex-start; background:none; border:none; color:var(--green-text); text-decoration:underline; font-size:12px; cursor:pointer;}

nav{display:flex; flex-direction:column; gap:2px;}
nav button{
  background:none; border:none; border-left:2px solid transparent; border-radius:0 8px 8px 0;
  display:flex; align-items:center; gap:10px;
  text-align:left; padding:10px 12px; font-size:14px; color:var(--muted); cursor:pointer;
}
nav button:hover{background:rgba(255,255,255,.05); color:var(--ink);}
nav button.on{border-left-color:var(--green); background:rgba(247,5,92,.12); color:var(--green-text);}
.navicon{width:18px; height:18px; flex-shrink:0;}
main{padding:24px 0 8px; min-width:0;}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:24px;}
.kpi{
  background:var(--card); border:1px solid var(--glass-border); border-radius:20px; padding:16px;
  backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  box-shadow:0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.kpi.etapa-actual{background:
  radial-gradient(circle at 8% 6%, rgba(88,88,232,.6) 0%, transparent 42%),
  radial-gradient(circle at 94% 96%, rgba(196,62,214,.5) 0%, transparent 45%),
  #3f1e82;
}
/* Tarjetas BAM en Resumen General: una fila por tarjeta. A la izquierda la foto
   (al ras, del tamaño de un cuadro del resumen) y a la derecha todo su
   detalle en tres columnas: cuenta/crédito, ciclos y medidor de lo por pagar. */
.kcard-fila{grid-column:1 / -1; display:grid; grid-template-columns:calc((100% - 60px)/6) minmax(0,1fr); gap:12px; align-items:start;}
.kpi.kcard-img{aspect-ratio:750/461; padding:0; border:none; background-size:cover; background-position:center; background-repeat:no-repeat; background-color:#1b1624; min-width:0; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.4);}
.kpi.kcard-datos{display:grid; grid-template-columns:minmax(220px,1fr) minmax(260px,1.3fr) minmax(240px,1.1fr); gap:16px; min-width:0; align-items:start;}
.kc-col{display:flex; flex-direction:column; gap:8px; min-width:0;}
@media (max-width:1100px){ .kpi.kcard-datos{grid-template-columns:1fr 1fr;} }
@media (max-width:760px){ .kcard-fila{grid-template-columns:1fr;} .kpi.kcard-datos{grid-template-columns:1fr;} }
.kc-top{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.kc-nombre{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.kc-estado{font-size:10px; font-weight:800; letter-spacing:.05em; padding:3px 8px; border-radius:99px; background:rgba(11,10,16,.6); border:1px solid rgba(255,255,255,.18); white-space:nowrap;}
.kc-deuda{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.kc-big{font-family:Georgia,'Times New Roman',serif; font-size:26px; font-weight:700; color:var(--ink);}
.kc-l{font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700;}
.kc-s{font-size:10.5px; color:var(--muted);}
.kc-bar{height:6px; border-radius:99px; background:rgba(255,255,255,.18); overflow:hidden;}
.kc-bar div{height:100%;}
.kc-credito{display:flex; flex-direction:column; gap:6px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:8px 10px;}
.kc-limite input{width:96px; text-align:right; border:1px solid var(--glass-border); border-radius:6px; background:rgba(255,255,255,.05); color:var(--ink); padding:3px 6px; font-size:13px; font-weight:700;}
.kc-banco{display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; font-size:11px; color:var(--muted); border-top:1px solid rgba(255,255,255,.1); padding-top:6px;}
.kc-banco b{color:var(--ink);}
.kc-bloques{display:flex; flex-direction:column; gap:8px;}
.kc-bloque{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; gap:4px; min-width:0;}
.kc-tit{font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--green-text);}
.kc-fila{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 8px;}
.kc-fila .kc-l{text-transform:none; letter-spacing:0; font-weight:600; font-size:11px;}
.kc-fila .kc-v{font-size:13px; font-weight:700; color:var(--ink);}
.kc-fila .kc-s{flex-basis:100%; text-align:right;}
.kc-medidor{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:10px 12px;}
.kc-pagar-grande{font-family:Georgia,'Times New Roman',serif; font-size:30px; font-weight:700; color:#fbbf24; line-height:1;}
.kc-stack{display:flex; height:12px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.12);}
.kc-seg.s-ant, .kc-leyenda i.s-ant{background:#94a3b8;}
.kc-seg.s-reg, .kc-leyenda i.s-reg{background:#38bdf8;}
.kc-seg.s-sin, .kc-leyenda i.s-sin{background:repeating-linear-gradient(135deg,#f43f5e 0 4px,#fb7185 4px 8px);}
.kc-leyenda{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:10px; color:var(--muted);}
.kc-leyenda i{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:4px;}
.kc-tiempo{margin-top:6px;}
.kc-tiempo-bar{position:relative; height:8px; border-radius:99px; background:rgba(255,255,255,.16);}
.kc-tiempo-bar div{height:100%; border-radius:99px;}
.kc-tiempo-bar i{position:absolute; top:-3px; width:4px; height:14px; border-radius:3px; transform:translateX(-50%); box-shadow:0 0 0 2px rgba(11,10,16,.7);}
.kc-tiempo-lab{display:flex; justify-content:space-between; align-items:baseline; gap:6px; font-size:10px; color:var(--muted); margin-top:4px;}
.kc-tiempo-lab b{font-size:11px;}
.kc-ciclos{display:flex; flex-direction:column; gap:7px; margin-top:4px;}
.kc-ciclo-top{display:flex; justify-content:space-between; font-size:12px; color:var(--ink);}
.kc-ciclo-sub{display:flex; justify-content:space-between; font-size:10px; color:var(--muted);}
.kc-ciclo.curso .kc-bar div{background:#a78bfa;}
.kc-ciclo.pagar .kc-bar div{background:#fbbf24;}
.kc-ciclo.pagado .kc-bar div{background:#22c55e;}
.kc-ciclo.anterior .kc-bar div{background:#64748b;}
.kpi .l{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:4px; font-weight:700;}
.kpi .v{font-size:26px;}
.kpi .v.accent{color:var(--green-text);}
.kpi .s{font-size:12px; color:var(--muted); margin-top:4px;}
/* Variante de fondo blanco (Gastos de la Casa) -- las demás .kpi del resto
   de la app se quedan con el fondo oscuro de siempre. */
.kpi-casa{background:#fff; border-color:rgba(20,10,40,.08); box-shadow:0 8px 24px rgba(20,10,40,.12);}
.kpi-casa .l{color:#7a7286;}
.kpi-casa .v, .kpi-casa .v.accent{color:#1c1130;}
.kpi-casa .s{color:#7a7286;}
.kpi-casa .bar{background:rgba(20,10,40,.08);}
.card{
  background:var(--card); border:1px solid var(--glass-border); border-radius:20px; padding:20px; margin-bottom:24px;
  backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  box-shadow:0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.card h2{font-size:18px; font-weight:normal; margin-bottom:16px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:900px){ .grid2.ca-top{grid-template-columns:1fr;} }
.grid-cp{display:grid; grid-template-columns:2.2fr 1fr; gap:24px; align-items:start;}
@media(max-width:800px){.grid2{grid-template-columns:1fr;} .grid-cp{grid-template-columns:1fr;}}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px;}
@media(max-width:900px){.grid3{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.grid3{grid-template-columns:1fr;}}
.brief-grid{display:flex; gap:16px; align-items:start; overflow-x:auto; padding-bottom:10px; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.brief-grid::-webkit-scrollbar{display:none;}
.brief-card{background:rgba(255,255,255,.03); border:1px solid var(--glass-border); border-radius:14px; padding:14px; flex:0 0 auto;}
.brief-card table{width:auto;}
.brief-card table td{border-top:1px solid rgba(255,255,255,.06); white-space:nowrap;}
.brief-card-head{background:linear-gradient(135deg,#f7055c,#7c3aed); border-radius:14px 14px 0 0; margin:-14px -14px 12px -14px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.brief-card-head p{color:#fff; font-weight:700; font-size:14px; margin:0; white-space:nowrap;}
.brief-card-head button{background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); color:#fff; padding:6px 12px; border-radius:999px; font-size:11px; cursor:pointer; white-space:nowrap;}
.brief-card-head button:hover{background:rgba(255,255,255,.3);}
.brief-resp{border:1px solid var(--glass-border); border-radius:6px; padding:5px 7px; font-size:13px; width:110px; background:rgba(255,255,255,.05); color:var(--ink); resize:vertical;}
.brief-card-body{max-height:624px; overflow-y:auto; scrollbar-width:none;}
.brief-card-body::-webkit-scrollbar{display:none;}
.chartbox{position:relative; height:260px;}
.chartbox.sm{height:220px;}
.note{font-size:12px; color:var(--faint); margin-top:10px;}
.lineblock{margin-bottom:16px;}
.lineblock .top{display:flex; justify-content:space-between; font-size:14px; margin-bottom:4px;}
.lineblock .top .n{color:var(--faint);}
.lineblock .top .amt{color:var(--green-text);}
.bar{height:8px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden;}
.bar>div{height:100%; background:var(--green); border-radius:999px;}
.lineblock .sub{font-size:12px; color:var(--faint); margin-top:4px;}
table{width:100%; border-collapse:collapse; font-size:14px;}
thead{background:rgba(255,255,255,.03);}
th{text-align:left; padding:10px 10px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:500; white-space:nowrap;}
th.r, td.r{text-align:right;}
th.c, td.c{text-align:center;}
td{padding:8px 10px; border-top:1px solid rgba(255,255,255,.08); white-space:nowrap;}
tbody tr:hover{background:rgba(255,255,255,.04);}
td.mut{color:var(--muted);}
.cts{font-size:.55em;font-style:normal;}
.mfield{display:inline-block;min-width:70px;border:1px solid var(--glass-border);border-radius:6px;background:rgba(255,255,255,.04);color:var(--ink);padding:4px 6px;font-size:12px;cursor:pointer;}
.mfield:hover{border-color:var(--green);}
.mfield-in{width:100%;background:transparent;border:none;color:var(--ink);font-size:12px;outline:none;font-family:inherit;}
td.amt{color:var(--green-text);}
td.ok{color:var(--ok);} td.bad{color:var(--red);}
tfoot td{background:rgba(255,255,255,.03); border-top:1px solid var(--glass-border); font-weight:500; padding:12px 14px;}
tfoot td.lab{color:var(--muted); font-weight:normal;}
.del{background:none; border:none; color:rgba(255,255,255,.3); cursor:pointer; font-size:14px; padding:2px 8px;}
.del:hover{color:var(--red);}
.form{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin-bottom:12px;}
.form input,.form select{border:1px solid var(--glass-border); border-radius:8px; padding:8px 12px; font-size:14px; width:100%; background:rgba(255,255,255,.05); color:var(--ink);}
.form input::placeholder{color:var(--faint);}
textarea::placeholder{color:var(--faint);}
.form input:focus,.form select:focus{outline:none; border-color:var(--green);}
.btn{background:var(--green); color:#fff; border:none; border-radius:8px; padding:9px 20px; font-size:14px; cursor:pointer; box-shadow:0 4px 20px rgba(247,5,92,.35);}
.btn:hover{background:var(--green-dark);}
.btn.btn-agendar{background:#ff8a00; padding:6px 14px; font-size:13px; box-shadow:0 4px 14px rgba(255,138,0,.4);}
.btn.btn-agendar:hover{background:#e67a00;}
.btn.btn-tercer-ciclo{background:var(--ok); box-shadow:0 4px 20px rgba(12,163,12,.4);}
.btn.btn-tercer-ciclo:hover{background:#0a8a0a;}
.btn.btn-mensaje{background:#25d366; color:#0b0a10; padding:4px 14px; font-size:12px; box-shadow:0 4px 14px rgba(37,211,102,.4); display:inline-block; text-decoration:none; margin-left:6px;}
.btn.btn-mensaje:hover{background:#1ebd5a;}
.btn.btn-volver-llamar{background:#00ff88; color:#141018; box-shadow:0 4px 20px rgba(0,255,136,.45);}
.btn.btn-volver-llamar:hover{background:#00e078;}
.btn.btn-marcar-contacto{background:#00d9ff; color:#141018; font-size:12.5px; padding:8px 10px; box-shadow:0 4px 16px rgba(0,217,255,.4);}
.btn.btn-marcar-contacto:hover{background:#00c2e6;}
.contacto-hora-text{display:flex; align-items:center; justify-content:center; text-align:center; font-size:12.5px; font-weight:600; color:var(--ink); border:1px solid var(--glass-border); border-radius:8px; background:rgba(255,255,255,.04); padding:4px 8px;}
.btn.btn-agregar-lead{background:transparent; color:#fff; border:1px solid rgba(0,255,136,.5); box-shadow:none; flex-shrink:0;}
.btn.btn-agregar-lead:hover{background:rgba(0,255,136,.18); border-color:rgba(0,255,136,.7);}
.btn.btn-agregar-lead:active{background:#00ff88; border-color:#00ff88; color:#141018;}
.cita-biblica{margin-bottom:14px; padding:0; font-size:13px; font-style:italic; font-weight:700; line-height:1.5; color:#fff;}
.cita-biblica .ref{display:block; margin-top:6px; font-style:normal; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.55);}
.chip.chip-datos.on{background:var(--ok); border-color:var(--ok); color:#fff;}
.chip.chip-datos.on:hover{background:#0a8a0a;}
.chip.chip-datos.etapa-btn-off, .btn.btn-agendar.etapa-btn-off{background:rgba(255,255,255,.05); border-color:var(--glass-border); color:var(--faint); box-shadow:none; cursor:not-allowed; opacity:.55;}
.chip.chip-datos.etapa-btn-off:hover, .btn.btn-agendar.etapa-btn-off:hover{background:rgba(255,255,255,.05);}
.empty{text-align:center; color:var(--faint); padding:24px;}
footer{padding:8px 0 32px; font-size:12px; color:var(--faint);}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tablewrap::-webkit-scrollbar{display:none;}
.calday{cursor:pointer;-webkit-tap-highlight-color:transparent;}
.calday.sel{box-shadow:inset 0 0 0 2px var(--green);}
.caldetail{margin-top:12px;background:rgba(247,5,92,.12);border:1px solid rgba(247,5,92,.25);border-radius:14px;padding:12px 14px;display:none;}
.caldetail.show{display:block;}
.caldetail h4{font-size:14px;margin-bottom:8px;font-weight:500;}
.caldetail .item{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:6px;}
.caldetail .item i{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.caldetail .item .when{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap;}

/* Clientes potenciales: píldoras de status (mismos colores que la hoja original) */
.status-pill{display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:500; color:#fff; white-space:nowrap;}
.status-pill.status-sincontactar{background:var(--status-sincontactar);}
.status-pill.status-lead{background:var(--status-lead);}
.status-pill.status-seguimiento{background:var(--status-seguimiento);}
.status-pill.status-sinrespuesta, .status-pill.status-sininteres{background:var(--red);}
.status-pill.status-aprobado{background:var(--status-aprobado);}
.status-pill.status-proveedor{background:var(--status-proveedor);}
tbody tr.sel-row{background:rgba(247,5,92,.10);}

/* Mismos chips que Línea, pero cada status se pinta de su propio color al
   seleccionarlo -- para reconocerlo de un vistazo, igual que en la tabla. */
.status-chip{padding:6px 12px; border-radius:999px; font-size:12px; font-weight:500; cursor:pointer; background:rgba(255,255,255,.04); border:1px solid var(--glass-border); color:var(--muted); transition:all .15s;}
.status-chip:hover{border-color:rgba(255,255,255,.35);}
.status-chip.on{color:#fff; border-color:transparent;}
.status-chip.status-sincontactar.on{background:var(--status-sincontactar);}
.status-chip.status-lead.on{background:var(--status-lead);}
.status-chip.status-seguimiento.on{background:var(--status-seguimiento);}
.status-chip.status-sinrespuesta.on, .status-chip.status-sininteres.on{background:var(--red);}
.status-chip.status-aprobado.on{background:var(--status-aprobado);}
.status-chip.status-proveedor.on{background:var(--status-proveedor);}
.wa-link{display:inline-flex; align-items:center; gap:5px; color:var(--green-text); text-decoration:none;}
.wa-link:hover{text-decoration:underline;}
.wa-link svg{width:13px; height:13px; flex-shrink:0;}

.modal-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(5,4,10,.65);
  backdrop-filter:blur(6px) saturate(120%);
  -webkit-backdrop-filter:blur(6px) saturate(120%);
  overflow-y:auto;
  padding:40px 20px;
}
.modal-card{max-width:1200px; margin:0 auto;}
@media(max-width:640px){ .modal-overlay{padding:16px 10px;} }

.ficha-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px;}
.ficha-head h2{margin-bottom:0;}
.ficha-head-right{display:flex; align-items:center; gap:14px;}
.etapa-badge{font-size:22px; font-weight:600; color:#fff;}

/* Login */
.loginwrap{min-height:70vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.loginform{width:100%; max-width:340px; display:flex; flex-direction:column; gap:10px;}
.loginform h2{font-size:18px; font-weight:normal; margin-bottom:4px;}
.loginform input{border:1px solid var(--glass-border); border-radius:8px; padding:10px 12px; font-size:16px; width:100%; background:rgba(255,255,255,.05); color:var(--ink);}
.loginform input::placeholder{color:var(--faint);}
.loginform input:focus{outline:none; border-color:var(--green);}
.loginform .btn{width:100%; margin-top:4px;}

/* Debajo de este ancho la barra lateral no cabe cómoda: vuelve a apilarse
   arriba, como una cabecera normal, y la navegación se hace una tira
   horizontal con scroll (igual que el diseño original de una sola columna). */
@media (max-width:860px){
  .app-shell{flex-direction:column; align-items:stretch;}
  .sidebar{
    position:static; width:100%; flex:0 0 auto; height:auto; overflow-y:visible;
    border-right:none; border-bottom:1px solid var(--glass-border);
  }
  .main-col{min-height:0;}
  .filters{flex-direction:row; flex-wrap:wrap; gap:12px 24px;}
  .fgroup{flex:0 0 auto;}
  nav{flex-direction:row; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; flex-wrap:nowrap;}
  nav::-webkit-scrollbar{display:none;}
  nav button{border-left:none; border-bottom:2px solid transparent; border-radius:0; white-space:nowrap; flex-shrink:0;}
  nav button.on{border-left-color:transparent; border-bottom-color:var(--green); background:none;}
}

@media (max-width:640px){
  body{font-size:13px;}
  .wrap{padding:0 12px;}
  .sidebar{padding:14px 14px;gap:16px;}
  .brand h1{font-size:19px;}
  .brand p{font-size:11px;}
  .brand .meta{font-size:11px;}
  nav button{padding:9px 10px;font-size:13px;}
  .chip{padding:7px 11px;font-size:12px;}
  .kpis{grid-template-columns:repeat(2,1fr);gap:8px;}
  .kpi{padding:12px;border-radius:16px;}
  .kpi .v{font-size:19px;}
  .kpi .l{font-size:10px;}
  .kpi .s{font-size:11px;}
  .card{padding:14px;border-radius:16px;margin-bottom:16px;}
  .card h2{font-size:16px;}
  .chartbox{height:210px;} .chartbox.sm{height:190px;}
  table{font-size:12px;}
  th{padding:8px 8px;font-size:10px;}
  td{padding:7px 8px;}
  .form{grid-template-columns:1fr 1fr;}
  .form input,.form select{font-size:16px;padding:9px 10px;}
  .btn{padding:11px 16px;width:100%;}
  main{padding:14px 0 4px;}
  .calgrid{gap:4px;}
  .calday{min-height:52px;padding:5px;border-radius:10px;}
  .calday .dn{font-size:11px;margin-bottom:3px;}
  .calday.today .dn span{width:19px;height:19px;font-size:11px;}
  .chip-ev{width:7px;height:7px;border-radius:50%;padding:0;margin:1px 2px 1px 0;display:inline-block;font-size:0;box-shadow:none;}
  .leg{font-size:11px;gap:10px;}
  .leg span:last-child{display:none;}
  .calnav h3{font-size:15px;}
  .calnav button{padding:6px 12px;min-width:38px;}
}
.calnav{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.calnav h3{font-size:18px;font-weight:normal;text-transform:capitalize;flex:1;}
.calnav button{border:1px solid var(--glass-border);background:rgba(255,255,255,.05);color:var(--ink);border-radius:8px;padding:5px 12px;font-size:13px;cursor:pointer;}
.calnav button:hover{border-color:rgba(255,255,255,.35);}
.calhead{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);padding-bottom:8px;}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.calday{min-height:92px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:7px;font-size:12px;overflow:hidden;transition:background .15s;}
.calday.has-ev{background:rgba(247,5,92,.10);border-color:rgba(247,5,92,.22);}
.calday.out{background:rgba(255,255,255,.015);}
.calday.out.has-ev{background:rgba(247,5,92,.05);}
.calday .dn{color:var(--muted);margin-bottom:4px;font-weight:500;}
.calday.out .dn{color:rgba(255,255,255,.25);}
.calday.today{box-shadow:inset 0 0 0 2px var(--green);}
.calday.today .dn span{background:var(--green);color:#fff;border-radius:50%;display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;}
.chip-ev{display:block;border-radius:9px;padding:4px 8px;margin-bottom:4px;font-size:11px;line-height:1.25;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default;box-shadow:0 2px 5px rgba(0,0,0,.35);}
.leg{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:12px;color:var(--muted);}
.leg span{display:flex;align-items:center;gap:5px;}
.leg i{width:10px;height:10px;border-radius:3px;display:inline-block;}

/* ---- Horario semanal (tablero estilo Trello) ---- */
.horario-modo-head{display:flex; flex-direction:column; gap:12px;}
/* Cada botón mide lo mismo que una tarjeta del calendario (ej. "Leer la Biblia"): ~205px de ancho x ~44px de alto. */
.horario-modo{display:flex; gap:10px; flex-wrap:wrap;}
.horario-modo button{flex:0 0 auto; width:205px; height:44px; padding:0 12px; border:1px solid var(--glass-border); background:rgba(255,255,255,.05); color:var(--muted); border-radius:9px; font-size:14px; font-weight:700; cursor:pointer; transition:box-shadow .12s, border-color .12s;}
.horario-modo button:hover{border-color:rgba(255,255,255,.4); color:var(--ink);}
.horario-modo button.on{background:linear-gradient(135deg,#f7055c,#7c3aed); border-color:transparent; color:#fff; box-shadow:0 4px 16px rgba(247,5,92,.45);}
.horario-layout{display:flex; gap:16px; align-items:flex-start;}
.horario-board{display:flex; gap:14px; overflow-x:auto; padding-bottom:14px; align-items:flex-start; flex:1 1 auto; min-width:0;}
/* Barra lateral estilo Recordatorios de iOS: recuadros de color arriba
   (filtran las listas), listas de pendientes sin agendar abajo -- de aquí se
   arrastran las tarjetas hacia el calendario de la derecha para agendarlas. */
.horario-sidebar{flex:0 0 280px; display:flex; flex-direction:column; gap:14px; max-height:80vh; overflow-y:auto; padding-right:4px;}
.horario-tiles{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
.horario-tile{border:none; border-radius:14px; padding:10px 12px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:2px; opacity:.55; filter:saturate(.5);}
.horario-tile:hover{opacity:.8;}
.horario-tile.on{opacity:1; filter:none; box-shadow:0 0 0 2px #fff inset;}
.horario-tile .n{font-size:20px; font-weight:700; line-height:1;}
.horario-tile .l{font-size:11px; font-weight:600;}
.horario-listas{display:flex; flex-direction:column; gap:14px;}
.horario-lista{background:var(--card); border:1px solid var(--glass-border); border-radius:14px; padding:10px; display:flex; flex-direction:column; gap:8px;}
.horario-lista.collapsed{gap:0;}
.horario-lista-head{display:flex; align-items:center; gap:6px;}
.horario-lista-head .chev{flex-shrink:0; background:none; border:none; color:var(--faint); cursor:pointer; font-size:10px; padding:2px 4px; width:16px;}
.horario-lista-head .chev:hover{color:var(--ink);}
.horario-lista-nombre{flex:1 1 auto; min-width:0; background:none; border:none; color:var(--ink); font-weight:700; font-size:13px; padding:2px 4px; border-radius:6px;}
.horario-lista-nombre:hover, .horario-lista-nombre:focus{background:rgba(255,255,255,.06); outline:none;}
.horario-lista-head .cnt{color:var(--faint); font-size:12px; flex-shrink:0;}
.horario-lista-head .del{background:none; border:none; color:var(--faint); opacity:.6; cursor:pointer; font-size:15px; padding:2px 4px;}
.horario-lista-head .del:hover{opacity:1; color:var(--red);}
@media(max-width:860px){
  .horario-layout{flex-direction:column;}
  .horario-sidebar{flex-basis:auto; width:100%; max-height:none;}
}
.horario-col{flex:0 0 520px; background:var(--card); border:1px solid var(--glass-border); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:10px;}
.horario-col.dragover{border-color:var(--green); background:rgba(247,5,92,.08);}
.horario-col.collapsed{flex:0 0 44px; width:44px; height:var(--horario-collapsed-h,170px); padding:10px 4px; gap:0; align-self:flex-start; align-items:center;}
.horario-col.collapsed .horario-cards, .horario-col.collapsed .horario-add-btn, .horario-col.collapsed .horario-editform{display:none;}
.horario-col-head{display:flex; align-items:center; gap:6px; justify-content:space-between; padding:2px 4px 4px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); cursor:pointer; user-select:none; border-radius:8px;}
.horario-col-head:hover{color:var(--ink); background:rgba(255,255,255,.05);}
.horario-col-head .lab{display:flex; align-items:center; gap:6px;}
.horario-col-head .chev{font-size:10px; color:var(--faint); width:10px; display:inline-block;}
.horario-col-head .cnt{color:var(--faint); font-weight:400;}
.horario-col-head-right{display:inline-flex; align-items:center; gap:8px;}
/* "R 3/20 · S 5/18" -- cuántas tareas agendadas (con hora) de cada persona
   ya se marcaron cumplidas ese día (ver los circulitos .circ-estado). */
.horario-contadores{display:inline-flex; gap:6px;}
.horario-contador{font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; background:rgba(255,255,255,.08); white-space:nowrap;}
.horario-contador.ronald{color:#7ea6ff;}
.horario-contador.silvia{color:var(--green-text);}
.horario-copiar-btn{border:1px solid var(--glass-border); background:rgba(255,255,255,.06); color:var(--muted); font-size:10px; font-weight:600; text-transform:none; letter-spacing:0; padding:3px 8px; border-radius:20px; cursor:pointer; white-space:nowrap;}
.horario-copiar-btn:hover{color:var(--ink); border-color:rgba(255,255,255,.4);}
.horario-col.collapsed .horario-copiar-btn{display:none;}
/* Botones redondos "2"/"R"/"S" junto al nombre del día -- selección
   exclusiva para ver los dos horarios juntos, solo el de Ronald o solo el
   de Silvia ese día. */
.horario-filtro-p{display:inline-flex; gap:4px; margin-left:2px;}
.horario-filtro-p .fp{width:18px; height:18px; border-radius:50%; border:1px solid var(--glass-border); background:rgba(255,255,255,.08); color:var(--faint); font-size:10px; font-weight:700; text-transform:none; letter-spacing:0; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0;}
.horario-filtro-p .fp:hover{border-color:rgba(255,255,255,.4); color:var(--ink);}
.horario-filtro-p .fp.p-ambos.on{background:var(--green); border-color:var(--green); color:#fff;}
.horario-filtro-p .fp.p-ronald.on{background:#7ea6ff; border-color:#7ea6ff; color:#0b1f4d;}
.horario-filtro-p .fp.p-silvia.on{background:var(--green-text); border-color:var(--green-text); color:#3a0018;}
/* Columna minimizada: rectángulo parado en vertical, letras giradas -- así
   los demás días se corren y se ven más centrados sin tener que hacer
   scroll horizontal por el ancho que ocupaba este día. */
.horario-col.collapsed .horario-col-head{
  writing-mode:vertical-rl; transform:rotate(180deg);
  height:100%; width:100%; padding:10px 0; gap:14px; justify-content:flex-start;
  border-radius:10px;
}
.horario-col.collapsed .horario-col-head .lab{flex-direction:column; gap:10px;}
.horario-col.collapsed .horario-col-head .chev{display:none;}
.horario-col.collapsed .horario-col-head .cnt{font-weight:600;}
/* Dentro de un día extendido, dos paneles lado a lado -- uno para Ronald y
   uno para Silvia -- cada uno con su propia lista, botón de agregar y zona
   de soltar, para que siempre se vean los dos horarios del día a la vez. */
.horario-personas{display:flex; gap:10px; align-items:flex-start; flex:1 1 auto; min-width:0;}
.horario-persona{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:8px;}
.horario-persona-head{display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:0 2px 6px; border-bottom:1px solid var(--glass-border);}
.horario-persona-head .cnt{color:var(--faint); font-weight:400;}
.horario-persona-head.p-ronald{color:#7ea6ff;}
.horario-persona-head.p-silvia{color:var(--green-text);}
.horario-cards{display:flex; flex-direction:column; gap:8px; min-height:12px;}
.horario-card{border-radius:9px; padding:10px 12px; font-size:13px; font-weight:600; line-height:1.35; cursor:grab; box-shadow:0 2px 6px rgba(0,0,0,.25); word-break:break-word; position:relative;}
.horario-card:active{cursor:grabbing;}
.horario-card.dragging{box-shadow:0 10px 24px rgba(0,0,0,.5); transform:scale(1.02);}
.horario-card .del{position:absolute; top:4px; right:6px; background:none; border:none; color:inherit; opacity:.55; cursor:pointer; font-size:14px; line-height:1; padding:2px;}
.horario-card .del:hover{opacity:1;}
.hc-amarillo{background:var(--warn); color:#3a2600;}
.hc-verde{background:var(--ok); color:#eafff0;}
.hc-gris{background:var(--status-proveedor); color:#fff;}
.hc-azul{background:#3b82f6; color:#fff;}
.hc-rojo{background:var(--red); color:#fff;}
.hc-morado{background:var(--status-lead); color:#fff;}
.hc-anaranjado{background:#ea580c; color:#fff;}
.hc-celeste{background:#38bdf8; color:#042f3d;}
.hc-rosado{background:#ec4899; color:#fff;}
.hc-lila{background:#d946ef; color:#fff;}
.hc-fucsia{background:#e11d48; color:#fff;}
.hc-verdeneon{background:#2ee659; color:#063016;}
.horario-add-btn{background:none; border:none; color:var(--faint); text-align:left; padding:6px 6px; font-size:13px; cursor:pointer; border-radius:8px;}
.horario-add-btn:hover{background:rgba(255,255,255,.06); color:var(--ink);}
.horario-editform{background:rgba(255,255,255,.04); border:1px solid var(--glass-border); border-radius:10px; padding:8px; display:flex; flex-direction:column; gap:8px;}
.horario-editform textarea{width:100%; resize:vertical; min-height:52px; background:rgba(255,255,255,.05); border:1px solid var(--glass-border); border-radius:8px; color:var(--ink); font-family:inherit; font-size:13px; padding:8px;}
.horario-editform textarea:focus{outline:none; border-color:var(--green);}
.horario-colors{display:flex; gap:6px; flex-wrap:wrap;}
.horario-dot{width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0;}
.horario-dot.sel{border-color:var(--ink); box-shadow:0 0 0 2px rgba(255,255,255,.25);}
.horario-editform .row{display:flex; gap:8px;}
.horario-editform .row button{flex:1; padding:7px 10px; font-size:12px; border-radius:7px; border:1px solid var(--glass-border); background:rgba(255,255,255,.05); color:var(--ink); cursor:pointer;}
.horario-editform .row button.save{background:var(--green); border-color:var(--green); color:#fff; font-weight:600;}
.horario-editform .row button.save:hover{background:var(--green-dark);}
.horario-editform .row button.dup{background:var(--ok); border-color:var(--ok); color:#fff; font-weight:600;}
.horario-editform .row button.dup:hover{background:#0a8a0a;}
.horario-editform .row button:not(.save):not(.dup):hover{border-color:rgba(255,255,255,.35);}
.horario-editform .row input{flex:1; padding:6px 8px; font-size:12px; border-radius:7px; border:1px solid var(--glass-border); background:rgba(255,255,255,.05); color:var(--ink); font-family:inherit;}
.horario-editform .row button.del{background:rgba(240,87,110,.15); border-color:var(--red); color:var(--red);}
.horario-editform .row button.del:hover{background:rgba(240,87,110,.3);}

/* Ficha de detalle de una tarjeta de Horario (ventana emergente) -- más
   angosta que la ficha de un lead/cliente, es básicamente un formulario
   (reutiliza .horario-editform para los estilos de textarea/row/botones). */
.horario-ficha.modal-card{max-width:520px;}
.horario-ficha h3{margin:10px 0 0; font-size:14px;}
.horario-ficha-grupo-check{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin-top:-2px;}
.horario-ficha-subtareas{display:flex; flex-direction:column; gap:6px;}
.horario-ficha-subtarea{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; border:1px solid var(--glass-border); background:rgba(255,255,255,.03);}
.horario-ficha-subtarea.oficial{border-color:var(--green); background:rgba(247,5,92,.08);}
.horario-ficha-subtarea span{flex:1; font-size:13px;}
.horario-ficha-subtarea span.hecho{text-decoration:line-through; color:var(--faint);}
.horario-ficha-subtarea .chip{flex:none; font-size:10px; padding:4px 8px;}
.horario-ficha-subtarea .del{flex:none;}

/* Metas con fecha límite -- barra de % transcurrido + semáforo (verde/
   amarillo/rojo según qué tan cerca está de la fecha límite, ver
   horarioMetaSemaforo en app.js). Las mismas clases .sem-* se usan tanto en
   la ficha como en la miniatura sobre la tarjeta del calendario. */
.horario-ficha-metas{display:flex; flex-direction:column; gap:10px;}
.horario-ficha-meta{padding:8px; border-radius:8px; border:1px solid var(--glass-border); background:rgba(255,255,255,.03);}
.horario-meta-bar{height:6px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:4px;}
.horario-meta-bar-fill{height:100%; border-radius:4px;}
.horario-meta-bar-fill.sem-verde{background:var(--ok);}
.horario-meta-bar-fill.sem-amarillo{background:var(--warn);}
.horario-meta-bar-fill.sem-rojo{background:var(--red);}
.horario-meta-bar-fill.sem-gris{background:rgba(255,255,255,.25);}
.horario-meta-pct{flex:none; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; background:rgba(255,255,255,.08);}
.horario-meta-pct.sem-verde{color:var(--ok);}
.horario-meta-pct.sem-amarillo{color:var(--warn);}
.horario-meta-pct.sem-rojo{color:var(--red);}
.horario-meta-pct.sem-gris{color:var(--faint);}
/* Miniatura dentro de la tarjeta compacta del calendario -- barras más
   delgadas, sobre un fondo oscuro fijo (no el color de la tarjeta) para que
   el semáforo se note sin importar el color de la tarjeta. */
.horario-card-metas{display:flex; flex-direction:column; gap:3px; margin-top:4px;}
.horario-card-metas .horario-meta-bar{height:4px; margin-top:0; background:rgba(0,0,0,.3);}

/* Cuadrícula de horas (4 AM a 12 AM) dentro de un día extendido -- una
   columna de etiquetas compartida entre Ronald y Silvia, y un grid por
   persona con líneas cada hora (via background, no un div por línea) donde
   se sueltan las tarjetas con hora puesta. Las líneas del fondo se generan
   en JS con el mismo HORARIO_PX_POR_HORA que se usa para posicionar las
   tarjetas -- si uno cambia (ver app.js), el 110px de background-size de
   abajo tiene que cambiar junto, a mano, porque CSS no puede leer la
   constante de JS. El wrap entero (gutter + los dos grids) hace scroll como
   una sola unidad -- así las horas del gutter se quedan alineadas con las
   líneas mientras se mueve, y el día no estira toda la página. */
.horario-personas-wrap{display:flex; gap:8px; align-items:flex-start; max-height:620px; overflow-y:auto; padding-right:4px;}
.horario-grid-gutter{flex:0 0 40px; font-size:10px; color:var(--faint);}
.horario-grid-gutter-labels{position:relative;}
.horario-grid-hourlab{position:absolute; left:0; right:0; transform:translateY(-50%); white-space:nowrap;}
/* Línea de hora completa (fuerte) + línea de media hora (tenue) -- dos
   espacios de 55px por hora, para que se vea claro dónde cae cada mitad. */
.horario-grid{position:relative; border-radius:6px; margin-bottom:6px;
  background-image:
    linear-gradient(to bottom, var(--glass-border) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:100% 189px, 100% 63px;
  background-repeat:repeat-y, repeat-y;
  background-position:top, top;}
.horario-card.en-grid{position:absolute; left:2px; right:2px; padding:5px 8px; font-size:12px; line-height:1.3; min-height:20px;}
.horario-card .horario-card-hora{display:block; font-size:10px; font-weight:700; opacity:.8;}
/* Hora + los 3 circulitos de estado en la misma línea -- padding-right para
   dejarle espacio a la "×" de eliminar, que está position:absolute en esa
   misma esquina (ver .horario-card .del). */
.horario-card-top{display:flex; align-items:center; justify-content:space-between; gap:4px; padding-right:16px; margin-bottom:2px;}
.horario-card-estado{display:flex; gap:3px; flex:none;}
.circ-estado{width:18px; height:18px; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:rgba(0,0,0,.18); color:rgba(255,255,255,.8); font-size:10px; font-weight:700; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; flex:none;}
.circ-estado:hover{border-color:#fff; color:#fff;}
.circ-estado.cumplido.on{background:var(--ok); border-color:var(--ok); color:#fff;}
.circ-estado.nocumplido.on{background:var(--red); border-color:var(--red); color:#fff;}
.circ-estado.pospuesto.on{background:var(--warn); border-color:var(--warn); color:#fff;}
.horario-sinhora-label{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); margin-top:-2px;}
.horario-editform.en-grid{position:absolute; left:2px; right:2px; z-index:30; min-height:150px; box-shadow:0 10px 24px rgba(0,0,0,.5);}

@media (max-width:640px){
  .horario-col{flex-basis:320px;}
  .horario-personas{flex-direction:column;}
}