/* ═══════════════════════════════════════════════════════════
   PUNTTO — PRIMITIVAS (web)
   Espejo de lib/widgets/ en la app Flutter, igual que tokens.css
   lo es de lib/theme/.

   Se carga DESPUES de tokens.css a proposito: varias reglas de aqui
   (sobre todo las de enlaces y botones) tienen que ganarle a los
   resets globales de alli.

   REGLA DE ORO heredada de tokens.css: aqui tampoco van hex sueltos
   ni numeros magicos. Todo sale de var(--…).

   Prefijo .p- en todas las clases: index.html arrastra ~900 lineas de
   estilos previos y el prefijo garantiza que nada de esto colisione
   con lo que ya existe mientras convivan.
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   1 · ETIQUETA DE SECCION — la firma editorial de la casa.
   Trazo dorado de 24x2 + versalitas verdes.
   Espejo de SectionLabel.
   ─────────────────────────────────────────────────────────── */
.p-section-label {
  display: flex;
  align-items: center;
  /* El handoff pide 10px; van 8 (--space-sm) porque la escala de la casa
     no tiene 10 y dos pixeles no justifican romperla. Misma decision que
     en Flutter: las dos plataformas tienen que medir igual. */
  gap: var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--text-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-primary);
}

.p-section-label::before {
  content: '';
  /* Extremos rectos a proposito: un radio lo convertiria en pill y
     perderia el aire editorial. */
  flex: 0 0 auto;
  width: var(--space-xl); /* 24px */
  height: 2px;
  background: var(--color-accent);
}

/* Sobre superficies VERDES las versalitas verdes serian invisibles:
   pasan a oro, del mismo tono que el trazo. Espejo de SectionLabel.onDark. */
.p-section-label--on-dark {
  color: var(--color-accent);
  /* Peso normal y no semibold: el oro sobre verde ya contrasta de sobra;
     con mas peso gritaria. */
  font-weight: var(--weight-medium);
}

/* ───────────────────────────────────────────────────────────
   2 · LISTA DE LINEAS — la que sustituye a la tarjeta.
   Abre con un hilo mas presente y separa filas con uno tenue.
   Espejo de MeetList / MeetListRow.
   ─────────────────────────────────────────────────────────── */
.p-list {
  border-top: 1px solid var(--color-divider);
}

.p-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  /* El handoff pide 15px; van 16 (--space-lg), igual que en Flutter, para
     mantener el ritmo vertical del resto. */
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-divider-soft);
  text-align: left;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  font: inherit;
  color: inherit;
}

/* Fila que responde al toque. Como <button> hereda estilos raros del
   navegador, la variante los neutraliza arriba y aqui solo anade el gesto. */
.p-list-row--accion {
  cursor: pointer;
  transition: background-color var(--tiempo-micro) var(--curva-puntto);
}

.p-list-row--accion:hover {
  /* 4% de verde marca: confirma que la fila responde sin encender una caja. */
  background-color: var(--color-hover-green);
}

/* Ultima fila cuando lo que sigue ya trae su propia separacion: dos lineas
   juntas se verian sucias. */
.p-list-row--sin-divisor {
  border-bottom: none;
}

/* ───────────────────────────────────────────────────────────
   3 · SELECCION POR SUBRAYADO ORO.
   El activo no es un pill ni un fondo: es subrayado + peso + tinta.
   Espejo de MeetUnderlineSelector.
   ─────────────────────────────────────────────────────────── */
.p-underline-group {
  display: flex;
  gap: var(--space-xl);
  overflow-x: auto;
  /* Sin barra visible, como el resto de scrollers del rediseno. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.p-underline-group::-webkit-scrollbar {
  display: none;
}

.p-underline-opt {
  flex: 0 0 auto;
  /* 12px arriba y abajo dejan el control en ~44px de alto tactil con el
     subrayado incluido, que es el minimo del handoff. */
  padding: var(--space-md) 0;
  background: none;
  border: none;
  /* El inactivo RESERVA el mismo grosor en transparente: sin esto, el texto
     brincaria 2px al seleccionarse. */
  border-bottom: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--tiempo-micro) var(--curva-puntto),
              border-color var(--tiempo-micro) var(--curva-puntto);
}

.p-underline-opt.is-activa {
  border-bottom-color: var(--color-accent);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  cursor: default;
}

/* Opcion que no se puede elegir (un dia que el negocio no abre). Se queda a
   media tinta en vez de desaparecer: el cliente tiene que poder ver que ese
   dia existe y que simplemente no hay hueco. */
.p-underline-opt:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Una opcion de DOS pisos (dia de la semana arriba, numero abajo). El grupo
   de dias del handoff es asi; el resto de selectores son de una linea. */
.p-underline-opt > span {
  display: block;
  line-height: var(--line-tight);
}

.p-underline-opt > .p-opt-sup {
  font-size: var(--text-caption);
  text-transform: capitalize;
}

.p-underline-opt > .p-opt-num {
  font-size: var(--text-body);
  /* Cifras tabulares: los numeros de dia no bailan al cambiar de semana. */
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────────────────────────────────────────
   4 · CAMPO DE TEXTO.
   Etiqueta en versalitas + campo de 54px + mensaje de error.
   Espejo de MeetInput y del inputDecorationTheme.
   ─────────────────────────────────────────────────────────── */
.p-campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.p-campo-label {
  font-family: var(--font-sans);
  /* 10px con .16em: el campo tiene que pesar mas que su etiqueta.
     Espejo de AppTypography.labelCampo. */
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  transition: color var(--tiempo-micro) var(--curva-puntto);
}

.p-campo-input {
  width: 100%;
  min-height: 54px;
  padding: 0 var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  /* El handoff pide 14px; van 12 (--radius-lg), igual que en Flutter: la
     escala tiene 12 y 16, y 14 esta justo en medio. */
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  /* 16px obligatorio: por debajo, iOS Safari hace zoom al enfocar. */
  font-size: var(--text-body);
  color: var(--color-text-primary);
  transition: border-color var(--tiempo-micro) var(--curva-puntto);
}

.p-campo-input::placeholder {
  color: var(--color-text-tertiary);
}

/* El foco se marca en ORO, no en verde: es el unico momento en que un campo
   es el centro de la pantalla, y el oro lo dice sin gritar. */
.p-campo-input:focus {
  outline: none;
  border-color: var(--color-accent);
  border-width: 1.5px;
}

.p-campo.is-error .p-campo-label {
  color: var(--color-danger);
}

.p-campo.is-error .p-campo-input {
  border-color: var(--color-danger);
}

.p-campo-error {
  font-size: var(--text-caption);
  color: var(--color-danger);
}

/* ───────────────────────────────────────────────────────────
   5 · BARRA INFERIOR FIJA.
   Resumen arriba, accion abajo. Flota por contraste, no por sombra.
   Espejo de MeetBottomBar.
   ─────────────────────────────────────────────────────────── */
.p-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--color-background);
  border-top: 1px solid var(--color-divider);
  padding: var(--space-lg) var(--space-xl);
  /* En moviles con gesto de navegacion, la barra se levanta lo justo para
     que el boton no quede bajo la linea del sistema. */
  padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
}

.p-bottom-bar-resumen {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}

.p-bottom-bar-total {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  /* Las cifras siempre en tabulares: si no, el total baila al cambiar. */
  font-variant-numeric: tabular-nums;
}

/* Quien use la barra fija tiene que reservarle su hueco al final del
   contenido, o la barra tapa lo ultimo que hay debajo. */
.p-con-bottom-bar {
  padding-bottom: calc(140px + env(safe-area-inset-bottom));
}

/* ───────────────────────────────────────────────────────────
   6 · TOAST — aviso pasajero.
   Pildora flotante, verde (o roja si algo salio mal).
   Espejo de MeetToast.
   ─────────────────────────────────────────────────────────── */
.p-toast {
  position: fixed;
  /* Por encima de la barra inferior, para no tapar la accion que
     acabas de tocar. */
  bottom: calc(104px + env(safe-area-inset-bottom));
  left: var(--space-xl);
  right: var(--space-xl);
  z-index: 40;
  margin: 0 auto;
  max-width: var(--max-prose);
  width: fit-content;
  padding: var(--space-md) var(--space-xl);
  background: var(--color-primary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-toast);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-on-primary);
  text-align: center;
  /* No intercepta toques: es un aviso, no un dialogo. */
  pointer-events: none;
  /* Nace apagado y un poco mas abajo; .is-visible lo sube. */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--tiempo-micro) var(--curva-puntto),
              transform var(--tiempo-micro) var(--curva-puntto);
}

.p-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.p-toast--error {
  background: var(--color-danger);
}

/* ───────────────────────────────────────────────────────────
   7 · ENLACE DE TEXTO — la accion susurrada de la casa.
   Texto verde con subrayado oro. Es lo que usan "Reintentar",
   "Ver en Maps", "Reservar otra cita" y "Crea tu pagina de
   reservas": una accion real que NO merece un boton.
   Espejo de MeetTextLink.

   El subrayado ciñe el TEXTO, no el area tactil. Por eso el
   patron necesita un <span> dentro: el contenedor mide 44px de
   alto (minimo tactil) y el borde vive en el span, pegado a las
   letras. Sin el span, el subrayado caeria al fondo de los 44px.

     <button type="button" class="p-text-link"><span>Ver todas</span></button>

   No se usa text-decoration: heredaria el color del texto y aqui
   el trazo es oro mientras el texto es verde.
   ─────────────────────────────────────────────────────────── */
.p-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  cursor: pointer;
  transition: color var(--tiempo-micro) var(--curva-puntto);
}

.p-text-link > span {
  border-bottom: 1.5px solid var(--color-accent);
  transition: border-color var(--tiempo-micro) var(--curva-puntto);
}

/* Al pasar por encima (o al tocar, que es lo que ocurre en movil) el texto
   se va al oro del subrayado. Es el mismo gesto que en Flutter resuelve el
   estado presionado. */
.p-text-link:hover,
.p-text-link:focus-visible {
  color: var(--color-accent);
}

/* Sobre superficies VERDES el texto verde seria invisible: pasa a crema, con
   el subrayado en el mismo crema a media tinta. Espejo de MeetTextLink.onDark. */
.p-text-link--on-dark {
  color: var(--color-text-on-primary);
}

.p-text-link--on-dark > span {
  border-bottom-color: var(--color-text-on-primary-soft);
}

.p-text-link--on-dark:hover,
.p-text-link--on-dark:focus-visible {
  color: var(--color-accent);
}

.p-text-link--on-dark:hover > span,
.p-text-link--on-dark:focus-visible > span {
  border-bottom-color: var(--color-accent);
}

/* ───────────────────────────────────────────────────────────
   UTILIDADES
   ─────────────────────────────────────────────────────────── */

/* Cifras que no bailan al cambiar (precios, totales, contadores). */
.p-cifra {
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────────────────────────────────────────
   ACCESIBILIDAD — con "reducir movimiento" activo, todo cambia de
   golpe. Las primitivas siguen siendo las mismas; solo se anula el
   tempo. Misma regla que MediaQuery.disableAnimations en Flutter.
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .p-list-row--accion,
  .p-underline-opt,
  .p-campo-label,
  .p-campo-input,
  .p-text-link,
  .p-text-link > span,
  .p-toast {
    transition-duration: 0.01ms;
  }
}