/* Clientes destacados (vienen de /api/sala) y mock del panel, estilo CITAS */
.destacados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 40px; border-top: 1px solid var(--ink); }
.destacado { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 26px 0; }
.destacado .rub { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.destacado h3 { font-size: 22px; }
.destacado a { margin-top: auto; font-weight: 500; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.destacado-vacio { grid-column: 1 / -1; padding: 30px 0; color: var(--mute); }
@media (max-width: 960px) { .destacados { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .destacados { grid-template-columns: 1fr; } }

/* mock del panel dentro de la pagina (sin datos reales de nadie) */
.mock { width: 100%; max-width: 340px; margin: 0 auto; padding: 18px; border-radius: 30px; background: #fff; border: 10px solid #111111; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2); color: var(--ink); font-size: 14px; }
.mock-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.mock-cab b { font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: 14px; text-transform: uppercase; }
.pill-mini { font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 30px; background: var(--ink); color: #fff; }
.mock-titulo { font-family: "Archivo Black", sans-serif; font-size: 16px; text-transform: uppercase; margin-bottom: 8px; }
.mock-fila { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--linea-suave); }
.mock-franja { margin: 4px 0 4px 12px; padding: 8px 14px; border-radius: 30px; background: var(--nube); font-size: 13px; display: flex; justify-content: space-between; }
.mock-franja em { font-style: normal; color: var(--mute); }
.sw { display: inline-block; width: 42px; height: 24px; border-radius: 30px; position: relative; background: var(--linea); }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.sw.on { background: var(--ink); }
.sw.on::after { left: 21px; }