body{margin:0}
.app{position:relative;display:flex;width:100%;overflow:hidden;background:var(--ground);color:#111827;font-family:"DM Sans",Inter,system-ui,sans-serif;font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums}
.app *{box-sizing:border-box}
.app button,.app input,.app select{font-family:inherit}
.app button{cursor:pointer}
.app button:focus-visible,.app input:focus-visible,.app select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.side{width:240px;flex:none;display:flex;flex-direction:column;gap:24px;padding:24px 12px;border-right:1px solid #e5e7eb}
.marca{display:flex;align-items:center;gap:10px;padding:0 8px;font-size:15px;font-weight:700}
.marca .ico{width:26px;height:26px;color:var(--accent)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#4b5563;font-size:14px;font-weight:500;text-align:left;transition:background-color .15s,color .15s}
.nav button:hover{background:#eef1f2}
.nav button.on{background:var(--soft);color:var(--ink);font-weight:600}
.nav button.on .ico{color:var(--accent)}
.pie{margin-top:auto;padding:0 12px;font-size:12px;color:#5f6672}
.main{flex:1 1 auto;min-width:0;overflow-y:auto}
.wrap{max-width:1040px;margin:0 auto;padding:32px;display:flex;flex-direction:column;gap:24px}
.titulo{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.titulo h1{margin:0;font-size:32px;line-height:1.1;font-weight:700;letter-spacing:-.02em}
.titulo p{margin:6px 0 0;font-size:15px;color:#5f6672}
.acciones{display:flex;gap:8px}
.btn{min-height:44px;padding:0 16px;border:1px solid #cfd5da;border-radius:8px;background:#fff;color:#111827;font-size:14px;font-weight:600;transition:background-color .15s,transform .1s}
.btn:hover{background:#f3f4f6}
.btn:active{transform:scale(.98)}
.btn.p{border-color:var(--accent);background:var(--accent);color:#fff}
.btn.p:hover{background:var(--ink)}
.btn.m{min-height:40px;padding:0 12px;font-size:13px;white-space:nowrap}
.kpis{display:grid;grid-template-columns:1.4fr 1fr 1fr;background:#fff;border:1px solid #e5e7eb;border-radius:12px}
.kpi{padding:18px 20px;border-left:1px solid #eef0f2}
.kpi:first-child{border-left:0}
.kpi span{display:block;font-size:13px;color:#5f6672}
.kpi strong{display:block;margin-top:4px;font-size:24px;font-weight:600;line-height:1.2}
.kpi.grande strong{font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.kpi small{display:block;margin-top:4px;font-size:12px;color:#5f6672}
.deuda{color:#92400e}
.reja{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.col{display:flex;flex-direction:column;gap:24px;min-width:0}
.panel{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px}
.cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cab h2{margin:0;font-size:17px;font-weight:600}
.cab span{font-size:13px;color:#5f6672}
.liga{min-height:44px;padding:0;border:0;background:none;color:var(--ink);font-size:13px;font-weight:600}
.dia + .dia{margin-top:22px}
.dia-cab{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px}
.dia-cab b{font-weight:600}
.dia-cab span{color:#5f6672;font-size:13px}
.franja{position:relative;height:34px;border-radius:6px;background:#f1f4f4;overflow:hidden}
.bloque{position:absolute;top:3px;bottom:3px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:12px;font-weight:600}
.b-ok{background:var(--accent);color:#fff}
.b-pend{background:#fff;border:1.5px dashed var(--accent);color:var(--ink)}
.horas{display:flex;justify-content:space-between;margin-top:4px;font-size:12px;color:#5f6672}
.fila{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 0;border-top:1px solid #f0f2f3}
.fila:first-of-type{border-top:0}
.lista{margin-top:12px}
.tx{flex:1 1 auto;min-width:0}
.tx b{display:block;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx span{display:block;font-size:13px;color:#5f6672}
.ini{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--soft);color:var(--ink);font-size:12px;font-weight:700}
.pill{flex:none;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.p-ok{background:var(--soft);color:var(--ink)}
.p-esp{background:#f3f4f6;color:#374151}
.p-av{background:#fffbeb;color:#92400e}
.ley{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-size:12px;color:#5f6672}
.ley span{display:flex;align-items:center;gap:6px}
.ley i{width:16px;height:10px;border-radius:3px}
.track{height:8px;margin-top:6px;border-radius:999px;background:var(--track);overflow:hidden}
.track div{height:100%;border-radius:999px;background:var(--accent);transition:width .35s ease}
.saldo{flex:none;text-align:right;font-weight:600;color:#92400e}
.vacio{margin:8px 0 0;color:#5f6672}
.barras{display:flex;align-items:flex-end;gap:10px;height:190px;margin-top:8px}
.barra{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:0;border:0;background:none;color:#5f6672;font-size:12px}
.barra i{display:block;width:100%;border-radius:4px 4px 0 0;background:var(--track);transition:background-color .15s}
.barra:hover i{background:var(--accent)}
.barra.on i{background:var(--accent)}
.barra.on{color:#111827;font-weight:600}
.lectura b{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.lectura span{font-size:13px;color:#5f6672}
.origen{display:grid;grid-template-columns:120px minmax(0,1fr) 28px;align-items:center;gap:10px;min-height:40px}
.origen .track{margin:0}
.origen em{font-style:normal;text-align:right;font-weight:600}
.herr{display:flex;flex-wrap:wrap;gap:10px}
.herr input{flex:1 1 220px;min-height:44px;padding:0 12px;border:1px solid #cfd5da;border-radius:8px;background:#fff;font-size:16px;color:#111827}
.chip{min-height:44px;padding:0 14px;border:1px solid #cfd5da;border-radius:8px;background:#fff;color:#374151;font-size:14px;font-weight:500}
.chip.on{border-color:var(--accent);background:var(--soft);color:var(--ink);font-weight:600}
.velo{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(17,24,39,.5)}
.hoja{width:420px;max-width:100%;max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:14px;background:#fff;animation:sube .22s ease-out}
.hoja h2{margin:0;font-size:22px;font-weight:700}
.campo{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.campo input,.campo select{width:100%;min-height:48px;padding:0 12px;border:1px solid #9aa4ad;border-radius:8px;background:#fff;color:#111827;font-size:16px}
.dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.burbuja{margin:0;padding:14px;border-radius:12px;background:var(--soft);font-size:15px}
.aviso{position:absolute;left:50%;bottom:24px;z-index:4;transform:translateX(-50%);padding:10px 16px;border-radius:8px;background:#111827;color:#fff;font-size:14px;font-weight:500;white-space:nowrap}
.btn-bloque{width:100%;min-height:50px}
.quitar{min-height:44px;border:0;background:none;color:#5f6672;font-size:14px;font-weight:600}
@keyframes sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.celular{flex-direction:column}
.celular .side{order:2;width:100%;padding:0;gap:0;border-right:0;border-top:1px solid #e5e7eb;background:#fff}
.celular .marca,.celular .pie{display:none}
.celular .nav{flex-direction:row;gap:0;padding:4px}
.celular .nav button{flex:1 1 0;min-width:0;min-height:56px;flex-direction:column;justify-content:center;gap:2px;padding:0;font-size:12px;text-align:center}
.celular .main{order:1;flex:1 1 0;min-height:0}
.celular .wrap{padding:20px 16px 24px;gap:18px}
.celular .titulo h1{font-size:26px}
.celular .acciones{width:100%}
.celular .acciones .btn{flex:1 1 0}
.celular .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.celular .kpi{padding:14px 16px;border-left:0;border-top:1px solid #eef0f2}
.celular .kpi:nth-child(3){border-left:1px solid #eef0f2}
.celular .kpi.grande{grid-column:1 / -1;border-top:0}
.celular .kpis.tres .kpi{grid-column:auto;border-top:0;border-left:1px solid #eef0f2}
.celular .kpis.tres .kpi:first-child{border-left:0}
.celular .kpis.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.celular .reja{grid-template-columns:minmax(0,1fr);gap:18px}
.celular .col{gap:18px}
.celular .panel{padding:16px}
.celular .barras{height:170px;gap:6px}
.celular .origen{grid-template-columns:104px minmax(0,1fr) 24px}
.celular .velo{align-items:flex-end}
.celular .hoja{width:100%;border-radius:18px 18px 0 0}
.celular .aviso{bottom:84px}
.logo-side{display:block;width:100%;height:auto;border-radius:8px}
.bandamovil{display:none}
.celular .bandamovil{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.bandamovil img{width:60px;height:46px;object-fit:contain}
.oscuro{color:#F4F1EA}
.oscuro .side{border-color:#2A2A2D;background:#0E0E10}
.oscuro .nav button{color:#C9C5BC}
.oscuro .nav button:hover{background:#1F1F22}
.oscuro .nav button.on{background:var(--soft);color:var(--ink)}
.oscuro .pie,.oscuro .titulo p,.oscuro .kpi span,.oscuro .kpi small,.oscuro .cab span,.oscuro .dia-cab span,.oscuro .horas,.oscuro .tx span,.oscuro .ley,.oscuro .vacio,.oscuro .lectura span,.oscuro .quitar,.oscuro .barra{color:#B8B4AB}
.oscuro .titulo h1{font-family:Cinzel,"DM Sans",serif;font-weight:600;letter-spacing:0;color:var(--ink)}
.oscuro .btn{border-color:#46464A;background:#1A1A1D;color:#F4F1EA}
.oscuro .btn:hover{background:#26262A}
.oscuro .btn.p{border-color:var(--accent);background:var(--accent);color:#15120A}
.oscuro .btn.p:hover{background:var(--ink)}
.oscuro .kpis,.oscuro .panel{border-color:#2A2A2D;background:#161618}
.oscuro .kpi{border-color:#2A2A2D}
.oscuro .deuda,.oscuro .saldo{color:#F2B35A}
.oscuro .franja{background:#232326}
.oscuro .b-ok{color:#15120A}
.oscuro .b-pend{background:#161618}
.oscuro .fila{border-color:#26262A}
.oscuro .p-esp{background:#2A2A2D;color:#E5E2DA}
.oscuro .ley span:nth-child(2) i{background:#161618 !important}
.oscuro .ley span:nth-child(3) i{background:#232326 !important;border-color:#3A3A3E !important}
.oscuro .barra.on{color:#F4F1EA}
.oscuro .herr input,.oscuro .campo input,.oscuro .campo select{border-color:#55555A;background:#1A1A1D;color:#F4F1EA}
.oscuro .chip{border-color:#46464A;background:#1A1A1D;color:#E5E2DA}
.oscuro .chip.on{border-color:var(--accent);background:var(--soft);color:var(--ink)}
.oscuro .hoja{background:#161618}
.oscuro .aviso{background:#F4F1EA;color:#15120A}
.oscuro .velo{background:rgba(0,0,0,.7)}
.oscuro.celular .side{background:#0E0E10}
.oscuro.celular .kpi:nth-child(3){border-color:#2A2A2D}
/* Jerarquía de KPI */
.kpi span{font-size:12px}
.kpi strong{margin-top:6px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:28px;font-weight:600;letter-spacing:-.02em}
.kpi.grande strong{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:38px;font-weight:600}
.celular .kpi strong{font-size:20px}
.celular .kpi.grande strong{font-size:34px}
/* Botones de ancho fijo */
.btn.m,.fila .pill{flex:none;width:128px;text-align:center}
.acciones .btn{width:152px}
.celular .acciones .btn{width:auto}
/* WhatsApp junto al nombre */
.nombre-wa{display:flex;align-items:center;gap:2px;min-width:0}
.nombre-wa b{min-width:0}
.wa{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;color:var(--ink);transition:background-color .15s}
.wa .ico{width:18px;height:18px}
.wa:hover{background:var(--soft)}
.wa:active{background:var(--track)}
.wa:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Día sin citas */
.libre{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-radius:8px;background:#f1f4f4}
.libre p{margin:0;font-size:15px;font-weight:600}
.oscuro .libre{background:#1F1F22}
/* Filas interactivas */
.fila{margin:0 -8px;padding:8px;border-radius:8px;transition:background-color .15s}
.fila:hover{background:#f3f5f6}
.fila:active{background:#e8edee}
.oscuro .fila:hover{background:#242427}
.oscuro .fila:active{background:#2E2E32}
.btn:active{background:#e5e7eb}
.btn.p:active{background:var(--ink)}
.oscuro .btn:active{background:#323236}
.oscuro .btn.p:active{background:#B8962E}
.chip{transition:background-color .15s}
.chip:hover{background:#f3f4f6}
.chip:active{background:#e5e7eb}
.oscuro .chip:hover{background:#26262A}
.oscuro .chip:active{background:#323236}
.nav button:active{background:#e5e7eb}
.oscuro .nav button:active{background:#2E2E32}
/* Respiración en celular */
.celular .wrap{padding:20px 20px 28px}
.celular .nav{padding:4px 8px}
.celular .cobro{flex-wrap:wrap}
.celular .cobro .tx{flex:1 1 calc(100% - 112px)}
.celular .cobro .btn,.celular .cobro .pill{margin-left:auto}
/* Profundidad en tema oscuro */
.oscuro .kpis,.oscuro .panel{border-color:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 10px 15px -3px rgba(0,0,0,.5),0 4px 6px -4px rgba(0,0,0,.5)}
/* Contraste de KPI */
.oscuro .kpi strong,.oscuro .kpi strong.deuda,.oscuro .kpi.grande strong{color:#fff;font-weight:600}
.oscuro .kpi span,.oscuro .kpi small{color:#9CA3AF}
/* Nombres largos */
.tx{min-width:0}
.tx b,.nombre-wa b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nombre-wa b{flex:0 1 auto}
/* Clicables y transición de opacidad */
.app button,.app a,.app select,.fila{cursor:pointer}
.app button,.app .wa{transition:opacity .2s ease,background-color .2s ease,transform .1s ease}
.app button:hover,.app .wa:hover{opacity:.88}
.app button:active,.app .wa:active{opacity:.76}
/* Cifras alineadas */
.saldo,.monto{flex:none;min-width:96px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
/* El contenido dinámico no debe heredar el estilo de las etiquetas */
.app .kpi strong span,.app .kpi small span,.app .kpi span span,.app .tx b span,.app .tx span span,.app .cab span span,.app .dia-cab b span,.app .dia-cab span span,.app .dato strong span,.app .dato span span,.app .lectura b span,.app .lectura span span,.app .linea span span,.app .ley span span{display:inline;margin:0;font:inherit;color:inherit;letter-spacing:inherit}
/* Filas que abren su detalle */
.fila{position:relative}
.abre{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;padding:0;border:0;border-radius:8px;background:transparent}
.app .abre:focus-visible{outline-offset:-2px}
.fila .btn,.fila .wa{position:relative;z-index:2}
/* Cambio de semana */
.semana{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px;padding:2px;border-radius:8px;background:#f1f4f4}
.semana b{font-size:14px;font-weight:600;text-align:center}
.flecha{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:inherit}
.flecha:hover{background:#e3e8e9}
.flecha:active{background:#d8dfe0}
.oscuro .semana{background:#1F1F22}
.oscuro .flecha:hover{background:#2E2E32}
.oscuro .flecha:active{background:#3A3A3E}
/* Estados de cita */
.b-no{background:#9aa0a6;color:#111827}
.oscuro .p-av{background:#3A2A12;color:#F2B35A}
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.nota{margin:0;font-size:13px;color:#92400e}
.oscuro .nota{color:#F2B35A}
.quitar.peligro{color:#b42318}
.oscuro .quitar.peligro{color:#FDA29B}
/* Ficha */
.sub{margin:0;font-size:15px;font-weight:600}
.texto{margin:0;font-size:15px}
.dato{padding:12px;border-radius:8px;background:#f1f4f4}
.dato span{display:block;font-size:12px;color:#5f6672}
.dato strong{display:block;margin-top:2px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:17px;font-weight:600}
.oscuro .dato{background:#1F1F22}
.oscuro .dato span{color:#9CA3AF}
.linea{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:6px 0;border-top:1px solid #f0f2f3;font-size:14px}
.linea small{display:block;font-size:12px;color:#5f6672}
.oscuro .linea{border-color:#26262A}
.oscuro .linea small{color:#B8B4AB}
/* Horario */
.dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.dias .chip{min-width:0;padding:0;font-size:13px}
@media (prefers-reduced-motion:reduce){.app button,.app .wa{transition:none}}
@media (prefers-reduced-motion:reduce){.fila,.wa,.chip{transition:none}}
@media (prefers-reduced-motion:reduce){.hoja{animation:none}.track div,.btn,.nav button,.barra i{transition:none}.btn:active{transform:none}}
/* Versión real */
html,body{height:100%}
.app{height:100vh;height:100dvh}
.form{display:flex;flex-direction:column;gap:14px}
.entrada{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;background:var(--ground);color:#111827;font-family:"DM Sans",Inter,system-ui,sans-serif}
.entrada.oscuro{color:#F4F1EA}
.entrada form{width:380px;max-width:100%;display:flex;flex-direction:column;gap:14px}
.entrada *{box-sizing:border-box}
.entrada img{display:block;width:240px;max-width:80%;height:auto;margin:0 auto 8px}
.entrada h1{margin:0;font-size:24px;text-align:center}
.entrada .campo input{width:100%;min-height:48px;padding:0 12px;border:1px solid #9aa4ad;border-radius:8px;font-size:16px}
.oscuro .campo input{border-color:#55555A;background:#1A1A1D;color:#F4F1EA}
.error{margin:0;font-size:14px;font-weight:600;color:#b42318}
.oscuro .error{color:#FDA29B}
.btn{cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.linea-btn{width:100%;border:0;border-left:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-top:1px solid #f0f2f3}
.oscuro .linea-btn{border-color:#26262A}
.bandamovil .liga{margin-left:auto}
.bandamovil span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Aprovecha toda la pantalla */
.escritorio .wrap{max-width:none;padding:32px 40px}
.pie .liga{min-height:40px;font-size:13px}
.oscuro .pie .liga{color:#B8B4AB}
.celular .wrap{padding-top:calc(20px + env(safe-area-inset-top))}
.celular .side{padding-bottom:env(safe-area-inset-bottom)}
@media (min-width:1500px){.escritorio .reja{grid-template-columns:minmax(0,1fr) 420px}}
/* Páginas legales */
.legal{min-height:100vh;box-sizing:border-box;padding:32px 20px;background:var(--ground);color:#F4F1EA;font-family:"DM Sans",Inter,system-ui,sans-serif;font-size:16px;line-height:1.55}
.legal article{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.legal h1{margin:0;font-size:26px;line-height:1.2}
.legal h2{margin:12px 0 0;font-size:18px}
.legal p,.legal ul{margin:0}
.legal a{color:var(--ink)}
.legal .casilla{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.legal .casilla input{width:22px;height:22px;flex:none;margin-top:2px}
.legal .btn.p{min-height:50px;border:0;border-radius:8px;background:var(--accent);color:#15120A;font-size:16px;font-weight:600}
.legal .btn.p:disabled{opacity:.5;cursor:not-allowed}