/* ============================================================================
 * mv-tokens-a11y.css — Metavoz Design System v2 — A11y & consistency batch
 * ============================================================================
 * Owner: ux-design-specialist (Ola 2B)
 * Created: 2026-04-20
 * Purpose: Single-source-of-truth overrides for tokens/patterns that fix
 *   WCAG 2.1 AA violations + cross-page inconsistencies reported by the
 *   4 auditors (security-auditor, accessibility-auditor, ui-visual-qa-auditor,
 *   infra-validator).
 *
 * Load order: This file MUST be loaded AFTER metavoz-theme-v2.css and any
 *   mv-submenu.css / mv-topnav-drawer.css so its values win the cascade
 *   without needing !important.
 *
 * DO NOT edit metavoz-theme-v2.css for these fixes — this file is the
 *   override slot so we can roll back the whole a11y batch in one line.
 *
 * Trazabilidad de findings → ver bloques con [DS-N] / [W-N] / [MVZ-UI-NNN].
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * [DS-1] Focus ring sistémico (WCAG 2.4.7 Focus Visible)
 * Finding: outline:0 en links topnav → focus invisible keyboard users.
 * Decision: color dark-pink #a6005a (5.9:1 on white, 5.3:1 on #fee3f0 tab-active bg).
 *   width 2px, offset 2px — equilibrio visibilidad/ruido.
 * Override: --mv-focus-ring-color (era --mv-primary-500 = #f71883, 3.87:1 fail).
 * ---------------------------------------------------------------------------- */
:root {
  --mv-focus-ring-color:  #a6005a;
  --mv-focus-ring-width:  2px;
  --mv-focus-ring-offset: 2px;
  --mv-focus-ring-halo:   rgb(166 0 90 / 0.25);
}

/* Regla global :focus-visible — no pisa estilos de componentes que ya
   manejan box-shadow focus (mv-btn-v2, mv-form-input), sólo cubre links
   sin estilo explícito. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: var(--mv-focus-ring-width) solid var(--mv-focus-ring-color);
  outline-offset: var(--mv-focus-ring-offset);
  border-radius: var(--mv-radius-sm, 4px);
}

/* Reset explícito del outline:0 que trae el tema legacy para .mv-topnav a. */
.mv-topnav a:focus-visible,
.mv-topnav__tab:focus-visible,
.mv-topnav__logout:focus-visible,
.mv-topnav__logo:focus-visible {
  outline: var(--mv-focus-ring-width) solid var(--mv-focus-ring-color);
  outline-offset: var(--mv-focus-ring-offset);
}

/* ----------------------------------------------------------------------------
 * [DS-2] Primary text accessibility alias (WCAG 1.4.3 Contrast)
 * Finding: --primary-color #f71883 on white = 3.87:1 → falla text/links.
 * Decision:
 *   --mv-primary-text    = #c4006a (4.5:1 on white, mínimo AA)
 *   --mv-primary-text-on-tint = #9e005a (6.2:1 on white, 5.5:1 on #fee3f0)
 *     — para texto activo sobre background tintado (active tab, chips).
 *
 * Uso: texto/iconos que tienen que ser "de marca" pero accesibles.
 *      NO reemplaza --primary-color en backgrounds de botones grandes
 *      (texto blanco ≥18pt sobre #f71883 es AA large).
 * ---------------------------------------------------------------------------- */
:root {
  --mv-primary-text:          #c4006a;
  --mv-primary-text-on-tint:  #9e005a;
  --mv-primary-tint-bg:       #fee3f0;
}

.mv-topnav__logout,
.mv-topnav .salir,
a.mv-primary-link,
.mv-link--primary,
.mv-text--primary {
  color: var(--mv-primary-text);
}

.mv-topnav__tab--active,
.mv-tab--active,
.mv-nav__item--active {
  color: var(--mv-primary-text-on-tint);
  background: var(--mv-primary-tint-bg);
}

/* ----------------------------------------------------------------------------
 * [DS-3] Tertiary text darken (WCAG 1.4.3)
 * Finding: --mv-text-tertiary (neutral-400 = #a8a8ae) on #fafafa = 2.11:1
 *   → placeholders, counts, dashboard descriptions.
 * Decision: override a #767679 (4.53:1 on #fafafa, 4.6:1 on white). Mismo
 *   token, sin renombrar — todos los componentes que ya lo usan heredan.
 * ---------------------------------------------------------------------------- */
:root {
  --mv-text-tertiary: #767679;
}

.mv-dash-placeholder-sub,
.mv-campaign-type__count,
.mv-quick-action__desc,
.mv-text-tertiary,
.mv-caption,
.mv-help-text {
  color: var(--mv-text-tertiary);
}

/* Placeholder de inputs — mismo criterio. */
::placeholder,
.mv-form-input::placeholder,
.mv-form-select::placeholder,
.mv-form-textarea::placeholder {
  color: var(--mv-text-tertiary);
  opacity: 1;   /* Firefox default es 0.54, pisa el darken */
}

/* ----------------------------------------------------------------------------
 * [DS-4] Touch target minimum (WCAG 2.5.8 Target Size Minimum)
 * Finding: checkboxes + data-row links a 13-17px altura.
 * Decision:
 *   --mv-touch-target-sm 24px (mínimo AA)
 *   --mv-touch-target-md 44px (ideal, Apple HIG)
 * Patrón: expandimos hit-area via padding en el TD/wrapper, sin cambiar
 *   el tamaño visual del checkbox (Bootstrap 4 lo estiliza).
 * ---------------------------------------------------------------------------- */
:root {
  --mv-touch-target-sm: 24px;
  --mv-touch-target-md: 44px;
}

.mv-touch-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--mv-touch-target-sm);
  min-width:  var(--mv-touch-target-sm);
}

/* Data tables — celda con checkbox: hit-area 32x32 via padding. */
.mv-table td.mv-cell-checkbox,
.mv-table-v2 td.mv-cell-checkbox,
table.dataTable td.mv-cell-checkbox {
  padding: 8px;
  vertical-align: middle;
}
.mv-table td.mv-cell-checkbox label,
.mv-table-v2 td.mv-cell-checkbox label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--mv-touch-target-sm);
  min-height: var(--mv-touch-target-sm);
  cursor: pointer;
  margin: 0;
}

/* Links dentro de celdas — aumentar hit area vertical sin romper layout. */
.mv-table td a.mv-link-data,
.mv-table-v2 td a.mv-link-data,
.mv-table td .mv-cell-link,
table.dataTable td a {
  display: inline-block;
  min-height: var(--mv-touch-target-sm);
  padding: 4px 0;
  line-height: 16px;
}

/* Icon-only actions (edit, delete in row) — forzar 24x24 hit-area. */
.mv-icon-action,
.mv-table td .mv-icon-btn,
.mv-table-v2 td .mv-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width:  var(--mv-touch-target-sm);
  min-height: var(--mv-touch-target-sm);
  padding: 2px;
  border-radius: var(--mv-radius-sm, 4px);
}

/* ----------------------------------------------------------------------------
 * [W-3] Wizard stepper accessible colors (WCAG 1.4.3)
 * Finding:
 *   - bubble active: white on #f71883 = 3.87:1 (fail)
 *   - bubble done:   white on #10b981 = 2.53:1 (fail badly)
 *   - bubble inactive: #6e6e73 on #e5e5ea = 4.03:1 (fail 4.5:1)
 * Decision:
 *   active    #9e005a, white text → 6.2:1 (pass AAA)
 *   done      #047857, white text → 4.8:1 (pass AA normal, 3:1 AA large)
 *   inactive  #d1d1d6, text #4a4a4f → 6.1:1 (pass AA)
 * Using higher specificity to win over metavoz-theme-v2.css bubble rules.
 * ---------------------------------------------------------------------------- */
:root {
  --mv-stepper-active-bg:   #9e005a;
  --mv-stepper-active-fg:   #ffffff;
  --mv-stepper-done-bg:     #047857;
  --mv-stepper-done-fg:     #ffffff;
  --mv-stepper-inactive-bg: #d1d1d6;
  --mv-stepper-inactive-fg: #4a4a4f;
}

.mv-stepper .mv-stepper__bubble--active,
.mv-wizard-shell .mv-stepper__bubble--active,
.mv-stepper__step--active .mv-stepper__bubble {
  background: var(--mv-stepper-active-bg);
  color: var(--mv-stepper-active-fg);
  border-color: var(--mv-stepper-active-bg);
}

.mv-stepper .mv-stepper__bubble--done,
.mv-wizard-shell .mv-stepper__bubble--done,
.mv-stepper__step--done .mv-stepper__bubble {
  background: var(--mv-stepper-done-bg);
  color: var(--mv-stepper-done-fg);
  border-color: var(--mv-stepper-done-bg);
}

.mv-stepper .mv-stepper__bubble--inactive,
.mv-wizard-shell .mv-stepper__bubble--inactive,
.mv-stepper__step--inactive .mv-stepper__bubble,
.mv-stepper__bubble {
  background: var(--mv-stepper-inactive-bg);
  color: var(--mv-stepper-inactive-fg);
  border-color: var(--mv-stepper-inactive-bg);
}

/* Step label under bubble — mantenerlo legible. */
.mv-stepper__step--active .mv-stepper__label {
  color: var(--mv-primary-text-on-tint);
  font-weight: var(--mv-fw-semibold, 600);
}
.mv-stepper__step--done .mv-stepper__label {
  color: var(--mv-stepper-done-bg);
  font-weight: var(--mv-fw-medium, 500);
}
.mv-stepper__step--inactive .mv-stepper__label {
  color: var(--mv-text-muted-strong, #5a5a5f);
}

/* ----------------------------------------------------------------------------
 * [MVZ-UI-024] Mora badge semantic colors
 * Finding: "Mora profunda" aparecía a veces verde, a veces pink, a veces gris.
 *   No había mapping semantic fijo.
 * Decision: 3 variantes badge fijas con contrast AA+ en todas:
 *   success  bg #d1fae5 / fg #064e3b → 7.1:1  (al_corriente)
 *   warning  bg #fef3c7 / fg #854d0e → 5.2:1  (mora_moderada)
 *   danger   bg #fee3e2 / fg #8b0000 → 6.7:1  (mora_profunda)
 *   neutral  bg #f5f5f7 / fg #2c2c31 → 13.8:1 (sin_info / fallback)
 *
 * Django-override-engineer: mapping estado → class en el template loop:
 *   {% if estado == 'mora_profunda' %}mv-badge--danger
 *   {% elif estado == 'mora_moderada' %}mv-badge--warning
 *   {% elif estado == 'al_corriente' %}mv-badge--success
 *   {% else %}mv-badge--neutral{% endif %}
 * ---------------------------------------------------------------------------- */
.mv-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-1, 4px);
  padding: 2px var(--mv-space-2, 8px);
  border-radius: var(--mv-radius-full, 9999px);
  font-size: var(--mv-text-xs, 0.8125rem);
  font-weight: var(--mv-fw-medium, 500);
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
}

.mv-badge--success {
  background: #d1fae5;
  color: #064e3b;
  border-color: #a7f3d0;
}
.mv-badge--warning {
  background: #fef3c7;
  color: #854d0e;
  border-color: #fde68a;
}
.mv-badge--danger {
  background: #fee3e2;
  color: #8b0000;
  border-color: #fecaca;
}
.mv-badge--neutral {
  background: #f5f5f7;
  color: #2c2c31;
  border-color: #e5e5ea;
}
.mv-badge--info {
  background: #dbeafe;
  color: #1e3a8a;
  border-color: #bfdbfe;
}

/* Badge con dot (indicador puntual) — opcional. */
.mv-badge__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
 * [MVZ-UI-010/011/012] Filter-bar pattern
 * Finding: páginas de lista con filtros alineados inconsistentemente
 *   (algunas con margin-right mix, otras con grid, otras con inline-block).
 * Decision: patrón flex horizontal con wrap + stack en ≤600px.
 *   Input principal crece; total/actions van a la derecha.
 * ---------------------------------------------------------------------------- */
.mv-filter-bar {
  display: flex;
  gap: var(--mv-space-3, 12px);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--mv-space-4, 16px);
  padding: var(--mv-space-3, 12px) var(--mv-space-4, 16px);
  background: var(--mv-surface, #ffffff);
  border: 1px solid var(--mv-border, #e5e5ea);
  border-radius: var(--mv-radius-md, 8px);
}
.mv-filter-bar > * { flex: 0 0 auto; min-width: 0; }

.mv-filter-bar__input,
.mv-filter-bar input[type="search"],
.mv-filter-bar input[type="text"].mv-filter-bar__main {
  flex: 1 1 320px;
  min-width: 240px;
}

.mv-filter-bar__select {
  flex: 0 1 200px;
  min-width: 140px;
}

.mv-filter-bar__total,
.mv-filter-bar__meta {
  margin-left: auto;
  color: var(--mv-text-tertiary);
  font-size: var(--mv-text-sm, 0.875rem);
  white-space: nowrap;
}

.mv-filter-bar__actions {
  display: flex;
  gap: var(--mv-space-2, 8px);
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .mv-filter-bar { flex-direction: column; align-items: stretch; }
  .mv-filter-bar > * { width: 100%; flex: 0 0 auto; min-width: 0; }
  .mv-filter-bar__total,
  .mv-filter-bar__meta { margin-left: 0; }
}

/* ----------------------------------------------------------------------------
 * [MVZ-UI-012] KPI grid pattern
 * Finding: páginas de dashboard con KPI cards en row-fluid de Bootstrap 4,
 *   colapsan a 1 columna a 768px perdiendo el par útil.
 * Decision: grid explícito con breakpoints pensados:
 *   default 3 columnas (la mayoría de wallboards tienen 3 KPIs primarios)
 *   --2col / --4col variantes.
 *   ≤1024px colapsa a 2, ≤600px colapsa a 1.
 * ---------------------------------------------------------------------------- */
.mv-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mv-space-4, 16px);
  margin-bottom: var(--mv-space-5, 20px);
}
.mv-kpi-row--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mv-kpi-row--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mv-kpi-row--6col { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1200px) {
  .mv-kpi-row--6col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .mv-kpi-row,
  .mv-kpi-row--4col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv-kpi-row--6col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .mv-kpi-row,
  .mv-kpi-row--2col,
  .mv-kpi-row--4col,
  .mv-kpi-row--6col { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
 * [MVZ-UI-022 + SEC-017] Code badge
 * Finding: `.mv-code` inconsistente — a veces color fucsia, a veces gris,
 *   a veces sin bg. Y contrast pobre.
 * Decision: token definido, fondo claro, texto dark neutral, mono font.
 *   bg #f5f5f7 / fg #1c1c1e → 16.4:1 (pass AAA).
 * ---------------------------------------------------------------------------- */
:root {
  --mv-font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
}

.mv-code,
.mv-table code,
.mv-table-v2 code,
.mv-table .mv-code,
.mv-table-v2 .mv-code,
code.mv-code {
  display: inline-block;
  color: #1c1c1e;
  background: #f5f5f7;
  padding: 2px 6px;
  border-radius: var(--mv-radius-sm, 4px);
  font-family: var(--mv-font-mono);
  font-size: 0.875em;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid #eeeef1;
}

/* ----------------------------------------------------------------------------
 * [MVZ-UI-019] Typography normalization
 * Finding: headings con uppercase + letter-spacing aplicado como estilo
 *   semántico → "DATOS BÁSICOS" como <h2> era patrón inconsistente.
 * Decision:
 *   - H1/H2/H3 son sentence-case, sin text-transform.
 *   - Para labels decorativos (eyebrow, section label), usar .mv-eyebrow.
 *   - Para headings de form-section, usar pattern <h2 class="mv-section-title">
 *     con sentence-case + font-weight 600.
 *
 * Django-override-engineer: buscar text-transform:uppercase en headings
 *   y reemplazar por .mv-eyebrow cuando sea el caso decorativo, o remover
 *   cuando sea semántico.
 * ---------------------------------------------------------------------------- */
.mv-section-title,
h2.mv-section-title {
  font-size: var(--mv-text-xl, 1.25rem);
  font-weight: var(--mv-fw-semibold, 600);
  color: var(--mv-text, #1d1d1f);
  text-transform: none;
  letter-spacing: normal;
  margin: 0 0 var(--mv-space-3, 12px) 0;
  line-height: 1.35;
}

.mv-subsection-title,
h3.mv-subsection-title {
  font-size: var(--mv-text-lg, 1rem);
  font-weight: var(--mv-fw-semibold, 600);
  color: var(--mv-text, #1d1d1f);
  text-transform: none;
  letter-spacing: normal;
  margin: 0 0 var(--mv-space-2, 8px) 0;
  line-height: 1.4;
}

/* Eyebrow — label decorativo sobre un bloque (ej. "CATEGORÍA"). Sólo
   usar en elementos pequeños, no en headings semánticos. */
.mv-eyebrow {
  display: inline-block;
  font-size: var(--mv-text-2xs, 0.6875rem);
  font-weight: var(--mv-fw-semibold, 600);
  color: var(--mv-text-muted-strong, #5a5a5f);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
  margin-bottom: var(--mv-space-1, 4px);
}

/* Soft normalization: si un <h2> o <h3> tiene estilo legacy con uppercase
   inline, forzamos sentence-case. Este bloque es la "red de seguridad"
   mientras el engineer limpia templates. */
.mv-form-card h2:not(.mv-eyebrow):not(.mv-allow-uppercase),
.mv-form-card h3:not(.mv-eyebrow):not(.mv-allow-uppercase),
.mv-list-page h2:not(.mv-eyebrow):not(.mv-allow-uppercase),
.mv-list-page h3:not(.mv-eyebrow):not(.mv-allow-uppercase),
.mv-dash h2:not(.mv-eyebrow):not(.mv-allow-uppercase),
.mv-dash h3:not(.mv-eyebrow):not(.mv-allow-uppercase) {
  text-transform: none;
  letter-spacing: normal;
}

/* ----------------------------------------------------------------------------
 * Primary button contrast hardening (WCAG 1.4.11)
 * Finding: .mv-btn--primary con bg #f71883 + text white = 3.87:1 (fail
 *   for <18pt / <14pt bold). Default button size en la app es ~14px regular.
 * Decision: darken base bg a --mv-primary-text (#c4006a) para que todos los
 *   botones primary pasen AA. Hover vuelve al tono "marca" brillante.
 *
 * NOTA: si el engineer quiere mantener botones grandes con marca pink,
 *   puede usar .mv-btn--primary-brand (bypass). Esta regla sólo afecta la
 *   variant default.
 * ---------------------------------------------------------------------------- */
.mv-btn--primary:not(.mv-btn--primary-brand),
.mv-btn-v2.mv-btn-v2--primary:not(.mv-btn--primary-brand),
button.mv-btn.mv-btn--primary:not(.mv-btn--primary-brand) {
  background: var(--mv-primary-text, #c4006a);
  border-color: var(--mv-primary-text, #c4006a);
  color: #ffffff;
}

.mv-btn--primary:not(.mv-btn--primary-brand):hover,
.mv-btn-v2.mv-btn-v2--primary:not(.mv-btn--primary-brand):hover {
  background: var(--mv-primary-text-on-tint, #9e005a);
  border-color: var(--mv-primary-text-on-tint, #9e005a);
}

.mv-btn--primary:not(.mv-btn--primary-brand):focus-visible,
.mv-btn-v2.mv-btn-v2--primary:not(.mv-btn--primary-brand):focus-visible {
  outline: var(--mv-focus-ring-width) solid var(--mv-focus-ring-color);
  outline-offset: var(--mv-focus-ring-offset);
}

/* Login button específico (reportado como #MVZ-UI-LOGIN) — el template
   tiene markup distinto, lo cubrimos por selector directo. */
form.login-form button[type="submit"],
.mv-login-card button[type="submit"],
.login-page button.btn-primary {
  background: var(--mv-primary-text, #c4006a);
  border-color: var(--mv-primary-text, #c4006a);
  color: #ffffff;
}

/* ----------------------------------------------------------------------------
 * Prefers-reduced-motion safety net
 * Cualquier transition/animation en este file respeta preferencia sistema.
 * ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
 * [UX-ACT #400] Configurar marcador — componentes nuevos
 * Added: 2026-04-20
 * Radio-item, toggle-row, day-picker, time-range, recording-banner,
 * schedule-chip, dialer-status, choice-grid, summary-rail layout.
 * ============================================================================ */

/* Radio-item / Check-item (pill style with description) */
.mv-radio-item,
.mv-check-item {
  display: flex; align-items: flex-start; gap: var(--mv-space-2, 8px);
  padding: var(--mv-space-2, 8px) var(--mv-space-3, 12px);
  border: 1px solid var(--mv-border, #e5e5ea);
  border-radius: var(--mv-radius-sm, 4px);
  cursor: pointer;
  background: var(--mv-surface, #fff);
  transition: border-color .1s, background .1s;
  min-height: 40px;
}
.mv-radio-item:hover,
.mv-check-item:hover {
  border-color: var(--mv-primary-text, #c4006a);
  background: var(--mv-primary-tint-bg, #fee3f0);
}
.mv-radio-item input,
.mv-check-item input {
  margin: 3px 0 0 0;
  accent-color: var(--mv-primary-text, #c4006a);
  flex: 0 0 auto;
}
.mv-radio-item > span,
.mv-check-item > span {
  min-width: 0; flex: 1 1 auto;
}
.mv-radio-item small,
.mv-check-item small {
  display: block;
  color: var(--mv-text-muted, #6e6e73);
  font-size: var(--mv-text-xs, 0.8125rem);
  margin-top: 2px;
}
.mv-radio-item--selected {
  border-color: var(--mv-primary-text, #c4006a);
  background: var(--mv-primary-tint-bg, #fee3f0);
}

/* Toggle-row (label + desc + toggle in a horizontal row) */
.mv-toggle-row {
  display: flex; align-items: center; gap: var(--mv-space-3, 12px);
  padding: var(--mv-space-3, 12px) var(--mv-space-4, 16px);
  background: var(--mv-bg, #fafafa);
  border: 1px solid var(--mv-border-subtle, #eeeef1);
  border-radius: var(--mv-radius-sm, 4px);
}
.mv-toggle-row__text { min-width: 0; flex: 1 1 auto; }
.mv-toggle-row__title {
  font-size: var(--mv-text-sm, 0.875rem);
  font-weight: var(--mv-fw-medium, 500);
  color: var(--mv-text, #1d1d1f);
  margin: 0;
}
.mv-toggle-row__desc {
  font-size: var(--mv-text-xs, 0.8125rem);
  color: var(--mv-text-muted, #6e6e73);
  margin: 0;
}

/* Day-picker (visual 7-tile grid) */
.mv-day-picker {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--mv-space-2, 8px);
}
.mv-day-picker__item { position: relative; }
.mv-day-picker__item input {
  position: absolute; opacity: 0; pointer-events: none;
}
.mv-day-picker__item label {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  padding: var(--mv-space-2, 8px) 0; min-height: 56px;
  border: 1px solid var(--mv-border, #e5e5ea);
  border-radius: var(--mv-radius-sm, 4px);
  background: var(--mv-surface, #fff);
  cursor: pointer;
  transition: background .1s, border-color .1s, color .1s;
}
.mv-day-picker__item label:hover {
  border-color: var(--mv-primary-text, #c4006a);
  background: var(--mv-primary-tint-bg, #fee3f0);
}
.mv-day-picker__item input:checked + label {
  background: var(--mv-primary-tint-bg, #fee3f0);
  border-color: var(--mv-primary-text, #c4006a);
  color: var(--mv-primary-text-on-tint, #9e005a);
  font-weight: var(--mv-fw-semibold, 600);
}
.mv-day-picker__item input:focus-visible + label {
  outline: var(--mv-focus-ring-width, 2px) solid var(--mv-focus-ring-color, #a6005a);
  outline-offset: var(--mv-focus-ring-offset, 2px);
}
.mv-day-picker__short {
  font-size: var(--mv-text-xs, 0.8125rem);
  color: var(--mv-text-muted, #6e6e73);
  font-weight: var(--mv-fw-medium, 500);
}
/* .mv-day-picker__num removed — markup dropped in MVZ-UI-027 fix; abbrev __short is the only label */

/* Time-range (from → to) */
.mv-time-range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--mv-space-3, 12px);
}
@media (max-width: 600px) {
  .mv-time-range { grid-template-columns: 1fr; }
  .mv-time-range__sep { display: none; }
}
.mv-time-range__sep {
  color: var(--mv-text-tertiary, #767679);
  padding-bottom: 10px;
}
.mv-time-range__input-wrap { position: relative; }
.mv-time-range__input-wrap .fa,
.mv-time-range__input-wrap .fas,
.mv-time-range__input-wrap .far {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--mv-text-tertiary, #767679);
  pointer-events: none;
}
.mv-time-range__input-wrap input.mv-input { padding-left: 36px; }

/* MVZ-UI-028: Hide UA time-picker indicator so custom .fa-clock is the only icon shown */
.mv-input.mv-input--time::-webkit-calendar-picker-indicator { display: none; }
.mv-input.mv-input--time::-moz-calendar-picker-indicator { display: none; }
input[type="time"].mv-input--time::-webkit-list-button { display: none; }

/* MVZ-UI-028: Promote time-range labels from .mv-helper to proper label weight */
.mv-time-range__label {
  font-size: var(--mv-text-sm, 0.875rem);
  font-weight: var(--mv-fw-medium, 500);
  color: var(--mv-text, #1d1d1f);
}

/* Recording compliance banner */
.mv-recording-banner {
  display: flex; align-items: center; gap: var(--mv-space-3, 12px);
  padding: var(--mv-space-3, 12px) var(--mv-space-4, 16px);
  background: var(--mv-info-bg, #dbeafe);
  border: 1px solid var(--mv-info-border, #bfdbfe);
  color: var(--mv-info-fg, #1e3a8a);
  border-radius: var(--mv-radius-sm, 4px);
  font-size: var(--mv-text-sm, 0.875rem);
}
.mv-recording-banner__icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 50%;
  color: var(--mv-info-fg, #1e3a8a);
  flex: 0 0 auto;
}

/* Schedule preset chips */
.mv-chip {
  display: inline-flex; align-items: center; gap: var(--mv-space-1, 4px);
  padding: var(--mv-space-1, 4px) var(--mv-space-3, 12px); min-height: 32px;
  font-size: var(--mv-text-xs, 0.8125rem);
  font-weight: var(--mv-fw-medium, 500);
  color: var(--mv-text, #1d1d1f);
  background: var(--mv-surface, #fff);
  border: 1px solid var(--mv-border, #e5e5ea);
  border-radius: var(--mv-radius-full, 9999px);
  cursor: pointer;
  transition: all .1s ease;
  font-family: inherit;
}
.mv-chip:hover { border-color: var(--mv-primary-text, #c4006a); }
.mv-chip--active {
  background: var(--mv-primary-tint-bg, #fee3f0);
  border-color: var(--mv-primary-text, #c4006a);
  color: var(--mv-primary-text-on-tint, #9e005a);
}

/* Dialer status indicator (cartera_list) */
.mv-dialer-status {
  display: inline-flex; align-items: center; gap: var(--mv-space-2, 8px);
  font-size: var(--mv-text-sm, 0.875rem);
  color: var(--mv-text-muted, #6e6e73);
}
.mv-dialer-status__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mv-border, #e5e5ea);
  display: inline-block;
  flex: 0 0 auto;
}
.mv-dialer-status--on .mv-dialer-status__dot {
  background: #047857;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, .18);
}
.mv-dialer-status--off .mv-dialer-status__dot {
  background: var(--mv-text-tertiary, #767679);
}
.mv-dialer-status--paused .mv-dialer-status__dot {
  background: #854d0e;
}

/* Choice cards (dual CTA in step 4) */
.mv-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mv-space-4, 16px);
}
@media (max-width: 900px) {
  .mv-choice-grid { grid-template-columns: 1fr; }
}
.mv-choice {
  display: flex; flex-direction: column; gap: var(--mv-space-3, 12px);
  padding: var(--mv-space-5, 20px);
  border: 2px solid var(--mv-border, #e5e5ea);
  border-radius: var(--mv-radius-md, 8px);
  background: var(--mv-surface, #fff);
  text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s;
  min-width: 0;
}
.mv-choice:hover {
  border-color: var(--mv-primary-text, #c4006a);
  box-shadow: 0 6px 20px rgba(196, 0, 106, .08);
}
.mv-choice--recommended {
  border-color: var(--mv-primary-text, #c4006a);
  background: linear-gradient(180deg, var(--mv-primary-tint-bg, #fee3f0) 0%, #fff 40%);
}
.mv-choice__head {
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--mv-space-3, 12px);
}
.mv-choice__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mv-primary-tint-bg, #fee3f0);
  color: var(--mv-primary-text-on-tint, #9e005a);
  border-radius: var(--mv-radius-md, 8px);
  font-size: 1.3rem; flex: 0 0 auto;
}
.mv-choice--alt .mv-choice__icon {
  background: var(--mv-info-bg, #dbeafe);
  color: var(--mv-info-fg, #1e3a8a);
}
.mv-choice__tag {
  display: inline-flex; align-items: center; gap: var(--mv-space-1, 4px);
  padding: 2px var(--mv-space-2, 8px);
  background: var(--mv-primary-text, #c4006a); color: #fff;
  border-radius: var(--mv-radius-full, 9999px);
  font-size: var(--mv-text-2xs, 0.6875rem);
  font-weight: var(--mv-fw-semibold, 600);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.mv-choice__title {
  font-size: var(--mv-text-lg, 1rem);
  font-weight: var(--mv-fw-semibold, 600);
  margin: 0; line-height: 1.3;
}
.mv-choice__desc {
  font-size: var(--mv-text-sm, 0.875rem);
  color: var(--mv-text-muted-strong, #5a5a5f);
  margin: 0; line-height: 1.5;
}
.mv-choice__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--mv-space-2, 8px);
}
.mv-choice__list li {
  font-size: var(--mv-text-sm, 0.875rem);
  color: var(--mv-text, #1d1d1f);
  display: flex; align-items: flex-start; gap: var(--mv-space-2, 8px);
}
.mv-choice__list li .fa-check { color: #047857; margin-top: 3px; flex: 0 0 auto; }

/* Summary rail layout (activar_campana split view) */
.mv-layout-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: var(--mv-space-5, 20px);
  align-items: flex-start;
}
@media (max-width: 1024px) {
  .mv-layout-split { grid-template-columns: 1fr; }
}
.mv-summary-rail {
  position: sticky; top: var(--mv-space-5, 20px);
  display: flex; flex-direction: column; gap: var(--mv-space-3, 12px);
  padding: var(--mv-space-4, 16px);
  background: var(--mv-card-bg, #fff);
  border: 1px solid var(--mv-border, #e5e5ea);
  border-radius: var(--mv-radius-md, 8px);
  font-size: var(--mv-text-sm, 0.875rem);
  min-width: 0;
}
.mv-summary-rail__row {
  display: flex; justify-content: space-between;
  gap: var(--mv-space-3, 12px); min-width: 0;
}
.mv-summary-rail__label { color: var(--mv-text-muted, #6e6e73); min-width: 0; }
.mv-summary-rail__value {
  color: var(--mv-text, #1d1d1f);
  font-weight: var(--mv-fw-medium, 500);
  text-align: right; min-width: 0; word-break: break-word;
}

/* Tabs pattern for cartera_list */
.mv-tabs {
  display: flex; gap: var(--mv-space-1, 4px);
  border-bottom: 1px solid var(--mv-border, #e5e5ea);
  margin-bottom: var(--mv-space-4, 16px);
  flex-wrap: wrap;
}
.mv-tab {
  padding: var(--mv-space-3, 12px) var(--mv-space-4, 16px);
  font-size: var(--mv-text-sm, 0.875rem);
  font-weight: var(--mv-fw-medium, 500);
  color: var(--mv-text-muted-strong, #5a5a5f);
  background: transparent;
  border: 0; border-bottom: 2px solid transparent;
  cursor: pointer;
  display: inline-flex; gap: var(--mv-space-2, 8px); align-items: center;
  text-decoration: none;
  font-family: inherit;
  transition: color .15s, border-color .15s;
}
.mv-tab:hover { color: var(--mv-text, #1d1d1f); }
.mv-tab--active {
  color: var(--mv-primary-text-on-tint, #9e005a);
  border-bottom-color: var(--mv-primary-text-on-tint, #9e005a);
}
.mv-tab__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--mv-border-subtle, #eeeef1);
  color: var(--mv-text-muted-strong, #5a5a5f);
  border-radius: var(--mv-radius-full, 9999px);
  font-size: var(--mv-text-2xs, 0.6875rem);
  font-weight: var(--mv-fw-semibold, 600);
}

/* .mv-modal — simplified dialog (alias to mv-modal-v2 pattern but with clean class names) */
.mv-modal {
  background: var(--mv-surface, #fff);
  border-radius: var(--mv-radius-md, 8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mv-modal__header {
  padding: var(--mv-space-4, 16px) var(--mv-space-5, 20px);
  border-bottom: 1px solid var(--mv-border-subtle, #eeeef1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-3, 12px);
}
.mv-modal__title {
  font-size: var(--mv-text-xl, 1.25rem);
  font-weight: var(--mv-fw-semibold, 600);
  margin: 0;
}
.mv-modal__body {
  padding: var(--mv-space-5, 20px);
}
.mv-modal__footer {
  padding: var(--mv-space-4, 16px) var(--mv-space-5, 20px);
  border-top: 1px solid var(--mv-border-subtle, #eeeef1);
  display: flex;
  justify-content: flex-end;
  gap: var(--mv-space-2, 8px);
  flex-wrap: wrap;
}
.mv-textarea {
  width: 100%;
  padding: var(--mv-space-2, 8px) var(--mv-space-3, 12px);
  min-height: 88px;
  font-size: var(--mv-text-sm, 0.875rem);
  font-family: inherit;
  color: var(--mv-text, #1d1d1f);
  background: var(--mv-surface, #fff);
  border: 1px solid var(--mv-border, #e5e5ea);
  border-radius: var(--mv-radius-sm, 4px);
  resize: vertical;
}
.mv-textarea:focus-visible {
  outline: var(--mv-focus-ring-width, 2px) solid var(--mv-focus-ring-color, #a6005a);
  outline-offset: var(--mv-focus-ring-offset, 2px);
  border-color: var(--mv-primary-text, #c4006a);
}

/* mv-btn-v2--danger for archive button */
.mv-btn-v2--danger {
  background: var(--mv-danger-fg, #8b0000);
  border-color: var(--mv-danger-fg, #8b0000);
  color: #fff;
}
.mv-btn-v2--danger:hover {
  background: #6b0000;
  border-color: #6b0000;
}

/* icon-action danger variant */
.mv-icon-action--danger:hover {
  background: var(--mv-danger-bg, #fee3e2);
  color: var(--mv-danger-fg, #8b0000);
}

/* mv-row-actions */
.mv-row-actions {
  display: flex;
  gap: var(--mv-space-1, 4px);
  align-items: center;
  flex-wrap: nowrap;
}

/* mv-kpi (step 4 summary) */
.mv-kpi {
  display: flex; align-items: center; gap: var(--mv-space-3, 12px);
  padding: var(--mv-space-4, 16px);
  background: var(--mv-card-bg, #fff);
  border: 1px solid var(--mv-border, #e5e5ea);
  border-radius: var(--mv-radius-md, 8px);
}
.mv-kpi__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mv-primary-tint-bg, #fee3f0);
  color: var(--mv-primary-text-on-tint, #9e005a);
  border-radius: var(--mv-radius-sm, 4px);
  flex: 0 0 auto;
}
.mv-kpi__value {
  font-size: var(--mv-text-xl, 1.25rem);
  font-weight: var(--mv-fw-semibold, 600);
  line-height: 1.1;
}
.mv-kpi__label {
  font-size: var(--mv-text-xs, 0.8125rem);
  color: var(--mv-text-muted, #6e6e73);
}

/* mv-stack-4 utility */
.mv-stack-4 { display: flex; flex-direction: column; gap: var(--mv-space-4, 16px); }

/* mv-form-grid (2-col on ≥900, 1-col on <900) */
.mv-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mv-space-4, 16px) var(--mv-space-5, 20px);
}
@media (max-width: 900px) {
  .mv-form-grid { grid-template-columns: 1fr; }
}
.mv-form-grid__full { grid-column: 1 / -1; }
.mv-form-group { display: flex; flex-direction: column; min-width: 0; }

/* mv-schedule__presets */
.mv-schedule { display: flex; flex-direction: column; gap: var(--mv-space-3, 12px); }

/* ============================================================================
 * END mv-tokens-a11y.css — 2026-04-20
 * Findings resolved: DS-1, DS-2, DS-3, DS-4, W-3, MVZ-UI-010/011/012,
 *   MVZ-UI-019, MVZ-UI-022, MVZ-UI-024, SEC-017 (mv-code contrast),
 *   + login button + primary button contrast.
 * [UX-ACT #400] Configurar marcador components added.
 * Deferred (out of scope, need template work):
 *   - Skip-to-content link (needs <a> injection in base.html layout)
 *   - aria-current on active tabs (template logic)
 *   - lang attribute on <html> (template root)
 *   - alt text audit on icons (needs img-by-img review)
 * ============================================================================ */