/**
 * Incremento visual 5 (docs/24-incremento-visual-5-dialogos-feedback-diseno.md
 * sección 8.3) — apariencia compartida de accessibleDialog.js/dialogHelpers.js
 * para los tres paneles. Traído desde public/staff/styles.css (Fase 7
 * Incremento D1/D2, único consumidor hasta ahora) — mismos literales,
 * ahora vía tokens en los tres temas. `.btn-urgent` es estructural aquí,
 * SIN color — su color (--action-urgent-soft-*) vive solo en
 * customer/styles.css, único tema que lo usa, para evitar una referencia
 * huérfana al escanear este archivo contra Cocina/Staff.
 */

.accessible-dialog {
  background: var(--surface-bg);
  color: var(--text-primary);
  border: none;
  border-radius: 10px;
  padding: 20px;
  max-width: 480px;
  width: calc(100% - 32px);
  max-height: min(90vh, calc(100vh - 2 * var(--space-md)));
  overflow-y: auto;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-raised, none);
}
.accessible-dialog::backdrop { background: var(--overlay-backdrop-bg); }
.accessible-dialog[role="dialog"] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface-bg);
  z-index: 1000;
}
.accessible-dialog h2 { margin-top: 0; padding-right: 42px; font-size: calc(18px * var(--customer-text-scale, 1)); }
.accessible-dialog-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--surface-bg);
  color: var(--text-primary);
  font-size: calc(26px * var(--customer-text-scale, 1));
  cursor: pointer;
}
.accessible-dialog-dismiss:disabled { opacity: .5; cursor: wait; }
.order-confirm-summary { white-space: pre-line; }
.accessible-dialog-content > button + button { margin-left: 8px; margin-top: 8px; }
.accessible-dialog-content { margin-top: 10px; }

.accessible-dialog-content .secret-value {
  display: block;
  width: 100%;
  padding: 10px;
  font-family: monospace;
  font-size: calc(13px * var(--customer-text-scale, 1));
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--field-bg);
  color: var(--field-text);
  user-select: all;
}

.accessible-dialog-content .reason-error { color: var(--state-danger-fg); }
.accessible-dialog-content .severe-emphasis { color: var(--state-danger-fg); font-weight: 700; }

/* Incremento visual 6 (docs/25 secciones D.3/D.5) — contrato único de
   envoltorios de icono: la clase de tamaño vive siempre en el envoltorio,
   nunca en el propio <svg>, que se estira para llenarlo. dialog.css es la
   única hoja compartida por los tres paneles (ya cargada por los tres
   index.html) — evita duplicar estas tres reglas en cada styles.css. */
.icon, .icon--lg, .icon--xl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}
.icon      { width: 18px; height: 18px; }
.icon--lg  { width: 20px; height: 20px; }
.icon--xl  { width: 40px; height: 40px; }
.icon svg, .icon--lg svg, .icon--xl svg { width: 100%; height: 100%; display: block; }

/* Icono de advertencia de los siete diálogos críticos (sección D.5) — vive
   dentro de .accessible-dialog-content, nunca junto al <h2>. */
.dialog-warning-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}
.dialog-warning-icon {
  color: var(--state-danger-fg);
}

.accessible-dialog-content textarea {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 4px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  min-height: 80px;
  max-height: 200px;
  overflow-y: auto;
  resize: vertical;
  background: var(--field-bg);
  color: var(--field-text);
}
.accessible-dialog-content textarea[aria-invalid="true"] { border-color: var(--state-danger-fg); }

.accessible-dialog-content label { display: block; font-size: calc(13px * var(--customer-text-scale, 1)); font-weight: 600; margin-top: 8px; }
.accessible-dialog-content input, .accessible-dialog-content select {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 4px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  min-height: 44px;
}

.accessible-dialog-content button {
  min-height: 44px;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  background: var(--action-primary-strong-bg);
  color: var(--action-primary-strong-text);
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  margin-right: 6px;
}
.accessible-dialog-content button.btn-close {
  background: var(--state-danger-strong-bg);
  color: var(--state-danger-strong-text);
}
/* .btn-urgent: contrato estructural compartido, sin ningún token de color
   de ningún tema — el color es exclusivo de customer/styles.css. */
.accessible-dialog-content button.btn-urgent {
  min-height: 44px;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  margin-right: 6px;
}
.accessible-dialog-content button:disabled { opacity: .5; cursor: not-allowed; }
.accessible-dialog-content button[aria-busy="true"] { opacity: .7; cursor: progress; }

.accessible-dialog *:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}