/* 2026-11-06: estilos propios. El color de acento NO va aqui: sale de negocio.color_primario
   y lo aplica Shared/TemaCitas.cs. Aqui solo lo que MudBlazor no cubre. */

html, body { font-family: 'Inter', Helvetica, Arial, sans-serif; }

#blazor-error-ui {
    background: #FEF3C7;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ---- Pantalla de Entrar ---------------------------------------------------------- */
.pantalla-login {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}
.caja-login { max-width: 380px; width: 100%; }

.etiqueta-login {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .25rem;
    opacity: .75;
}
.campo-login {
    border: 1px solid rgba(0, 0, 0, .23);
    border-radius: 8px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding: .7rem .85rem;
    width: 100%;
}
.campo-login:focus {
    border-color: var(--mud-palette-primary);
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}
.boton-login {
    background: var(--mud-palette-primary);
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: .75rem;
    width: 100%;
}
.boton-login:hover { filter: brightness(1.08); }

/* Boton de salir dentro de la barra: parece un MudIconButton pero es un submit de verdad,
   porque SignOutAsync necesita un POST HTTP y no funciona desde un componente. */
.boton-salir {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: .5rem;
}
.boton-salir:hover { background: rgba(255, 255, 255, .15); }

/* ---- Configuración del negocio --------------------------------------------------- */
.recuadro-logo {
    align-items: center;
    background: rgba(128, 128, 128, .08);
    border: 1px dashed rgba(128, 128, 128, .4);
    border-radius: 8px;
    display: flex;
    height: 130px;
    justify-content: center;
    overflow: hidden;
}
.recuadro-logo img { max-height: 100%; max-width: 100%; object-fit: contain; }

.direccion-publica {
    background: rgba(128, 128, 128, .12);
    border-radius: 6px;
    display: inline-block;
    font-size: .85rem;
    padding: .3rem .5rem;
    word-break: break-all;
}

/* Logo del negocio en la barra superior. */
.logo-barra {
    background: rgba(255, 255, 255, .9);
    border-radius: 4px;
    height: 32px;
    object-fit: contain;
    padding: 2px;
    width: auto;
}

/* Punto de color del servicio o del empleado, como se ve en la agenda. */
.punto-color {
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 50%;
    display: inline-block;
    height: 14px;
    width: 14px;
}

/* ---- Horarios -------------------------------------------------------------------- */
.fila-dia {
    align-items: center;
    border-bottom: 1px solid rgba(128, 128, 128, .18);
    display: flex;
    gap: 1rem;
    padding: .5rem 0;
}
.fila-dia:last-of-type { border-bottom: none; }
.fila-dia.dia-cerrado { opacity: .6; }
.nombre-dia { flex: 0 0 110px; font-weight: 600; }
.tramos { display: flex; flex: 1; flex-wrap: wrap; gap: .4rem; }
.campo-hora { max-width: 170px; }
.campo-motivo { max-width: 260px; }

/* Tabla en la que cada fila abre un detalle. */
.tabla-clicable tbody tr { cursor: pointer; }

/* ---- Fotos de la ficha ------------------------------------------------------------ */
.rejilla-fotos {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}
.foto-ficha { border-radius: 6px; overflow: hidden; position: relative; }
.foto-ficha img {
    aspect-ratio: 1;
    cursor: zoom-in;
    display: block;
    object-fit: cover;
    width: 100%;
}
.foto-ficha .quitar-foto {
    background: rgba(0, 0, 0, .55);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    height: 22px;
    line-height: 1;
    position: absolute;
    right: 3px;
    top: 3px;
    width: 22px;
}
.foto-ficha .fecha-foto {
    background: rgba(0, 0, 0, .55);
    bottom: 0;
    color: #fff;
    font-size: .65rem;
    left: 0;
    padding: 1px 4px;
    position: absolute;
    right: 0;
    text-align: center;
}

/* ---- Agenda ----------------------------------------------------------------------- */
.agenda {
    border: 1px solid rgba(128, 128, 128, .25);
    border-radius: 8px;
    display: flex;
    overflow-x: auto;
}
.agenda-horas { flex: 0 0 62px; }
.agenda-col {
    border-left: 1px solid rgba(128, 128, 128, .25);
    flex: 1 1 180px;
    min-width: 150px;
}
.agenda-cab {
    align-items: center;
    border-bottom: 1px solid rgba(128, 128, 128, .25);
    display: flex;
    font-size: .85rem;
    font-weight: 600;
    height: 38px;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 2;
}
.agenda-hora {
    border-bottom: 1px solid rgba(128, 128, 128, .15);
    box-sizing: border-box;
    font-size: .72rem;
    opacity: .65;
    padding-right: .4rem;
    text-align: right;
}
.agenda-lienzo { position: relative; }
.agenda-franja {
    border-bottom: 1px solid rgba(128, 128, 128, .15);
    box-sizing: border-box;
    cursor: copy;
    left: 0;
    position: absolute;
    right: 0;
}
.agenda-franja:hover { background: rgba(128, 128, 128, .09); }

.agenda-cita {
    border-left: 4px solid;
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: .74rem;
    left: 3px;
    line-height: 1.15;
    overflow: hidden;
    padding: 3px 5px;
    position: absolute;
    right: 3px;
    z-index: 1;
}
.agenda-cita b { font-size: .78rem; }
.agenda-cita .agenda-serv { opacity: .8; }
.agenda-cita.sobrecupo { outline: 2px dashed #F59E0B; outline-offset: -2px; }

.estado-confirmada { background: #DBEAFE; color: #1E3A8A; }
.estado-pendiente  { background: #FEF3C7; color: #92400E; }
.estado-atendida   { background: #D1FAE5; color: #065F46; }
.estado-no_llego   { background: #FEE2E2; color: #991B1B; }
.estado-cancelada  { background: #E5E7EB; color: #4B5563; text-decoration: line-through; opacity: .7; }

.leyenda { align-items: center; display: inline-flex; font-size: .78rem; gap: .35rem; }
.leyenda .pt {
    border-radius: 3px;
    display: inline-block;
    height: 13px;
    width: 13px;
}
.leyenda .pt.sobrecupo { background: transparent; outline: 2px dashed #F59E0B; outline-offset: -2px; }

.campo-fecha { max-width: 175px; }
.espacios { display: flex; flex-wrap: wrap; gap: .3rem; max-height: 160px; overflow-y: auto; }

/* ---- Tablero de inicio ------------------------------------------------------------- */
.tarjeta-num {
    align-items: center;
    background: rgba(128, 128, 128, .08);
    border-left: 4px solid rgba(128, 128, 128, .35);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem .5rem;
}
.tarjeta-num .num { font-size: 2rem; font-weight: 700; line-height: 1; }
.tarjeta-num .eti { font-size: .78rem; margin-top: .25rem; opacity: .7; }
.tarjeta-num.acento { border-left-color: var(--mud-palette-primary); }
.tarjeta-num.bien   { border-left-color: #10B981; }
.tarjeta-num.mal    { border-left-color: #EF4444; }
.campo-orden { max-width: 230px; }

/* 2026-11-07: encabezado de panel con banda del color del negocio.
   El color sale de --mud-palette-primary, que el MudThemeProvider pone desde
   negocio.color_primario: así cada negocio se ve suyo también en los reportes. */
/* Banda de color en el encabezado del panel. El negativo saca la banda del padding pa-4 (16px)
   del MudPaper, para que llegue de borde a borde como un encabezado de verdad. */
.pnl-tit {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: -16px -16px 1rem;
    padding: .7rem 1rem;
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
    border-bottom: 2px solid var(--mud-palette-primary);
    border-radius: 4px 4px 0 0;
}

/* El TEXTO nunca toma el color del negocio: un azul marino sobre fondo oscuro no se lee, y el
   color del negocio lo elige el negocio, no el contraste. El color lo lleva la banda —fondo y
   borde—, que sí se ve bien en los dos modos. --mud-palette-text-primary es casi negro en claro
   y casi blanco en oscuro, así que esto se resuelve solo cuando el usuario cambia de modo. */
.pnl-tit .mud-typography { color: var(--mud-palette-text-primary); font-weight: 600; }

/* Un título de panel que NO está dentro de un MudPaper pa-4 no debe llevar el negativo. */
.pnl-tit.plana { margin: 0 0 .85rem; padding: 0; background: none; border: 0; }

/* Encabezado de pantalla: panel propio, con el color del negocio, esquinas curvas y sombra.
   Es lo primero que se ve al entrar, así que es donde el color de la marca rinde más.

   El fondo es un lavado del color (no el color puro) a propósito: relleno a tope pelearía con
   los botones que viven dentro de la misma barra y se perdería el contraste del texto. */
.barra-pantalla {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.25rem;
    padding: .9rem 1.15rem;
    border-radius: 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-primary) 16%, var(--mud-palette-surface)) 0%,
        color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)) 100%);
    border-left: 4px solid var(--mud-palette-primary);
    box-shadow: 0 1px 2px rgba(16,20,28,.04), 0 10px 26px -14px rgba(16,20,28,.28);
}

.barra-pantalla .titulo { color: var(--mud-palette-text-primary); font-weight: 650; letter-spacing: -.01em; }
.barra-pantalla .sub    { font-size: .85rem; color: var(--mud-palette-text-secondary); }

.barra-pantalla .crece { flex: 1 1 auto; }
.barra-pantalla .fijo  { flex: 0 0 auto; }

/* 2026-11-07: encabezados de grupo del menú lateral ("Principal", "Configuración").
   Mismo lenguaje que .barra-pantalla —lavado del color del negocio, borde a la izquierda,
   esquinas curvas y sombra— pero en chico, porque el cajón es angosto.

   El TEXTO sigue sin tomar el color del negocio, por lo mismo de siempre: un azul marino sobre
   fondo oscuro no se lee. El color lo lleva la banda. */
.nav-grupo {
    display: block;
    margin: 1rem .6rem .4rem;
    padding: .42rem .7rem;
    border-radius: 9px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-surface)) 0%,
        color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface)) 100%);
    border-left: 3px solid var(--mud-palette-primary);
    box-shadow: 0 1px 2px rgba(16,20,28,.05), 0 6px 14px -10px rgba(16,20,28,.3);

    /* !important porque MudText pone su propio color por la clase mud-typography-overline y
       gana por especificidad. Sin esto el encabezado se queda gris sobre la banda. */
    color: var(--mud-palette-text-primary) !important;
    font-weight: 700;
    letter-spacing: .09em;
}

/* El primero no necesita tanto aire arriba: ya lo separa la barra del logo. */
.mud-navmenu .nav-grupo:first-child { margin-top: .5rem; }

/* 2026-11-07: gráfico de entradas contra salidas, día por día.
   Hecho a mano y no con MudChart: MudBlazor 9 ya cambió dos componentes bajo nuestros pies hoy
   (MudFileUpload, MudDialog) y no hay forma de compilar aquí para verificar uno nuevo. Esto son
   dos barras y una escala; el riesgo no vale el ahorro. */

.graf {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 200px;
    padding-top: .5rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* Ancho fijo y no flexible: con flex:1 un solo día se estiraba a toda la pantalla y las barras
   quedaban perdidas en el centro de un panel vacío. */
.graf-dia {
    flex: 0 0 auto;
    width: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.graf-barras {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    width: 100%;
}

.graf-barra {
    width: 8px;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    transition: opacity .12s;
}

.graf-dia:hover .graf-barra { opacity: .75; }

.graf-entro { background: var(--mud-palette-success); }
.graf-salio { background: var(--mud-palette-error); }

.graf-eti {
    font-size: .66rem;
    color: var(--mud-palette-text-secondary);
    margin-top: .3rem;
    white-space: nowrap;
}

/* Los montos debajo de cada día. Van en columna para que quepan en 54px sin recortarse. */
.graf-montos {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.25;
    font-size: .6rem;
    font-variant-numeric: tabular-nums;
    margin-top: .1rem;
}

.graf-montos .e { color: var(--mud-palette-success); }
.graf-montos .s { color: var(--mud-palette-error); }

/* El día de hoy, marcado: es el que el dueño busca primero. */
.graf-dia.hoy .graf-eti { font-weight: 700; color: var(--mud-palette-text-primary); }

.graf-leyenda {
    display: flex;
    gap: 1.1rem;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

.graf-leyenda i {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: .35rem;
}

/* 2026-11-07: hoja imprimible (corte de caja). Tamaño carta, no 80 mm: esto se archiva o se
   entrega al contador, no se le da al cliente. */
.hoja {
    max-width: 820px;
    margin: 0 auto;
    padding: 1.5rem;
    background: #fff;
    color: #111;
}

.hoja h1 { font-size: 1.4rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.hoja .sub { font-size: .88rem; color: #5b6472; }

.hoja table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.hoja th {
    text-align: left;
    font-weight: 600;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #5b6472;
    border-bottom: 1.5px solid #111;
    padding: .4rem .5rem;
}
.hoja td { padding: .42rem .5rem; border-bottom: 1px solid #e8eaee; }
.hoja .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.hoja-caja {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .6rem;
    margin: 1.2rem 0;
}

.hoja-caja > div { padding: .7rem .9rem; background: #f4f6f8; border-radius: 8px; }
.hoja-caja .et { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #5b6472; }
.hoja-caja .va { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.hoja-firma {
    margin-top: 3rem;
    display: flex;
    gap: 3rem;
    font-size: .82rem;
    color: #5b6472;
}
.hoja-firma > div { flex: 1; border-top: 1px solid #111; padding-top: .4rem; text-align: center; }

@media print {
    .no-imprimir, .mud-snackbar-container, .mud-appbar, .mud-drawer { display: none !important; }
    @page { size: letter; margin: 14mm; }
    html, body { background: #fff; }
    .hoja { max-width: none; padding: 0; }
    .hoja-caja > div { background: none; border: 1px solid #c9ced6; }
    .hoja tr { break-inside: avoid; }
}

/* 2026-11-07: visor de la cámara para escanear códigos de barras (js/camara.js).
   Va fuera del tema de MudBlazor a propósito: se dibuja sobre todo lo demás, en pantalla
   completa, y el fondo es negro en los dos modos porque lo que importa es ver el video. */
.cam {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(2, 6, 23, .93);
    display: grid;
    place-items: center;
}

.cam-caja { position: relative; width: min(92vw, 520px); }

.cam video {
    width: 100%;
    min-height: 240px;
    border-radius: 16px;
    background: #000;
    display: block;
}

/* El recuadro amarillo le dice a la persona dónde poner el código. Sin él la gente apunta al
   envase completo y el lector no resuelve las barras. */
.cam-guia {
    position: absolute;
    left: 10%; right: 10%; top: 38%; height: 24%;
    border: 3px solid #FACC15;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .25);
    pointer-events: none;
}

.cam-msg  { color: #fff; text-align: center; margin: 12px 0; font-size: 15px; line-height: 1.4; }
.cam-lista { color: #fff; text-align: center; font-size: 14px; margin-bottom: 10px; }
.cam-lista .cam-n { font-weight: 800; font-size: 20px; }
.cam-ult  { color: #FACC15; font-size: 13px; margin-top: 2px; word-break: break-all; }

.cam-cerrar {
    display: block;
    margin: 0 auto;
    border: 0;
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 700;
    background: #fff;
    color: #0F172A;
    cursor: pointer;
}

/* Destello verde al leer uno, en modo continuo: es la única señal de que entró, porque en el
   celular la vibración no siempre se siente con el aparato en la mano. */
.cam.leido .cam-guia { border-color: #22C55E; }

/* 2026-11-07: el aviso de la tarjeta de sellos en la caja. Lleva el color del negocio en la
   banda, nunca en el texto — misma regla que .pnl-tit y .barra-pantalla. */
.sellos-caja {
    padding: .7rem .85rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
    border-left: 3px solid var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
}

/* 2026-11-07: la tabla de productos de la caja. Con techo y barra propia: con treinta productos,
   sin esto la lista empuja el botón de cobrar fuera de la pantalla. */
.tabla-productos {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
}

.tabla-productos table { margin: 0; }

/* El encabezado se queda fijo al desplazar: si no, se pierde cuál columna es cuál. */
.tabla-productos thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
}

/* La fila de la tabla "toque para agregar" de la caja: se toca entera, no un botón dentro.
   En el mostrador se cobra con el dedo y un botón chico se falla. */
.fila-cobrable { cursor: pointer; user-select: none; }
.fila-cobrable:active { background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent); }

/* =====================================================================================
   2026-11-07: las líneas del cobro, como lista y no como tabla.
   En el celular, seis columnas con tres campos numéricos dentro dejaban los títulos en
   "C…", "P…", "D…" y el nombre partido en tres renglones. Esto se acomoda solo.
   ===================================================================================== */
.cobro-lineas {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    overflow: hidden;
}

.cl-fila {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .35rem .55rem .8rem;
}

.cl-fila + .cl-fila,
.cl-editor + .cl-fila { border-top: 1px solid var(--mud-palette-divider); }

/* min-width:0 es lo que deja que el texto largo se recorte en vez de empujar el total
   fuera de la pantalla. Sin eso, "Corte de Pelo" partía la fila entera. */
.cl-txt { flex: 1 1 auto; min-width: 0; }

.cl-nom {
    font-weight: 560;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.cl-sub {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .6rem;
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
    margin-top: .1rem;
}

.cl-sub .cl-desc { color: var(--mud-palette-warning); }

.cl-tot {
    flex: 0 0 auto;
    font-weight: 650;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Los campos de la línea, solo cuando se toca el lápiz. */
.cl-editor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    padding: .2rem .8rem .9rem;
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

/* En el teléfono, los tres campos uno debajo de otro: tres cajas de 100px de ancho con
   "Descuento" de título no se leen. */
@media (max-width: 600px) {
    .cl-editor { grid-template-columns: 1fr; }
    .cl-fila   { padding-left: .6rem; }
}

/* =====================================================================================
   2026-11-07: la agenda en el celular, como tarjetas en orden de hora.
   La rejilla por horas es buena en pantalla ancha —se ve el hueco de un vistazo— pero en un
   teléfono, con dos o tres barberos, cada columna queda de 90px y no se lee nada.
   Las dos vistas se dibujan siempre y aquí se esconde la que no toca.
   ===================================================================================== */
.agenda-movil { display: none; }

@media (max-width: 820px) {
    .agenda       { display: none; }
    .solo-ancho   { display: none !important; }
    .agenda-movil { display: flex; flex-direction: column; gap: .6rem; }
}

.am-cita {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .85rem;
    border-radius: 14px;
    cursor: pointer;
    background: var(--mud-palette-surface);
    /* La barra de la izquierda lleva el color del empleado: es cómo se distingue de quién es
       cada cita sin leer el nombre, igual que su columna en la rejilla. */
    border-left: 5px solid var(--emp, #64748B);
    box-shadow: 0 1px 2px rgba(16, 20, 28, .05), 0 8px 18px -14px rgba(16, 20, 28, .35);
}

.am-cita:active { transform: scale(.995); }

.am-hora {
    flex: 0 0 56px;
    text-align: center;
    line-height: 1.15;
}

.am-hora b    { font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.am-hora span { display: block; font-size: .68rem; color: var(--mud-palette-text-secondary); }

.am-txt  { flex: 1 1 auto; min-width: 0; }
.am-nom  { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }

.am-serv {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.am-pie {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .15rem;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

.am-monto {
    flex: 0 0 auto;
    font-weight: 650;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* La cita atendida o la que no llegó se apagan: lo que importa en la mañana es lo que falta. */
.am-cita.estado-atendida,
.am-cita.estado-no_llego  { opacity: .55; }
.am-cita.estado-no_llego .am-nom { text-decoration: line-through; }
.am-cita.sobrecupo        { outline: 2px dashed #F59E0B; outline-offset: -2px; }

.am-vacio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--mud-palette-text-secondary);
}

.am-vacio .am-sub { font-size: .85rem; margin-top: .25rem; }