/* ═══════════════════════════════════════════════════════════
   Blocks (la B de CUBE) — componentes con nombre propio.
   Un bloque se nombra por lo que ES, no por como se ve: cambiar su aspecto
   no obliga a tocar 58 plantillas.
   ═══════════════════════════════════════════════════════════ */

/* Boton. El blanco tactil viene del token, no de una clase que pueda
   desaparecer al recompilar: eso ya paso. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-block-size: var(--tap-target);
  min-inline-size: var(--tap-target);
  padding-inline: var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--size-step-0);
  font-weight: 500;
  cursor: pointer;
  background-color: var(--color-stone-100);
  color: var(--ink);
}
.button:hover:not(:disabled) { background-color: var(--color-stone-200); }
.button--primary { background-color: var(--color-teal-600); color: #fff; }
.button--primary:hover:not(:disabled) { background-color: var(--color-teal-700); }
.button--recipe  { background-color: var(--color-purple-600); color: #fff; }
.button--danger  { background-color: var(--color-danger); color: #fff; }
.button--quiet   { background-color: transparent; color: var(--ink-muted); }
.button--warn    { background-color: var(--color-amber-600); color: #fff; }
.button--ok      { background-color: var(--color-success); color: #fff; }
.button--full    { inline-size: 100%; }
.button--quiet:hover:not(:disabled) { background-color: var(--color-stone-100); }

/* Tarjeta / panel */
.card {
  background-color: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

/* Etiqueta de estado */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-full);
  font-size: var(--size-step--1);
  background-color: var(--color-stone-100);
  color: var(--ink-muted);
}
.badge--ok      { background-color: var(--color-teal-100);   color: var(--color-teal-800); }
.badge--warn    { background-color: var(--color-amber-100);  color: var(--color-amber-600); }
.badge--danger  { background-color: #fee2e2;                 color: var(--color-danger); }
.badge--custom  { background-color: var(--color-purple-100); color: var(--color-purple-700); }

/* Aviso a pagina completa (la region de error de htmx) */
.alert {
  border: 1px solid #fecaca;
  background-color: #fef2f2;
  color: #b91c1c;
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--size-step-0);
}
.alert--warn { border-color: var(--color-amber-200); background-color: var(--color-amber-50); color: var(--color-amber-600); }
.alert--ok   { border-color: #bbf7d0; background-color: #f0fdf4; color: #15803d; }
.alert--info { border-color: var(--line); background-color: var(--color-stone-50); color: var(--ink); }

.alert--floating {
  position: fixed;
  inset-block-start: var(--space-xs);
  inset-inline: var(--space-xs);
  z-index: 50;
  box-shadow: var(--shadow-md);
}

/* Panel lateral (cajon de grupos) */
.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 18rem;
  z-index: 30;
  overflow-y: auto;
  background-color: var(--surface-card);
  border-inline-start: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

/* Dialogo modal sobre velo. El contenido se ancla arriba y el velo desplaza:
   centrarlo verticalmente hace que un dialogo mas alto que la pantalla se
   desborde hacia ARRIBA, fuera de alcance. Eso ya rompio el selector semanal. */
.modal-veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: var(--space-lg) var(--space-md);
  background-color: rgb(0 0 0 / 0.3);
}
.modal {
  inline-size: min(22rem, 100%);
  background-color: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}
.modal__results { max-block-size: 12rem; overflow-y: auto; }

/* Cabecera pegajosa del cajon */
.drawer__head {
  position: sticky;
  inset-block-start: 0;
  padding: var(--space-sm) var(--space-md);
  border-block-end: 1px solid var(--line);
  background-color: var(--surface-card);
}
.drawer__body { padding: var(--space-sm) var(--space-md); }

/* Fila de listado con acciones a la derecha.
   Es un BLOQUE y no un .cluster a proposito: cluster envuelve, y al envolver
   cambia donde cae el centro de la fila. El conductor abre el detalle pulsando
   la fila —su centro— y ese centro empezo a caer sobre un boton de accion cuyo
   `click consume` corta la propagacion: el detalle no abria. Una fila de listado
   no envuelve. */
.list-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-block: var(--space-xs);
  border-block-end: 1px solid var(--line);
  cursor: pointer;
}
.list-row__actions { display: flex; flex-wrap: nowrap; gap: var(--space-3xs); }

/* El nombre ocupa TODO el espacio libre, y por eso el centro de la fila cae siempre
   sobre el. El conductor abre el detalle pulsando la fila, y Playwright pulsa el
   centro: con el nombre encogido, ese centro caia sobre el boton "Editar" —cuyo
   `click consume` corta la propagacion— y en vez del detalle se abria el formulario.
   Dependia de cuanto midiera un boton, que es exactamente lo que cambia al migrar
   de utilidades a bloques. Ahora no depende de eso. */
.list-row__main { flex: 1 1 auto; min-inline-size: 0; }
.list-row__actions .button { padding-inline: var(--space-xs); }

/* Rejilla de distribucion: la tabla del plan diario. */
.alloc-grid th, .alloc-grid td { padding: var(--space-3xs) var(--space-2xs); }
.alloc-grid thead th { font-weight: 400; }
.alloc-grid__cell { display: flex; align-items: center; gap: var(--space-3xs); }
.alloc-grid__value { inline-size: 3.5rem; text-align: center; background: transparent; border: 0; min-block-size: auto; padding: 0; }
.alloc-grid__step {
  inline-size: var(--tap-target); min-inline-size: var(--tap-target);
  min-block-size: var(--tap-target);
  border: 0; background: transparent; cursor: pointer; border-radius: var(--radius-md);
}
.alloc-grid__step:hover:not(:disabled) { background-color: var(--color-stone-100); }

/* Pasos del asistente */
.steps { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-end: var(--space-md); }
.step {
  min-block-size: var(--tap-target); padding-inline: var(--space-sm);
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  border-radius: var(--radius-md); border: 1px solid var(--line);
  background-color: var(--surface-card); color: var(--ink-muted);
  font-size: var(--size-step-0); cursor: pointer;
}
.step[data-active="true"] { border-color: var(--color-teal-600); color: var(--color-teal-800); background-color: var(--color-teal-50); }

/* Cabecera de totales del workspace */
.ws-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-md); margin-block-end: var(--space-md); font-size: var(--size-step-0); }

/* Ficha compacta: una seleccion ya hecha, con su boton de quitar. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-md);
  background-color: var(--color-stone-100);
  font-size: var(--size-step--1);
}
.chip .button { min-block-size: 1.5rem; min-inline-size: 1.5rem; padding-inline: var(--space-3xs); }

/* Vista del plan del paciente: tarjetas de lectura, sin acciones. */
.panel {
  background-color: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-block-end: var(--space-md);
}
.panel__title {
  font-size: var(--size-step-0); font-weight: 500;
  color: var(--ink-muted); text-transform: uppercase;
  letter-spacing: 0.05em; margin-block-end: var(--space-sm);
}
.stat { text-align: center; padding: var(--space-sm); border-radius: var(--radius-lg); background-color: var(--color-stone-50); }
.stat__value { font-size: var(--size-step-3); font-weight: 600; color: var(--color-stone-900); }
.stat__label { font-size: var(--size-step--1); color: var(--ink-muted); }
.line-item { display: flex; align-items: center; justify-content: space-between; font-size: var(--size-step-0); padding-inline-start: var(--space-xs); }
.subpanel { border: 1px solid var(--color-stone-100); border-radius: var(--radius-lg); padding: var(--space-md); }

/* Encabezado de pagina: titulo + enlace de vuelta + acciones. */
/* Tarjeta con acento de aviso, para un estado pendiente que no es un error. */
.card--warn { border-color: var(--color-amber-200); background-color: var(--color-amber-50); }

/* Cebra de lectura: la alternancia es del contenedor, no de cada fila. Estaba
   como `{% if forloop.counter|divisibleby:2 %}` en la plantilla, que obliga a la
   plantilla a saber contar para decidir un color. */
.list-zebra > * { border-radius: var(--radius-md); padding: var(--space-2xs) var(--space-sm); }
.list-zebra > :nth-child(even) { background-color: var(--color-stone-50); }

/* Envoltorio de pagina: relleno exterior y ancho maximo. Lo repetian cuarenta
   plantillas como `px-4 py-6 md:px-8 md:py-8 max-w-2xl`. El ancho se elige con
   --measure en el sitio de uso, que es donde se sabe si la pagina es un formulario
   estrecho o una tabla ancha. */
.page {
  margin-inline: auto;
  max-inline-size: var(--measure, 80rem);
  padding: var(--space-lg) var(--space-md);
}
@media (min-width: 48rem) {
  .page { padding: var(--space-xl); }
}

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-block-end: var(--space-lg); }
.page-title { font-family: var(--font-display); font-size: var(--size-step-3); color: var(--color-stone-900); }
.back-link { display: inline-flex; align-items: center; gap: var(--space-3xs); font-size: var(--size-step-0); color: var(--color-teal-600); }
.back-link:hover { color: var(--color-teal-700); }
.icon { inline-size: 1rem; block-size: 1rem; flex: none; }
.icon--sm { inline-size: 0.875rem; block-size: 0.875rem; }

/* Campo de formulario con etiqueta encima. */
.field { display: block; margin-block-end: var(--space-md); }
.field__label { display: block; font-size: var(--size-step--1); color: var(--ink-muted); margin-block-end: var(--space-3xs); }
.field__readout {
  inline-size: 100%; min-block-size: var(--tap-target);
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-stone-300); border-radius: var(--radius-md);
  background-color: var(--color-stone-50); color: var(--color-stone-900);
  font-family: var(--font-mono);
}
.section-title { font-size: var(--size-step-0); font-weight: 500; color: var(--color-stone-700); margin-block-end: var(--space-sm); }

/* Dato con etiqueta encima (fichas de paciente). */
.datum__label { font-size: var(--size-step--1); color: var(--color-stone-400); margin-block-end: var(--space-3xs); }
.datum__value { font-size: var(--size-step-2); font-family: var(--font-mono); font-weight: 500; color: var(--color-stone-900); }

/* Tarjeta enlazada de una lista (acciones del paciente). */
.link-card {
  display: flex; align-items: center; gap: var(--space-sm);
  background-color: var(--surface-card);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-md);
  text-decoration: none; color: inherit;
}
.link-card:hover { border-color: var(--color-teal-300); }
.group-title { font-size: var(--size-step-0); font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-block-end: var(--space-md); }

/* Caja de dato numerico (grupos de alimentos) */
.figure-box { background-color: var(--color-stone-50); border-radius: var(--radius-lg); padding: var(--space-md); text-align: center; }
.figure-box__label { font-size: var(--size-step--1); color: var(--ink-muted); font-weight: 500; margin-block-end: var(--space-3xs); }
.figure-box__value { font-size: var(--size-step-3); font-family: var(--font-mono); font-weight: 500; color: var(--color-stone-800); }

/* Campo de una fila (formularios en linea) */
.input--inline { min-block-size: var(--tap-target); border-radius: var(--radius-md); border: 1px solid var(--color-stone-300); padding-inline: var(--space-sm); font-size: var(--size-step-0); }
.input--compact { flex: 1; border-radius: var(--radius-md); border: 1px solid var(--color-stone-300); background-color: var(--color-stone-50); padding: var(--space-3xs) var(--space-2xs); font-size: var(--size-step--1); min-block-size: auto; }

/* Marca flotante en una tarjeta */
.card-flag { position: absolute; inset-block-start: var(--space-sm); inset-inline-end: var(--space-sm); z-index: 10; }

/* Pantalla centrada de un solo panel (diagnostico, verificacion) */
.single-screen { min-block-size: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-2xl) var(--space-md); }
.single-screen__body { inline-size: 100%; max-inline-size: 32rem; }

/* Opcion tipo boton sobre un radio oculto */
.choice {
  display: flex; align-items: center; justify-content: center;
  min-block-size: var(--tap-target);
  border-radius: var(--radius-md); border: 1px solid var(--color-stone-300);
  cursor: pointer; font-size: var(--size-step-0); font-weight: 500;
}
.choice:hover { background-color: var(--color-stone-100); }
.choice:has(input:checked) { border-color: var(--color-teal-600); background-color: var(--color-teal-50); color: var(--color-teal-800); }
.field-group__label { display: block; font-size: var(--size-step-0); font-weight: 600; color: var(--color-stone-800); margin-block-end: var(--space-sm); }
.readout { background-color: var(--color-stone-50); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md); text-align: center; }
.readout__label { font-size: var(--size-step--1); color: var(--ink-muted); margin-block-end: var(--space-3xs); }
.readout__value { font-family: var(--font-mono); font-size: var(--size-step-2); font-weight: 600; color: var(--color-stone-800); }

/* Campo de formulario vertical: etiqueta encima, control debajo. */
.form-field { display: block; }
.form-field__label { display: block; font-size: var(--size-step-0); font-weight: 500; color: var(--color-stone-700); margin-block-end: var(--space-3xs); }
.form-field__input {
  display: block; inline-size: 100%;
  min-block-size: var(--tap-target);
  padding-inline: var(--space-sm);
  border-radius: var(--radius-md); border: 1px solid var(--color-stone-300);
  background-color: var(--color-stone-50); color: var(--color-stone-900);
}