/* ============================================================
   MV Design System v3 — COMPONENTES
   ------------------------------------------------------------
   Componentes genericos reutilizables, extraidos del modulo
   /CustomerZones/rtoProposal y despegados de su contexto.

   Cada componente consume SOLO tokens (var(--mv3-*)), nunca
   valores crudos. Cambiar la marca = editar tokens.css.

   Los componentes fijan su propia font-family para funcionar
   aunque el nodo quede fuera de un contenedor `.mv3`.

   Depende de: tokens.css (cargar antes)
   ============================================================ */

/* ============================================================
   BOTONES
   ============================================================ */
.mv3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mv3-space-2);
    min-height: var(--mv3-control-height);
    padding: 0.5rem 1rem;
    border: var(--mv3-border-width-interactive) solid transparent;
    border-radius: var(--mv3-radius-sm);
    font-family: var(--mv3-font-sans);
    font-size: var(--mv3-fs-sm);
    font-weight: var(--mv3-fw-bold);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--mv3-transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.mv3-btn:hover { text-decoration: none; }

/* Foco visible: obligatorio. No reemplazar por outline:none. */
.mv3-btn:focus-visible {
    outline: none;
    box-shadow: var(--mv3-ring);
}

.mv3-btn:disabled,
.mv3-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
}

/* Iconos lucide dentro del boton */
.mv3-btn > svg { width: 1em; height: 1em; flex-shrink: 0; }

/* ── Variante primaria ───────────────────────────────────── */
.mv3-btn-primary {
    background: var(--mv3-primary);
    border-color: var(--mv3-primary);
    color: var(--mv3-text-on-accent);
    box-shadow: var(--mv3-shadow-primary);
}
.mv3-btn-primary:hover:not(:disabled) {
    background: var(--mv3-primary-hover);
    border-color: var(--mv3-primary-hover);
    color: var(--mv3-text-on-accent);
    box-shadow: var(--mv3-shadow-primary-lg);
    transform: translateY(-1px);
}
.mv3-btn-primary:active:not(:disabled) { transform: translateY(0); }

/* ── Variante secundaria (contorno) ──────────────────────────
   Es el boton "Volver" del modulo de referencia. */
.mv3-btn-secondary {
    background: var(--mv3-bg-surface);
    border-color: var(--mv3-border);
    color: var(--mv3-text-muted);
}
.mv3-btn-secondary:hover:not(:disabled) {
    border-color: var(--mv3-border-strong);
    color: var(--mv3-text);
    background: var(--mv3-bg-surface);
}

/* ── Variante fantasma ───────────────────────────────────── */
.mv3-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--mv3-text-muted);
}
.mv3-btn-ghost:hover:not(:disabled) {
    background: var(--mv3-bg-subtle);
    color: var(--mv3-text);
}

/* ── Exito / Peligro ─────────────────────────────────────── */
.mv3-btn-success {
    background: var(--mv3-success);
    border-color: var(--mv3-success);
    color: var(--mv3-text-on-accent);
    box-shadow: var(--mv3-shadow-success);
}
.mv3-btn-success:hover:not(:disabled) {
    background: var(--mv3-green-700);
    border-color: var(--mv3-green-700);
    color: var(--mv3-text-on-accent);
    transform: translateY(-1px);
}

.mv3-btn-danger {
    background: var(--mv3-danger);
    border-color: var(--mv3-danger);
    color: var(--mv3-text-on-accent);
    box-shadow: var(--mv3-shadow-danger);
}
.mv3-btn-danger:hover:not(:disabled) {
    background: var(--mv3-red-700);
    border-color: var(--mv3-red-700);
    color: var(--mv3-text-on-accent);
    transform: translateY(-1px);
}
.mv3-btn-danger:focus-visible { box-shadow: var(--mv3-ring-danger); }

/* ── Tamaños ─────────────────────────────────────────────── */
.mv3-btn-sm {
    min-height: var(--mv3-control-height-sm);
    padding: 0.35rem 0.75rem;
    font-size: var(--mv3-fs-xs);
}
.mv3-btn-lg {
    min-height: var(--mv3-control-height-lg);
    padding: 0.75rem 1.5rem;
    font-size: var(--mv3-fs-md);
    border-radius: var(--mv3-radius-md);
}

/* Ancho completo. Util en el footer de un panel. */
.mv3-btn-block { display: flex; width: 100%; }

/* Ancho minimo fijo: evita que el layout salte cuando el texto
   del boton cambia (p.ej. "Generar" -> "Generando..."). */
.mv3-btn-stable { min-width: 160px; }


/* ============================================================
   CAMPOS DE FORMULARIO
   ============================================================ */
.mv3-input,
.mv3-select,
.mv3-textarea {
    display: block;
    width: 100%;
    min-height: var(--mv3-control-height);
    padding: 0.5rem 0.875rem;
    background: var(--mv3-bg-surface);
    border: var(--mv3-border-width-interactive) solid var(--mv3-border);
    border-radius: var(--mv3-radius-md);
    font-family: var(--mv3-font-sans);
    font-size: var(--mv3-fs-base);
    font-weight: var(--mv3-fw-semibold);
    color: var(--mv3-text);
    transition: border-color var(--mv3-transition-fast),
                box-shadow var(--mv3-transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.mv3-input::placeholder,
.mv3-textarea::placeholder {
    color: var(--mv3-text-subtle);
    font-weight: var(--mv3-fw-medium);
}

.mv3-input:hover:not(:disabled),
.mv3-select:hover:not(:disabled),
.mv3-textarea:hover:not(:disabled) {
    border-color: var(--mv3-border-strong);
}

.mv3-input:focus,
.mv3-select:focus,
.mv3-textarea:focus {
    outline: none;
    border-color: var(--mv3-primary);
    box-shadow: var(--mv3-ring);
}

.mv3-input:disabled,
.mv3-select:disabled,
.mv3-textarea:disabled {
    background: var(--mv3-bg-subtle);
    color: var(--mv3-text-subtle);
    cursor: not-allowed;
}

.mv3-textarea { min-height: 80px; resize: vertical; line-height: var(--mv3-leading-normal); }

/* Flecha del select dibujada en CSS (evita depender de una imagen) */
.mv3-select {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

/* Estado de error */
.mv3-input.is-invalid,
.mv3-select.is-invalid,
.mv3-textarea.is-invalid { border-color: var(--mv3-danger); }
.mv3-input.is-invalid:focus,
.mv3-select.is-invalid:focus,
.mv3-textarea.is-invalid:focus { box-shadow: var(--mv3-ring-danger); }

.mv3-field-error {
    display: block;
    margin-top: var(--mv3-space-1);
    font-size: var(--mv3-fs-xs);
    font-weight: var(--mv3-fw-semibold);
    color: var(--mv3-danger);
}

/* Campo con icono a la izquierda (buscador "Filtrar por nombre...") */
.mv3-input-group { position: relative; }
.mv3-input-group > svg,
.mv3-input-group > .mv3-input-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--mv3-text-subtle);
    pointer-events: none;
}
.mv3-input-group > .mv3-input { padding-left: 2.25rem; }

/* ── Checkbox ────────────────────────────────────────────── */
.mv3-check {
    display: inline-flex;
    align-items: center;
    gap: var(--mv3-space-2);
    cursor: pointer;
    font-size: var(--mv3-fs-base);
    font-weight: var(--mv3-fw-bold);
    color: var(--mv3-text);
}
.mv3-check input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin: 0;
    background: var(--mv3-bg-surface);
    border: var(--mv3-border-width-interactive) solid var(--mv3-border-strong);
    border-radius: var(--mv3-radius-sm);
    cursor: pointer;
    transition: all var(--mv3-transition-fast);
}
.mv3-check input[type="checkbox"]:hover { border-color: var(--mv3-primary); }
.mv3-check input[type="checkbox"]:checked {
    background: var(--mv3-primary);
    border-color: var(--mv3-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 72%;
    background-position: center;
    background-repeat: no-repeat;
}
.mv3-check input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--mv3-ring);
}
.mv3-check input[type="checkbox"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* ============================================================
   TARJETAS
   ============================================================ */
.mv3-card {
    background: var(--mv3-bg-surface);
    border: var(--mv3-border-width) solid var(--mv3-border);
    border-radius: var(--mv3-radius-lg);
    padding: var(--mv3-space-4);
    box-shadow: var(--mv3-shadow-xs);
}

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

/* ── Tarjeta seleccionable ───────────────────────────────────
   Borde de 2px + micro-elevacion en hover + sombra tenida al
   activarse. Es la tarjeta de "Horario del cliente" del modulo. */
.mv3-card-selectable {
    display: flex;
    flex-direction: column;
    gap: var(--mv3-space-1);
    position: relative;
    padding: var(--mv3-space-3) var(--mv3-space-4);
    background: var(--mv3-bg-surface);
    border: var(--mv3-border-width-interactive) solid var(--mv3-bg-subtle);
    border-radius: var(--mv3-radius-lg);
    cursor: pointer;
    overflow: hidden;
    transition: all var(--mv3-transition);
}
.mv3-card-selectable:hover:not(.is-disabled) {
    border-color: var(--mv3-border);
    transform: translateY(-1px);
}
.mv3-card-selectable:focus-visible { outline: none; box-shadow: var(--mv3-ring); }

.mv3-card-selectable.is-active {
    border-color: var(--mv3-primary);
    background: var(--mv3-primary-soft);
    box-shadow: 0 10px 15px -3px rgba(var(--mv3-primary-rgb), 0.1);
}
.mv3-card-selectable.is-active-success {
    border-color: var(--mv3-green-500);
    background: var(--mv3-success-soft);
    box-shadow: 0 10px 15px -3px rgba(var(--mv3-success-rgb), 0.1);
}
.mv3-card-selectable.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Etiqueta + valor dentro de la tarjeta */
.mv3-card-label {
    font-size: var(--mv3-fs-2xs);
    font-weight: var(--mv3-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--mv3-tracking-wide);
    color: var(--mv3-text-subtle);
}
.mv3-card-value {
    font-size: var(--mv3-fs-md);
    font-weight: var(--mv3-fw-black);
    color: var(--mv3-text-strong);
}
.mv3-card-selectable.is-active .mv3-card-label { color: var(--mv3-blue-500); }
.mv3-card-selectable.is-active .mv3-card-value { color: var(--mv3-primary-strong); }
.mv3-card-selectable.is-active-success .mv3-card-label { color: var(--mv3-success); }
.mv3-card-selectable.is-active-success .mv3-card-value { color: var(--mv3-green-900); }


/* ============================================================
   PANEL  (cabecera con icono + cuerpo)
   ------------------------------------------------------------
   Estructura del modulo de referencia: todo dentro de una sola
   superficie blanca, con la cabecera separada del cuerpo por un
   borde. Reemplaza el patron viejo de "<h2> con botones flotados
   + .card aparte".
   ============================================================ */
.mv3-panel {
    background: var(--mv3-bg-surface);
    border: var(--mv3-border-width) solid var(--mv3-border);
    border-radius: var(--mv3-radius-lg);
    box-shadow: var(--mv3-shadow-sm);
    overflow: hidden;   /* recorta las esquinas del header al radio */
    margin-bottom: var(--mv3-space-4);
}

/* ── Cabecera ────────────────────────────────────────────────
   Flex real, no floats: el `margin-left:auto` de las acciones
   las empuja a la derecha y `align-items:center` alinea todo
   verticalmente sin trucos de line-height. */
.mv3-panel-header {
    display: flex;
    align-items: center;
    gap: var(--mv3-space-3);
    flex-wrap: wrap;
    padding: var(--mv3-space-4) var(--mv3-space-6);
    border-bottom: var(--mv3-border-width) solid var(--mv3-border);
    background: var(--mv3-bg-surface);
}

.mv3-panel-header-actions {
    display: flex;
    align-items: center;
    gap: var(--mv3-space-2);
    margin-left: auto;   /* empuja las acciones a la derecha */
}

.mv3-panel-body { padding: var(--mv3-space-6); }

/* ============================================================
   PAGE HEADER  (barra superior a todo el ancho)
   ------------------------------------------------------------
   Replica `.rto-ph` / `.rto-ph-title` del modulo de referencia.

   Diferencia clave con .mv3-panel: esto NO es una tarjeta. No
   lleva border-radius ni bordes laterales, solo `border-bottom`
   y una sombra sutil. Va a sangre completa contra el layout.

   Usar esto (y no .mv3-panel) cuando la cabecera es el titulo de
   la pagina: un panel redondeado ahi se lee como "una tarjeta
   encima de otra", porque el layout ya aporta su propia
   superficie blanca.
   ============================================================ */
.mv3-pageheader {
    display: flex;
    align-items: center;
    gap: var(--mv3-space-3);
    flex-wrap: wrap;
    min-height: 56px;
    padding: var(--mv3-space-2) var(--mv3-space-6);
    background: var(--mv3-bg-surface);
    border-bottom: var(--mv3-border-width) solid var(--mv3-border);
    box-shadow: var(--mv3-shadow-sm);
}

/* Titulo con el icono en linea. El icono hereda `color`, no va en
   una caja de fondo: asi es en la referencia.
   (En el original el <i> trae DOS atributos `style` y el navegador
   se queda con el primero, por lo que su `color:#2563eb` nunca
   aplica y el icono termina heredando el color del texto. Aqui se
   hereda a proposito, que es lo que realmente se ve.) */
.mv3-pageheader-title {
    display: flex;
    align-items: center;
    gap: var(--mv3-space-2);
    margin: 0;
    font-size: var(--mv3-fs-md);
    font-weight: var(--mv3-fw-bold);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;   /* el tracking de .rto-ph-title */
    color: var(--mv3-text);
    white-space: nowrap;
}
.mv3-pageheader-title > svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Variante para separar secciones DENTRO de la pagina: borde
   arriba en vez de sombra, y sin el alto minimo de la barra
   principal, para que no compita con el titulo de la vista. */
.mv3-pageheader.is-section {
    min-height: 0;
    padding: var(--mv3-space-3) var(--mv3-space-6);
    border-top: var(--mv3-border-width) solid var(--mv3-border);
    box-shadow: none;
}
.mv3-pageheader.is-section .mv3-pageheader-title {
    font-size: var(--mv3-fs-sm);
    color: var(--mv3-text-muted);
}

/* Cuerpo que acompaña a la barra: superficie blanca a sangre,
   sin bordes, para que se lea como una sola pieza con la barra. */
.mv3-pagebody {
    padding: var(--mv3-space-6);
    background: var(--mv3-bg-surface);
}

@media (max-width: 575px) {
    .mv3-pageheader { padding: var(--mv3-space-3) var(--mv3-space-4); }
    .mv3-pageheader-title { white-space: normal; }
    .mv3-pagebody { padding: var(--mv3-space-4); }
}


/* ── Caja de icono ───────────────────────────────────────────
   Replica `.rto-icon-box`: cuadrado redondeado con el color de
   acento, icono blanco y sombra teñida. La variante `.dark` es
   la que usa el titulo principal en el modulo original. */
.mv3-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: var(--mv3-space-2);
    background: var(--mv3-primary);
    border-radius: var(--mv3-radius-md);
    color: var(--mv3-text-on-accent);
    box-shadow: 0 4px 8px rgba(var(--mv3-primary-rgb), 0.25);
}
.mv3-icon-box > svg { width: 18px; height: 18px; }
.mv3-icon-box.is-dark { background: var(--mv3-slate-900); box-shadow: var(--mv3-shadow-md); }
.mv3-icon-box.is-success {
    background: var(--mv3-success);
    box-shadow: 0 4px 8px rgba(var(--mv3-success-rgb), 0.25);
}

/* En pantallas chicas las acciones bajan y ocupan el ancho */
@media (max-width: 575px) {
    .mv3-panel-header-actions { margin-left: 0; width: 100%; }
    .mv3-panel-header-actions .mv3-btn,
    .mv3-panel-header-actions .btn { flex: 1; }
}


/* ============================================================
   PILLS  (selectores de dia, filtros rapidos)
   ============================================================ */
.mv3-pill-group { display: flex; gap: 6px; }

.mv3-pill {
    flex: 1;
    padding: 0.625rem 0.75rem;
    background: var(--mv3-bg-subtle);
    border: var(--mv3-border-width-interactive) solid transparent;
    border-radius: var(--mv3-radius-md);
    font-family: var(--mv3-font-sans);
    font-size: var(--mv3-fs-xs);
    font-weight: var(--mv3-fw-extrabold);
    color: var(--mv3-text-muted);
    text-align: center;
    text-transform: capitalize;
    cursor: pointer;
    transition: all var(--mv3-transition);
}
.mv3-pill:hover:not(.is-selected):not(:disabled) {
    background: var(--mv3-border);
    color: var(--mv3-slate-600);
}
.mv3-pill:focus-visible { outline: none; box-shadow: var(--mv3-ring); }
.mv3-pill.is-selected {
    background: var(--mv3-primary);
    color: var(--mv3-text-on-accent);
    box-shadow: var(--mv3-shadow-primary);
}
.mv3-pill.is-selected-success {
    background: var(--mv3-success);
    color: var(--mv3-text-on-accent);
    box-shadow: var(--mv3-shadow-success);
}
.mv3-pill:disabled { opacity: 0.45; cursor: not-allowed; }


/* ============================================================
   TABS
   ============================================================ */
.mv3-tabs { display: flex; gap: 2px; }

.mv3-tab {
    padding: 0.35rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--mv3-radius-sm);
    font-family: var(--mv3-font-sans);
    font-size: var(--mv3-fs-sm);
    font-weight: var(--mv3-fw-semibold);
    color: var(--mv3-text-subtle);
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--mv3-transition-fast);
}
.mv3-tab:hover:not(.is-active):not(:disabled) { color: var(--mv3-text-muted); }
.mv3-tab:focus-visible { outline: none; box-shadow: var(--mv3-ring); }
.mv3-tab.is-active {
    background: var(--mv3-primary-soft);
    color: var(--mv3-primary);
}
.mv3-tab.is-active-success {
    background: var(--mv3-success-soft);
    color: var(--mv3-success);
}
.mv3-tab:disabled { opacity: 0.45; cursor: not-allowed; }


/* ============================================================
   BADGES / CONTADORES
   ============================================================ */
.mv3-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--mv3-space-1);
    padding: 0.15rem 0.5rem;
    border-radius: var(--mv3-radius-pill);
    background: var(--mv3-bg-subtle);
    font-size: var(--mv3-fs-2xs);
    font-weight: var(--mv3-fw-extrabold);
    color: var(--mv3-text-muted);
    letter-spacing: var(--mv3-tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
}
.mv3-badge-primary { background: var(--mv3-primary-soft); color: var(--mv3-primary); }
.mv3-badge-success { background: var(--mv3-success-soft); color: var(--mv3-success); }
.mv3-badge-danger  { background: var(--mv3-danger-soft);  color: var(--mv3-danger); }
.mv3-badge-warning { background: var(--mv3-warning-soft);  color: var(--mv3-amber-800); }

/* Numero en circulo (el "1, 2, 3" de las paradas de ruta) */
.mv3-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: var(--mv3-radius-circle);
    background: var(--mv3-bg-page);
    border: var(--mv3-border-width-interactive) solid var(--mv3-border);
    font-size: var(--mv3-fs-md);
    font-weight: var(--mv3-fw-extrabold);
    color: var(--mv3-primary);
    box-shadow: var(--mv3-shadow-xs);
}
.mv3-num-success {
    background: var(--mv3-success);
    border-color: var(--mv3-success);
    color: var(--mv3-text-on-accent);
}


/* ============================================================
   LISTAS  (el listado de vendedores del panel izquierdo)
   ============================================================ */
.mv3-list {
    display: flex;
    flex-direction: column;
    background: var(--mv3-bg-surface);
    border: var(--mv3-border-width) solid var(--mv3-border);
    border-radius: var(--mv3-radius-md);
    overflow: hidden;
}
.mv3-list-item {
    display: flex;
    align-items: center;
    gap: var(--mv3-space-3);
    padding: var(--mv3-space-3) var(--mv3-space-4);
    border-bottom: var(--mv3-border-width) solid var(--mv3-bg-subtle);
    font-size: var(--mv3-fs-base);
    font-weight: var(--mv3-fw-bold);
    color: var(--mv3-text);
    transition: background var(--mv3-transition-fast);
}
.mv3-list-item:last-child { border-bottom: none; }
.mv3-list-item:hover { background: var(--mv3-bg-page); }
.mv3-list-item-grow { flex: 1; min-width: 0; }
.mv3-list-item-trailing {
    margin-left: auto;
    font-size: var(--mv3-fs-sm);
    font-weight: var(--mv3-fw-extrabold);
    color: var(--mv3-text-subtle);
}


/* ============================================================
   ESTADO VACIO
   ============================================================ */
.mv3-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--mv3-space-8);
    background: var(--mv3-bg-page);
    border: var(--mv3-border-width-interactive) dashed var(--mv3-bg-subtle);
    border-radius: var(--mv3-radius-3xl);
}
.mv3-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--mv3-space-6);
    margin-bottom: var(--mv3-space-5);
    background: var(--mv3-bg-surface);
    border-radius: var(--mv3-radius-xl);
    box-shadow: var(--mv3-shadow-lg);
    color: var(--mv3-primary);
}
.mv3-empty-icon > svg { width: 48px; height: 48px; }

/* Titulo del estado vacio: peso 900 + mayusculas + italica */
.mv3-empty-title {
    margin: 0 0 var(--mv3-space-2);
    font-size: var(--mv3-fs-xl);
    font-weight: var(--mv3-fw-black);
    color: var(--mv3-text-strong);
    letter-spacing: var(--mv3-tracking-tight);
    text-transform: uppercase;
    font-style: italic;
}
.mv3-empty-desc {
    max-width: 16rem;
    margin: 0;
    font-size: var(--mv3-fs-md);
    font-weight: var(--mv3-fw-medium);
    line-height: var(--mv3-leading-loose);
    color: var(--mv3-text-subtle);
}


/* ============================================================
   ALERTAS
   ============================================================ */
.mv3-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--mv3-space-3);
    padding: var(--mv3-space-3) var(--mv3-space-4);
    border-radius: var(--mv3-radius-md);
    border-left: 4px solid transparent;
    font-size: var(--mv3-fs-base);
    font-weight: var(--mv3-fw-semibold);
    line-height: var(--mv3-leading-normal);
}
.mv3-alert > svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.mv3-alert-info    { background: var(--mv3-primary-soft); border-left-color: var(--mv3-primary); color: var(--mv3-primary-strong); }
.mv3-alert-success { background: var(--mv3-success-soft); border-left-color: var(--mv3-success); color: var(--mv3-green-900); }
.mv3-alert-warning { background: var(--mv3-warning-soft); border-left-color: var(--mv3-warning); color: var(--mv3-amber-800); }
.mv3-alert-danger  { background: var(--mv3-danger-soft);  border-left-color: var(--mv3-danger);  color: var(--mv3-red-700); }