/* ============================================================
   FDM — sistema de diseño
   Valores tomados del mockup en Diseño/Main.dc.html.
   Se carga DESPUÉS de bootstrap para poder re-temizarlo.
   ============================================================ */

:root {
    /* Superficies */
    --fdm-fondo: #1C1917;
    --fdm-panel: #292524;
    --fdm-panel-alto: #332C27;
    --fdm-claro: #F5F0E6;

    /* Texto */
    --fdm-texto: #F5F0E6;
    --fdm-texto-suave: #D6D3D1;
    --fdm-texto-tenue: #A8A29E;
    --fdm-texto-sobre-claro: #1C1917;

    /* Bordes */
    --fdm-borde: #44403C;
    --fdm-borde-fuerte: #78716C;
    --fdm-borde-medio: #57534E;

    /* Marca */
    --fdm-oro: #C9A227;
    --fdm-acento: #C2410C;
    --fdm-acento-hover: #9A330A;
    /* Sobre fondo oscuro el acento no alcanza contraste AA para texto,
       así que el texto de acento usa este tono claro (igual que el mockup). */
    --fdm-acento-texto: #FDBA74;
    --fdm-error: #FDBA74;
    --fdm-exito: #86EFAC;

    /* Tipografía */
    --fdm-display: 'Big Shoulders Display', Impact, 'Arial Narrow', sans-serif;
    --fdm-script: 'Pinyon Script', 'Segoe Script', cursive;
    --fdm-cuerpo: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;

    /* Ritmo */
    --fdm-gutter: 80px;
    --fdm-radio: 0px; /* la marca es de esquinas rectas */
}

@media (max-width: 900px) {
    :root { --fdm-gutter: 20px; }
}

/* ---------- Base ---------- */

html, body {
    background: var(--fdm-fondo);
    color: var(--fdm-texto);
    font-family: var(--fdm-cuerpo);
    margin: 0;
}

h1, h2, h3, .fdm-display {
    font-family: var(--fdm-display);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: 0;
    margin: 0;
}

h1 { font-size: clamp(2.5rem, 7vw, 5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }

a { color: var(--fdm-texto); text-decoration: none; }
a:hover { color: var(--fdm-acento-texto); }

.fdm-script { font-family: var(--fdm-script); text-transform: none; font-weight: 400; }

.fdm-kicker {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--fdm-acento-texto);
}

/* Foco visible siempre: el mockup no lo definía y sin esto no se puede
   navegar con teclado. */
:focus-visible {
    outline: 2px solid var(--fdm-acento-texto);
    outline-offset: 2px;
}

/* ---------- Logo ---------- */

.fdm-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--fdm-oro);
    padding: 8px 14px;
}

.fdm-logo__texto {
    font-family: var(--fdm-display);
    font-weight: 900;
    font-size: 34px;
    line-height: 0.8;
    letter-spacing: 2px;
    color: var(--fdm-oro);
}

.fdm-logo__nombre {
    font-family: var(--fdm-script);
    font-size: 30px;
    line-height: 1;
    color: var(--fdm-texto);
}

/* ---------- Botones ---------- */

.fdm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 16px 30px;
    border: 1px solid transparent;
    background: var(--fdm-acento);
    color: #FFFFFF;
    font-family: var(--fdm-cuerpo);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.fdm-btn:hover:not(:disabled) { background: var(--fdm-acento-hover); color: #FFFFFF; }

.fdm-btn:disabled,
.fdm-btn[disabled] {
    background: var(--fdm-borde);
    color: var(--fdm-texto-suave);
    cursor: not-allowed;
}

.fdm-btn--fantasma {
    background: transparent;
    border-color: var(--fdm-borde-fuerte);
    color: var(--fdm-texto);
}

.fdm-btn--fantasma:hover:not(:disabled) {
    background: transparent;
    border-color: var(--fdm-acento-texto);
    color: var(--fdm-acento-texto);
}

.fdm-btn--bloque { width: 100%; }

/* ---------- Formularios ---------- */

.fdm-campo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.fdm-campo__etiqueta {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--fdm-texto-tenue);
}

.fdm-campo__ayuda { font-size: 0.8125rem; color: var(--fdm-texto-tenue); }

.fdm-input,
.form-control,
.form-select {
    min-height: 56px;
    padding: 0 18px;
    background: var(--fdm-fondo);
    border: 1px solid var(--fdm-borde-fuerte);
    border-radius: var(--fdm-radio);
    color: var(--fdm-texto);
    font-family: var(--fdm-cuerpo);
    font-size: 1.0625rem;
    width: 100%;
}

textarea.fdm-input, textarea.form-control { min-height: 120px; padding: 14px 18px; }

.fdm-input::placeholder, .form-control::placeholder { color: var(--fdm-texto-tenue); }

.fdm-input:focus,
.form-control:focus,
.form-select:focus {
    background: var(--fdm-fondo);
    border-color: var(--fdm-acento-texto);
    color: var(--fdm-texto);
    box-shadow: none;
    outline: none;
}

.fdm-input.invalid,
.form-control.invalid,
.fdm-input[aria-invalid="true"] { border-color: var(--fdm-error); }

.fdm-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 44px;
    font-size: 0.9375rem;
    color: var(--fdm-texto-suave);
    cursor: pointer;
}

.fdm-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    accent-color: var(--fdm-acento);
    flex-shrink: 0;
}

.validation-message, .text-danger { color: var(--fdm-error) !important; font-size: 0.875rem; }

/* ---------- Avisos ---------- */

.fdm-aviso {
    padding: 16px 20px;
    border: 1px solid var(--fdm-borde);
    background: var(--fdm-panel);
    color: var(--fdm-texto-suave);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.fdm-aviso--error { border-color: var(--fdm-error); color: var(--fdm-error); }
.fdm-aviso--exito { border-color: var(--fdm-exito); color: var(--fdm-exito); }

/* ---------- Superficies ---------- */

.fdm-panel {
    background: var(--fdm-panel);
    border: 1px solid var(--fdm-borde);
    padding: 32px;
}

.fdm-contenedor {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: var(--fdm-gutter);
    padding-right: var(--fdm-gutter);
}

/* ---------- Cabecera pública ---------- */

.fdm-nav {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--fdm-borde);
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
}

.fdm-nav__enlaces {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 1rem;
    font-weight: 500;
    flex-wrap: wrap;
}

/* Los enlaces de texto miden lo que mide su línea (24px): sin esto no
   alcanzan el área tocable mínima en móvil. */
.fdm-nav__enlaces > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.fdm-nav__cta {
    background: var(--fdm-acento);
    color: #FFFFFF;
    padding: 14px 26px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.fdm-nav__cta:hover { background: var(--fdm-acento-hover); color: #FFFFFF; }

/* ---------- Pie ---------- */

/* Global a propósito: los hijos de .fdm-sitio son componentes distintos y el
   CSS con ámbito de MainLayout no los alcanza. Sin min-width: 0 el grid del
   pie impone su ancho mínimo a toda la página y aparece scroll horizontal. */
.fdm-sitio > * {
    min-width: 0;
}

.fdm-pie {
    /* Columnas explícitas en vez de repeat(auto-fit, minmax(...)): dentro de un
       contenedor flex el grid se dimensionaba por su contenido y desbordaba la
       pantalla en móvil. width: 100% lo ancla al ancho del padre. */
    width: 100%;
    min-width: 0;
    border-top: 1px solid var(--fdm-borde);
    padding-top: 64px;
    padding-bottom: 64px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: auto;
}

@media (max-width: 900px) {
    .fdm-pie { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
    .fdm-pie { grid-template-columns: 1fr; gap: 28px; }
}

.fdm-pie__rubro {
    color: var(--fdm-texto-tenue);
    font-size: 0.8125rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

/* ---------- Pantallas de cuenta ---------- */

.fdm-cuenta {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 20px;
    gap: 32px;
}

.fdm-cuenta__caja {
    width: 100%;
    max-width: 520px;
    background: var(--fdm-panel);
    border: 1px solid var(--fdm-borde);
    padding: 40px;
}

.fdm-cuenta__titulo { margin-bottom: 8px; }

.fdm-cuenta__intro { color: var(--fdm-texto-suave); margin-bottom: 28px; }

.fdm-cuenta__pie {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--fdm-borde);
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.9375rem;
    color: var(--fdm-texto-suave);
}

.fdm-cuenta__pie a { color: var(--fdm-acento-texto); text-decoration: underline; }

/* ---------- Paneles internos (admin / colaborador / cliente) ---------- */

.fdm-app { min-height: 100vh; display: flex; flex-direction: column; }

.fdm-app__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px var(--fdm-gutter);
    border-bottom: 1px solid var(--fdm-borde);
    background: var(--fdm-panel);
    flex-wrap: wrap;
}

.fdm-app__menu { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }

.fdm-app__menu a {
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 10px 0;
    border-bottom: 2px solid transparent;
}

.fdm-app__menu a.active {
    color: var(--fdm-acento-texto);
    border-bottom-color: var(--fdm-acento-texto);
}

.fdm-app__cuerpo { flex: 1; padding: 40px var(--fdm-gutter); }

.fdm-etiqueta-rol {
    font-size: 0.6875rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--fdm-oro);
    border: 1px solid var(--fdm-oro);
    padding: 3px 8px;
}

/* ---------- Re-tema de Bootstrap (lo usan las pantallas de Identity) ---------- */

.btn-primary, .btn-lg.btn-primary {
    background: var(--fdm-acento);
    border-color: var(--fdm-acento);
    color: #FFFFFF;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    min-height: 48px;
    border-radius: var(--fdm-radio);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--fdm-acento-hover) !important;
    border-color: var(--fdm-acento-hover) !important;
}

.form-floating > label { color: var(--fdm-texto-tenue); }
.form-floating > .form-control:focus ~ label { color: var(--fdm-acento-texto); }

.nav-pills .nav-link { color: var(--fdm-texto-suave); border-radius: var(--fdm-radio); }
.nav-pills .nav-link.active { background: var(--fdm-acento); color: #FFFFFF; }

.alert-danger {
    background: var(--fdm-panel);
    border-color: var(--fdm-error);
    color: var(--fdm-error);
}

.alert-success {
    background: var(--fdm-panel);
    border-color: var(--fdm-exito);
    color: var(--fdm-exito);
}

table { color: var(--fdm-texto); }

/* ---------- Utilidades ---------- */

.fdm-solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fdm-saltar {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 12px 20px;
    background: var(--fdm-acento);
    color: #FFFFFF;
}

.fdm-saltar:focus { left: 20px; top: 20px; color: #FFFFFF; }

/* Marcador de sección todavía no construida. Se retira conforme avanzan las fases. */
.fdm-marcador {
    color: var(--fdm-texto-suave);
    font-size: 1rem;
    line-height: 1.6;
    border-left: 3px solid var(--fdm-oro);
    padding-left: 16px;
    margin-top: 16px;
    max-width: 640px;
}

/* ---------- Aviso de error de Blazor ----------
   Global a propósito: el marcado se repite en cada layout y con CSS de ámbito
   solo se ocultaba en uno. Blazor lo muestra poniendo display: block. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.8rem 1.4rem;
    color: var(--fdm-texto);
    background: var(--fdm-panel);
    border-top: 2px solid var(--fdm-error);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

#blazor-error-ui .reload {
    color: var(--fdm-acento-texto);
    text-decoration: underline;
}

/* ---------- Login: bloque de acceso alterno ---------- */
.fdm-login__alterno {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--fdm-borde);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.fdm-login__alterno > span {
    color: var(--fdm-texto-tenue);
    font-size: 0.8125rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ---------- Texto legal ---------- */
.fdm-texto-legal {
    padding-top: 64px;
    padding-bottom: 96px;
    max-width: 820px;
}

.fdm-texto-legal__cuerpo {
    margin-top: 28px;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--fdm-texto-suave);
}

.fdm-texto-legal__cuerpo h2 {
    font-size: 1.5rem;
    margin-top: 32px;
    margin-bottom: 12px;
}

.fdm-texto-legal__cuerpo p { margin: 0 0 16px; }

/* ============================================================
   Panel de administración
   Global a propósito: estas clases se usan en varias pantallas y
   el CSS con ámbito no cruza componentes.
   ============================================================ */

.admin__encabezado {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.admin__intro {
    margin: 8px 0 0;
    color: var(--fdm-texto-suave);
    max-width: 620px;
    line-height: 1.55;
}

.admin__cargando {
    color: var(--fdm-texto-tenue);
}

.admin__vacio {
    padding: 36px;
    background: var(--fdm-panel);
    border: 1px solid var(--fdm-borde);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    max-width: 620px;
}

.admin__vacio h2 { font-size: 1.75rem; margin: 0; }
.admin__vacio p { margin: 0; color: var(--fdm-texto-suave); line-height: 1.6; }

/* ---------- Tarjetas de formulario ---------- */

.editar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 880px;
}

.editar__encabezado { margin-bottom: 24px; }

.editar__volver {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.9375rem;
    color: var(--fdm-texto-tenue);
}

.editar__volver:hover { color: var(--fdm-acento-texto); }

.editar__cargando,
.editar__pista {
    color: var(--fdm-texto-tenue);
    font-size: 0.9375rem;
    margin: 0 0 16px;
    line-height: 1.55;
}

.tarjeta-admin {
    background: var(--fdm-panel);
    border: 1px solid var(--fdm-borde);
    padding: 26px;
}

.tarjeta-admin__titulo {
    font-size: 1.125rem;
    font-family: var(--fdm-cuerpo);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--fdm-oro);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fdm-borde);
}

.rejilla-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

.fdm-campo--ancho { grid-column: 1 / -1; }

.interruptores {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 8px;
    border-top: 1px solid var(--fdm-borde);
}

.editar__acciones {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ---------- Servicios de una cita capturada por el personal ---------- */

/* Globales y no en el CSS con ámbito de una pantalla: las usan el panel del
   administrador y el portal del barbero, y el CSS con ámbito de un componente
   NO alcanza al marcado de otro. */

/* En columnas: con ocho servicios en el catálogo, una lista vertical empuja
   el resto del formulario fuera de la pantalla. */
.mostrador-servicios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 4px 20px;
    padding: 4px 0;
}

.servicios-check__min {
    color: var(--fdm-texto-tenue);
    font-size: 0.8125rem;
    margin-left: 6px;
}

.panel-cita__acciones {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 20px;
}

/* ---------- Distintivos y acciones ---------- */

.etiqueta {
    font-size: 0.6875rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 9px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.etiqueta--ok { color: var(--fdm-exito); }
.etiqueta--pendiente { color: var(--fdm-error); }
.etiqueta--apagada { color: var(--fdm-texto-tenue); }

.enlace-accion {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    background: none;
    border: none;
    font-family: var(--fdm-cuerpo);
    font-size: 0.875rem;
    color: var(--fdm-acento-texto);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.enlace-accion:hover { color: var(--fdm-texto); }
.enlace-accion--peligro { color: var(--fdm-error); }

.fdm-btn--chico {
    min-height: 40px;
    padding: 8px 18px;
    font-size: 0.8125rem;
}

/* ---------- Grupos y filas ---------- */

.grupo {
    font-size: 0.8125rem;
    font-family: var(--fdm-cuerpo);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--fdm-oro);
    margin: 28px 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--fdm-borde);
}

.grupo:first-of-type { margin-top: 0; }

@media (max-width: 760px) {
    .rejilla-campos { grid-template-columns: 1fr; }
    .editar__acciones .fdm-btn { width: 100%; }
    .admin__encabezado .fdm-btn { width: 100%; }
}

/* ---------- Estrellas ----------
   Global a propósito: el componente Estrellas se usa desde el portal del
   cliente, el del barbero, el panel y la portada, y el CSS con ámbito de cada
   uno no alcanza al marcado de otro componente. */

.estrellas {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
    /* La estrella vacía tiene que leerse como vacía, no como invisible. */
    color: var(--fdm-borde-fuerte);
}

.estrella {
    font-size: 1.125rem;
}

.estrella--llena {
    color: var(--fdm-oro);
}

.estrellas--grandes .estrella {
    font-size: 2.5rem;
}

/* Las elegibles son botones: hay que quitarles la piel de botón y darles
   área tocable. */
.estrella--boton {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    /* El navegador le pone su propio color a los botones; sin esto la estrella
       vacía no se vería del gris del grupo. */
    color: inherit;
    transition: transform .12s ease, color .12s ease;
}

/* OJO: va DESPUÉS de .estrella--boton y con las dos clases.
   `.estrella--llena` y `.estrella--boton` pesan lo mismo, así que la que
   estuviera más abajo ganaba: con `color: inherit` al final, las estrellas
   elegidas salían grises y solo se veía dorada la que tenía el puntero
   encima. Parecía que solo se marcaba una. */
.estrella--boton.estrella--llena {
    color: var(--fdm-oro);
}

.estrella--boton:hover {
    transform: scale(1.12);
}

/* Al pasar por una estrella se pintan también las anteriores, para ver lo que
   se va a elegir antes de hacer clic. Pintar solo la de abajo del puntero
   dejaba huecos raros: con 3 elegidas y el puntero en la 5, se veían doradas
   la 1, 2, 3 y 5, y apagada la 4. */
.estrellas--elegibles:has(.estrella--boton:nth-child(1):hover) .estrella--boton:nth-child(-n+1),
.estrellas--elegibles:has(.estrella--boton:nth-child(2):hover) .estrella--boton:nth-child(-n+2),
.estrellas--elegibles:has(.estrella--boton:nth-child(3):hover) .estrella--boton:nth-child(-n+3),
.estrellas--elegibles:has(.estrella--boton:nth-child(4):hover) .estrella--boton:nth-child(-n+4),
.estrellas--elegibles:has(.estrella--boton:nth-child(5):hover) .estrella--boton:nth-child(-n+5) {
    color: var(--fdm-oro);
}

/* Y las que quedan por encima de la que se está señalando se apagan, o el
   adelanto mentiría: con 5 elegidas y el puntero en la 2, tiene que verse 2. */
.estrellas--elegibles:has(.estrella--boton:nth-child(1):hover) .estrella--boton:nth-child(n+2),
.estrellas--elegibles:has(.estrella--boton:nth-child(2):hover) .estrella--boton:nth-child(n+3),
.estrellas--elegibles:has(.estrella--boton:nth-child(3):hover) .estrella--boton:nth-child(n+4),
.estrellas--elegibles:has(.estrella--boton:nth-child(4):hover) .estrella--boton:nth-child(n+5),
.estrellas--elegibles:has(.estrella--boton:nth-child(5):hover) .estrella--boton:nth-child(n+6) {
    color: var(--fdm-borde-fuerte);
}

.estrellas--elegibles {
    gap: 4px;
}

/* ---------- Calificar ---------- */

.calificar {
    max-width: 560px;
}

.calificar__intro {
    color: var(--fdm-texto-suave);
    margin-bottom: 28px;
}

.calificar__estrellas {
    margin: 8px 0 28px;
}

.calificar__leyenda {
    margin: 10px 0 0;
    font-family: var(--fdm-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fdm-texto-suave);
    /* Reserva el renglón: sin esto el bloque salta al elegir la primera. */
    min-height: 1.5em;
}

.calificar__comentario {
    resize: vertical;
    font-family: var(--fdm-cuerpo);
}

.calificar__acciones {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.calificar--gracias {
    text-align: center;
    padding: 40px 0;
}

.calificar--gracias .estrellas {
    margin: 12px 0 20px;
}

/* ---------- Tarjeta de "califica tu corte" ---------- */

.por-calificar {
    border: 1px solid var(--fdm-oro);
    background: var(--fdm-panel);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.por-calificar__texto {
    min-width: 0;
}

.por-calificar__titulo {
    margin: 0 0 4px;
    font-family: var(--fdm-display);
    font-size: 1.5rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.por-calificar__detalle {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--fdm-texto-tenue);
}

/* ---------- Promedio ---------- */

.promedio {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.promedio__numero {
    font-family: var(--fdm-display);
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    color: var(--fdm-oro);
}

.promedio__total {
    font-size: 0.875rem;
    color: var(--fdm-texto-tenue);
}

/* Reparto de estrellas: una barra por nivel. */
.reparto {
    display: grid;
    gap: 6px;
    margin-top: 16px;
}

.reparto__fila {
    display: grid;
    grid-template-columns: 2.5rem 1fr 2.5rem;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    color: var(--fdm-texto-tenue);
}

.reparto__barra {
    height: 8px;
    background: var(--fdm-panel-alto);
    overflow: hidden;
}

.reparto__relleno {
    height: 100%;
    background: var(--fdm-oro);
}

/* ---------- Calificaciones en el panel ---------- */

.filtros-calificacion {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.calificaciones {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.calificacion {
    border: 1px solid var(--fdm-borde);
    border-left: 3px solid var(--fdm-borde);
    padding: 16px 18px;
    background: var(--fdm-panel);
}

/* Las que preocupan se distinguen con el borde, no solo con una etiqueta:
   en una lista larga, la etiqueta se pierde. */
.calificacion--atender {
    border-left-color: var(--fdm-acento);
}

.calificacion__cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.calificacion__quien {
    font-size: 0.9375rem;
    color: var(--fdm-texto-suave);
}

.calificacion__fecha {
    font-size: 0.8125rem;
    color: var(--fdm-texto-tenue);
    margin-left: auto;
}

.calificacion__texto {
    margin: 0 0 12px;
    line-height: 1.55;
}

.calificacion__texto--vacio {
    color: var(--fdm-texto-tenue);
    font-style: italic;
}

.calificacion__acciones {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.barberos-resumen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.barbero-resumen {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.barbero-resumen__nombre {
    font-weight: 600;
    min-width: 8rem;
}

.barbero-resumen__cifra {
    font-size: 0.875rem;
    color: var(--fdm-texto-tenue);
}

/* Cuando el correo capturado resulta ser de un cliente que ya existe. Verde y
   no el gris de las ayudas: es un hallazgo, no una instrucción. */
.cliente-hallado {
    color: var(--fdm-exito);
}

/* El "am"/"pm" al lado de una hora grande: pequeño y apagado, para que el
   número siga siendo lo que se lee de un vistazo en la columna de la agenda. */
.meridiano {
    margin-left: 3px;
    font-family: var(--fdm-cuerpo);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--fdm-texto-tenue);
}

/* El teléfono de la agenda abre WhatsApp, no marca. La etiqueta lo dice, en
   chico: sin ella el barbero espera una llamada y se lleva la sorpresa. */
.tel__medio {
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--fdm-borde-medio);
    border-radius: 2px;
    font-size: 0.625rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--fdm-texto-tenue);
}

/* Un teléfono que no alcanza para armar la liga de WhatsApp se sigue
   mostrando, pero SIN pinta de enlace: subrayado y en color prometía un clic
   donde no iba a pasar nada. Clase propia y no la del enlace, porque el CSS
   con ámbito de cada pantalla le gana a cualquier regla global. */
.tel-sin-liga {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.8125rem;
    color: var(--fdm-texto-suave);
}