/* Sistema de diseño nuevo (docs/diseno/sistema-de-diseno.md).

   Lo carga base.html para toda la app (rediseño, paso 2). Los patrones de
   pantalla viven en pantallas.css (venta, visitas, ingreso), gestion.css
   (panel, inventario, gastos, configuración) y agenda.css. Todos los tokens
   llevan el prefijo --ds-.

   Los colores van en hex fijo: tests/test_sistema_diseno.py mide el
   contraste AA de cada par de texto sobre su fondo. */

:root {
  /* --- Neutros (cálidos, para convivir con la arena de la marca) --- */
  --ds-fondo: #f7f6f4;
  --ds-superficie: #ffffff;
  --ds-superficie-2: #efede9; /* rellenos tenues, hover, segmentado */
  --ds-superficie-3: #e6e3de;
  --ds-borde: #e4e1dc;
  --ds-borde-fuerte: #cdc9c2;
  --ds-texto: #1c1b1a; /* 15.9:1 sobre fondo */
  --ds-texto-2: #5f5c57; /* 6.2:1 sobre fondo · texto secundario */
  --ds-texto-3: #8a867f; /* 3.6:1 · solo decoración e íconos, nunca texto */
  --ds-inverso: #2a2927; /* toast */
  --ds-en-inverso: #f7f6f4;
  --ds-acento-en-inverso: #e9dcc6; /* enlace dentro de un toast · 10.7:1 */

  /* --- Acento: la arena de la marca, en tres pasos --- */
  --ds-acento: #cdbba1; /* el de la marca: barras y rellenos, no texto */
  --ds-acento-fuerte: #7a6340; /* botón primario, enlaces, foco · 5.7:1 */
  --ds-en-acento-fuerte: #ffffff;
  --ds-acento-suave: #f3ece1; /* contenedor tonal */
  --ds-en-acento-suave: #4d3e26; /* 8.8:1 */

  /* --- Peligro y error --- */
  --ds-peligro: #b3261e; /* 6.5:1 sobre blanco */
  --ds-en-peligro: #ffffff;
  --ds-peligro-suave: #fbe8e6;
  --ds-en-peligro-suave: #8f2a20;

  /* --- Estados de la cita (fondo suave + texto oscuro del mismo tono) --- */
  --ds-agendada: #f3ece1;
  --ds-en-agendada: #4d3e26;
  --ds-confirmada: #e2f2e7;
  --ds-en-confirmada: #1d5c34;
  --ds-completada: #ebe9e5;
  --ds-en-completada: #4a4844;
  --ds-no-asistio: #fcefd9;
  --ds-en-no-asistio: #7a4a05;
  --ds-cancelada: #fbe8e6;
  --ds-en-cancelada: #8f2a20;
  --ds-ocupado: #f0f2f5; /* ocupado del calendario de Google: borde punteado */
  --ds-en-ocupado: #3d4b5e;
  --ds-ocupado-borde: #8b95a3;
  --ds-bloqueo: #efede9;
  --ds-en-bloqueo: #4a4844;
  --ds-error-sync: #fbe8e6;
  --ds-en-error-sync: #8f2a20;
  --ds-ahora: #c5221f; /* línea de la hora actual */

  /* --- Colores sugeridos para tratamientos (Configuración › Tratamientos) ---
     Tonos medios y apagados: van en la barra de la cita y, mezclados al 24%
     con blanco, de fondo. El texto encima siempre es --ds-texto. */
  --ds-tratamiento-1: #cdbba1; /* arena (marca) */
  --ds-tratamiento-2: #8fb39a; /* salvia */
  --ds-tratamiento-3: #a99bd1; /* lavanda */
  --ds-tratamiento-4: #8fb2d6; /* cielo */
  --ds-tratamiento-5: #e8a982; /* durazno */
  --ds-tratamiento-6: #d9a0b4; /* rosa */
  --ds-tratamiento-7: #7fc4bd; /* menta */
  --ds-tratamiento-8: #d6b65c; /* mostaza */

  /* --- Series de gráficas (Panel) ---
     Paleta categórica validada con la skill dataviz (CVD ΔE ≥ 9.1, visión
     normal ≥ 19.6). Orden fijo, nunca se cicla: más de seis se agrupan en
     «Otras». Tres tonos no llegan a 3:1 sobre blanco: por eso cada gráfica
     lleva leyenda y su tabla al lado. */
  --ds-serie-1: #2a78d6;
  --ds-serie-2: #eb6834;
  --ds-serie-3: #1baf7a;
  --ds-serie-4: #eda100;
  --ds-serie-5: #e87ba4;
  --ds-serie-6: #008300;

  /* --- Tipografía: la del sistema (SF en el iPhone) --- */
  --ds-fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ds-texto-xs: 0.75rem; /* 12 · horas de la cuadrícula, chips */
  --ds-texto-sm: 0.875rem; /* 14 · secundario, etiquetas */
  --ds-texto-base: 1rem; /* 16 · cuerpo y campos (iOS no hace zoom) */
  --ds-texto-lg: 1.125rem; /* 18 · títulos de tarjeta */
  --ds-texto-xl: 1.375rem; /* 22 · título de pantalla y de hoja */
  --ds-texto-2xl: 1.75rem; /* 28 · display, solo en /estilo/ */
  --ds-peso-normal: 400;
  --ds-peso-medio: 500;
  --ds-peso-fuerte: 600;
  --ds-interlineado: 1.45;

  /* --- Espacios: base 4px --- */
  --ds-e1: 0.25rem;
  --ds-e2: 0.5rem;
  --ds-e3: 0.75rem;
  --ds-e4: 1rem;
  --ds-e5: 1.25rem;
  --ds-e6: 1.5rem;
  --ds-e8: 2rem;
  --ds-e12: 3rem;

  /* --- Radios --- */
  --ds-radio-sm: 6px; /* chips cuadrados, eventos */
  --ds-radio-md: 10px; /* campos, avisos, tarjetas */
  --ds-radio-lg: 16px; /* diálogos, menús */
  --ds-radio-xl: 20px; /* esquinas de la hoja */
  --ds-radio-total: 999px; /* botones, segmentado, chips */

  /* --- Elevación: casi plana; la sombra solo para lo que flota --- */
  --ds-elevacion-1: 0 1px 2px rgb(28 27 26 / 0.06), 0 0 0 1px rgb(28 27 26 / 0.04);
  --ds-elevacion-2: 0 4px 16px rgb(28 27 26 / 0.12), 0 0 0 1px rgb(28 27 26 / 0.05);
  --ds-elevacion-3: 0 -8px 32px rgb(28 27 26 / 0.16);
  --ds-velo: rgb(28 27 26 / 0.32);

  /* --- Movimiento (criterio de Emil Kowalski) --- */
  --ds-ease-salida: cubic-bezier(0.23, 1, 0.32, 1); /* entra rápido, frena suave */
  --ds-ease-hoja: cubic-bezier(0.32, 0.72, 0, 1); /* curva de las hojas de iOS */
  --ds-ease-mover: cubic-bezier(0.77, 0, 0.175, 1);
  --ds-dur-toque: 120ms; /* escala al presionar */
  --ds-dur-corta: 160ms; /* salidas, hover, cambios de color */
  --ds-dur-media: 200ms; /* toast, menús, diálogos */
  --ds-dur-hoja: 240ms; /* hoja que sube */

  /* --- Toque --- */
  --ds-toque: 44px; /* mínimo de todo lo tapeable */
  --ds-toque-campo: 48px;
}

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  /* Al abrir una hoja se bloquea el desplazamiento: sin esto la barra
     desaparece y todo brinca unos píxeles. */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background: var(--ds-fondo);
  color: var(--ds-texto);
  font-family: var(--ds-fuente);
  font-size: var(--ds-texto-base);
  line-height: var(--ds-interlineado);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--ds-acento-fuerte);
}

svg {
  flex-shrink: 0;
}

:focus-visible {
  outline: 2px solid var(--ds-acento-fuerte);
  outline-offset: 2px;
}

.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;
}

.tenue {
  color: var(--ds-texto-2);
  font-size: var(--ds-texto-sm);
}

.entre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-e3);
}

.vacio {
  padding: var(--ds-e8) var(--ds-e4);
  color: var(--ds-texto-2);
  text-align: center;
}

.icono {
  width: 20px;
  height: 20px;
}

.icono--sm {
  width: 16px;
  height: 16px;
}

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-e2);
  min-height: var(--ds-toque);
  padding: 0 var(--ds-e4);
  border: 1px solid transparent;
  border-radius: var(--ds-radio-total);
  background: transparent;
  color: var(--ds-texto);
  font-size: var(--ds-texto-sm);
  font-weight: var(--ds-peso-medio);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.boton--primario {
  background: var(--ds-acento-fuerte);
  color: var(--ds-en-acento-fuerte);
}

.boton--secundario {
  background: var(--ds-superficie);
  border-color: var(--ds-borde-fuerte);
}

.boton--tonal {
  background: var(--ds-acento-suave);
  color: var(--ds-en-acento-suave);
}

.boton--texto {
  padding: 0 var(--ds-e3);
  color: var(--ds-acento-fuerte);
}

.boton--peligro {
  background: var(--ds-peligro);
  color: var(--ds-en-peligro);
}

.boton--texto.boton--peligro {
  background: transparent;
  color: var(--ds-peligro);
}

.boton--icono {
  width: var(--ds-toque);
  padding: 0;
  color: var(--ds-texto-2);
}

.boton--ancho {
  width: 100%;
}

.boton[disabled],
.boton.htmx-request {
  opacity: 0.5;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .boton:hover:not([disabled]) {
    background-color: var(--ds-superficie-2);
  }

  .boton--primario:hover:not([disabled]) {
    background-color: #6a5536;
  }

  .boton--tonal:hover:not([disabled]) {
    background-color: #ebe1d2;
  }

  .boton--peligro:hover:not([disabled]) {
    background-color: #9c2019;
  }

  .boton--texto.boton--peligro:hover:not([disabled]) {
    background-color: var(--ds-peligro-suave);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .boton {
    transition:
      transform var(--ds-dur-toque) var(--ds-ease-salida),
      background-color var(--ds-dur-corta) ease;
  }

  .boton:active:not([disabled]) {
    transform: scale(0.97);
  }
}

/* --- Campos ----------------------------------------------------------------- */

.grupo-campo {
  margin-bottom: var(--ds-e4);
}

.etiqueta {
  display: block;
  margin-bottom: var(--ds-e1);
  color: var(--ds-texto-2);
  font-size: var(--ds-texto-sm);
  font-weight: var(--ds-peso-medio);
}

.campo,
.campo-select {
  display: block;
  width: 100%;
  min-height: var(--ds-toque-campo);
  padding: var(--ds-e3) 14px;
  border: 1px solid var(--ds-borde-fuerte);
  border-radius: var(--ds-radio-md);
  background: var(--ds-superficie);
  font-size: var(--ds-texto-base);
  line-height: 1.3;
}

.campo::placeholder {
  color: var(--ds-texto-2);
}

textarea.campo {
  min-height: 5rem;
  resize: vertical;
}

/* Safari pinta los campos de fecha y hora a su manera: se alinean. */
.campo[type="date"],
.campo[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}

.campo-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235f5c57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.campo:focus-visible,
.campo-select:focus-visible {
  outline: none;
  border-color: var(--ds-acento-fuerte);
  box-shadow: 0 0 0 3px var(--ds-acento-suave);
}

.campo--error,
.campo[aria-invalid="true"] {
  border-color: var(--ds-peligro);
}

.ayuda {
  margin-top: var(--ds-e1);
  color: var(--ds-texto-2);
  font-size: var(--ds-texto-sm);
}

@media (prefers-reduced-motion: no-preference) {
  .campo,
  .campo-select {
    transition:
      border-color var(--ds-dur-corta) ease,
      box-shadow var(--ds-dur-corta) ease;
  }
}

.casilla {
  display: flex;
  align-items: center;
  gap: var(--ds-e3);
  min-height: var(--ds-toque);
  margin-bottom: var(--ds-e3);
  cursor: pointer;
}

.casilla input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--ds-acento-fuerte);
}

/* --- Búsqueda con resultados ----------------------------------------------- */

.busqueda {
  position: relative;
}

.busqueda .icono {
  position: absolute;
  top: 14px;
  left: 14px;
  color: var(--ds-texto-2);
  pointer-events: none;
}

.busqueda .campo {
  padding-left: 42px;
}

.resultados {
  display: flex;
  flex-direction: column;
  margin-top: var(--ds-e2);
}

.resultados > .boton {
  align-self: flex-start;
}

.fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-e3);
  width: 100%;
  min-height: 52px;
  padding: var(--ds-e2) var(--ds-e3);
  border: 0;
  border-radius: var(--ds-radio-md);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.fila__principal {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fila__nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--ds-peso-medio);
}

.fila__meta {
  color: var(--ds-texto-2);
  font-size: var(--ds-texto-sm);
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
  .fila:hover {
    background: var(--ds-superficie-2);
  }
}

.fila:active {
  background: var(--ds-superficie-2);
}

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

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-e2);
  padding: var(--ds-e3) 14px;
  border-radius: var(--ds-radio-md);
  background: var(--ds-superficie-2);
  color: var(--ds-texto);
  font-size: var(--ds-texto-sm);
}

.aviso .icono {
  margin-top: 1px;
}

.aviso--error {
  background: var(--ds-peligro-suave);
  color: var(--ds-en-peligro-suave);
}

.aviso--advertencia {
  background: var(--ds-no-asistio);
  color: var(--ds-en-no-asistio);
}

.aviso--exito {
  background: var(--ds-confirmada);
  color: var(--ds-en-confirmada);
}

/* Error de un campo: debajo del campo, sin caja. */
.grupo-campo .aviso--error {
  padding: var(--ds-e1) 0 0;
  background: none;
  color: var(--ds-peligro);
}

/* --- Chips de estado -------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: var(--ds-radio-total);
  background: var(--ds-agendada);
  color: var(--ds-en-agendada);
  font-size: var(--ds-texto-xs);
  font-weight: var(--ds-peso-medio);
  line-height: 1.2;
  white-space: nowrap;
}

.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.chip--confirmada {
  background: var(--ds-confirmada);
  color: var(--ds-en-confirmada);
}

.chip--completada {
  background: var(--ds-completada);
  color: var(--ds-en-completada);
}

.chip--no_asistio {
  background: var(--ds-no-asistio);
  color: var(--ds-en-no-asistio);
}

.chip--cancelada {
  background: var(--ds-cancelada);
  color: var(--ds-en-cancelada);
}

.chip--ocupado {
  background: var(--ds-ocupado);
  color: var(--ds-en-ocupado);
}

.chip--bloqueo {
  background: var(--ds-bloqueo);
  color: var(--ds-en-bloqueo);
}

.chip--error {
  background: var(--ds-error-sync);
  color: var(--ds-en-error-sync);
}

/* --- Segmentado y pestañas ---------------------------------------------------- */

.segmentado {
  display: inline-flex;
  padding: 0;
  border-radius: var(--ds-radio-total);
  background: var(--ds-superficie-2);
}

.segmentado__opcion {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  min-height: var(--ds-toque);
  padding: 0 var(--ds-e3);
  border: 0;
  border-radius: var(--ds-radio-total);
  background: transparent;
  color: var(--ds-texto-2);
  font-size: var(--ds-texto-sm);
  font-weight: var(--ds-peso-medio);
  text-decoration: none;
  cursor: pointer;
}

/* La pastilla blanca se dibuja dentro de los 44px con una sombra interior:
   el objetivo de toque queda completo y se ve el margen del iOS. */
.segmentado__opcion[aria-pressed="true"],
.segmentado__opcion[aria-current="page"] {
  background: var(--ds-superficie);
  box-shadow:
    inset 0 0 0 3px var(--ds-superficie-2),
    0 1px 2px rgb(28 27 26 / 0.08);
  color: var(--ds-texto);
}

.pestanas {
  display: flex;
  gap: var(--ds-e1);
  overflow-x: auto;
  scrollbar-width: none;
}

.pestanas::-webkit-scrollbar {
  display: none;
}

.pestanas a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--ds-toque);
  padding: 0 var(--ds-e3);
  color: var(--ds-texto-2);
  font-size: var(--ds-texto-sm);
  font-weight: var(--ds-peso-medio);
  text-decoration: none;
  white-space: nowrap;
}

.pestanas a[aria-current="page"] {
  color: var(--ds-texto);
}

.pestanas a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--ds-e3);
  right: var(--ds-e3);
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--ds-acento-fuerte);
}

.pestanas__cuenta {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--ds-radio-total);
  background: var(--ds-peligro);
  color: var(--ds-en-peligro);
  font-size: var(--ds-texto-xs);
  font-variant-numeric: tabular-nums;
}

/* --- Tarjeta de cita (listas) ---------------------------------------------- */

.tarjeta-cita {
  --color: var(--ds-acento);
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-e3);
  width: 100%;
  min-height: 64px;
  padding: var(--ds-e3) var(--ds-e4) var(--ds-e3) var(--ds-e3);
  border: 0;
  border-radius: var(--ds-radio-md);
  background: var(--ds-superficie);
  box-shadow: var(--ds-elevacion-1);
  text-align: left;
  cursor: pointer;
}

.tarjeta-cita__hora {
  display: flex;
  flex-direction: column;
  padding-left: var(--ds-e3);
  border-left: 4px solid var(--color);
  font-weight: var(--ds-peso-fuerte);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.tarjeta-cita__hora small {
  white-space: nowrap;
  color: var(--ds-texto-2);
  font-size: var(--ds-texto-xs);
  font-weight: var(--ds-peso-normal);
}

.tarjeta-cita__cuerpo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tarjeta-cita__nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--ds-peso-medio);
}

.tarjeta-cita__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ds-texto-2);
  font-size: var(--ds-texto-sm);
}

.tarjeta-cita__estado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ds-e1);
}

/* En el teléfono el estado baja debajo del nombre: el nombre es lo que
   se busca con la vista y no debe cortarse por un chip. */
@media (max-width: 599px) {
  .tarjeta-cita {
    grid-template-columns: 4rem minmax(0, 1fr);
    row-gap: var(--ds-e1);
  }

  .tarjeta-cita__hora {
    grid-row: span 2;
    align-self: stretch;
  }

  .tarjeta-cita__estado {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.tarjeta-cita--cancelada .tarjeta-cita__nombre {
  color: var(--ds-texto-2);
  text-decoration: line-through;
}

.tarjeta-cita--no_asistio .tarjeta-cita__hora {
  border-left-style: dashed;
}

@media (prefers-reduced-motion: no-preference) {
  .tarjeta-cita {
    transition: transform var(--ds-dur-toque) var(--ds-ease-salida);
  }

  .tarjeta-cita:active {
    transform: scale(0.985);
  }
}

/* --- Hoja (bottom sheet en móvil, diálogo en escritorio) -------------------- */

.hoja__fondo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--ds-velo);
}

.hoja {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ds-e2) var(--ds-e5) calc(var(--ds-e5) + env(safe-area-inset-bottom));
  padding-left: calc(var(--ds-e5) + env(safe-area-inset-left));
  padding-right: calc(var(--ds-e5) + env(safe-area-inset-right));
  border-radius: var(--ds-radio-xl) var(--ds-radio-xl) 0 0;
  background: var(--ds-superficie);
  box-shadow: var(--ds-elevacion-3);
}

.hoja:focus {
  outline: none;
}

/* El asa de iOS: se ve que la hoja se puede bajar con el dedo. */
.hoja__asa {
  flex-shrink: 0;
  align-self: center;
  width: 100%;
  height: 20px;
  margin-bottom: var(--ds-e1);
  border: 0;
  background: none;
  cursor: grab;
  touch-action: none;
}

.hoja__asa::before {
  content: "";
  display: block;
  width: 36px;
  height: 5px;
  margin: 0 auto;
  border-radius: var(--ds-radio-total);
  background: var(--ds-borde-fuerte);
}

.hoja__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-e3);
  margin-bottom: var(--ds-e4);
}

.hoja__titulo {
  font-size: var(--ds-texto-xl);
  font-weight: var(--ds-peso-fuerte);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.hoja__subtitulo {
  margin-top: 2px;
  color: var(--ds-texto-2);
  font-size: var(--ds-texto-sm);
}

.hoja__cabeza .boton--icono {
  margin: -6px -10px 0 0;
}

.hoja__acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-e3);
  margin-top: var(--ds-e4);
}

.hoja__acciones .boton {
  min-height: var(--ds-toque-campo);
}

@media (min-width: 600px) {
  .hoja {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: min(32rem, calc(100vw - 2rem));
    max-height: min(86dvh, 48rem);
    padding: var(--ds-e6);
    border-radius: var(--ds-radio-lg);
    box-shadow: var(--ds-elevacion-2);
    transform: translate(-50%, -50%);
  }

  .hoja__asa {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hoja {
    transition: transform var(--ds-dur-hoja) var(--ds-ease-hoja);
  }

  .hoja__fondo {
    transition: opacity var(--ds-dur-hoja) ease;
  }

  @starting-style {
    .hoja {
      transform: translateY(100%);
    }

    .hoja__fondo {
      opacity: 0;
    }
  }

  /* Salida más corta que la entrada: lo que se va no debe hacer esperar. */
  .hoja--sale .hoja {
    transform: translateY(100%);
    transition-duration: var(--ds-dur-corta);
  }

  .hoja--sale .hoja__fondo {
    opacity: 0;
    transition-duration: var(--ds-dur-corta);
  }

  /* Mientras el dedo arrastra, la hoja lo sigue sin retraso. Y si solo
     cambia el contenido de una hoja ya abierta, no se vuelve a animar. */
  .hoja--arrastrando .hoja,
  .hoja--reemplazo .hoja,
  .hoja--reemplazo .hoja__fondo {
    transition: none;
  }

  @media (min-width: 600px) {
    .hoja {
      transition:
        transform var(--ds-dur-media) var(--ds-ease-salida),
        opacity var(--ds-dur-media) var(--ds-ease-salida);
    }

    @starting-style {
      .hoja {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.96);
      }
    }

    .hoja--sale .hoja {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.98);
    }
  }
}

/* Con «reducir movimiento» nada se desplaza, pero hoja y toast aparecen con
   un desvanecido corto: un cambio de golpe también desorienta. */
@media (prefers-reduced-motion: reduce) {
  .hoja,
  .hoja__fondo {
    transition: opacity var(--ds-dur-corta) ease;
  }

  @starting-style {
    .hoja,
    .hoja__fondo {
      opacity: 0;
    }
  }

  .hoja--reemplazo .hoja,
  .hoja--reemplazo .hoja__fondo {
    transition: none;
  }
}

/* --- Toast -------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--ds-e6) + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--ds-e2);
  max-width: calc(100vw - 2rem);
  padding: var(--ds-e3) var(--ds-e4);
  border-radius: var(--ds-radio-md);
  background: var(--ds-inverso);
  color: var(--ds-en-inverso);
  box-shadow: var(--ds-elevacion-2);
  font-size: var(--ds-texto-sm);
  font-weight: var(--ds-peso-medio);
  transform: translateX(-50%);
  pointer-events: none;
}

.toast[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .toast {
    transition:
      opacity var(--ds-dur-media) var(--ds-ease-salida),
      transform var(--ds-dur-media) var(--ds-ease-salida);
  }

  @starting-style {
    .toast {
      opacity: 0;
      transform: translate(-50%, 8px);
    }
  }

  .toast--sale {
    opacity: 0;
    transform: translate(-50%, 4px);
    transition-duration: var(--ds-dur-corta);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: opacity var(--ds-dur-corta) ease;
  }

  @starting-style {
    .toast {
      opacity: 0;
    }
  }

  .toast--sale {
    opacity: 0;
  }
}

/* --- Barra superior y menú de secciones (ds/_barra.html, _nav.html) -------- */

/* Logo y título a la izquierda; el menú a la derecha, donde llega el pulgar. */
.barra-app {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-e2);
  min-height: 56px;
  padding: var(--ds-e1) var(--ds-e2) var(--ds-e1) var(--ds-e4);
  padding-top: calc(var(--ds-e1) + env(safe-area-inset-top));
  background: var(--ds-fondo);
}

.barra-app__marca {
  display: flex;
  align-items: center;
  gap: var(--ds-e3);
  min-width: 0;
  min-height: var(--ds-toque);
  color: var(--ds-texto);
  text-decoration: none;
}

.barra-app__logo {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.barra-app__titulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ds-texto-lg);
  font-weight: var(--ds-peso-fuerte);
  letter-spacing: -0.01em;
}

/* Lo que una pantalla agrega a su barra (la fecha de la venta, un "Volver"). */
.barra-app__extra {
  display: flex;
  align-items: center;
  gap: var(--ds-e2);
  margin-left: auto;
}

.navegacion {
  position: relative;
  flex-shrink: 0;
}

.navegacion__boton {
  list-style: none;
  color: var(--ds-texto);
}

.navegacion__boton::-webkit-details-marker {
  display: none;
}

.navegacion[open] > .navegacion__boton {
  background: var(--ds-superficie-2);
}

.navegacion__lista {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  width: min(16rem, calc(100vw - 2rem));
  padding: var(--ds-e2);
  border-radius: var(--ds-radio-lg);
  background: var(--ds-superficie);
  box-shadow: var(--ds-elevacion-2);
  transform-origin: top right;
}

.navegacion__enlace {
  justify-content: flex-start;
  gap: var(--ds-e3);
  width: 100%;
  padding: 0 var(--ds-e3);
  border-radius: var(--ds-radio-md);
  color: var(--ds-texto);
  font-size: var(--ds-texto-base);
  font-weight: var(--ds-peso-normal);
}

.navegacion__enlace .icono {
  color: var(--ds-texto-2);
}

.navegacion__enlace[aria-current="page"] {
  background: var(--ds-acento-suave);
  color: var(--ds-en-acento-suave);
  font-weight: var(--ds-peso-medio);
}

.navegacion__enlace[aria-current="page"] .icono {
  color: var(--ds-en-acento-suave);
}

.navegacion__salir {
  margin-top: var(--ds-e1);
  padding-top: var(--ds-e1);
  border-top: 1px solid var(--ds-borde);
}

/* El menú se abre unas veces al día: un aparecer corto desde su botón. */
@media (prefers-reduced-motion: no-preference) {
  .navegacion[open] .navegacion__lista {
    animation: ds-aparece var(--ds-dur-media) var(--ds-ease-salida);
  }
}

@keyframes ds-aparece {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}