/* ============================================================
   components.css — capa de componentes PROMOVIDOS.
   Hogar de los componentes que se gradúan desde los prototipos
   vía /promote-component (Fase 3 del plan de sistema de diseño).

   Reglas:
   - Solo var(--token). Nunca colores/tamaños crudos (lo bloquea el CI).
   - Un componente = una clase (o bloque de clases) documentada en design-system/.
   - Los componentes base ya existentes (botón, card, kpi-card, badge, campo,
     help-text, títulos) viven en main.css y NO se mueven aquí: se documentan
     igual en la galería. Esta capa es para lo NUEVO que se promueva.

   Orden de carga en cada vista:
     tokens.css → main.css → components.css
   ============================================================ */

/* ------------------------------------------------------------
   [hidden] — utilidad base.
   El atributo `hidden` de HTML trae display:none, pero cualquier
   componente con display:flex/grid lo pisa por especificidad. Esta
   regla lo restituye para poder ocultar con `el.hidden = true` en vez
   de manipular `style.display`, que deja estilos inline en el markup.
   ------------------------------------------------------------ */
[hidden] { display: none !important; }

/* ------------------------------------------------------------
   dialog — diálogo modal de decisión.  (v10, primer promovido)

   Para preguntas que deben responderse en el momento en que
   aparecen, en vez de vivir como configuración permanente en
   pantalla. Si la pregunta puede contestarse más tarde sin
   bloquear nada, NO uses un diálogo: usa un control en línea.

   Estructura mínima:
     .dialog-backdrop > .dialog > .dialog__title
                                + .dialog__desc
                                + .dialog__options | contenido
                                + .dialog__actions

   El contenedor .dialog-backdrop se oculta con el atributo
   [hidden]. Quien lo abra es responsable de: mover el foco al
   diálogo, atrapar el Tab, cerrar con Esc y devolver el foco al
   elemento que lo disparó.
   ------------------------------------------------------------ */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-scrim);
}
.dialog-backdrop[hidden] { display: none; }

.dialog {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  font-family: var(--font-family);
}
.dialog__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}
.dialog__desc {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.dialog__options {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
/* Cancelar (secundaria) a la izquierda y la que avanza a la derecha: separadas
   para que no se confundan y con la primaria donde termina la lectura. */
.dialog__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.dialog__actions .btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}