/* UI default: los componentes comunes (decisión 0016). Uso y acuerdos: templates/ui/README.md.

   Tres capas: la paleta (--color-* de main.css) -> los tokens de cada componente (--ui-*, aquí)
   -> los componentes (.ui-*). La app cambia la paleta o los tokens en su brand.css, que se carga
   después; no edita este archivo. */
:root {
  --ui-confirm-bg: var(--color-primary);
  --ui-confirm-bg-hover: var(--color-primary-hover);
  --ui-confirm-text: #FFF;
  --ui-confirm-shadow: 0 1px 3px rgba(27, 58, 92, 0.25);
  --ui-confirm-shadow-hover: 0 2px 6px rgba(27, 58, 92, 0.3);
  --ui-delete-bg: var(--color-danger);
  --ui-delete-bg-hover: var(--color-danger-hover);
  --ui-delete-text: #FFF;
  --ui-delete-shadow: 0 1px 3px rgba(220, 53, 69, 0.25);
}

/* Se combinan con .btn, que da el tamaño (.btn-sm, .btn-lg) y el foco. Se ven como .btn-primary y
   .btn-danger-solid de main.css, con el color de su token. */
.ui-btn-confirm {
  background: var(--ui-confirm-bg);
  border-color: var(--ui-confirm-bg);
  color: var(--ui-confirm-text);
  box-shadow: var(--ui-confirm-shadow);
}
.ui-btn-confirm:hover {
  background: var(--ui-confirm-bg-hover);
  border-color: var(--ui-confirm-bg-hover);
  color: var(--ui-confirm-text);
  box-shadow: var(--ui-confirm-shadow-hover);
}

.ui-btn-delete {
  background: var(--ui-delete-bg);
  border-color: var(--ui-delete-bg);
  color: var(--ui-delete-text);
  box-shadow: var(--ui-delete-shadow);
}
.ui-btn-delete:hover {
  background: var(--ui-delete-bg-hover);
  border-color: var(--ui-delete-bg-hover);
  color: var(--ui-delete-text);
}

/* Las acciones de una confirmación (confirm.html): un <fieldset>, para que hx-disabled-elt
   deshabilite Cancelar y Aceptar juntos. Sin el borde ni el relleno del fieldset, y con el
   layout de .modal-actions. */
.ui-confirm-actions {
  border: 0;
  padding: 0;
  margin: var(--space-lg) 0 0;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}

/* Un nombre largo sin espacios (un correo, un código) no desborda la confirmación. */
.ui-confirm .modal-title,
.ui-confirm p { overflow-wrap: anywhere; }