:root { --fondo:#f6f7fb; --tarjeta:#fff; --texto:#1b1f2a; --suave:#6b7280; --primario:#4f46e5; --primario-oscuro:#4338ca; --borde:#e5e7eb; --ok:#059669; --error:#dc2626; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,sans-serif; background:var(--fondo); color:var(--texto); }
a { color:var(--primario); }
header.barra { background:var(--tarjeta); border-bottom:1px solid var(--borde); padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
header.barra .marca { font-weight:700; font-size:1.15rem; text-decoration:none; color:var(--texto); }
main { max-width:960px; margin:0 auto; padding:20px 16px 90px; }
h1 { font-size:1.6rem; margin:.2em 0 .4em; } h2 { font-size:1.2rem; margin:1.2em 0 .5em; }
.tarjeta { background:var(--tarjeta); border:1px solid var(--borde); border-radius:12px; padding:16px; }
.grilla { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.fila { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.suave { color:var(--suave); font-size:.9rem; }
input,select,textarea { font:inherit; padding:9px 11px; border:1px solid var(--borde); border-radius:8px; background:#fff; max-width:100%; }
label { display:flex; flex-direction:column; gap:4px; font-size:.9rem; color:var(--suave); }
label input,label select,label textarea { color:var(--texto); }
button,.boton { font:inherit; padding:9px 16px; border:0; border-radius:8px; background:var(--primario); color:#fff; cursor:pointer; text-decoration:none; display:inline-block; }
button:hover,.boton:hover { background:var(--primario-oscuro); }
button.secundario { background:#eef0f6; color:var(--texto); } button.secundario:hover { background:#e2e5ef; }
button.peligro { background:#fee2e2; color:var(--error); }
button:disabled { opacity:.5; cursor:default; }
.etiqueta { display:inline-block; padding:2px 9px; border-radius:99px; background:#eef0f6; font-size:.8rem; }
.etiqueta.confirmado { background:#dbeafe; color:#1d4ed8; } .etiqueta.atendido { background:#d1fae5; color:var(--ok); } .etiqueta.cancelado { background:#fee2e2; color:var(--error); }
.franjas { display:flex; flex-wrap:wrap; gap:8px; }
.franjas button { background:#eef0f6; color:var(--texto); } .franjas button.elegida { background:var(--primario); color:#fff; }
.mensaje-error { color:var(--error); } .mensaje-ok { color:var(--ok); }
.pestanas { display:flex; gap:4px; border-bottom:1px solid var(--borde); margin-bottom:16px; overflow-x:auto; }
.pestanas button { background:none; color:var(--suave); border-radius:8px 8px 0 0; } .pestanas button.activa { color:var(--primario); border-bottom:3px solid var(--primario); background:none; }
table { width:100%; border-collapse:collapse; background:var(--tarjeta); border-radius:12px; overflow:hidden; }
th,td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--borde); font-size:.92rem; } th { background:#fafafa; color:var(--suave); font-weight:600; }
.formulario { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); align-items:end; margin-bottom:14px; }
.centrado { max-width:380px; margin:8vh auto; }
#chat-boton { position:fixed; right:18px; bottom:18px; border-radius:99px; padding:14px 20px; box-shadow:0 6px 20px #0003; z-index:20; }
.etiqueta.en_curso { background:#fee2e2; color:#b91c1c; } .etiqueta.ausente { background:#e5e7eb; color:#374151; }
.salon { container-type:inline-size; position:relative; width:100%; aspect-ratio:16/9; background:#fff radial-gradient(#d9dce6 1px,transparent 1px) 0 0/22px 22px; border:2px dashed var(--borde); border-radius:14px; overflow:hidden; touch-action:none; }
.plaza { position:absolute; width:9cqw; height:9cqw; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-size:clamp(.68rem,1.5cqw,1.05rem); line-height:1.15; color:#fff; font-weight:600; cursor:grab; user-select:none; box-shadow:0 3px 8px #0003; border:3px solid #fff; background:var(--estado); overflow:visible; }
.plaza.arrastrando { cursor:grabbing; box-shadow:0 8px 20px #0005; z-index:5; }
.plaza small { font-weight:400; opacity:.9; }
.plaza.libre { --estado:#10b981; } .plaza.proximo { --estado:#eab308; color:#1b1f2a; } .plaza.en_hora { --estado:#f97316; }
.plaza.demorado { --estado:#dc2626; } .plaza.ausente { --estado:#6b7280; } .plaza.en_curso { --estado:#4f46e5; } .plaza.inactiva { --estado:#cbd5e1; }
.plaza.personalizada { border:5px solid var(--estado); }
.leyenda { display:flex; flex-wrap:wrap; gap:12px; font-size:.85rem; margin:8px 0; }
.leyenda span::before { content:''; display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:5px; vertical-align:-1px; background:var(--color); }
.recepcion-destino { font-size:1.8rem; font-weight:800; color:var(--primario); }
.situacion-proximo { color:#a16207; } .situacion-en_hora { color:#c2410c; } .situacion-demorado { color:var(--error); font-weight:600; } .situacion-ausente { color:#6b7280; } .situacion-en_curso { color:var(--primario); }
.portada { background-size:cover; background-position:center; border-radius:14px; padding:46px 24px 22px; margin-bottom:14px; color:#fff; text-shadow:0 2px 8px #000a; background-color:var(--primario); }
.portada h1 { margin:0; } .portada .etiqueta { text-shadow:none; color:var(--texto); }
.servicio-imagen { width:100%; height:130px; object-fit:cover; border-radius:8px; margin-bottom:8px; }
.tarjeta.oferta { border:2px solid #f59e0b; background:#fffbeb; position:relative; }
.cinta-oferta { position:absolute; top:10px; right:10px; background:#f59e0b; color:#fff; font-weight:700; font-size:.78rem; padding:2px 10px; border-radius:99px; }
.precio-tachado { text-decoration:line-through; color:var(--suave); margin-right:6px; } .precio-oferta { color:#b45309; font-weight:700; }
.dos-columnas { display:grid; gap:14px; grid-template-columns:minmax(0,3fr) minmax(250px,1fr); align-items:start; }
@media (max-width:760px) { .dos-columnas { grid-template-columns:1fr; } }
.guias { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.guias line { stroke:#94a3b8; stroke-width:3; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.asa { position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:4px; background:#475569; cursor:move; z-index:4; }
.asa.quitar { background:#dc2626; border-radius:50%; cursor:pointer; color:#fff; font-size:11px; line-height:16px; text-align:center; }
.plaza.inactiva { color:#475569; opacity:.7; }
.salon.editando { border-color:var(--primario); border-style:solid; }
.plaza.seleccionada { outline:4px solid #1b1f2a55; }
.lista-proximos { display:grid; gap:6px; margin:6px 0 0; padding:0; list-style:none; } .lista-proximos li { padding:6px 8px; background:#f3f4f8; border-radius:8px; font-size:.9rem; }
.plaza .asa { margin:0; right:-9px; bottom:-9px; left:auto; top:auto; cursor:nwse-resize; background:#1b1f2a; }

.panel main { max-width:1240px; }
.plaza.cancha { background-image:linear-gradient(90deg,transparent calc(50% - 1px),#ffffffcc calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),radial-gradient(circle at 50% 50%,transparent 0 1.6cqw,#ffffffcc 1.6cqw 1.9cqw,transparent 1.9cqw); box-shadow:inset 0 0 0 2px #ffffffcc,0 3px 8px #0003; }
a.tarjeta:hover { box-shadow:0 6px 18px #1b1f2a1a; transform:translateY(-2px); } a.tarjeta { transition:box-shadow .15s,transform .15s; }
.plaza.cancha { justify-content:flex-start; padding-top:.8cqw; }
.google-pendiente { display:grid; gap:6px; margin-top:12px; grid-column:1/-1; } .google-pendiente .suave { font-size:.82rem; }
.segmentado { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; background:#eef0f6; border-radius:10px; }
.segmentado button { background:transparent; color:var(--texto); padding:7px 14px; border-radius:7px; }
.segmentado button:hover { background:#e2e5ef; } .segmentado button.activa { background:var(--primario); color:#fff; box-shadow:0 1px 3px #0003; }
.contador { display:inline-flex; align-items:center; gap:6px; } .contador button { width:40px; height:40px; padding:0; font-size:1.3rem; line-height:1; } .contador-valor { min-width:2.2em; text-align:center; font-size:1.2rem; font-weight:700; }
.campo { display:flex; flex-direction:column; gap:4px; font-size:.9rem; color:var(--suave); }
.chips-rubro { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; } .chips-rubro button { background:#fff; color:var(--texto); border:1px solid var(--borde); border-radius:99px; } .chips-rubro button::first-letter { text-transform:uppercase; }
.chips-rubro button.activa { background:var(--primario); color:#fff; border-color:var(--primario); }
.tarjeta .boton { margin-top:8px; }
.pestanas { gap:6px; border-bottom:0; flex-wrap:wrap; padding-bottom:4px; }
.pestanas button { background:#fff; color:var(--texto); border:1px solid var(--borde); border-radius:10px; border-bottom:1px solid var(--borde); }
.pestanas button:hover { background:#eef0f6; } .pestanas button.activa { background:var(--primario); color:#fff; border-color:var(--primario); }
input[type=color] { padding:2px 4px; height:40px; width:64px; cursor:pointer; }

/* ===== Apariencia de producción y adaptación a celular y PC ===== */
:root { --radio: 16px; --acento: #f59e0b; --sombra: 0 2px 10px #1b1f2a14; }
body { font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Noto Sans', sans-serif; -webkit-text-size-adjust: 100%; }
header.barra { position: sticky; top: 0; z-index: 30; background: #ffffffee; backdrop-filter: blur(8px); padding: 10px clamp(12px, 3vw, 28px); }
header.barra .marca { display: inline-flex; align-items: center; gap: 8px; font-size: 1.2rem; letter-spacing: -.3px; }
header.barra .fila { gap: 8px; }
main { max-width: 1120px; padding: 18px clamp(12px, 3vw, 24px) 90px; }
.tarjeta { border-radius: var(--radio); box-shadow: var(--sombra); }
button, .boton { border-radius: 10px; font-weight: 500; transition: background .15s, transform .05s; } button:active, .boton:active { transform: scale(.98); }
.seccion { margin: 22px 0; } .seccion.estrecha { max-width: 460px; margin: 6vh auto; }
.seccion h2, .anuncios h2 { margin: 0 0 10px; }

.hero { background: radial-gradient(120% 140% at 100% 0%, #0e7490 0%, transparent 55%), linear-gradient(135deg, #1e1b4b, #3730a3); color: #fff; border-radius: 22px; padding: clamp(26px, 6vw, 56px) clamp(18px, 5vw, 48px); box-shadow: 0 10px 30px #4f46e550; }
.hero h1 { margin: 0 0 6px; font-size: clamp(1.7rem, 4.6vw, 2.8rem); line-height: 1.12; letter-spacing: -.5px; }
.hero p { margin: 0 0 18px; font-size: clamp(.95rem, 2.2vw, 1.15rem); opacity: .92; max-width: 640px; }
.hero-busqueda { display: flex; gap: 8px; background: #fff; padding: 6px; border-radius: 14px; max-width: 680px; box-shadow: 0 6px 18px #0003; }
.hero-busqueda input { flex: 1; min-width: 0; border: 0; font-size: 1.02rem; padding: 12px 14px; background: transparent; color: var(--texto); }
.hero-busqueda input:focus { outline: none; }
.hero-acciones { margin-top: 12px; } .hero-acciones button { background: #ffffff26; color: #fff; border: 1px solid #ffffff55; }
.hero-acciones button:hover:not(:disabled) { background: #ffffff40; } .hero-acciones button:disabled { opacity: .7; }

.chips-rubro { margin: 4px 0 14px; } .chips-rubro button { padding: 8px 14px; }

.anuncios-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.etiqueta-publi { font-size: .75rem; padding: 3px 10px; border-radius: 99px; background: #fef3c7; color: #92400e; border: 1px dashed #f59e0b; }
.anuncios-marco { position: relative; }
.anuncios-pista { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 10px; }
.anuncios-pista::-webkit-scrollbar { display: none; }
.anuncio { flex: 0 0 100%; scroll-snap-align: start; min-height: 210px; border-radius: 18px; padding: 20px; color: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; background: #312e81 center/cover; box-shadow: var(--sombra); position: relative; overflow: hidden; }
.anuncio strong { font-size: 1.35rem; line-height: 1.15; text-shadow: 0 2px 8px #000a; } .anuncio .anuncio-comercio { opacity: .92; }
.anuncio-etiqueta { align-self: flex-start; background: var(--acento); color: #1b1f2a; font-weight: 800; font-size: .72rem; padding: 3px 10px; border-radius: 99px; margin-bottom: auto; }
.anuncio-precio s { opacity: .75; } .anuncio-precio b { font-size: 1.35rem; color: #fde68a; }
.anuncio .boton { align-self: flex-start; margin-top: 8px; background: #fff; color: #312e81; }
.flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; padding: 0; border-radius: 50%; background: #fff; color: #1b1f2a; box-shadow: 0 2px 8px #0004; font-size: 1.4rem; line-height: 1; }
.flecha.izquierda { left: -8px; } .flecha.derecha { right: -8px; }

.grilla { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tarjeta-comercio { padding: 0; overflow: hidden; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.tarjeta-comercio > :not(.tarjeta-portada) { margin: 0 16px; } .tarjeta-comercio > strong { margin-top: 6px; font-size: 1.08rem; }
.tarjeta-comercio .servicios-lista { margin-top: 0; margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-comercio .boton { margin: 8px 16px 16px; text-align: center; }
.tarjeta-portada { position: relative; height: 170px; background: #e5e7eb; }
.tarjeta-foto { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.tarjeta-foto.sin-foto { display: flex; align-items: center; justify-content: center; font-size: 3.4rem; background: linear-gradient(135deg, #c7d2fe, #fbcfe8); }
.insignia { position: absolute; top: 10px; left: 10px; background: #ffffffee; color: var(--texto); font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insignia.distancia { left: auto; right: 10px; background: #1b1f2acc; color: #fff; }

.banda-comercios { margin: 30px 0 10px; background: linear-gradient(135deg, #0f172a, #1e1b4b); color: #fff; border-radius: 20px; padding: clamp(20px, 4vw, 34px); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.banda-comercios h2 { margin: 0 0 4px; } .banda-comercios p { margin: 0; opacity: .85; }
.pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding: 22px clamp(12px, 3vw, 28px) 90px; border-top: 1px solid var(--borde); background: #fff; font-size: .9rem; max-width: none; }

.cuentas-prueba { margin-top: 16px; padding: 14px; border: 1px dashed #a5b4fc; border-radius: 14px; background: #eef2ff; display: grid; gap: 8px; }
.cuentas-grilla { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.cuentas-grilla button { display: flex; align-items: center; gap: 8px; justify-content: flex-start; text-align: left; background: #fff; }

@media (min-width: 900px) { .anuncio { flex-basis: calc(50% - 7px); } .flecha.izquierda { left: -16px; } .flecha.derecha { right: -16px; } }
@media (max-width: 720px) {
  main { padding-top: 12px; }
  header.barra .suave { display: none; } header.barra .boton, header.barra button { padding: 8px 12px; font-size: .92rem; }
  .hero { border-radius: 18px; } .hero-busqueda { flex-wrap: nowrap; } .hero-busqueda button { padding: 10px 14px; }
  .grilla { grid-template-columns: 1fr; } .tarjeta-portada { height: 190px; }
  .anuncio { min-height: 190px; } .flecha { top: auto; bottom: 18px; transform: none; width: 44px; height: 44px; } .flecha.izquierda { left: auto; right: 62px; } .flecha.derecha { right: 12px; }
  .formulario { grid-template-columns: 1fr; } .dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .franjas button { flex: 1 1 22%; min-width: 74px; padding: 11px 6px; }
  .contador button { width: 46px; height: 46px; }
  .banda-comercios { text-align: center; justify-content: center; }
  #chat-boton { right: 12px; bottom: 12px; padding: 12px 16px; }
}
.salon { touch-action: pan-x pan-y; } .plaza, .asa { touch-action: none; }
@media (max-width: 380px) { .hero h1 { font-size: 1.55rem; } .segmentado button { padding: 7px 10px; } }

.horarios-dia { display: grid; gap: 14px; }
.periodo h4 { margin: 0 0 6px; font-size: 1rem; }
.fila-hora { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid var(--borde); }
.hora-etiqueta { flex: 0 0 46px; font-weight: 700; color: var(--suave); font-size: .9rem; }
.fila-hora .franjas { flex: 1; gap: 6px; }
@media (max-width: 720px) { .fila-hora .franjas button { flex: 1 1 20%; min-width: 0; padding: 10px 4px; } .hora-etiqueta { flex-basis: 40px; } }

/* ===== Celular: todo visible y cómodo para el pulgar ===== */
.solo-movil { display: none; }
.lista-plazas { display: none; }
.plaza-item.libre { --estado: #10b981; } .plaza-item.proximo { --estado: #eab308; } .plaza-item.en_hora { --estado: #f97316; }
.plaza-item.demorado { --estado: #dc2626; } .plaza-item.ausente { --estado: #6b7280; } .plaza-item.en_curso { --estado: #4f46e5; } .plaza-item.inactiva { --estado: #cbd5e1; }
.plaza-item { display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; color: var(--texto); border: 1px solid var(--borde); border-left: 6px solid var(--estado); border-radius: 12px; padding: 10px 14px; }
.plaza-item:hover, .plaza-item.seleccionada { background: #eef2ff; } .plaza-item .punto { flex: 0 0 14px; height: 14px; border-radius: 50%; background: var(--estado); }
.plaza-item-texto { display: grid; gap: 1px; } .plaza-item-texto small { color: var(--suave); }
.vista-lista .lista-plazas { display: grid; gap: 8px; } .vista-lista .salon { display: none; }
.vista-mapa .lista-plazas { display: none; }
[id], .tarjeta, .dos-columnas > div { scroll-margin-top: 76px; }

@media (max-width: 720px) {
  .solo-movil { display: inline-flex; margin: 6px 0 4px; }
  .pestanas { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; border-bottom: 0; overflow: visible; }
  .pestanas button { white-space: normal; padding: 10px 6px; }
  .salon { aspect-ratio: 5 / 4; }
  .plaza { font-size: clamp(.6rem, 2.6cqw, .85rem); }
  button, .boton, textarea, input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]) { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
  .segmentado button, .chips-rubro button, .cuentas-grilla button { min-height: 44px; }
  header.barra .marca { padding: 8px 0; }
  .pie a { display: inline-block; padding: 10px 0; }
  .fila-hora .franjas button { min-height: 44px; }
  .contador button { min-height: 46px; } .asa { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .informe .tarjeta table, main table { background: transparent; box-shadow: none; }
  table, thead, tbody, tr, td { display: block; white-space: normal; }
  thead { position: absolute; left: -9999px; }
  tr { border: 1px solid var(--borde); border-radius: 12px; margin: 0 0 10px; padding: 6px 14px; background: #fff; box-shadow: var(--sombra); }
  td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 7px 0; text-align: right; }
  td::before { content: attr(data-label); font-weight: 600; color: var(--suave); text-align: left; flex: 0 0 auto; }
  td:empty, td[data-label=""]::before { display: none; }
  td:last-child { justify-content: flex-start; } td:last-child .fila { width: 100%; }
  td:last-child .fila button { flex: 1 1 40%; }
}

.barra-filtros { margin: 4px 0 8px; gap: 8px; }
.filtro-activo { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; border-radius: 99px; text-transform: none; }
.filtro-activo:hover { background: #e0e7ff; }
.chips-rubro { padding: 12px; background: #fff; border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); }
.chips-rubro[hidden], .filtro-activo[hidden] { display: none; }

/* ===== Accesibilidad y retroalimentación ===== */
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; border-radius: 8px; }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 100; background: #1b1f2a; color: #fff; padding: 10px 16px; border-radius: 0 0 10px 10px; transition: top .15s; } .saltar:focus { top: 0; }
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

#avisos { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; width: min(92vw, 420px); pointer-events: none; }
.aviso { background: #1b1f2a; color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: 0 8px 24px #0005; font-weight: 500; animation: entrar .2s ease-out; }
.aviso.ok::before { content: '✔  '; color: #34d399; } .aviso.error { background: #991b1b; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

.esqueleto { pointer-events: none; }
.esqueleto .tarjeta-portada, .linea-esqueleto { background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 45%, #e5e7eb 65%); background-size: 200% 100%; animation: brillo 1.3s infinite linear; }
.linea-esqueleto { height: 14px; border-radius: 7px; margin: 6px 16px; } .linea-esqueleto.ancha { width: 70%; height: 18px; margin-top: 12px; } .linea-esqueleto.corta { width: 40%; margin-bottom: 18px; }
@keyframes brillo { to { background-position: -200% 0; } }

.vacio { grid-column: 1 / -1; text-align: center; padding: 36px 16px; border: 2px dashed var(--borde); border-radius: 16px; background: #fff; display: grid; gap: 10px; justify-items: center; }
.vacio strong { font-size: 1.1rem; } .vacio p { margin: 0; }

.resumen-salon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 6px 0 10px; }
.resumen-salon > strong { margin-right: 4px; }
.resumen-dato { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--borde); border-radius: 99px; padding: 5px 12px; font-size: .88rem; }
.resumen-dato::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--color); } .resumen-dato b { font-size: 1rem; }

td .fila { gap: 10px; } td .peligro { margin-left: 6px; }

/* ===== Estadísticas ===== */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 14px 0; }
.kpi { background: #fff; border: 1px solid var(--borde); border-top: 4px solid var(--color); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; box-shadow: var(--sombra); }
.kpi-titulo { font-size: .85rem; color: var(--suave); } .kpi-valor { font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ocupacion { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 14px; margin-bottom: 14px; display: grid; gap: 8px; }
.ocupacion-texto { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.ocupacion-barra { height: 14px; background: #fde68a; border-radius: 99px; overflow: hidden; } .ocupacion-barra > div { height: 100%; background: #10b981; border-radius: 99px; transition: width .4s; }
.dias-barras { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 190px; margin-bottom: 8px; }
.dia-barra { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; font-size: .78rem; }
.dia-total { font-weight: 700; font-variant-numeric: tabular-nums; } .columna { width: min(46px, 100%); display: flex; flex-direction: column-reverse; border-radius: 8px 8px 4px 4px; overflow: hidden; min-height: 4px; background: #e5e7eb; }
.tramo-ocupado { background: #10b981; } .tramo-falta { background: #f59e0b; } .tramo-otro { background: #9ca3af; }
.dos-listas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 14px 0; }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ranking li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #f3f4f8; border-radius: 8px; }
.etiqueta.estado-ocupado { background: #d1fae5; color: #047857; } .etiqueta.estado-falta { background: #fef3c7; color: #92400e; } .etiqueta.estado-cancelado { background: #e5e7eb; color: #374151; } .etiqueta.estado-ausente { background: #fee2e2; color: #b91c1c; }
.tabla-turnos { margin-top: 10px; } .vacio-simple { padding: 20px; text-align: center; background: #fff; border: 2px dashed var(--borde); border-radius: 14px; }
@media (max-width: 720px) { .kpis { grid-template-columns: repeat(2, 1fr); } .kpi-valor { font-size: 1.7rem; } .dias-barras { height: 160px; gap: 4px; } }