/* ============================================================================
 * 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; }

/* Input sobre superficie oscura (p.ej. dentro de .c-modal-dark, que es --primary).
   Usa --deep (más profundo que --primary) para que el campo tenga contraste y no
   se funda con el fondo del modal. Antes era --primary → campo invisible. */
.c-input-dark {
  background: var(--deep);
  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);
}
/* Un <select class="c-input c-input-dark"> se quedaba con fondo BLANCO + texto
   heredado (gris claro) = ilegible ("sale en negro"): `select.c-input`
   (elemento+clase) gana en especificidad a `.c-input-dark` (solo clase). Igualamos
   la especificidad para que el dark gane por orden de fuente. Las <option> también,
   para que el desplegable nativo no salga claro. Caso real: el selector de intervalo
   de las rondas programadas de drones. */
select.c-input-dark {
  background: var(--deep);
  color: var(--light);
}
select.c-input-dark option {
  background: var(--deep);
  color: var(--light);
}

.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;
  /* wrap: con 4+ acciones (Editar/Desactivar/QR/Borrar en sedes GMAO) la fila
     desbordaba la tarjeta por la izquierda (flex-end sin wrap) y se pisaban. */
  flex-wrap: wrap;
  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;
}

/* ─── Selector de idioma (i18n Fase 4) ──────────────────────────────────────
   Toggle segmentado ES|EN. El estado activo lo gestiona i18n-bootstrap
   (_syncLangSwitch) añadiendo .active al botón del idioma vigente. */
.lang-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.lang-switch button {
  background: transparent;
  border: none;
  color: var(--gray-500);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.lang-switch button:hover { color: var(--light); }
.lang-switch button.active {
  background: var(--primary);
  color: var(--white);
}


/* ─── Ventana de configuración de zonas (zcfg, Ajustes → Detección) ───────── */
.zcfg-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; }
.zcfg-canvas-wrap { position:relative; width:100%; background:#000; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:16/9; }
.zcfg-canvas-wrap img { width:100%; height:100%; object-fit:contain; display:block; }
.zcfg-canvas-wrap canvas { position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; }
.zcfg-side { display:flex; flex-direction:column; gap:12px; }
.zcfg-form { display:flex; flex-direction:column; gap:8px; }
.zcfg-list { display:flex; flex-direction:column; gap:6px; max-height:240px; overflow-y:auto; }
.zcfg-row { display:flex; align-items:center; gap:8px; font-size:var(--text-sm); padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-md); color:var(--light); }
.zcfg-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.zcfg-en { display:inline-flex; align-items:center; gap:4px; margin-left:auto; color:var(--gray-500); font-size:var(--text-xs); }
@media (max-width:768px){ .zcfg-grid { grid-template-columns:1fr; } }

/* F2a: pantalla de upsell cuando el tenant navega a un módulo no contratado. */
.upsell-card {
  max-width: 440px;
  margin: 48px auto;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}
.upsell-card h2 { margin: 0; font-size: var(--text-xl); color: var(--white); }
.upsell-card .upsell-mod { margin: 0; font-weight: 600; color: var(--secondary, #5C8A9E); }
.upsell-card .upsell-desc { margin: 0; color: var(--gray-400); font-size: var(--text-sm); }

/* ─── Wizard "Nueva vigilancia" (spec 2026-07-07) ─────────────────────────
   Modal en tema oscuro (.c-modal-dark, fondo --primary); las tarjetas usan
   --deep (más oscuro) para separarse. Contrastes verificados WCAG AA. */
.vw-modal.c-modal { max-width: 720px; }
.vw-modal .c-modal-body { display: flex; flex-direction: column; gap: var(--space-4); }

.vw-progress { display: flex; flex-direction: column; gap: var(--space-2); }
.vw-progress-track { height: 6px; border-radius: var(--radius-pill); background: var(--deep); overflow: hidden; }
.vw-progress-fill { height: 100%; border-radius: var(--radius-pill); background: var(--gradient); transition: width var(--duration-base) var(--ease); }
.vw-progress-label { font-size: var(--text-sm); font-weight: 600; color: var(--light); }

.vw-step-title { font-family: "Red Rose", serif; font-size: var(--text-xl); font-weight: 700; margin: 0; color: var(--white); }
.vw-step-hint { font-size: var(--text-base); color: var(--light); margin: 0; }

.vw-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.vw-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 96px; padding: var(--space-4); background: var(--deep); border: 2px solid var(--border); border-radius: var(--radius-lg); color: var(--light); cursor: pointer; text-align: center; transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease); }
.vw-card:hover { border-color: var(--secondary); }
.vw-card:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.vw-card.active { border-color: var(--secondary); background: rgba(92,138,158,0.18); color: var(--white); } /* --secondary @ 18% */
.vw-card-ico { font-size: 28px; line-height: 1; }
.vw-card-label { font-size: var(--text-base); font-weight: 600; }
.vw-card-full { grid-column: 1 / -1; }

.vw-panel { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--deep); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.vw-panel-title { font-size: var(--text-md); font-weight: 600; color: var(--white); margin: 0; }

.vw-cam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.vw-cam { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1); background: var(--deep); border: 2px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; overflow: hidden; transition: border-color var(--duration-fast) var(--ease); }
.vw-cam:hover { border-color: var(--secondary); }
.vw-cam:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.vw-cam.active { border-color: var(--secondary); background: rgba(92,138,158,0.18); } /* --secondary @ 18% */
.vw-cam-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; border-radius: var(--radius-md); display: block; }
.vw-cam-ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9; font-size: 28px; color: var(--gray-500); background: #000; border-radius: var(--radius-md); }
.vw-cam-name { font-size: var(--text-sm); font-weight: 600; color: var(--light); padding: 0 var(--space-1) var(--space-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-cam-all { align-items: center; justify-content: center; min-height: 120px; text-align: center; color: var(--light); }
.vw-cam-all-ico { font-size: 32px; line-height: 1; }
.vw-cam-all-label { font-size: var(--text-sm); font-weight: 600; }

.vw-options { display: flex; flex-direction: column; gap: var(--space-2); }
.vw-opt { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--deep); border: 2px solid var(--border); border-radius: var(--radius-lg); color: var(--light); cursor: pointer; transition: border-color var(--duration-fast) var(--ease); }
.vw-opt:hover { border-color: var(--secondary); }
.vw-opt:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.vw-opt.active { border-color: var(--secondary); background: rgba(92,138,158,0.18); color: var(--white); } /* --secondary @ 18% */
.vw-opt-label { font-size: var(--text-base); font-weight: 600; }
.vw-opt-hint { font-size: var(--text-sm); color: var(--gray-500); }
.vw-opt.active .vw-opt-hint { color: var(--light); }

.vw-days { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vw-day { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2); background: var(--deep); border: 2px solid var(--border); border-radius: var(--radius-md); color: var(--light); font-weight: 600; cursor: pointer; }
.vw-day:hover { border-color: var(--secondary); }
.vw-day:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.vw-day.active { border-color: var(--secondary); background: var(--gradient); color: var(--white); }

.vw-times { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.vw-times .c-field { flex: 1; min-width: 120px; }

.vw-group { display: flex; flex-direction: column; gap: var(--space-2); }
.vw-group-title { font-size: var(--text-md); font-weight: 600; color: var(--white); margin: 0; }

.vw-check { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--deep); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; }
.vw-check > input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--secondary); cursor: pointer; }
.vw-check-body { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; }
.vw-check-label { font-size: var(--text-base); font-weight: 600; color: var(--white); }
.vw-check-hint { font-size: var(--text-sm); color: var(--gray-500); }
.vw-check-sub { margin-top: var(--space-2); }

.vw-summary { padding: var(--space-4); background: var(--deep); border-left: 3px solid var(--secondary); border-radius: var(--radius-md); font-size: var(--text-md); line-height: 1.55; color: var(--light); }
.vw-summary strong { color: var(--white); font-weight: 700; }

.vw-err { min-height: 0; }
.vw-err:not(:empty) { margin: 0 var(--space-5); padding: var(--space-2) var(--space-3); background: rgba(220,38,38,0.15); border: 1px solid var(--red); border-radius: var(--radius-md); color: var(--white); font-size: var(--text-sm); font-weight: 600; } /* --red @ 15% */

.vw-foot { justify-content: space-between; }
.vw-final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }

.vw-final { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6) var(--space-4); }
.vw-final-ico { font-size: 48px; line-height: 1; }
.vw-final-title { font-family: "Red Rose", serif; font-size: var(--text-2xl); font-weight: 700; margin: 0; color: var(--white); }
.vw-final-desc { font-size: var(--text-base); color: var(--light); margin: 0; max-width: 42ch; }
.vw-final-err .vw-final-title { color: var(--red); }

.vw-empty { font-size: var(--text-base); color: var(--light); padding: var(--space-4); text-align: center; }
.vw-empty-cta { margin-top: var(--space-4); }
.vw-skipped:not(:empty) { color: var(--status-warn); font-weight: 600; }

/* ── Preflight (paso 5): comprobaciones antes de Activar ─────────────────── */
.vw-pf { display: flex; flex-direction: column; gap: var(--space-2); }
.vw-pf-head { font-size: var(--text-md); font-weight: 600; color: var(--white); margin-top: var(--space-2); }
.vw-pf-loading { font-size: var(--text-sm); color: var(--light); padding: var(--space-2) var(--space-3); }
.vw-pf-row { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--deep); border: 1px solid var(--border); border-radius: var(--radius-md); border-left-width: 3px; }
.vw-pf-row.ok { border-left-color: var(--status-ok); }
.vw-pf-row.warn { border-left-color: var(--status-warn); }
.vw-pf-row.info { border-left-color: var(--secondary); }
.vw-pf-ico { flex-shrink: 0; line-height: 1.4; }
.vw-pf-body { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; }
.vw-pf-text { font-size: var(--text-sm); color: var(--light); }
.vw-pf-row.ok .vw-pf-text, .vw-pf-row.warn .vw-pf-text { color: var(--white); }
.vw-pf-fix { align-self: flex-start; display: inline-flex; align-items: center; margin-top: var(--space-1); padding: var(--space-1) var(--space-3); min-height: 30px; background: transparent; color: var(--light); border: 1px solid var(--border); border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: border-color var(--duration-fast) var(--ease); }
.vw-pf-fix:hover { border-color: var(--secondary); }
.vw-pf-fix:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.vw-pf-fix:disabled { opacity: 0.6; cursor: default; }
.vw-pf-err:not(:empty) { font-size: var(--text-sm); color: var(--status-err); font-weight: 600; margin-top: var(--space-1); }

/* ── Pantalla final: prueba de aviso + resumen de lo creado ──────────────── */
.vw-final-test { font-size: var(--text-md); font-weight: 600; color: var(--white); margin: 0; max-width: 42ch; }
.vw-final-test.warn { color: var(--status-warn); }
.vw-created { align-self: stretch; text-align: left; padding: var(--space-3) var(--space-4); background: var(--deep); border-left: 3px solid var(--secondary); border-radius: var(--radius-md); }
.vw-created-title { font-size: var(--text-sm); font-weight: 600; color: var(--light); margin: 0 0 var(--space-1); }
.vw-created ul { margin: 0; padding-left: var(--space-4); }
.vw-created li { font-size: var(--text-sm); color: var(--white); }

@media (max-width: 600px) {
  .vw-cards { grid-template-columns: 1fr; }
}