/* =============================================================================
   base.css — ESTILOS DE COMPONENTES: +20HP Mecánica.

   MOBILE-FIRST: los estilos base son para celular (320 px en adelante) y se
   amplían con @media (min-width: …) usando los cortes de Bootstrap 5.3
   (576 / 768 / 992 / 1200 / 1400). Solo consume variables de marca.css.
   NO redefine lo de funcional.css (.paso, .fila-oculta-filtro, .campo-trampa).

   Índice
     1. Base y accesibilidad
     2. Botones y textos de marca
     3. Contenedores (tarjetas, login)
     4. Home pública
     5. Reserva pública
     6. Admin: barra, tablas (siempre tablas, deslizables en celular), estados, paginador
     7. Formularios, modales y objetivos táctiles
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. BASE Y ACCESIBILIDAD
   --------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--fuente-texto);
    font-size: 1rem;                       /* 16 px: base legible en celular */
    line-height: 1.6;
    background-color: var(--color-fondo);
    color: var(--color-texto);
}

img, iframe, svg { max-width: 100%; }
img { height: auto; }

/* Datos de personas (nombres, mails, patentes, notas, servicios con nombres largos): si una
   "palabra" no entra en el ancho disponible se corta en vez de empujar la pantalla y generar
   scroll horizontal. `anywhere` (a diferencia de `break-word`) también achica el ancho mínimo
   de los ítems flex/grid, que es lo que hacía desbordar las tarjetas. Se hereda a los hijos. */
.tarjeta, .card-minimal, .moto-item, .turno-item, .control-item, .opcion-card, .table-custom td,
.modal-body, .alert, .accordion-body, .hero-content, .lista-controles li, address, .toast {
    overflow-wrap: anywhere;
}

/* Títulos: tipografía condensada e itálica, como el logo. clamp() los escala
   entre celular y escritorio sin cortes bruscos. */
.font-display, h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.15;
}
h1.font-display          { font-size: clamp(2rem, 7vw, 3rem); }
h2.font-display           { font-size: clamp(1.75rem, 5vw, 2.5rem); }
.h6.font-display          { font-size: 1.2rem; }   /* la condensada se ve chica a 1rem */
.navbar-brand.font-display, .btn-marca, .btn-marca-outline { font-size: 1.15rem; }

/* Foco visible para quien navega con teclado (y para los botones táctiles). */
:focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: 2px;
}

/* Quien pide menos movimiento no recibe animaciones. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------------------------------------------------------------------------
   2. BOTONES Y TEXTOS DE MARCA
   --------------------------------------------------------------------------- */
.btn-marca,
.btn-marca-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--alto-tactil);        /* objetivo táctil >= 44 px */
    min-width: var(--alto-tactil);         /* también de ancho (botones solo de ícono, como "Salir" en celular) */
    padding: .55rem 1.4rem;
    border: 2px solid var(--color-acento);
    border-radius: var(--radio-chico);
    font-family: var(--fuente-titulos);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

/* Texto NEGRO sobre el naranja (7:1); el blanco daría 2,7:1 y no pasa AA. */
.btn-marca {
    background-color: var(--color-acento);
    color: var(--color-sobre-acento);
}
.btn-marca:hover,
.btn-marca:focus-visible {
    background-color: var(--color-acento-hover);
    border-color: var(--color-acento-hover);
    color: var(--color-sobre-acento);
}
.btn-marca:disabled { opacity: .6; cursor: not-allowed; }

.btn-marca-outline {
    background-color: transparent;
    color: var(--color-acento-texto);
    border-color: var(--color-acento);
}
.btn-marca-outline:hover,
.btn-marca-outline:focus-visible {
    background-color: var(--color-acento);
    color: var(--color-sobre-acento);
}

.text-marca        { color: var(--color-acento-texto) !important; }
.text-muted-custom { color: var(--color-texto-suave); }

/* ---------------------------------------------------------------------------
   3. CONTENEDORES
   --------------------------------------------------------------------------- */
.tarjeta,
.card-minimal {
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.25rem;
    box-shadow: var(--sombra);
}
.card-minimal { border-top: 3px solid var(--color-acento); padding: 1.5rem; }

/* Login del admin: tarjeta clara centrada sobre fondo negro de marca. */
body.pagina-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background-color: var(--color-primario);
}
.login-card {
    width: 100%;
    max-width: 26rem;
    padding: 1.75rem 1.25rem;
    background-color: var(--color-superficie);
    border-top: 4px solid var(--color-acento);
    border-radius: var(--radio);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .5);
}

/* Logo redondo de la cabecera de reserva y login. */
.logo-cabecera { display: block; width: 5rem; height: 5rem; margin: 0 auto .75rem; }
.logo-nav      { width: 2.5rem; height: 2.5rem; margin-right: .5rem; }

@media (min-width: 576px) {
    .tarjeta { padding: 1.5rem; }
    .login-card { padding: 2.25rem 2rem; }
}
@media (min-width: 992px) {
    .tarjeta { padding: 1.75rem; }
}

/* ---------------------------------------------------------------------------
   4. HOME PÚBLICA
   --------------------------------------------------------------------------- */
main > section { padding: 3.5rem 0; scroll-margin-top: 4.5rem; }
main > section:nth-of-type(even) { background-color: rgba(255, 255, 255, .025); }
@media (min-width: 768px)  { main > section { padding: 5rem 0; } }
@media (min-width: 1200px) { main > section { padding: 6rem 0; } }

/* Barra fija: translúcida con desenfoque; el menú colapsado queda sólido. */
.navbar.fixed-top {
    background-color: rgba(12, 12, 12, .94);
    border-bottom: 1px solid var(--color-borde);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform .3s ease;
    will-change: transform;
}
/* Se oculta al scrollear hacia abajo, como la barra de Chrome en móvil.
   Solo quedan visibles los dos botones flotantes. */
.navbar.fixed-top.navbar-oculta { transform: translateY(-100%); }
/* Mientras el menú colapsable está abierto no debe esconderse. */
.navbar.fixed-top:has(.navbar-collapse.show) { transform: none !important; }
.navbar-brand { color: #fff; }
.navbar-brand:hover { color: var(--color-acento); }
#brand-logo { display: inline-flex; align-items: center; gap: .6rem; }
#brand-logo img { height: 2.75rem; width: auto; }
.navbar-toggler {
    min-width: var(--alto-tactil);
    min-height: var(--alto-tactil);
    color: #fff;
    border-color: var(--color-borde);
    font-size: 1.6rem;
    line-height: 1;
}
.navbar-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: var(--alto-tactil);
    color: var(--color-texto);
}
.navbar-nav .nav-link:hover { color: var(--color-acento); }
.navbar-nav .btn-marca { margin: .5rem 0 1rem; width: 100%; }
@media (min-width: 992px) {
    .navbar-nav .btn-marca { margin: 0 0 0 .75rem; width: auto; }
}

.hero-section {
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 7rem;
    /* Resplandor naranja, como la llama del logo. */
    background-image: radial-gradient(48rem 32rem at 90% 15%, rgba(240, 124, 27, .2), transparent 65%);
}
h1.hero-h1 {
    font-size: clamp(2.5rem, 9vw, 4.75rem);
    font-style: italic;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 1rem;
}
.hero-slogan {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    font-style: italic;
    color: var(--color-acento);
    margin-bottom: 1.25rem;
}
.hero-logo { width: 100%; max-width: 26rem; filter: drop-shadow(0 0 3rem rgba(240, 124, 27, .35)); }
.hero-content .lead { font-size: clamp(1.05rem, 2.5vw, 1.25rem); }

.divider {
    width: 4rem;
    height: .3rem;
    margin-bottom: 1rem;
    background-color: var(--color-acento);
    transform: skewX(-25deg);
}
.eyebrow {
    margin-bottom: .5rem;
    font-size: 1rem;
    font-style: italic;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.icon-minimal { display: block; margin-bottom: .75rem; font-size: 2.25rem; color: var(--color-acento); }
.card-minimal h3 { margin-bottom: .75rem; }
.card-minimal ul { padding-left: 1.1rem; }

.step-number {
    font-family: var(--fuente-titulos);
    font-size: 3.5rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    color: var(--color-acento);
}

/* Tarjetas del catálogo de servicios (home). */
.card-servicio { display: flex; flex-direction: column; }
.meta-servicio {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    margin-bottom: .75rem;
    font-size: .95rem;
    color: var(--color-texto-suave);
}
.precio-servicio {
    font-family: var(--fuente-titulos);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-acento);
}
/* Lo que se revisa en cada service: 1 columna en celular, hasta 3 en escritorio. */
.lista-controles li { break-inside: avoid; padding: .3rem 0; }
@media (min-width: 768px)  { .lista-controles { column-count: 2; column-gap: 2rem; } }
@media (min-width: 992px)  { .lista-controles { column-count: 3; } }

/* Mapa con proporción fija: nunca desborda ni se corta en 320 px. */
.map-wrapper {
    position: relative;
    aspect-ratio: 4 / 3;
    margin-top: 1rem;
    overflow: hidden;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-chico);
    background-color: var(--color-fondo);
}
.map-wrapper iframe,
.map-wrapper .map-pendiente {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.map-pendiente { display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; }

.nap-list li { margin-bottom: .5rem; }
.social-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: var(--alto-tactil);
    color: var(--color-texto);
    text-decoration: none;
}
.social-link:hover { color: var(--color-acento); }

.faq .accordion {
    --bs-accordion-bg: var(--color-superficie);
    --bs-accordion-color: var(--color-texto);
    --bs-accordion-border-color: var(--color-borde);
    --bs-accordion-btn-color: var(--color-texto);
    --bs-accordion-btn-bg: var(--color-superficie);
    --bs-accordion-active-color: var(--color-acento);
    --bs-accordion-active-bg: rgba(240, 124, 27, .1);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(240, 124, 27, .35);
    max-width: 48rem;
    margin: 0 auto;
}
.faq .accordion-button { min-height: var(--alto-tactil); font-weight: 600; }

/* Animación de entrada: index.html agrega .active al entrar en pantalla. */
.reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity .6s ease, transform .6s ease; }
.reveal.active { opacity: 1; transform: none; }
/* Sin JavaScript nada quedaría oculto. */
@media (scripting: none) { .reveal { opacity: 1; transform: none; } }

.btn-scroll-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--color-acento);
    color: var(--color-sobre-acento);
    font-size: 1.25rem;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
}
.btn-scroll-top.show { opacity: 1; visibility: visible; }

.btn-whatsapp-float {
    position: fixed;
    right: 1rem;
    bottom: 4.5rem;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: #25D366;
    color: #fff;
    font-size: 1.6rem;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-whatsapp-float:hover,
.btn-whatsapp-float:focus { color: #fff; transform: scale(1.06); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }

footer { padding: 2.5rem 0; border-top: 1px solid var(--color-borde); background-color: #000; color: var(--color-texto-suave); }
footer a:not(.text-decoration-none) { color: var(--color-acento); }

/* ---------------------------------------------------------------------------
   5. RESERVA PÚBLICA (reservar/index.php, mi-turno.php)
   --------------------------------------------------------------------------- */
body.pagina-reserva { min-height: 100vh; padding: 1.5rem 0 2.5rem; }
body.pagina-reserva > .container { max-width: 36rem; }
/* Más ancho desde tablet: el paso 1 muestra los servicios en 2 columnas. */
@media (min-width: 768px) { body.pagina-reserva > .container { max-width: 46rem; } }
/* Pasos 2 a 5 (día, horario, datos, éxito): contenido angosto y centrado dentro de la tarjeta. */
.paso-angosto { max-width: 30rem; margin-inline: auto; }
.descripcion-servicio { margin-top: .35rem; color: var(--color-texto-suave); }
/* Servicios: el contenido arranca arriba, así los títulos se alinean entre tarjetas
   (los horarios, de una sola línea, sí van centrados: ver #lista-horarios). */
#lista-servicios .opcion-card { justify-content: flex-start; }
/* Casilla de cada servicio (se pueden elegir varios) y resumen de lo elegido. */
.marca-check { color: var(--color-texto-suave); font-size: 1.25rem; line-height: 1.2; }
.opcion-card.selected .marca-check { color: var(--color-acento); }
.min-w-0 { min-width: 0; }
.resumen-seleccion { font-size: .95rem; color: var(--color-texto-suave); }
.resumen-seleccion strong { color: var(--color-texto); }
#r-notas { resize: vertical; min-height: 5.5rem; }
/* Registro de atención: un servicio destildado se resalta hasta que tenga su motivo. */
.servicio-no-hecho { border-color: var(--bs-warning, #ffc107); }
.servicio-no-hecho .form-check-label { text-decoration: line-through; text-decoration-color: var(--color-texto-suave); }
/* Lista de casillas de servicios (admin): cada renglón mide >= 44 px de alto para tocarlo bien. */
.lista-checks .form-check { display: flex; align-items: center; gap: .6rem; min-height: var(--alto-tactil); padding-left: 0; margin: 0; }
.lista-checks .form-check-input { float: none; margin: 0; width: 1.4rem; height: 1.4rem; flex: 0 0 auto; }
.lista-checks .form-check-label { flex: 1 1 auto; min-width: 0; padding: .35rem 0; }
/* Servicios de un turno: una línea por servicio, sin viñetas. */
.lista-servicios-turno { list-style: none; margin: 0; padding: 0; }
.lista-servicios-turno li + li { margin-top: .15rem; }
.notas-turno { white-space: pre-line; }
/* mi-turno.php: tarjeta centrada, ancho fluido. */
body.pagina-reserva > .d-flex { min-height: calc(100vh - 4rem); padding: 0 1rem; }
body.pagina-reserva > .d-flex .tarjeta { width: 100%; max-width: 30rem; }

.stepper { display: flex; justify-content: center; gap: .6rem; margin-bottom: 1.25rem; }
.paso-dot {
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background-color: var(--color-borde);
    transition: background-color .2s, transform .2s;
}
.paso-dot.activo { background-color: var(--color-acento); transform: scale(1.2); }

/* Servicio u horario elegible: tarjeta grande y táctil (>= 44 px de alto). */
.opcion-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--alto-tactil);
    padding: .75rem 1rem;
    border: 2px solid var(--color-borde-campo);
    border-radius: var(--radio-chico);
    background-color: var(--color-superficie);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
    -webkit-tap-highlight-color: transparent;
}
.opcion-card:hover { border-color: var(--color-acento); }
.opcion-card.selected {
    border-color: var(--color-acento);
    background-color: rgba(240, 124, 27, .14);
}
.opcion-card.disabled { opacity: .45; pointer-events: none; }
/* Horarios: cuadrícula de botones centrados. */
#lista-horarios .opcion-card {
    align-items: center;
    font-family: var(--fuente-titulos);
    font-size: 1.25rem;
    font-weight: 700;
}
.opcion-card:focus-visible { outline: 3px solid var(--color-acento); }

#resumen-reserva strong { color: var(--color-texto); }

/* "Mi actividad": cada turno en una fila; en celular el estado baja debajo si no entra. */
.turno-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem 1rem;
    padding: .75rem 0;
    border-bottom: 1px dashed var(--color-borde);
}
.turno-item:last-child { border-bottom: 0; padding-bottom: 0; }
/* Desplegable de cada turno (servicios y notas): ocupa toda la fila; el área táctil mide >= 44 px. */
.turno-detalle { flex: 1 1 100%; }
.turno-detalle > summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: var(--alto-tactil);
    color: var(--color-acento);
    cursor: pointer;
    list-style: none;
}
.turno-detalle > summary::-webkit-details-marker { display: none; }
.turno-detalle > summary .bi { transition: transform .15s; }
.turno-detalle[open] > summary .bi { transform: rotate(180deg); }
.turno-detalle-cuerpo {
    padding: .75rem 1rem;
    border-left: 3px solid var(--color-acento);
    background-color: var(--color-superficie);
    border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
}

/* ---------------------------------------------------------------------------
   6. ADMIN
   --------------------------------------------------------------------------- */
/* Barra superior: negro de marca con filo naranja, igual en todas las páginas. */
.navbar-admin {
    background-color: var(--color-primario);
    border-bottom: 3px solid var(--color-acento);
}
.navbar-admin .navbar-brand { display: inline-flex; align-items: center; min-height: var(--alto-tactil); }
.navbar-admin .text-marca { color: var(--color-acento) !important; }
.navbar-admin .btn-marca-outline { color: var(--color-acento); }
.navbar-admin .btn-marca-outline:hover { color: var(--color-sobre-acento); }

.nav-icon-btn {
    width: var(--alto-tactil);
    height: var(--alto-tactil);
    border: 1px solid #333;
    background-color: #1a1a1a;
    color: #fff;
}
.nav-icon-btn:hover { background-color: #2a2a2a; color: #fff; }

/* --- Tablas del panel (.table-compacta y .table-custom, que es la misma): SIEMPRE son una
   tabla, con las mismas columnas en escritorio y en celular. Cada dato queda en un renglón;
   si la pantalla es angosta, el contenedor .table-responsive la desliza de costado (nunca se
   convierte en tarjetas ni se esconden columnas). Botones chicos, solo ícono. --- */
.table-compacta,
.table-custom {
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-texto);
    --bs-table-border-color: var(--color-borde);
    --bs-table-hover-bg: rgba(240, 124, 27, .08);
    --bs-table-hover-color: var(--color-texto);
    width: 100%;
    margin-bottom: 0;
    font-size: .875rem;
}
.table-compacta th,
.table-custom th {
    padding: .45rem .5rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
    border-bottom: 2px solid var(--color-borde);
    white-space: nowrap;
}
.table-compacta td,
.table-custom td {
    padding: .45rem .5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-borde);
    white-space: nowrap;                    /* una fila = un renglón */
}
.table-compacta tr:last-child td,
.table-custom tr:last-child td { border-bottom: 0; }
/* Filas "sin datos" (colspan): el texto sí puede ocupar varios renglones. */
.table-compacta td[colspan],
.table-custom td[colspan] { white-space: normal; }
/* Texto largo (motos, motivo, "aplica a"): se corta con "…" y el title muestra el completo. */
.celda-recorte { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }

/* Botones dentro de las tablas: chicos para que la fila entre en un renglón. */
.table-compacta .btn-sm,
.table-custom .btn-sm {
    min-height: 2.1rem;                    /* ~34 px: chico pero fácil de tocar */
    min-width: 2.1rem;
    padding: .3rem .6rem;
    font-size: .875rem;
    line-height: 1.2;
    gap: .3rem;
}
.acciones-fila { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: nowrap; }
.acciones-fila form { margin: 0; }
/* Estado activo/inactivo como píldora chica que se toca para cambiar. */
.btn-estado-chico { border-radius: 2rem; padding: .25rem .75rem !important; font-size: .8rem !important; }

/* Select de estado del turno: compacto, pero con 16 px de letra (con menos, iOS hace zoom). */
.table-compacta .select-estado,
.table-custom .select-estado {
    width: auto;
    min-width: 8.5rem;
    min-height: 0;
    padding-top: .2rem;
    padding-bottom: .2rem;
    font-size: 1rem;
}
.table-compacta .badge-estado { font-size: .7rem; padding: .4em .7em; }
.celda-turno-fecha > .fw-bold { white-space: nowrap; }
/* Notas del turno (tabla del modal de cierre): cerradas por defecto; el toque abre el texto. */
.notas-detalle > summary { display: inline-flex; align-items: center; gap: .3rem; color: var(--color-acento-texto); cursor: pointer; list-style: none; }
.notas-detalle > summary::-webkit-details-marker { display: none; }
.notas-detalle .notas-turno { padding: .4rem .6rem; border-left: 3px solid var(--color-acento); background-color: var(--color-superficie); white-space: pre-line; }
.table-compacta .lista-servicios-turno li + li { margin-top: 0; }

@media (min-width: 768px) {
    .table-compacta, .table-custom { font-size: .9rem; }
    .table-compacta th, .table-compacta td,
    .table-custom th, .table-custom td { padding: .55rem .65rem; }
}

/* Ficha del cliente y registro de atención. */
.moto-item {
    padding: .75rem;
    margin-bottom: .75rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-chico);
}
.moto-inactiva { opacity: .65; }

.contenedor-registro { max-width: 52rem; }
.control-item {
    padding: .75rem 0;
    border-bottom: 1px dashed var(--color-borde);
}
.control-item:last-child { border-bottom: 0; }
.control-item .form-check { min-height: var(--alto-tactil); display: flex; align-items: center; gap: .5rem; padding-left: 0; }
.control-item .form-check-input { margin: 0; float: none; flex-shrink: 0; }
.control-anterior { color: var(--color-texto-suave); }
.fila-inactiva { opacity: .6; }

/* Estados de turno y alerta de cierre. */
.badge-estado {
    padding: .5em .9em;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.badge-pulse { animation: pulso 1.6s ease-in-out infinite; }
@keyframes pulso {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.18); }
}
.fila-turno { scroll-margin-top: 5rem; }
.tabla-cierre-modal { --bs-table-bg: var(--color-superficie); }

/* Avisos flotantes y feedback de turnos.js (antes se fijaban por JavaScript). */
#avisos { z-index: 1090; }
#avisos .alert { max-width: min(21rem, calc(100vw - 2rem)); }
.aviso-saliendo { opacity: 0; transition: opacity .4s ease; }
.destello-ok { border-color: var(--color-ok) !important; }
.select-cargando { opacity: .5; }

/* Paginador de tablas. */
.custom-pagination {
    --bs-pagination-color: var(--color-acento-texto);
    --bs-pagination-bg: var(--color-superficie);
    --bs-pagination-border-color: var(--color-borde);
    --bs-pagination-hover-color: var(--color-sobre-acento);
    --bs-pagination-hover-bg: var(--color-acento);
    --bs-pagination-active-color: var(--color-sobre-acento);
    --bs-pagination-active-bg: var(--color-acento);
    --bs-pagination-active-border-color: var(--color-acento);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(240, 124, 27, .35);
    flex-wrap: wrap;
    justify-content: center;
}
.custom-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--alto-tactil);
    min-height: var(--alto-tactil);
}

/* ---------------------------------------------------------------------------
   7. FORMULARIOS, MODALES Y OBJETIVOS TÁCTILES
   --------------------------------------------------------------------------- */
.form-control,
.form-select {
    min-height: var(--alto-tactil);
    background-color: var(--color-superficie);
    color: var(--color-texto);
    border-color: var(--color-borde-campo);
    font-size: 1rem;                       /* >= 16 px: iOS no hace zoom al enfocar */
}
.form-control:focus,
.form-select:focus {
    background-color: var(--color-superficie);
    color: var(--color-texto);
    border-color: var(--color-acento);
    box-shadow: 0 0 0 .25rem rgba(240, 124, 27, .3);
}
/* Los -sm de Bootstrap bajan a 14 px: en celular se mantienen en 16 px. */
.form-control-sm,
.form-select-sm { font-size: 1rem; min-height: var(--alto-tactil); }
.form-check-input { width: 1.4em; height: 1.4em; border-color: var(--color-borde-campo); }
.form-check-input:checked { background-color: var(--color-acento); border-color: var(--color-acento); }
.form-switch .form-check-input { width: 2.6em; }
.form-check-label { padding-left: .25rem; }
.input-group-text { background-color: var(--color-superficie); border-color: var(--color-borde-campo); color: var(--color-texto-suave); }

/* El "warning" amarillo de Bootstrap no tiene contraste sobre fondo claro: los
   botones de ficha/edición toman el naranja de marca (texto oscuro en reposo). */
.btn-outline-warning {
    --bs-btn-color: var(--color-acento-texto);
    --bs-btn-border-color: var(--color-acento);
    --bs-btn-hover-color: var(--color-sobre-acento);
    --bs-btn-hover-bg: var(--color-acento);
    --bs-btn-hover-border-color: var(--color-acento);
    --bs-btn-active-color: var(--color-sobre-acento);
    --bs-btn-active-bg: var(--color-acento-hover);
    --bs-btn-active-border-color: var(--color-acento-hover);
}

/* Tema oscuro: textos y botones grises de Bootstrap pasan al blanco apagado de la marca
   (el gris #6c757d de Bootstrap casi no se lee sobre negro). */
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .text-muted { color: var(--color-texto-suave) !important; }
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--color-texto-suave);
    --bs-btn-border-color: var(--color-borde-campo);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2a2a2a;
    --bs-btn-hover-border-color: var(--color-texto-suave);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #333;
}
[data-bs-theme="dark"] .badge.bg-secondary { background-color: #3a3a3a !important; color: #fff; }
[data-bs-theme="dark"] .list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--color-texto); --bs-list-group-border-color: var(--color-borde); }

/* Todo botón de Bootstrap (no solo los -sm) alcanza los 44 px táctiles en celular y tablet. */
.btn:not(.btn-sm):not(.btn-close) { min-height: var(--alto-tactil); }
@media (min-width: 992px) { .btn:not(.btn-sm):not(.btn-close) { min-height: 0; } }

/* Botones chicos de Bootstrap (acciones en tablas): igual de tocables. */
.btn-sm { min-height: var(--alto-tactil); min-width: var(--alto-tactil); display: inline-flex; align-items: center; justify-content: center; }

.modal-content { background-color: var(--color-superficie); color: var(--color-texto); border-color: var(--color-borde); }
.modal-header .btn-close {
    flex-shrink: 0;                        /* con un título largo el botón no debe achicarse por debajo de 44 px */
    box-sizing: content-box;
    width: 1.5rem;
    height: 1.5rem;
    padding: .625rem;                      /* área táctil de 44 px */
    background-size: 1rem;
}
/* En celular los modales ocupan toda la pantalla (clase Bootstrap
   modal-fullscreen-sm-down en el marcado) con el cuerpo desplazable. */

/* Escritorio: los -sm vuelven a su tamaño compacto, el mouse no necesita 44 px. */
@media (min-width: 992px) {
    .form-control-sm, .form-select-sm { font-size: .875rem; min-height: 0; }
    .btn-sm { min-height: 0; min-width: 0; }
}

/* Modal "Detalle del turno": notas con la misma marca lateral que en la tabla. */
#modalServiciosTurno .notas-turno { padding: .4rem .6rem; border-left: 3px solid var(--color-acento); background-color: var(--color-fondo); }