/* Navajas — Componentes */

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--fs-body);
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  min-height: 48px;
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: var(--color-rojo-acento);
  color: #fff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-rojo-acento-hover);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(214, 40, 57, 0.55);
}

.btn--whatsapp {
  background: transparent;
  border-color: rgba(241, 242, 244, 0.35);
  color: var(--color-texto-claro);
}

.btn--whatsapp:hover,
.btn--whatsapp:focus-visible {
  border-color: var(--color-azul-led);
  color: var(--color-texto-claro);
  box-shadow: var(--glow-azul);
}

.btn--ghost {
  background: transparent;
  color: var(--color-texto-claro);
  border-color: rgba(184, 190, 199, 0.3);
  padding: 0.6rem 1.1rem;
  min-height: 40px;
  font-size: var(--fs-small);
}

.btn--ghost[aria-pressed="true"] {
  border-color: var(--color-azul-led);
  color: var(--color-azul-led-suave);
}

.btn--block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Card base */
.card {
  background: var(--color-negro-superficie);
  border: 1px solid rgba(184, 190, 199, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* Profesional */
.profesional-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.profesional-card:hover,
.profesional-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(44, 92, 255, 0.35);
  box-shadow: var(--shadow-card), 0 0 32px -14px rgba(44, 92, 255, 0.45);
}

.profesional-card__foto {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.profesional-card__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.profesional-card:hover .profesional-card__foto img {
  transform: scale(1.05);
}

/* Degradado sutil hacia el color de fondo de la card, para que el borde
   inferior de la foto se integre mejor con el cuerpo de texto. */
.profesional-card__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-negro-superficie) 0%, transparent 35%);
  pointer-events: none;
}

.profesional-card__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  background: rgba(27, 31, 38, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(184, 190, 199, 0.2);
  color: var(--color-estado-atendido);
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.profesional-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

.profesional-card__body h3 {
  margin-bottom: var(--space-1);
}

.profesional-card__rol {
  color: var(--color-texto-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.profesional-card__precio {
  font-family: var(--font-mono);
  color: var(--color-azul-led-suave);
  font-size: var(--fs-body-lg);
  margin-bottom: var(--space-3);
}

.profesional-card__servicios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.tag {
  font-size: var(--fs-tiny);
  font-family: var(--font-mono);
  padding: var(--space-1) var(--space-2);
  border: 1px solid rgba(184, 190, 199, 0.25);
  border-radius: 999px;
  color: var(--color-plateado);
}

.profesional-card__horarios {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  color: var(--color-texto-muted);
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.profesional-card__links {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  /* Ancla los botones al fondo de la tarjeta aunque el bloque de arriba
     (ej. 6 tags de Andres vs 3 de los demas) tenga distinta altura entre
     las 3 tarjetas del grid — evita que queden desalineadas. */
  margin-top: auto;
  padding-top: var(--space-4);
  /* Con márgenes distintos por profesional (más tags/horarios en unos que
     en otros), el espacio que absorbe margin-top:auto queda de tamaño
     desigual entre tarjetas — sin nada que lo delimite se ve como hueco
     "sobrante" en las tarjetas más cortas. Este borde lo convierte en una
     pausa visual intencional antes de las acciones, sea cual sea el alto. */
  border-top: 1px solid rgba(184, 190, 199, 0.1);
}

/* Botón de Instagram: icono de marca en vez de texto, forma circular */
.profesional-card__ig {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.profesional-card__ig svg {
  width: 20px;
  height: 20px;
}

.profesional-card__ig:hover,
.profesional-card__ig:focus-visible {
  border-color: rgba(225, 48, 108, 0.5);
  box-shadow: 0 0 18px -4px rgba(225, 48, 108, 0.55);
}

.profesional-card__reservar {
  margin-top: var(--space-3);
}

/* Servicio item */
.servicio-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.servicio-item:hover {
  border-color: rgba(44, 92, 255, 0.3);
  transform: translateY(-2px);
}

/* "Corte" es el único servicio con precio publicado y reservable sin
   pasar por WhatsApp primero — sin ninguna distinción, la grilla lee como
   7 filas idénticas ("Consultar precio por WhatsApp" repetido 6 veces).
   Mismo lenguaje de acento que .historia__texto blockquote (borde de
   color), no un componente nuevo. */
.servicio-item--destacado {
  border-left: 3px solid var(--color-azul-led);
}

.servicio-item__nombre {
  font-weight: 600;
}

.servicio-item__nota {
  display: block;
  color: var(--color-texto-muted);
  font-size: var(--fs-tiny);
  margin-top: var(--space-1);
}

/* Precio card */
.precio-card {
  padding: var(--space-6);
  text-align: center;
}

.precio-card__nombre {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}

.precio-card__valor {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  color: var(--color-azul-led-suave);
  margin-bottom: var(--space-1);
}

.precio-card__label {
  color: var(--color-texto-muted);
  font-size: var(--fs-small);
}

/* Producto */
.producto-card {
  overflow: hidden;
}

.producto-card__foto {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.producto-card__foto img {
  transition: transform var(--dur-slow) var(--ease-out);
}

.producto-card:hover .producto-card__foto img {
  transform: scale(1.05);
}

.producto-card__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Categoria con mas de una foto (ej. Gorras): una sola card, las imagenes
   se reparten lado a lado dentro del mismo marco 3/4 en vez de generar una
   card por foto. */
.producto-card__foto--multi {
  display: flex;
  gap: 2px;
}

.producto-card__foto--multi img {
  width: 50%;
}

.producto-card__nombre {
  padding: var(--space-3);
  font-size: var(--fs-small);
  text-align: center;
}

/* Galeria */
.galeria-item {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  padding: 0;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out);
}

.galeria-item:hover img,
.galeria-item:focus-visible img {
  transform: scale(1.05);
}

.galeria-item:hover,
.galeria-item:focus-visible {
  border-color: rgba(44, 92, 255, 0.35);
  box-shadow: 0 0 24px -10px rgba(44, 92, 255, 0.5);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(11, 13, 16, 0.92);
  padding: var(--space-6);
}

.lightbox[data-open="true"] {
  display: flex;
  animation: lightbox-fade-in var(--dur-fast) var(--ease-out);
}

@keyframes lightbox-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.lightbox img {
  max-height: 88vh;
  max-width: 100%;
  border-radius: var(--radius-sm);
  animation: lightbox-img-in var(--dur-base) var(--ease-out);
}

@keyframes lightbox-img-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: transparent;
  border: 1px solid rgba(241, 242, 244, 0.4);
  color: var(--color-texto-claro);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

/* Info card (ubicacion / contacto / politica) */
.info-card {
  padding: var(--space-6);
  transition: border-color var(--dur-base) var(--ease-out);
}

.info-card:hover {
  border-color: rgba(44, 92, 255, 0.25);
}

.info-card h3 {
  margin-bottom: var(--space-3);
}

.info-card__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-3);
  color: var(--color-texto-muted);
}

/* Ubicacion: card con jerarquia mas marcada (direccion en texto claro,
   referencia en muted) y hover con borde + glow azul sutil, apagado en
   estado normal — mismo lenguaje que .btn--whatsapp:hover. */
.info-card--ubicacion {
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.info-card--ubicacion:hover {
  border-color: var(--color-azul-led);
  box-shadow: var(--glow-azul);
}

.info-card__item--direccion {
  color: var(--color-texto-claro);
  font-size: var(--fs-body-lg);
  font-weight: 500;
}

.info-card__cta {
  margin-bottom: var(--space-4);
}

.info-card__mapa {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(184, 190, 199, 0.15);
}

.info-card__mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* El embed gratuito de Google Maps (?output=embed) no tiene parámetro
     de tema oscuro nativo — eso requiere la API JS de Maps con estilos
     custom (API key + billing, fuera de alcance). Este filtro aproxima
     un mapa oscuro coherente con el resto del sitio; probado visualmente,
     el mapa blanco por defecto era el elemento que más rompía la
     identidad oscura de toda la home, justo en Ubicación/Contacto. */
  filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}

/* Formularios */
.field {
  margin-bottom: var(--space-4);
}

.field label {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-texto-muted);
  margin-bottom: var(--space-2);
}

.field input,
.field select {
  width: 100%;
  background: var(--color-negro-base);
  border: 1px solid rgba(184, 190, 199, 0.25);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  color: var(--color-texto-claro);
  min-height: 48px;
}

.field input:focus-visible,
.field select:focus-visible {
  border-color: var(--color-azul-led);
}

.field-error {
  color: var(--color-rojo-texto);
  font-size: var(--fs-tiny);
  margin-top: var(--space-1);
  display: none;
}

.field[data-invalid="true"] .field-error {
  display: block;
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] select {
  border-color: var(--color-rojo-texto);
}

/* Badges de estado (paneles) */
.badge-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-tiny);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
}

.badge-estado::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.badge-estado--reservado {
  color: var(--color-estado-reservado);
  background: rgba(44, 92, 255, 0.12);
}

.badge-estado--reservado_manual {
  color: var(--color-estado-manual);
  background: rgba(155, 107, 255, 0.12);
}

.badge-estado--bloqueado {
  color: var(--color-estado-bloqueado);
  background: rgba(184, 190, 199, 0.1);
}

.badge-estado--cancelado {
  color: var(--color-estado-cancelado);
  background: rgba(90, 95, 104, 0.15);
  text-decoration: line-through;
}

.badge-estado--atendido {
  color: var(--color-estado-atendido);
  background: rgba(47, 191, 113, 0.12);
}

/* Aviso / texto informativo */
.aviso {
  border: 1px dashed rgba(184, 190, 199, 0.3);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  color: var(--color-texto-muted);
  font-size: var(--fs-small);
}

.aviso strong {
  color: var(--color-texto-claro);
}

.pendiente {
  color: var(--color-plateado-suave);
  font-style: italic;
}

/* Alertas — compartidas entre el wizard de reservas publico y los paneles */
.alert {
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-small);
  margin-bottom: var(--space-4);
}

.alert--error {
  background: rgba(214, 40, 57, 0.12);
  color: var(--color-rojo-texto);
  border: 1px solid rgba(214, 40, 57, 0.3);
}

.alert--success {
  background: rgba(47, 191, 113, 0.12);
  color: #7be8ab;
  border: 1px solid rgba(47, 191, 113, 0.3);
}