/* ============================================================================
 * Centinela V2 — Canonical Components (DS Fase 4)
 *
 * Prefijo `c-` = "canonical component". Diseñado para coexistir con clases
 * legacy (.btn-save, .btn-add-cam, .modal, etc.) sin conflictos.
 *
 * Cualquier UI nueva DEBE usar estas clases. Migración de UI legacy ocurre
 * en PRs separadas (sustituir .btn-primary local → .c-btn-primary global).
 *
 * Spec en docs/design-system/02-components.md.
 * Dependencias: tokens en :root de control-center.css (linkear antes).
 * ========================================================================== */

/* ─── 1. Buttons ─────────────────────────────────────────────────────────── */

.c-btn,
.c-btn-primary,
.c-btn-secondary,
.c-btn-success,
.c-btn-danger,
.c-btn-ghost,
.c-btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease),
              background-color var(--duration-fast) var(--ease);
  min-height: 36px;
}

.c-btn-primary   { background: var(--gradient);  color: var(--white); border-color: transparent; }
.c-btn-secondary { background: transparent;      color: var(--light); border-color: var(--border); }
.c-btn-success   { background: var(--green);     color: var(--white); border-color: var(--green); }
.c-btn-danger    { background: var(--red);       color: var(--white); border-color: var(--red); }
.c-btn-ghost     { background: transparent;      color: var(--secondary); border-color: transparent; }
.c-btn-link      { background: transparent;      color: var(--blue); border-color: transparent;
                   padding: 0; font-weight: 500; min-height: auto; }

.c-btn-primary:hover,
.c-btn-secondary:hover,
.c-btn-success:hover,
.c-btn-danger:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.c-btn-ghost:hover { background: rgba(92,138,158,0.08); }
.c-btn-link:hover  { text-decoration: underline; }

.c-btn-primary:active,
.c-btn-secondary:active,
.c-btn-success:active,
.c-btn-danger:active {
  transform: translateY(0);
  box-shadow: none;
}

.c-btn-primary:focus-visible,
.c-btn-secondary:focus-visible,
.c-btn-success:focus-visible,
.c-btn-danger:focus-visible,
.c-btn-ghost:focus-visible,
.c-btn-link:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

.c-btn-primary[disabled],
.c-btn-secondary[disabled],
.c-btn-success[disabled],
.c-btn-danger[disabled],
.c-btn-ghost[disabled],
.c-btn-link[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  transform: none;
  box-shadow: none;
}

.c-btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); min-height: 28px; }
.c-btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-md); min-height: 44px; }

/* ─── 2. Inputs ──────────────────────────────────────────────────────────── */

.c-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.c-field-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-500);
  letter-spacing: 0.04em;
}

.c-field-hint  { font-size: var(--text-sm); color: var(--gray-400); }
.c-field-error { font-size: var(--text-sm); color: var(--red); }

.c-input,
.c-textarea,
select.c-input {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-300);
  font-family: inherit;
  font-size: var(--text-base);
  color: inherit;
  background: var(--white);
  transition: border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
  width: 100%;
}

.c-input:focus,
.c-textarea:focus,
select.c-input:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(92,138,158,0.15);
}

.c-input[disabled],
.c-textarea[disabled],
select.c-input[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--gray-100);
}

.c-textarea { min-height: 80px; resize: vertical; }

.c-input-dark {
  background: var(--primary);
  border-color: var(--border);
  color: var(--light);
}
.c-input-dark:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(92,138,158,0.20);
}

.c-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-base);
}
.c-check input[type="checkbox"],
.c-check input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* ─── 3. Cards ───────────────────────────────────────────────────────────── */

.c-card {
  background: var(--gray-800);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.c-card-light {
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--gray-900);
}

.c-card-clickable {
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
}
.c-card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.c-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.c-card-title {
  font-family: "Red Rose", serif;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
}

.c-card-body { display: flex; flex-direction: column; gap: var(--space-2); }

.c-card-footer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gray-700);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.c-card-light .c-card-footer { border-top-color: var(--gray-200); }

/* ─── 4. Modales canónicos (sin scroll global) ───────────────────────────── */

.c-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-5);
}

.c-modal {
  background: var(--white);
  color: var(--gray-900);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - var(--space-16));
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  z-index: 1100;
  overflow: hidden; /* IMPORTANTE: no scroll global, solo .c-modal-body */
}

.c-modal-dark {
  background: var(--primary);
  color: var(--light);
}

.c-modal-sm { max-width: 400px; }
.c-modal-lg { max-width: 800px; }

.c-modal-header {
  padding: var(--space-5);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-shrink: 0;
}
.c-modal-dark .c-modal-header { border-bottom-color: var(--border); }

.c-modal-title {
  font-family: "Red Rose", serif;
  font-size: var(--text-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.c-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--gray-500);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
}
.c-modal-close:hover { background: var(--gray-100); color: var(--gray-900); }
.c-modal-dark .c-modal-close:hover { background: var(--secondary); color: var(--white); }
.c-modal-close:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

.c-modal-body {
  padding: var(--space-5);
  overflow-y: auto;  /* ÚNICO scroll permitido en el modal */
  flex: 1;
}

.c-modal-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-shrink: 0;
}
.c-modal-dark .c-modal-footer { border-top-color: var(--border); }

/* ─── 5. Badges (estado) ─────────────────────────────────────────────────── */

.c-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.c-badge-success { background: rgba(34,197,94,0.15);  color: var(--green); }
.c-badge-warning { background: rgba(234,179,8,0.15);  color: var(--amber-light); }
.c-badge-danger  { background: rgba(220,38,38,0.15);  color: var(--red); }
.c-badge-info    { background: rgba(59,130,246,0.15); color: var(--blue); }
.c-badge-neutral { background: var(--gray-200);       color: var(--gray-700); }

/* ─── 6. Tabs ────────────────────────────────────────────────────────────── */

.c-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--gray-200);
}
.c-modal-dark .c-tabs { border-bottom-color: var(--border); }

.c-tab {
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-400);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease),
              border-bottom-color var(--duration-fast) var(--ease);
}

.c-tab:hover { color: var(--secondary); }

.c-tab-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.c-tab:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─── 7. Tables ──────────────────────────────────────────────────────────── */

.c-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.c-table th {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--gray-300);
  text-align: left;
  background: transparent;
}

.c-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--gray-200);
}

.c-table tbody tr {
  transition: background var(--duration-fast) var(--ease);
}
.c-table tbody tr:hover {
  background: rgba(92,138,158,0.08);
}

.c-table .num,
.c-table td.num,
.c-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── 8. Toasts ──────────────────────────────────────────────────────────── */

.c-toast {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  z-index: 1200;
  font-size: var(--text-base);
  font-weight: 500;
  animation: c-toast-slide-in var(--duration-base) var(--ease);
}

.c-toast-success { background: var(--green); color: var(--white); }
.c-toast-error   { background: var(--red);   color: var(--white); }
.c-toast-info    { background: var(--blue);  color: var(--white); }
.c-toast-warning { background: var(--amber); color: var(--white); }

.c-toast-icon { font-weight: 700; font-size: var(--text-lg); }

.c-toast-close {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.8;
  margin-left: var(--space-2);
}
.c-toast-close:hover { opacity: 1; }

@keyframes c-toast-slide-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ─── 9. Empty states ────────────────────────────────────────────────────── */

.c-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-10) var(--space-5);
  color: var(--gray-500);
}

.c-empty-state-icon {
  font-size: 48px;
  margin-bottom: var(--space-4);
  opacity: 0.6;
}

.c-empty-state-title {
  font-family: "Red Rose", serif;
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-2) 0;
  color: var(--gray-700);
}

.c-empty-state-desc {
  font-size: var(--text-base);
  color: var(--gray-500);
  margin: 0 0 var(--space-5) 0;
  max-width: 360px;
}

/* ─── 10. Loading states ─────────────────────────────────────────────────── */

.c-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: var(--secondary);
  border-radius: 50%;
  animation: c-spinner-rotate 0.8s linear infinite;
}

.c-spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.c-spinner-lg { width: 32px; height: 32px; border-width: 3px; }

@keyframes c-spinner-rotate {
  to { transform: rotate(360deg); }
}

.c-loading-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gray-500);
  font-size: var(--text-base);
}

.c-skeleton {
  background: linear-gradient(90deg,
              var(--gray-200) 0%,
              var(--gray-100) 50%,
              var(--gray-200) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: c-skeleton-pulse 1.4s ease-in-out infinite;
  min-height: 12px;
}

@keyframes c-skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── 11. Accessibility helpers ──────────────────────────────────────────── */

.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;
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  .c-toast,
  .c-spinner,
  .c-skeleton,
  .c-card-clickable,
  .c-btn-primary,
  .c-btn-secondary,
  .c-btn-success,
  .c-btn-danger {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================================
 * LEGACY ALIASES (Fase 4b — migración gradual)
 *
 * Las clases legacy `.btn-save` / `.btn-cancel` adoptan los estilos canonical
 * sin cambiar el HTML. Permite unificar look sin tocar 10+ ocurrencias en
 * control-center.html. Cargado DESPUÉS de control-center.css en el head, gana
 * en cascade.
 *
 * Próximas iteraciones añadirán más aliases (modal-bg → c-modal-overlay, etc.)
 * tras validación visual de este primer step.
 * ========================================================================== */

.btn-save,
.btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
  min-height: 44px;  /* preserva touch-target legacy */
}

.btn-save   { background: var(--gradient); color: var(--white); border-color: transparent; }
.btn-cancel { background: transparent;     color: var(--light); border-color: var(--border); }

.btn-save:hover,
.btn-cancel:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-save:active,
.btn-cancel:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-save:focus-visible,
.btn-cancel:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

.btn-save[disabled],
.btn-cancel[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  transform: none;
  box-shadow: none;
}

/* ─── Fase 4b paso 2 — alias visual de modales legacy ───────────────────────
 *
 * Override SOLO las propiedades de aspecto (background, blur). El toggle
 * display:none/.open{display:flex} legacy se mantiene intacto.
 * .modal-cancel adopta look canonical de btn-secondary.
 * ─────────────────────────────────────────────────────────────────────────── */

.modal-bg {
  /* backdrop canonical: rgba 0.6 + blur 2px (era rgba(2,13,21,0.8) plano) */
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.modal-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--light);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: filter var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
  min-height: 44px;
}

.modal-cancel:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.modal-cancel:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

.modal-cancel[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  transform: none;
  box-shadow: none;
}

/* ─── Fase 4b paso 3 — alias ft-modal-* (Fototrampeo) a canonical ──────────
 *
 * Unifica los 8 modales Fototrampeo al look canonical preservando los
 * toggles display:none/.open{display:flex} legacy.
 * ─────────────────────────────────────────────────────────────────────────── */

.ft-modal-bg {
  /* Solo añadir blur — el resto de propiedades legacy (display:none,
     z-index:8000, rgba(0,0,0,0.6)) ya están alineadas con canonical */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.ft-modal-title {
  /* Adopta tipografía display canonical (Red Rose) */
  font-family: "Red Rose", serif;
  font-size: var(--text-xl);  /* 18px (era 14px) */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}

.ft-modal-close {
  /* Hover bg canonical para affordance */
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.ft-modal-close:hover {
  background: var(--secondary);
  color: var(--white);
}
.ft-modal-close:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

.ft-modal-cancel {
  /* Adopta look canonical de btn-secondary: 14px, touch-target 44px,
     transitions canonical */
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);  /* 14px (era 13px) */
  font-weight: 600;
  line-height: 1.2;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: filter var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
}
.ft-modal-cancel:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.ft-modal-cancel:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

.ft-modal-confirm {
  /* Adopta look canonical de btn-primary: 14px, touch-target 44px,
     transitions canonical */
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);  /* 14px (era 13px) */
  font-weight: 600;
  line-height: 1.2;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: filter var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
}
.ft-modal-confirm:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.ft-modal-confirm:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}
.ft-modal-cancel[disabled],
.ft-modal-confirm[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  transform: none;
  box-shadow: none;
}

/* ─── Fase 4b paso 4 — alias lpr-modal-* (LPR) a canonical ─────────────────
 * Sub-namespace de matrículas/Dahua. 4+ modales detección. z-index 9999.
 * ─────────────────────────────────────────────────────────────────────────── */

.lpr-modal-bg {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.lpr-modal-title {
  font-family: "Red Rose", serif;
  font-size: var(--text-xl);  /* 18px (era 15px) */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}

.lpr-modal-close {
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.lpr-modal-close:hover {
  background: var(--secondary);
  color: var(--white);
}
.lpr-modal-close:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

.lpr-modal-foot button {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);  /* 14px (era 13px) */
  font-weight: 600;
  line-height: 1.2;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: filter var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
}
.lpr-modal-foot button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.lpr-modal-foot button:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}
.lpr-modal-foot button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  transform: none;
  box-shadow: none;
}

/* ─── Fase 4b paso 5 — alias windy-modal-* (mapa weather) a canonical ──────
 * El modal Windy en mapa de vientos. Pequeño pero usa Red Rose ya.
 * ─────────────────────────────────────────────────────────────────────────── */

.windy-modal-header h2 {
  /* Bump a tamaño canonical (era 14px) */
  font-size: var(--text-xl);  /* 18px */
}

.windy-modal-close {
  /* Hover ya existía; añadir focus visible canonical */
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.windy-modal-close:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}