/* ============================================================
   AGUA CIRCULAR — polish.css
   Fase 4: cards, modales, empty states, iconos Lucide, a11y.
   Ref: design-system.md §7.7–§7.11, §8.4, §9
   ============================================================ */

/* ── Iconografía Lucide / SVG inline (§7.11) ─────────────────── */
.ico {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: middle;
}

.ico-xs  { width: 14px; height: 14px; }
.ico-sm  { width: 16px; height: 16px; }
.ico-md  { width: 18px; height: 18px; }
.ico-lg  { width: 20px; height: 20px; }
.ico-xl  { width: 24px; height: 24px; }
.ico-2xl { width: 48px; height: 48px; stroke-width: 1.5; }

/* Lucide genera <svg> dentro de [data-lucide] */
[data-lucide] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 0;
}

[data-lucide] svg,
i[data-lucide] svg {
  width: 1em;
  height: 1em;
  stroke-width: 1.75;
}

.btn .ico,
.btn [data-lucide] {
  width: 16px;
  height: 16px;
}

.ac-module-icon svg,
.ac-module-icon .ico {
  width: 24px;
  height: 24px;
}

/* Botones solo icono — mínimo táctil 40px (§9) */
.btn-icon-only,
.btn.ico-btn {
  min-width: 40px;
  min-height: 40px;
  padding: 0;
}

/* ── Cards (§7.7) ───────────────────────────────────────────── */
.ac-card,
.cm-card.ac-card-ds {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.ac-card-header,
.cm-card-header.ac-card-header-ds {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid hsl(var(--border));
}

.ac-card-title,
.cm-card-title.ac-card-title-ds {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: hsl(var(--foreground));
  letter-spacing: var(--tracking-tight);
}

.ac-card-body,
.cm-card.ac-card-ds {
  padding: var(--space-6);
}

.cm-card.ac-card-ds.cm-card-sm {
  padding: var(--space-5);
}

.ac-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.35);
}

/* Panels Bootstrap → card visual */
html body .panel {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid hsl(var(--border));
}

html body .panel-default > .panel-heading {
  background: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-weight: 600;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

html body .panel-default {
  border-color: hsl(var(--border));
}

html body .panel-body {
  background: hsl(var(--card));
}

/* ── Modales Bootstrap 3 (§7.8) ─────────────────────────────── */
html body .modal-backdrop.in {
  background: hsl(215 33% 17% / 0.45);
  backdrop-filter: blur(4px);
}

html body .modal-content {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  background: hsl(var(--card));
  overflow: hidden;
}

html body .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}

html body .modal-header .modal-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: hsl(var(--foreground));
  letter-spacing: var(--tracking-tight);
  margin: 0;
  line-height: var(--leading-snug);
}

html body .modal-header .close {
  position: static;
  float: none;
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
  border: 1px solid transparent;
  transition: background var(--duration-fast), color var(--duration-fast);
}

html body .modal-header .close:hover,
html body .modal-header .close:focus {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  opacity: 1;
}

html body .modal-body {
  padding: var(--space-6);
  font-size: var(--text-sm);
  color: hsl(var(--foreground));
}

html body .modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.35);
}

html body .modal-dialog {
  margin: var(--space-8) auto;
}

@media (min-width: 768px) {
  html body .modal-dialog {
    max-width: 540px;
  }
  html body .modal-dialog.modal-lg {
    max-width: 720px;
  }
  html body .modal-dialog.modal-sm {
    max-width: 400px;
  }
}

/* Animación entrada (respeta reduced-motion abajo) */
@keyframes ac-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html body .modal.in .modal-dialog {
  animation: ac-modal-in var(--duration-normal) var(--ease-out);
}

/* Scoped modals (fp-scope) — refuerzo sin romper layout existente */
.fp-scope .modal-content,
.tt-scope .modal-content {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

/* ── Alerts mejorados (§7.10) ───────────────────────────────── */
html body .alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  border-left-width: 4px;
  border-left-style: solid;
}

html body .alert::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  opacity: 0.85;
}

html body .alert-info::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}

html body .alert-success::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

html body .alert-warning::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='m12 9 2 6h-4l2-6ZM12 3v2'/%3E%3C/svg%3E");
}

html body .alert-danger::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
}

/* ── Empty state (§8.4) ─────────────────────────────────────── */
.ac-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  min-height: 240px;
  background: hsl(var(--card));
  border: 1px dashed hsl(var(--border-strong));
  border-radius: var(--radius-md);
}

.ac-empty-state .ac-empty-icon,
.ac-empty-state [data-lucide].ac-empty-icon {
  width: 48px;
  height: 48px;
  color: hsl(var(--muted-foreground));
  margin-bottom: var(--space-4);
}

.ac-empty-state .ac-empty-icon svg {
  width: 48px;
  height: 48px;
}

.ac-empty-state h4,
.ac-empty-state .ac-empty-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 600;
  color: hsl(var(--foreground));
}

.ac-empty-state p,
.ac-empty-state .ac-empty-desc {
  margin: 0 0 var(--space-6);
  max-width: 360px;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  line-height: var(--leading-relaxed);
}

/* DataTables empty row */
html body table.dataTable td.dataTables_empty {
  padding: var(--space-12) var(--space-6) !important;
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: var(--text-sm);
  background: hsl(var(--muted) / 0.2) !important;
}

/* ── Utilidades elevación / radio ───────────────────────────── */
.ac-shadow-xs  { box-shadow: var(--shadow-xs); }
.ac-shadow-sm  { box-shadow: var(--shadow-sm); }
.ac-shadow-md  { box-shadow: var(--shadow-md); }
.ac-shadow-lg  { box-shadow: var(--shadow-lg); }
.ac-shadow-xl  { box-shadow: var(--shadow-xl); }

.ac-rounded    { border-radius: var(--radius); }
.ac-rounded-md { border-radius: var(--radius-md); }
.ac-rounded-lg { border-radius: var(--radius-lg); }
.ac-rounded-full { border-radius: var(--radius-full); }

/* ── Accesibilidad (§9) ─────────────────────────────────────── */
.sr-only,
.ac-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ac-skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 10000;
  padding: var(--space-2) var(--space-4);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: top var(--duration-fast);
}

.ac-skip-link:focus {
  top: var(--space-4);
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Campos obligatorios con error visible (color + peso) */
.field.has-error label,
.field.has-error .label {
  color: hsl(var(--destructive));
}

.field.has-error .input,
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: hsl(var(--destructive));
}

.field .field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: hsl(var(--destructive));
  margin-top: var(--space-1);
}

.field .field-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: hsl(var(--destructive-soft));
  color: hsl(var(--destructive-soft-foreground));
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  html body .modal.in .modal-dialog {
    animation: none;
  }

  html body .btn,
  html body .action-button,
  html body .ac-module-card {
    transition: none;
  }
}