/* Reserva publica y gestion de cita de un negocio que no es DeMark
   (plantillas reserva/*). Como el portal del cliente: se apoya en la zona
   heredada de sitio.css (tokens claros, Inter, .boton, .campo, .opcion) y solo
   pinta lo suyo, la cabecera y el pie del negocio y su color. Sin body.sitio,
   asi que nada de la identidad oscura y dorada le alcanza.

   El color lo elige el negocio y puede ser cualquiera, asi que nunca se usa
   tal cual como texto. reservas.contexto_marca manda tres variables:
   --negocio         el color: filete de la cabecera y fondo del boton;
   --negocio-sobre   blanco o negro sobre --negocio, el que pase 4,5:1 (con
                     blanco y negro puros siempre pasa uno de los dos);
   --negocio-texto   el propio color si da 4,5:1 sobre --fondo, si no tinta
                     oscura: enlaces, numeros de paso, foco y bordes marcados. */

.reserva-negocio-cuerpo {
  --acento: var(--negocio-texto, var(--tinta));
  --acento-texto: var(--negocio-texto, var(--tinta));
  --acento-texto-oscuro: var(--negocio-texto, var(--tinta));
  --acento-oscuro: var(--negocio-texto, var(--tinta));
  --acento-suave: #f3f4f6;
  --acento-suave: color-mix(in srgb, var(--negocio, #6b7280) 10%, #ffffff);
  min-height: 100vh; display: flex; flex-direction: column; background: var(--negocio-fondo, var(--fondo)); color-scheme: light;
}
/* La letra del negocio (marca.contexto la da solo con su plan): body lleva
   fuente-<clave> y sitio-fuentes.css define --f-texto y --f-titulos. Sin esa
   clase, nada cambia: Inter como siempre. */
.reserva-negocio-cuerpo[class*="fuente-"] { --fuente: var(--f-texto, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif); }
.reserva-negocio-cuerpo[class*="fuente-"] :is(h1, h2, h3, h4, .reserva-marca) { font-family: var(--f-titulos, var(--fuente)); }
/* Fondo oscuro del negocio (marca.contexto: marca_fondo_oscuro). body lleva
   data-fondo="oscuro" y en su style --negocio-tinta (blanco roto),
   --negocio-gris, --negocio-superficie y --negocio-borde, todos a 4,5:1. Se
   redefinen aqui los tokens de sitio.css, asi que titulos, parrafos, pie,
   enlaces, tarjetas y campos cambian a la vez; sin el atributo, nada cambia.
   La sombra, oscura y mas suave; los errores, en un rojo que se lee encima.
   Solo en pantalla: impreso, tinta sobre papel blanco. */
@media screen {
  .reserva-negocio-cuerpo[data-fondo="oscuro"] {
    --tinta: var(--negocio-tinta); --texto: var(--negocio-tinta);
    --secundario: var(--negocio-gris); --gris: var(--negocio-gris);
    --superficie: var(--negocio-superficie); --fondo: var(--negocio-fondo); --fondo-2: var(--negocio-superficie);
    --borde: var(--negocio-borde); --tenue: var(--negocio-borde);
    --acento-suave: color-mix(in srgb, var(--negocio, #6b7280) 18%, var(--negocio-superficie));
    --sombra: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 20px rgba(0, 0, 0, .22);
    --sombra-alta: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 36px -12px rgba(0, 0, 0, .4);
    --error: #f87171;
    color-scheme: dark;
  }
  .reserva-negocio-cuerpo[data-fondo="oscuro"] .boton:hover { box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .6); }
}

/* ---- cabecera ---- */
.reserva-cab { background: var(--superficie); border-top: 4px solid var(--negocio, var(--borde)); border-bottom: 1px solid var(--borde); }
.reserva-cab-fila { width: min(760px, calc(100vw - 32px)); margin: 0 auto; padding: 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.reserva-marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--tinta); letter-spacing: -.01em; }
.reserva-marca:hover { color: var(--tinta); }
.reserva-marca img { height: 36px; width: auto; max-width: 180px; object-fit: contain; }
.reserva-idioma { font-size: 14px; color: var(--gris); }
/* La imagen de cabecera: una banda recortada, decorativa (alt vacio). */
.reserva-cab-banda img { display: block; width: 100%; height: clamp(96px, 20vw, 200px); object-fit: cover; }
.reserva-bienvenida { width: min(760px, calc(100vw - 32px)); margin: 0 auto; padding: 0 0 14px; color: var(--secundario); font-size: 15px; white-space: pre-line; }
.reserva-idioma:hover { color: var(--tinta); }

/* ---- cuerpo ---- */
.reserva-main { width: min(760px, calc(100vw - 32px)); margin: 0 auto; padding: clamp(24px, 4vw, 40px) 0 56px; flex: 1; }
.reserva-main h1 { font-size: clamp(26px, 3.6vw, 34px); margin: 0 0 8px; }
.reserva-main h2 { font-size: clamp(20px, 2.6vw, 24px); }
.reserva-main .intro { font-size: 16px; margin-bottom: 22px; }
.reserva-main .ceja { margin-bottom: 8px; letter-spacing: .14em; }
.reserva-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: clamp(20px, 4vw, 32px); }

/* reservas.js esconde el formulario con el atributo hidden; .formulario es grid y le ganaria. */
.reserva-negocio-cuerpo .formulario[hidden], .reserva-negocio-cuerpo .exito[hidden] { display: none; }

.reserva-negocio-cuerpo .boton { background: var(--negocio, var(--tinta)); color: var(--negocio-sobre, #fff); border-color: var(--negocio-texto, transparent); box-shadow: none; }
.reserva-negocio-cuerpo .boton:hover { background: var(--negocio, var(--tinta)); color: var(--negocio-sobre, #fff); box-shadow: 0 10px 20px -12px rgba(17, 24, 39, .45); }
.reserva-negocio-cuerpo .campo input:focus, .reserva-negocio-cuerpo .campo textarea:focus, .reserva-negocio-cuerpo .campo select:focus {
  border-color: var(--negocio-texto); box-shadow: 0 0 0 3px var(--acento-suave);
}
/* Elegido: texto en tinta (el tinte de fondo puede bajar el contraste del color) y el borde marcado. */
.reserva-negocio-cuerpo .opcion input:checked + span { color: var(--tinta); border-color: var(--negocio-texto); box-shadow: inset 0 0 0 1px var(--negocio-texto); font-weight: 600; }
.reserva-negocio-cuerpo .paso-reserva { margin-bottom: 18px; }
.reserva-negocio-cuerpo .form-pie { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.reserva-negocio-cuerpo .form-nota { margin: 0; color: var(--gris); font-size: 14px; }
.reserva-negocio-cuerpo .form-corto { min-height: 96px; }
.reserva-negocio-cuerpo .aviso { margin-bottom: 18px; }

/* ---- errores (los pinta formularios.js y reservas.js) ---- */
.reserva-negocio-cuerpo .error { color: var(--error); font-size: 13px; margin: 0; }
.reserva-negocio-cuerpo .error:empty { display: none; }
.reserva-negocio-cuerpo .error-hueco { margin-top: 10px; }
.reserva-negocio-cuerpo .form-error { padding: 12px 16px; background: #fef2f2; border-left: 3px solid var(--error); border-radius: 6px; color: #991b1b; font-size: 14px; }
.reserva-negocio-cuerpo .campo.invalido input, .reserva-negocio-cuerpo .campo.invalido textarea { border-color: var(--error); }
.reserva-negocio-cuerpo .form-resumen:empty { display: none; }
.reserva-negocio-cuerpo .form-resumen { padding: 14px 18px; background: #fef2f2; border-left: 3px solid var(--error); border-radius: 6px; }
.reserva-negocio-cuerpo .form-resumen:focus { outline: none; }
.reserva-negocio-cuerpo .form-resumen-titulo { margin: 0 0 8px; font-weight: 600; font-size: 14px; color: #991b1b; }
.reserva-negocio-cuerpo .form-resumen ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.reserva-negocio-cuerpo .form-resumen a { color: #991b1b; text-decoration: underline; }
.reserva-negocio-cuerpo .form-resumen li.resuelto a { color: var(--gris); text-decoration: line-through; }

/* ---- envio en curso (formularios.js cambia el contenido del boton) ---- */
.reserva-negocio-cuerpo .boton.enviando, .reserva-negocio-cuerpo .boton.enviando:disabled { opacity: 1; cursor: progress; transform: none; }
.reserva-negocio-cuerpo .boton .punto-envio { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: reserva-punto 1.1s ease-in-out infinite; }
@keyframes reserva-punto { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .reserva-negocio-cuerpo .boton .punto-envio { animation: none; } }

/* ---- paso 4: el resumen de antes de confirmar y la politica de cancelacion ----
   Sin prefijo .reserva-negocio-cuerpo a proposito: el mismo parcial
   (reserva/_resumen.html) lo usa la pagina de reserva de DeMark, que no hereda
   esta hoja. Ahi el navegador pinta la lista sola y se lee igual; aqui, con la
   caja y los filetes del resto de la pagina de marca. */
.reserva-resumen { margin: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; }
/* La etiqueta a su ancho y el valor con el resto: a 390px un valor largo ("Pick a service...") parte linea en vez de montarse sobre la etiqueta. */
.reserva-resumen > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 11px 16px; }
.reserva-resumen > div + div { border-top: 1px solid var(--borde); }
.reserva-resumen > div[hidden] { display: none; }
.reserva-resumen dt { color: var(--gris); font-size: 14px; font-weight: 600; }
.reserva-resumen dd { margin: 0; color: var(--tinta); text-align: right; overflow-wrap: anywhere; }
.reserva-resumen .resumen-total dt, .reserva-resumen .resumen-total dd { font-weight: 700; color: var(--tinta); }
.reserva-politica { margin-top: 14px; padding: 12px 16px; border-radius: 10px; background: var(--acento-suave, #f3f4f6); }
.reserva-politica-titulo { margin: 0 0 4px; font-weight: 600; font-size: 14px; color: var(--tinta); }
.reserva-politica-texto { margin: 0; font-size: 14px; color: var(--gris); white-space: pre-line; }
.reserva-politica-texto[hidden] { display: none; }
/* La casilla del consentimiento SMS es una sola: ocupa su linea, no media. */
.opcion-sms { margin-top: 10px; }

/* ---- exito ---- */
.reserva-negocio-cuerpo .exito { padding: 24px 0 8px; }
.reserva-negocio-cuerpo .exito h2 { margin: 0 0 8px; }
.reserva-negocio-cuerpo .exito .intro { margin: 0 auto 20px; }
/* El agradecimiento propio del negocio (marca.contexto: gracias). */
.reserva-negocio-cuerpo .marca-gracias { white-space: pre-line; }

/* ---- la cita (/citas/<token>) ---- */
.reserva-negocio-cuerpo .datos-filetes { margin: 20px 0 28px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; }
.reserva-negocio-cuerpo .datos-filetes > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 12px 16px; }
.reserva-negocio-cuerpo .datos-filetes > div + div { border-top: 1px solid var(--borde); }
.reserva-negocio-cuerpo .datos-filetes dt { color: var(--gris); font-size: 14px; font-weight: 600; }
.reserva-negocio-cuerpo .datos-filetes dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }
.reserva-negocio-cuerpo .cita-zona { color: var(--gris); font-size: 14px; }
.reserva-negocio-cuerpo .cita-subtitulo { margin: 0 0 6px; }
.reserva-negocio-cuerpo .cambio-cita > .ayuda { color: var(--gris); margin: 0 0 16px; }
.reserva-negocio-cuerpo .cita-cancelar { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--borde); gap: 12px; }
.reserva-negocio-cuerpo .cita-cancelar .ayuda { margin: 0; color: var(--gris); font-size: 15px; }
.reserva-negocio-cuerpo .cita-accion { margin-top: 20px; }
/* "Add to calendar": el parcial sitio/_calendario.html, que tambien usa DeMark. */
.reserva-negocio-cuerpo .cita-calendario { margin: 0 0 28px; }
.reserva-negocio-cuerpo .cita-calendario > .ayuda { color: var(--gris); margin: 0 0 12px; }
.reserva-negocio-cuerpo .acciones-linea { display: flex; flex-wrap: wrap; gap: 10px; }
.reserva-negocio-cuerpo .calendario-enlace { padding: 10px 16px; font-size: 14px; }
.reserva-negocio-cuerpo .cambio-cita { margin-bottom: 4px; }
@media (max-width: 520px) { .reserva-negocio-cuerpo .datos-filetes > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---- pie: los datos del negocio y un "Powered by" discreto ---- */
.reserva-pie { border-top: 1px solid var(--borde); color: var(--gris); font-size: 14px; text-align: center; padding: 20px 16px 26px; }
.reserva-pie p { margin: 0; }
.reserva-pie a { color: var(--gris); }
.reserva-pie a:hover { color: var(--tinta); }
.reserva-pie-nombre { font-weight: 600; color: var(--tinta); }
.reserva-pie-datos { list-style: none; margin: 8px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 20px; }
.reserva-pie-datos li { display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.reserva-pie-datos svg { width: 16px; height: 16px; flex: none; }
.reserva-powered { margin-top: 14px !important; font-size: 12px; }
/* El texto propio del pie y las redes del negocio (plantillas/_marca_pie.html). */
.reserva-pie .marca-pie-texto { margin-top: 10px; white-space: pre-line; }
.reserva-pie .marca-redes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; }
.reserva-pie .marca-redes a { color: var(--negocio-texto, var(--gris)); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- paso "con quien": la foto o las iniciales sobre el color de cada persona ---- */
/* Con .opcion delante: sitio.css pinta toda ".opcion span" como pastilla, y sin
   subir la especificidad la ficha perdia el flex y el avatar y el texto salian
   como pastillas anidadas. La ficha es la tarjeta; lo de dentro, sin caja. */
.opcion .personal-ficha { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 16px 10px 10px; border-radius: 14px; }
.opcion .personal-ficha > span:last-child { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.personal-ficha small { color: var(--gris); font-size: 13px; line-height: 1.4; }
.opcion .personal-avatar { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: #fff; }
/* "Anyone available" no es nadie en concreto: circulo hueco, no color de persona. */
.opcion .personal-avatar-cualquiera { background: var(--fondo-2, #f3f4f6); color: var(--gris); border: 1px dashed var(--borde); }
.personal-avatar-cualquiera svg { width: 20px; height: 20px; }

/* ---- servicio con imagen de la mediateca (diseno de lista) ---- */
/* Miniatura cuadrada a la izquierda del nombre; el nombre y el detalle en la
   segunda columna. Solo cuando el servicio tiene imagen (span.servicio-con-foto). */
.opcion-servicio .servicio-con-foto { grid-template-columns: 60px minmax(0, 1fr); column-gap: 14px; align-items: center; padding-left: 10px; }
.opcion-servicio .servicio-con-foto .servicio-foto { grid-row: 1 / span 2; width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }