:root{--fondo:#EEF6F6;--tarjeta:#fff;--tinta:#12303A;--suave:#5A7580;--marca:#0F5C6B;--sobre-marca:#fff;--sol:#F6C945;--sobre-sol:#12303A;--linea:#CFE2E4;--alerta:#B3412E;--ok:#2E7D4F;--realce:#E3F1F2;--marca-oscura:#0A4350}
@media (prefers-color-scheme:dark){:root{--fondo:#0D1F25;--tarjeta:#16303A;--tinta:#E8F2F3;--suave:#92AEB6;--marca:#4FB6C6;--sobre-marca:#0D1F25;--linea:#254652;--alerta:#F08A76;--ok:#6FCF97;--realce:#1D3C47;--marca-oscura:#2E8FA0}}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 15px/1.5 Nunito,system-ui,sans-serif}
h1,h2,h3{font-family:Fredoka,system-ui,sans-serif;font-weight:600;margin:0 0 6px}
h1{font-size:1.5rem}
h2{font-size:1.1rem}
h3{font-size:1rem;margin-top:16px}
a{color:var(--marca);font-weight:700}
.suave{color:var(--suave);font-size:.9rem}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--sol);outline-offset:2px}
[hidden]{display:none!important}
.centrado{text-align:center}

/* Estructura del panel */
.app{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100%}
.lateral{background:var(--marca);color:var(--sobre-marca);padding:18px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.lateral nav a{display:block;padding:11px 12px;margin-bottom:4px;border-radius:10px;color:inherit;text-decoration:none;font-weight:600}
.lateral nav a:hover{background:rgba(255,255,255,.16)}
.lateral nav a[aria-current="page"]{background:var(--sol);color:var(--sobre-sol)}
.lateral .pie{margin-top:auto;padding:10px}
.lateral .btn.alt{color:var(--sobre-marca);border-color:var(--sobre-marca)}
.principal{padding:18px 26px 40px;max-width:1180px;width:100%}
.barra{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:16px}
.barra input{max-width:420px}

/* Marca en el menú y usuario */
.marca-lateral{display:flex;align-items:center;gap:10px;padding:4px 10px 16px;font:600 1.1rem Fredoka,sans-serif;line-height:1.15}
.cabecera .marca-lateral{padding:0}
.logo-menu{width:46px;height:46px;border-radius:50%;background:#fff;object-fit:contain;padding:3px;flex:0 0 auto}
.logo-menu.sin-logo{display:grid;place-items:center;font-size:1.5rem}
.lateral .usuario{display:block;width:100%;text-align:left;background:transparent;border:0;color:inherit;font:700 1rem Nunito,sans-serif;padding:8px 6px;margin-bottom:8px;border-radius:10px;cursor:pointer}
.lateral .usuario:hover{background:rgba(255,255,255,.16)}

/* Tarjetas, columnas y estadísticas */
.tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;padding:16px;margin:12px 0}
.columnas{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.columnas.derecha{grid-template-columns:1.15fr .85fr}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:14px 0 4px}
.stat{background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;padding:14px 16px}
.stat b{display:block;font:600 1.9rem Fredoka,sans-serif;color:var(--marca)}
.item{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--linea)}
.item:last-child{border:0}
.ficha{background:var(--realce);border-radius:14px;padding:16px;margin:12px 0}
.bloque-precio{margin:12px 0}
.precio{font:600 1.7rem Fredoka,sans-serif;color:var(--marca)}

/* Botones, formularios y etiquetas */
.btn{padding:8px 14px;border-radius:10px;border:2px solid var(--marca);background:var(--marca);color:var(--sobre-marca);font:700 .95rem Nunito,sans-serif;cursor:pointer;text-decoration:none;display:inline-block}
.btn.alt{background:transparent;color:var(--marca)}
.btn.grande{padding:11px 18px;font-size:1rem;width:100%;margin-top:6px}
.btn:disabled{opacity:.6;cursor:wait}
.enlace{background:none;border:0;padding:0;color:var(--marca);font:700 1rem Nunito,sans-serif;cursor:pointer;text-decoration:underline}
label{display:block;font-weight:700;margin:10px 0 3px;font-size:.88rem}
label.casilla{display:flex;gap:8px;align-items:center;font-weight:600}
label.casilla input{width:auto}
input,select{width:100%;padding:9px 10px;border:2px solid var(--linea);border-radius:10px;background:var(--tarjeta);color:var(--tinta);font:400 1rem Nunito,sans-serif}
input:disabled{opacity:.7}
.error{color:var(--alerta);font-weight:700;min-height:1.3em;margin:8px 0 0}
.bien{color:var(--ok);font-weight:700}
.mal{color:var(--alerta);font-weight:700}
.etiqueta{padding:2px 10px;border-radius:99px;font-size:.8rem;font-weight:700;background:var(--sol);color:var(--sobre-sol);white-space:nowrap}
.etiqueta.ok{background:var(--ok);color:#fff}
.etiqueta.atrasada{background:var(--alerta);color:#fff}
.etiqueta.gris{background:var(--linea);color:var(--tinta)}
.acciones{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.acciones-fila{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{padding:7px 14px;border-radius:99px;border:2px solid var(--linea);background:var(--tarjeta);color:var(--tinta);font:700 .9rem Nunito,sans-serif;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--marca);color:var(--sobre-marca);border-color:var(--marca)}
.fila-nueva{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:10px 0 14px}
.fila-nueva>div{flex:1 1 130px}
.fila-nueva .error{flex-basis:100%;margin:0}
.aviso-fijo{background:var(--sol);color:var(--sobre-sol);border-radius:10px;padding:8px 12px}

/* Día, hora y baño medicado */
.fecha-bloque{border:2px dashed var(--linea);border-radius:12px;padding:10px 12px;margin:12px 0}
.dia-texto{font:600 1.1rem Fredoka,sans-serif;color:var(--marca);margin:8px 0 2px;text-transform:capitalize}
.medicado{background:var(--realce);border-radius:12px;padding:10px 12px;margin:12px 0}
.fila-recargo{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fila-recargo input{max-width:140px}

/* Sugerencias al escribir */
.sugerencias{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.sugerencias:empty{display:none}
.sugerencias button{text-align:left;padding:10px 12px;border:2px solid var(--linea);border-radius:10px;background:var(--tarjeta);color:var(--tinta);font:400 .95rem Nunito,sans-serif;cursor:pointer}
.sugerencias button:hover{border-color:var(--marca)}

/* Tablas */
.tabla-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{border-bottom:1px solid var(--linea);padding:9px 8px;text-align:left;vertical-align:middle}
th{color:var(--suave);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
td input,td select{padding:6px 8px;min-width:90px}
tr.activa{background:var(--realce)}

/* Videos */
.grandes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0}
.grandes button{padding:46px 10px;border:0;border-radius:20px;background:var(--marca);color:var(--sobre-marca);font:600 1.8rem Fredoka,sans-serif;cursor:pointer}
.grandes button.sol{background:var(--sol);color:var(--sobre-sol)}
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.marco{position:relative;padding-top:56.25%;margin-bottom:8px}
.marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:10px}

/* Pantalla de entrada */
.login{min-height:100%;display:grid;place-items:center;padding:20px}
.login .tarjeta{width:100%;max-width:400px}
.login-pantalla{min-height:100%;display:grid;grid-template-columns:1.1fr 1fr}
.login-marca{background:linear-gradient(160deg,var(--marca) 0%,var(--marca-oscura) 100%);color:var(--sobre-marca);display:grid;place-items:center;padding:40px;position:relative;overflow:hidden}
.login-marca::before,.login-marca::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.1)}
.login-marca::before{width:420px;height:420px;top:-140px;left:-120px}
.login-marca::after{width:300px;height:300px;bottom:-100px;right:-80px;background:rgba(246,201,69,.2)}
.login-marca-interior{position:relative;text-align:center}
.login-marca h1{font-size:2.3rem;margin:0}
.login-marca p{margin:6px 0 0;opacity:.92}
.logo-grande{width:min(260px,60vw);aspect-ratio:1;margin:0 auto 20px;background:#fff;border-radius:50%;display:grid;place-items:center;box-shadow:0 14px 40px rgba(0,0,0,.28);overflow:hidden;padding:24px}
.logo-grande img{max-width:100%;max-height:100%;object-fit:contain}
.logo-grande .sin-logo{font-size:6rem}
.login-formulario{display:grid;place-items:center;padding:32px}
.login-formulario .tarjeta{width:100%;max-width:400px;padding:24px;box-shadow:0 10px 30px rgba(18,48,58,.14)}

/* Vista pública */
.cabecera{display:flex;justify-content:space-between;align-items:center;padding:14px 26px;background:var(--marca);color:var(--sobre-marca)}
.cabecera .btn.alt{color:var(--sobre-marca);border-color:var(--sobre-marca)}
.contenido{max-width:1000px;margin:0 auto;padding:20px}

/* Ventanas emergentes, logo en Catálogos y avisos */
dialog{border:1px solid var(--linea);border-radius:14px;padding:20px;background:var(--tarjeta);color:var(--tinta);width:min(460px,92vw)}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog.ancho{width:min(780px,94vw);max-height:90vh;overflow:auto}
dialog .cerrar{float:right;background:transparent;border:0;color:var(--tinta);font-size:1.3rem;cursor:pointer;padding:4px 8px}
.logo-vista{margin:12px 0}
.logo-vista img{max-width:220px;max-height:220px;background:#fff;border-radius:50%;padding:14px;border:1px solid var(--linea);object-fit:contain}
#aviso{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--tinta);color:var(--fondo);padding:12px 18px;border-radius:12px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw}
#aviso.visible{opacity:1}
#aviso.error{background:var(--alerta);color:#fff}

/* Pantallas pequeñas y movimiento reducido (siempre al final) */
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .lateral{position:static;height:auto;flex-direction:row;flex-wrap:wrap;gap:4px}
  .lateral .marca-lateral{width:100%;padding-bottom:6px}
  .lateral .pie{margin-top:0}
  .principal{padding:14px}
  .columnas,.columnas.derecha,.stats,.dos,.grandes,.login-pantalla{grid-template-columns:1fr}
  .login-marca{padding:28px 20px}
}
@media (prefers-reduced-motion:reduce){#aviso{transition:none}}
/* ===== Novedades: listas, login adaptable, aviso medicado y carrusel ===== */

/* Listas desplegables: mismo color que los demás campos (claro u oscuro según el tema) */
:root{color-scheme:light dark}
select{background-color:var(--tarjeta);color:var(--tinta)}
option,optgroup{background-color:var(--tarjeta);color:var(--tinta)}

/* Aviso de baño medicado en la ficha de Agendar */
.alerta-medicado{background:var(--sol);color:var(--sobre-sol);border-radius:10px;padding:8px 12px;margin:10px 0}


/* Pantalla de entrada: ocupa toda la pantalla y se adapta a cualquier tamaño */
.acceso{position:fixed;inset:0;overflow:auto;display:flex;padding:clamp(12px,3vw,32px);background:linear-gradient(135deg,#0F5C6B 0%,#0A4350 55%,#0B3A46 100%)}
.acceso::before,.acceso::after{content:"";position:fixed;border-radius:50%;pointer-events:none}
.acceso::before{width:min(60vmax,640px);aspect-ratio:1;top:-16vmin;left:-12vmin;background:rgba(255,255,255,.07)}
.acceso::after{width:min(45vmax,480px);aspect-ratio:1;bottom:-14vmin;right:-10vmin;background:rgba(246,201,69,.18)}
.acceso-caja{--tarjeta:#fff;--tinta:#12303A;--suave:#5A7580;--linea:#CFE2E4;--marca:#0F5C6B;--sobre-marca:#fff;--alerta:#B3412E;--sol:#F6C945;--sobre-sol:#12303A;
  position:relative;z-index:1;margin:auto;display:grid;grid-template-columns:1fr 1fr;width:min(980px,100%);border-radius:24px;overflow:hidden;background:#fff;color:#12303A;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.acceso-marca{display:grid;place-content:center;justify-items:center;gap:6px;padding:clamp(24px,5vw,56px);text-align:center;background:linear-gradient(160deg,#E3F1F2,#CFE8EB)}
.acceso-marca h1{font-size:clamp(1.6rem,3.2vw,2.4rem);margin:10px 0 0;color:#0F5C6B}
.acceso-marca p{margin:0;color:#5A7580}
.acceso-logo{width:clamp(120px,22vw,240px);aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;padding:clamp(14px,2vw,26px);box-shadow:0 12px 36px rgba(15,92,107,.25);overflow:hidden}
.acceso-logo img{max-width:100%;max-height:100%;object-fit:contain}
.acceso-logo .sin-logo{font-size:clamp(3rem,8vw,6rem)}
.acceso-form{padding:clamp(24px,5vw,56px);display:grid;align-content:center;background:#fff}
@media (max-width:820px){
  .acceso-caja{grid-template-columns:1fr;max-width:480px}
  .acceso-marca{padding:24px}
  .acceso-logo{width:clamp(96px,30vw,150px)}
}

/* Carrusel de videos */
.visor{position:relative;background:#000;border-radius:16px;overflow:hidden;max-width:960px;margin:12px auto}
.pantalla-video{position:relative;height:min(72vh,600px);background:#000}
.pantalla-video video,.pantalla-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.pantalla-video>p{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#fff}
.flecha{position:absolute;top:50%;transform:translateY(-70%);width:52px;height:52px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:2rem;line-height:1;cursor:pointer;z-index:2}
.flecha:hover{background:rgba(0,0,0,.8)}
.flecha.izq{left:10px}
.flecha.der{right:10px}
.barra-video{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;background:#0B1A1F;color:#fff}
.barra-video .suave{color:#A9C4CB;margin-left:8px}
.barra-video .chip{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.controles-video{display:flex;gap:8px;flex-wrap:wrap}
.puntos{display:flex;gap:8px;justify-content:center;margin:12px 0}
.punto{width:12px;height:12px;border-radius:50%;border:0;background:var(--linea);cursor:pointer;padding:0}
.punto[aria-current="true"]{background:var(--marca);transform:scale(1.35)}
/* Pantalla completa: el visor ocupa toda la pantalla y el video se ajusta entero (sin cortar arriba ni abajo) */
.visor:fullscreen{width:100vw;height:100vh;height:100dvh;max-width:none;margin:0;border-radius:0;display:flex;flex-direction:column}
.visor:fullscreen .pantalla-video{flex:1 1 auto;height:auto;min-height:0}
.visor:fullscreen .barra-video{flex:0 0 auto}
.visor:-webkit-full-screen{width:100vw;height:100vh;max-width:none;margin:0;border-radius:0;display:flex;flex-direction:column}
.visor:-webkit-full-screen .pantalla-video{flex:1 1 auto;height:auto;min-height:0}
.visor:-webkit-full-screen .barra-video{flex:0 0 auto}
/* ===== Versión 3: tablas ordenables, historial, reportes, videos y más ===== */

/* Botones y enlaces */
.btn.peligro{background:transparent;color:var(--alerta);border-color:var(--alerta)}
.btn.peligro:hover{background:var(--alerta);color:#fff}
.enlace.pequeno{font-size:.9rem}
.acciones.separadas{justify-content:space-between;align-items:center}
label.casilla.pequena{font-size:.85rem;margin:0}

/* Aviso con botón (por ejemplo, "Deshacer") */
#aviso.con-accion{pointer-events:auto}
#aviso button{margin-left:10px;background:transparent;border:2px solid currentColor;color:inherit;border-radius:8px;padding:3px 10px;font:700 .9rem Nunito,sans-serif;cursor:pointer}

/* Tablas con orden y filtro por columna */
table.interactiva th{white-space:nowrap}
table.interactiva th .orden{background:none;border:0;padding:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
table.interactiva th .orden:hover{color:var(--marca)}
table.interactiva th[aria-sort="ascending"],table.interactiva th[aria-sort="descending"]{color:var(--marca)}
.flecha-orden{font-size:.75rem;opacity:.8}
.fila-filtros th{padding-top:0;text-transform:none;letter-spacing:0}
.fila-filtros input,.fila-filtros select{padding:5px 8px;font-size:.85rem;min-width:80px;border-width:1px}
.conteo{margin:8px 2px 0}
th.num,td.num{text-align:right}
tr.apagada td{opacity:.6}
tr.apagada td:first-child{opacity:1}

/* Hoy: descartados */
.descartados{margin-top:10px}
.item.descartado{opacity:.75}

/* Agendar: historial de servicios terminados */
.hist-agendar{margin-top:14px;border-top:1px solid var(--linea);padding-top:8px}
.hist-cabecera{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between}
.hist-cabecera h3{margin:6px 0 2px}
.hist-lista{list-style:none;margin:6px 0;padding:0;font-size:.88rem}
.hist-lista li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;padding:5px 0;border-bottom:1px dashed var(--linea)}
.hist-fecha{white-space:nowrap;font-weight:700}
.hist-detalle{color:var(--suave);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-valor{font-weight:700;white-space:nowrap}
.hist-total{font-weight:700;color:var(--marca);margin:6px 0 4px}

/* Videos: lista para deslizar */
.tira-bloque{margin:18px 0 6px}
.tira-cabecera{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.tira-cabecera input{max-width:380px}
.tira{position:relative;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;scroll-behavior:smooth}
.mini{flex:0 0 170px;scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--tarjeta);border:2px solid var(--linea);border-radius:12px;padding:6px;cursor:pointer;color:var(--tinta);font:400 .9rem Nunito,sans-serif}
.mini:hover{border-color:var(--marca)}
.mini[aria-current="true"]{border-color:var(--sol);box-shadow:0 0 0 2px var(--sol)}
.mini-img{display:grid;place-items:center;height:110px;border-radius:8px;overflow:hidden;background:#000;color:#fff;font-size:2rem}
.mini-img video,.mini-img img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.mini-titulo{font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-sub{color:var(--suave);font-size:.8rem}

/* Videos: interruptor Activo / Inactivo */
.interruptor{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:2px;cursor:pointer;color:var(--tinta);font:700 .85rem Nunito,sans-serif}
.interruptor .perilla{position:relative;width:38px;height:22px;border-radius:99px;background:var(--linea);transition:background .15s;flex:0 0 auto}
.interruptor .perilla::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.interruptor[aria-checked="true"] .perilla{background:var(--ok)}
.interruptor[aria-checked="true"] .perilla::after{transform:translateX(16px)}

/* Reportes */
.stats.stats-4{grid-template-columns:repeat(4,1fr)}
.stats.stats-4 .stat b{font-size:1.5rem}
tfoot th{color:var(--tinta);font-size:.9rem;text-transform:none;letter-spacing:0}

@media (max-width:860px){
  .stats.stats-4{grid-template-columns:1fr 1fr}
  .pantalla-video{height:min(65vh,520px)}
}
@media (prefers-reduced-motion:reduce){.tira{scroll-behavior:auto}.interruptor .perilla,.interruptor .perilla::after{transition:none}}
/* Las columnas no se estiran por una tabla ancha: la tabla se desplaza por dentro */
.columnas>*{min-width:0}

/* ===== Versión 4: botones compactos, menú ⋯, cancelaciones y diseño para celular ===== */

/* Botones pequeños y ordenados en tablas y listas */
.btn.chico{padding:5px 11px;font-size:.84rem;border-radius:8px;border-width:1.5px;line-height:1.2;white-space:nowrap}
.btn.solo-icono{padding:5px 9px;min-width:32px;text-align:center;font-size:1rem;line-height:1}
.btn.peligro-lleno{background:var(--alerta);border-color:var(--alerta);color:#fff}
.acciones-tabla{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
td .acciones-tabla{justify-content:flex-start}
.sin-salto{white-space:nowrap}

/* Menú flotante de acciones */
.menu-flotante{position:fixed;z-index:1000;min-width:210px;background:var(--tarjeta);color:var(--tinta);border:1px solid var(--linea);border-radius:12px;padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.22);display:flex;flex-direction:column}
.menu-flotante button{background:none;border:0;text-align:left;padding:10px 12px;border-radius:8px;font:600 .92rem Nunito,sans-serif;color:inherit;cursor:pointer}
.menu-flotante button:hover,.menu-flotante button:focus-visible{background:var(--realce)}
.menu-flotante button.peligro{color:var(--alerta)}

/* Cancelaciones: quién, cuándo y por qué */
.auditoria{font-size:.78rem;color:var(--suave);margin-top:4px;line-height:1.35;max-width:260px}
.auditoria strong{color:var(--tinta)}
tr.cancelada td{color:var(--suave)}
tr.cancelada td .enlace{color:var(--suave)}
.item.anulado{opacity:.85}
.item.anulado>div>strong:first-child{text-decoration:line-through;text-decoration-color:var(--alerta)}
.hist-barra{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.chips-motivo{margin:4px 0 8px}
.chips-motivo .chip{font-size:.82rem;padding:5px 10px}
.chips-motivo .chip[aria-pressed="true"]{background:var(--marca);color:var(--sobre-marca);border-color:var(--marca)}
dialog .aviso-fijo{font-size:.9rem}

/* Listas de Hoy: acciones a la derecha sin desordenarse */
.item>.acciones-tabla{flex:0 0 auto}

/* Menú para celular (oculto en computador) */
.cabeza-lateral{display:contents}
.menu-movil{display:none}

/* ---------- Celular y tablet ---------- */
@media (max-width:860px){
  body{font-size:15px}
  .app{display:block}
  .lateral{position:sticky;top:0;z-index:50;height:auto;padding:8px 12px;display:block;box-shadow:0 2px 10px rgba(0,0,0,.18)}
  .cabeza-lateral{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .lateral .marca-lateral{padding:0;width:auto;font-size:1rem}
  .logo-menu{width:36px;height:36px}
  .menu-movil{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:0;color:inherit;border-radius:10px;padding:8px 12px;font:700 .95rem Nunito,sans-serif;cursor:pointer}
  .menu-movil .actual{opacity:.9}
  .lateral nav,.lateral .pie{display:none}
  .lateral.abierta nav{display:block;margin-top:8px}
  .lateral.abierta .pie{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px 0 4px;border-top:1px solid rgba(255,255,255,.2);margin-top:6px}
  .lateral.abierta .pie .usuario{width:auto;margin:0}
  .principal{padding:12px 12px 32px}
  .barra{margin-bottom:10px}
  .barra input{max-width:none}
  .barra .suave{display:none}
  h1{font-size:1.3rem}
  .tarjeta{padding:12px;border-radius:12px}
  .stats{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .stats.stats-4{grid-template-columns:1fr 1fr}
  .stat{padding:10px;font-size:.82rem}
  .stat b{font-size:1.4rem}
  .stats.stats-4 .stat b{font-size:1.15rem}
  input,select{font-size:16px} /* evita que el iPhone haga zoom al escribir */
  .item{flex-wrap:wrap;gap:8px}
  .item>.acciones-tabla{width:100%;justify-content:flex-end;flex-wrap:wrap}
  .acciones{justify-content:stretch}
  .acciones .btn{flex:1}
  .acciones.separadas{flex-direction:column-reverse;align-items:stretch}
  .acciones.separadas .acciones-fila .btn{flex:1}
  dialog{padding:16px;width:94vw;max-height:92vh;overflow:auto}
  .fila-nueva>div{flex:1 1 100%}
  .filtros{gap:6px}
  .chip{padding:6px 11px;font-size:.85rem}
  .grandes button{padding:28px 10px;font-size:1.4rem}
  .mini{flex-basis:140px}
  .mini-img{height:90px}
  .hist-lista li{grid-template-columns:1fr auto}
  .hist-detalle{grid-column:1/-1;grid-row:2;white-space:normal}

  /* Tablas interactivas como tarjetas */
  table.interactiva,table.interactiva tbody,table.interactiva tr,table.interactiva td{display:block;width:100%}
  table.interactiva thead{display:block}
  table.interactiva thead tr:first-child{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
  table.interactiva thead tr:first-child th{border:0;padding:0}
  table.interactiva thead tr:first-child th:not([aria-sort]){display:none}
  table.interactiva th .orden{border:1.5px solid var(--linea);border-radius:99px;padding:5px 10px;background:var(--tarjeta);font-size:.75rem}
  table.interactiva th[aria-sort="ascending"] .orden,table.interactiva th[aria-sort="descending"] .orden{border-color:var(--marca)}
  table.interactiva thead tr.fila-filtros{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
  table.interactiva .fila-filtros th{display:block;border:0;padding:0;font-size:.72rem;min-width:0}
  .fila-filtros th:empty{display:none}
  .fila-filtros th::before{content:attr(data-label);display:block;margin-bottom:2px}
  .fila-filtros input,.fila-filtros select{width:100%;font-size:16px;padding:7px 8px}
  table.interactiva tbody tr{background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;padding:8px 12px;margin:8px 0}
  table.interactiva tbody tr.activa{border-color:var(--marca);background:var(--realce)}
  table.interactiva td{border:0;padding:4px 0;display:grid;grid-template-columns:38% 1fr;gap:8px;align-items:start;text-align:left}
  table.interactiva td>.celda{min-width:0;overflow-wrap:anywhere}
  table.interactiva td::before{content:attr(data-label);color:var(--suave);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding-top:2px}
  table.interactiva td:not([data-label])::before,table.interactiva td[data-label=""]::before{display:none}
  table.interactiva td:not([data-label]),table.interactiva td[data-label=""]{grid-template-columns:1fr}
  table.interactiva td.num{text-align:left}
  table.interactiva td .acciones-tabla{justify-content:flex-end;flex-wrap:wrap}
  table.interactiva td:last-child:not([data-label]),table.interactiva td:last-child[data-label=""]{padding-top:8px;border-top:1px dashed var(--linea);margin-top:4px}
  table.interactiva td:last-child:has(.acciones-tabla:empty){display:none}
  table.interactiva tr.vacia{border:0;background:none;padding:0}
  .tabla-scroll{overflow:visible}
  /* Las tablas de Catálogos y Reportes (no interactivas) se desplazan de lado */
  .tarjeta>.tabla-scroll,.tarjeta .tabla-scroll:not(:has(table.interactiva)){overflow-x:auto}
  td input,td select{min-width:70px}
}
@media (max-width:420px){
  .stats{grid-template-columns:1fr 1fr}
  .stats .stat:last-child:nth-child(odd){grid-column:1/-1}
}

/* ===== Versión 5: Agenda reorganizada, limpiar filtros y mensaje de WhatsApp ===== */

/* Pie de las tablas: conteo + Limpiar filtros */
.pie-tabla{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px}
.pie-tabla .conteo{margin:0}

/* Vista previa del mensaje de WhatsApp */
.vista-mensaje{background:var(--realce);border-radius:10px;padding:10px 12px;margin:6px 0 0;white-space:pre-line}

/* Encabezado de la Agenda con selector de vista */
.agenda-cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.agenda-cabecera h1{margin:0}
.segmentado{display:inline-flex;background:var(--tarjeta);border:1.5px solid var(--linea);border-radius:12px;padding:3px;gap:2px}
.segmentado button{border:0;background:none;color:var(--tinta);font:700 .9rem Nunito,sans-serif;padding:7px 16px;border-radius:9px;cursor:pointer}
.segmentado button[aria-selected="true"]{background:var(--marca);color:var(--sobre-marca)}

/* Navegador de fechas: ‹ Hoy ›  ·  título  ·  calendario */
.navegador-fecha{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-bottom:10px}
.nav-flechas{display:flex;gap:6px}
.titulo-fecha{margin:0;font-size:1.15rem;text-align:center}
.navegador-fecha input[type=date]{width:auto;padding:6px 8px}
.estados-agenda{margin-bottom:6px}

/* Resumen del día o la semana */
.resumen-agenda{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 12px;margin:6px 0 10px;background:var(--realce);border-radius:10px;font-size:.92rem}
.resumen-agenda b{font-family:Fredoka,sans-serif;font-size:1.05rem;color:var(--marca)}

/* Cada cita como renglón ordenado */
.lista-citas{display:flex;flex-direction:column;gap:8px}
.cita{display:grid;grid-template-columns:70px minmax(140px,1.3fr) minmax(120px,1fr) 95px minmax(110px,.9fr) auto;align-items:center;gap:12px;
  background:var(--tarjeta);border:1px solid var(--linea);border-left:5px solid var(--sol);border-radius:12px;padding:10px 12px}
.cita.estado-realizada{border-left-color:var(--ok)}
.cita.estado-cancelada{border-left-color:var(--linea);opacity:.75}
.cita-hora{display:flex;flex-direction:column;line-height:1.1}
.cita-hora strong{font:600 1.25rem Fredoka,sans-serif;color:var(--marca)}
.cita-hora small{color:var(--suave);font-size:.75rem}
.cita-quien .enlace{font-size:1.02rem}
.cita-precio{font-weight:700;text-align:right;white-space:nowrap}
.cita .acciones-tabla{justify-content:flex-end}
.cita .auditoria{max-width:none}
.canceladas-dia{margin-top:2px}
.canceladas-dia summary{cursor:pointer;color:var(--suave);font-weight:700;font-size:.88rem;padding:4px 2px}
.canceladas-dia[open] summary{margin-bottom:8px}
.canceladas-dia .cita{margin-bottom:8px}
.vacio-dia{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px;border:2px dashed var(--linea);border-radius:12px}
.vacio-dia p{margin:0}

/* Vista semana */
.dia-semana{padding:10px 0;border-top:1px solid var(--linea)}
.dia-semana:first-of-type{border-top:0}
.dia-semana h3{display:flex;align-items:baseline;gap:10px;margin:0 0 8px}
.dia-semana.es-hoy h3 .enlace-dia{color:var(--marca)}
.dia-semana.es-hoy h3::after{content:"hoy";font:700 .7rem Nunito,sans-serif;background:var(--sol);color:var(--sobre-sol);border-radius:99px;padding:2px 8px}
.enlace-dia{background:none;border:0;padding:0;font:600 1rem Fredoka,sans-serif;color:var(--tinta);cursor:pointer;text-align:left}
.enlace-dia:hover{color:var(--marca);text-decoration:underline}

@media (max-width:1100px){
  .cita{grid-template-columns:64px 1fr 1fr auto;grid-template-areas:"hora quien servicio precio" "hora estado estado acciones"}
  .cita-hora{grid-area:hora}.cita-quien{grid-area:quien}.cita-servicio{grid-area:servicio}.cita-precio{grid-area:precio}
  .cita-estado{grid-area:estado}.cita .acciones-tabla{grid-area:acciones}
}
@media (max-width:860px){
  .agenda-cabecera{margin-bottom:4px}
  .segmentado{width:100%}
  .segmentado button{flex:1;padding:8px 6px}
  .navegador-fecha{grid-template-columns:1fr auto;grid-template-areas:"titulo titulo" "flechas fecha";gap:8px}
  .titulo-fecha{grid-area:titulo;text-align:left;font-size:1.05rem}
  .nav-flechas{grid-area:flechas}
  .navegador-fecha input[type=date]{grid-area:fecha;font-size:16px}
  .cita{grid-template-columns:56px 1fr auto;grid-template-areas:"hora quien precio" "hora servicio servicio" "estado estado estado" "acciones acciones acciones";gap:4px 10px;padding:10px}
  .cita .acciones-tabla{justify-content:flex-end;border-top:1px dashed var(--linea);padding-top:8px;margin-top:4px}
  .resumen-agenda{gap:4px 12px;font-size:.85rem}
}

/* ===== Versión 6: calendario propio, botón del día y ajustes ===== */

/* El campo de fecha original queda oculto (sigue guardando el valor) */
.fecha-oculta{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden;clip:rect(0 0 0 0);border:0!important;padding:0!important}

/* Botón que se ve en lugar del campo de fecha */
.campo-fecha{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:2px solid var(--linea);border-radius:10px;background:var(--tarjeta);color:var(--tinta);font:400 1rem Nunito,sans-serif;cursor:pointer;text-align:left;min-height:42px}
.campo-fecha:hover{border-color:var(--marca)}
.campo-fecha[data-cal-abierto]{border-color:var(--marca);box-shadow:0 0 0 3px var(--realce)}
.campo-fecha .cf-texto{font-weight:700}
.campo-fecha .cf-vacio{font-weight:400;color:var(--suave)}
.campo-fecha .cf-dia{color:var(--suave);font-size:.85rem;text-transform:capitalize}
.campo-fecha .cf-icono{margin-left:auto;font-size:.95rem;opacity:.8}
.fila-filtros .campo-fecha{padding:5px 8px;min-height:0;font-size:.85rem;border-width:1px;min-width:130px}
.fila-filtros .campo-fecha .cf-dia{display:none}
.navegador-fecha .campo-fecha{width:auto;min-width:170px}

/* Calendario flotante */
.calendario{position:fixed;z-index:1001;width:286px;background:var(--tarjeta);color:var(--tinta);border:1px solid var(--linea);border-radius:14px;padding:12px;box-shadow:0 16px 40px rgba(0,0,0,.25)}
.cal-cabeza{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-cabeza strong{font:600 1.05rem Fredoka,sans-serif}
.cal-cabeza button{width:34px;height:34px;border-radius:50%;border:0;background:var(--realce);color:var(--tinta);font-size:1.3rem;line-height:1;cursor:pointer}
.cal-cabeza button:hover{background:var(--marca);color:var(--sobre-marca)}
.cal-semana,.cal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.cal-semana span{font-size:.72rem;font-weight:700;color:var(--suave);text-transform:uppercase;padding:2px 0}
.cal-dias button{aspect-ratio:1;border:0;border-radius:9px;background:none;color:var(--tinta);font:600 .92rem Nunito,sans-serif;cursor:pointer}
.cal-dias button:hover{background:var(--realce)}
.cal-dias button.es-hoy{box-shadow:inset 0 0 0 2px var(--sol)}
.cal-dias button.elegido{background:var(--marca);color:var(--sobre-marca)}
.cal-pie{display:flex;justify-content:space-between;margin-top:8px;border-top:1px solid var(--linea);padding-top:8px}
.cal-pie button{background:none;border:0;color:var(--marca);font:700 .9rem Nunito,sans-serif;cursor:pointer;padding:4px 6px;border-radius:8px}
.cal-pie button:hover{background:var(--realce)}

/* Agenda: el centro dice qué día se ve */
.dia-actual{min-width:92px;text-align:center;font:600 1rem Fredoka,sans-serif;color:var(--marca);padding:0 4px;text-transform:capitalize}
.nav-flechas{align-items:center}

@media (max-width:860px){
  .navegador-fecha .campo-fecha{grid-area:fecha;min-width:0}
  .nav-flechas{flex-wrap:wrap}
  .calendario{width:min(320px,calc(100vw - 16px))}
  .cal-dias button{font-size:1rem}
}
@media (max-width:860px){
  .navegador-fecha{grid-template-columns:1fr;grid-template-areas:"titulo" "flechas" "fecha"}
  .nav-flechas{flex-wrap:nowrap;justify-content:space-between}
  .nav-flechas .dia-actual{flex:1}
  .navegador-fecha .campo-fecha{width:100%}
}

/* ===== Versión 10: roles y Usuarios ===== */
.lateral .usuario .rol-usuario{display:block;font:600 .75rem Nunito,sans-serif;opacity:.8;margin-top:2px;padding-left:24px}
.tabla-permisos{font-size:.88rem}
.tabla-permisos td:not(:first-child),.tabla-permisos th:not(:first-child){text-align:center;width:72px}
.pasos{padding-left:20px;margin:6px 0 10px}
.pasos li{margin-bottom:6px}
@media (max-width:860px){ .lateral .usuario .rol-usuario{display:inline;padding-left:6px} }
td select[data-rol]{min-width:150px}

/* ===== v13: visita anterior, confirmaciones ===== */
.hist-cabeza{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.hist-cabeza h3{margin:0}
#dialogo-confirmar{max-width:440px}
#dialogo-confirmar h2{margin-top:0}
.calendario button[data-fecha]:focus-visible{outline:2px solid var(--marca);outline-offset:1px}

/* Firma del producto (DALU Vital) */
.firma-producto{margin:22px 0 0;text-align:center;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.firma-producto strong{color:var(--tinta);font-weight:700}
.lateral .firma-producto{margin:12px 0 0;color:var(--sobre-marca);opacity:.7}

/* Multinegocio: invitaciones, negocios y enlaces */
.fila-form{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:end}
.fila-form label{margin-top:0}
.lista-invitaciones{list-style:none;padding:0;margin:6px 0}
.lista-invitaciones li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--linea);flex-wrap:wrap}
.lista-invitaciones li span{overflow-wrap:anywhere}
.enlaces-negocio{padding-left:20px}
.enlaces-negocio a{overflow-wrap:anywhere}
.fila-form.pagos-form{grid-template-columns:1.3fr 1fr .8fr 1.3fr auto}
@media (max-width:860px){.fila-form,.fila-form.pagos-form{grid-template-columns:1fr}}