/* ==========================================================================
   MUZKAPÚ · SISTEMA DE DISEÑO  (una sola fuente para todo el sitio)
   --------------------------------------------------------------------------
   Inspirado en el logotipo oficial: fondo negro, penacho rojo, letras blancas.
   REGLA: ninguna herramienta escribe colores sueltos (#hex). Todo sale de
   estas variables. Guía completa: docs/diseno.md  ·  Muestra viva: /sistema/diseno.php
   ========================================================================== */

:root {
    /* ---- Marca (tomados del logotipo, no cambiar) ---- */
    --mzk-negro: #030405;          /* fondo del logo: barras y encabezados */
    --mzk-rojo: #E84130;           /* penacho: acción principal y acentos */
    --mzk-blanco: #FFFFFF;         /* letras del logo */

    /* ---- Rojo: variaciones ---- */
    --mzk-rojo-presionado: #C9331F; /* botón rojo al presionar / pasar el mouse */
    --mzk-rojo-texto: #C42F1D;      /* texto o íconos rojos sobre blanco (se lee mejor) */
    --mzk-rojo-suave: #FDEDEA;      /* fondos de resalte suaves */

    /* ---- Negro: variaciones (encima de la barra negra) ---- */
    --mzk-negro-elevado: #17191C;   /* botones y cajas dentro de la barra */
    --mzk-negro-linea: #2A2D31;     /* bordes sobre negro */
    --mzk-sobre-negro-suave: #A8A29D; /* texto secundario sobre negro */

    /* ---- Neutros cálidos (hacia el rojo, no gris frío) ---- */
    --mzk-fondo: #F4F2F0;          /* fondo de las pantallas */
    --mzk-superficie: #FFFFFF;     /* tarjetas, ventanas */
    --mzk-superficie-2: #F9F8F7;   /* campos de captura, zonas de solo lectura */
    --mzk-borde: #E5E1DD;
    --mzk-borde-fuerte: #CBC4BE;
    --mzk-texto: #1A1817;
    --mzk-texto-suave: #6B645E;
    --mzk-texto-tenue: #9D958E;

    /* ---- Estados (solo para avisos, nunca como decoración) ---- */
    --mzk-ok: #1E8A4C;        --mzk-ok-suave: #E5F3EA;
    --mzk-aviso: #B87400;     --mzk-aviso-suave: #FFF3D9;   --mzk-aviso-fuerte: #E59A0B;
    --mzk-error: #B42318;     --mzk-error-suave: #FDE8E6;
    --mzk-info: #2E5AAC;      --mzk-info-suave: #E8EEFA;

    /* ---- Productos (para distinguirlos en tablas y gráficas) ---- */
    --mzk-tradicional: var(--mzk-rojo);   --mzk-tradicional-suave: var(--mzk-rojo-suave);
    --mzk-ranchero: #B98428;              --mzk-ranchero-suave: #FBF1DE;

    /* ---- Tipografía: Outfit (geométrica y gruesa, como el logotipo) ---- */
    --mzk-letra: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mzk-t-xs: .75rem;   /* 12  etiquetas pequeñas */
    --mzk-t-s: .875rem;   /* 14  texto secundario */
    --mzk-t-m: 1rem;      /* 16  texto normal */
    --mzk-t-l: 1.125rem;  /* 18  títulos de tarjeta */
    --mzk-t-xl: 1.375rem; /* 22  títulos de pantalla */
    --mzk-t-2xl: 1.75rem; /* 28  números grandes */
    --mzk-t-3xl: 2.25rem; /* 36  totales destacados */

    /* ---- Espacios, esquinas y sombras ---- */
    --mzk-e1: 4px; --mzk-e2: 8px; --mzk-e3: 12px; --mzk-e4: 16px; --mzk-e5: 24px; --mzk-e6: 32px;
    --mzk-radio-s: 8px;    /* chips pequeños, casillas */
    --mzk-radio: 12px;     /* botones y campos */
    --mzk-radio-l: 16px;   /* tarjetas */
    --mzk-radio-xl: 22px;  /* ventanas */
    --mzk-sombra-1: 0 1px 2px rgba(3, 4, 5, .06);
    --mzk-sombra-2: 0 6px 18px rgba(3, 4, 5, .10);
    --mzk-sombra-3: 0 18px 44px rgba(3, 4, 5, .22);
    --mzk-barra-alto: 60px;
    --mzk-foco: 0 0 0 3px rgba(232, 65, 48, .35);
}

/* ==========================================================================
   BASE
   ========================================================================== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body { font-family: var(--mzk-letra); background: var(--mzk-fondo); color: var(--mzk-texto); font-size: var(--mzk-t-m); line-height: 1.45; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
:focus-visible { outline: none; box-shadow: var(--mzk-foco); }
.mzk-num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ==========================================================================
   BARRA SUPERIOR (igual en todas las herramientas)
   [logo] | Título de la herramienta ............ [acciones] [S] [salir]
   El logo lleva su propio fondo negro: la barra usa EXACTAMENTE el mismo negro.
   ========================================================================== */
.mzk-barra {
    position: sticky; top: 0; z-index: 1000;
    display: flex; align-items: center; gap: var(--mzk-e3);
    min-height: var(--mzk-barra-alto);
    background: var(--mzk-negro); color: var(--mzk-blanco);
    padding: 8px max(14px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px));
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    font-family: var(--mzk-letra);
}
.mzk-barra-logo { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.mzk-barra-logo img { height: 40px; width: auto; display: block; }
.mzk-barra-sep { width: 1px; align-self: stretch; margin: 6px 2px; background: var(--mzk-negro-linea); flex: 0 0 auto; }
.mzk-barra-titulo { flex: 1; min-width: 0; font-weight: 700; font-size: var(--mzk-t-m); letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mzk-barra-titulo small { display: block; font-weight: 500; font-size: var(--mzk-t-xs); color: var(--mzk-sobre-negro-suave); letter-spacing: .3px; }
.mzk-barra-acciones { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.mzk-barra-btn {
    width: 40px; height: 40px; border-radius: var(--mzk-radio); border: 1px solid var(--mzk-negro-linea);
    display: grid; place-items: center; color: var(--mzk-blanco); background: var(--mzk-negro-elevado);
    text-decoration: none; cursor: pointer; flex: 0 0 auto; font-size: 1rem; padding: 0;
}
.mzk-barra-btn:hover { border-color: var(--mzk-sobre-negro-suave); }
.mzk-barra-btn:active { background: var(--mzk-negro-linea); }
.mzk-barra-btn.activo { background: var(--mzk-rojo); border-color: var(--mzk-rojo); }
.mzk-barra-btn-texto { width: auto; padding: 0 12px; gap: 6px; display: inline-flex; font-weight: 600; font-size: var(--mzk-t-s); }
.mzk-barra-usuario { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--mzk-t-s); }
.mzk-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--mzk-rojo); color: var(--mzk-blanco); display: grid; place-items: center; font-weight: 800; font-size: .9rem; flex: 0 0 auto; }
.mzk-avatar.admin { background: var(--mzk-texto); }
.mzk-barra .mzk-avatar.admin { background: var(--mzk-blanco); color: var(--mzk-negro); }
@media (max-width: 560px) {
    .mzk-barra-nombre { display: none; }
    /* En el teléfono, si la herramienta tiene botones propios, se ocultan la inicial y "salir"
       (se sale desde el menú principal, tocando el logo) */
    .mzk-barra.con-acciones .mzk-barra-usuario, .mzk-barra.con-acciones .mzk-barra-salir { display: none; }
    .mzk-barra { gap: var(--mzk-e2); }
    .mzk-barra-logo img { height: 34px; }
    .mzk-barra-btn-texto span { display: none; }
    .mzk-barra-btn-texto { width: 40px; padding: 0; }
}
@media (max-width: 380px) { .mzk-barra-sep { display: none; } }
/* Teléfono angosto con botones propios: el logo se ve dentro del menú ☰, así el nombre de la herramienta cabe */
@media (max-width: 440px) { .mzk-barra.con-acciones .mzk-barra-logo, .mzk-barra.con-acciones .mzk-barra-sep { display: none; } }

/* ==========================================================================
   MENÚ LATERAL (☰): saltar entre herramientas desde cualquier pantalla
   ========================================================================== */
.mzk-menu { position: fixed; inset: 0; z-index: 5000; visibility: hidden; font-family: var(--mzk-letra); }
.mzk-menu.abierto { visibility: visible; }
.mzk-menu-fondo { position: absolute; inset: 0; background: rgba(3, 4, 5, .5); opacity: 0; transition: opacity .2s; }
.mzk-menu.abierto .mzk-menu-fondo { opacity: 1; }
.mzk-menu-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); background: var(--mzk-negro); color: var(--mzk-blanco);
    display: flex; flex-direction: column; overflow-y: auto; transform: translateX(-100%); transition: transform .22s ease;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    box-shadow: var(--mzk-sombra-3); }
.mzk-menu.abierto .mzk-menu-panel { transform: none; }
.mzk-menu-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 12px; border-bottom: 1px solid var(--mzk-negro-linea); margin-bottom: 8px; }
.mzk-menu-cabeza img { height: 40px; width: auto; display: block; }
.mzk-menu-grupo { font-size: var(--mzk-t-xs); font-weight: 700; color: var(--mzk-sobre-negro-suave); margin: 14px 10px 4px; }
.mzk-menu-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--mzk-radio); color: var(--mzk-blanco);
    text-decoration: none; font-weight: 600; font-size: var(--mzk-t-m); position: relative; }
.mzk-menu-item i { width: 22px; text-align: center; color: var(--mzk-sobre-negro-suave); }
.mzk-menu-item:hover, .mzk-menu-item:focus-visible { background: var(--mzk-negro-elevado); }
.mzk-menu-item.actual { background: var(--mzk-negro-elevado); }
.mzk-menu-item.actual i { color: var(--mzk-rojo); }
.mzk-menu-item.actual::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--mzk-rojo); }
.mzk-menu-pie { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 4px 2px; border-top: 1px solid var(--mzk-negro-linea); }
.mzk-menu-quien { flex: 1; min-width: 0; }
.mzk-menu-num { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--mzk-rojo);
    color: var(--mzk-blanco); font-size: var(--mzk-t-xs); font-weight: 800; display: grid; place-items: center; }
.mzk-menu-quien b { display: block; font-size: var(--mzk-t-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mzk-menu-quien small { color: var(--mzk-sobre-negro-suave); font-size: var(--mzk-t-xs); }
.mzk-menu .mzk-avatar.admin { background: var(--mzk-blanco); color: var(--mzk-negro); }

/* ==========================================================================
   CONTENIDO
   ========================================================================== */
.mzk-main { max-width: 980px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); }
.mzk-centro { min-height: calc(100vh - 80px); display: grid; place-items: center; }
.mzk-saludo { margin: 4px 2px 20px; }
.mzk-saludo h1 { margin: 0; font-size: var(--mzk-t-xl); font-weight: 800; }
.mzk-saludo p { margin: 4px 0 0; color: var(--mzk-texto-suave); }
.mzk-grupo-titulo { margin: 26px 2px 10px; font-size: var(--mzk-t-s); font-weight: 700; color: var(--mzk-texto-suave); }

.mzk-tarjeta { background: var(--mzk-superficie); border-radius: var(--mzk-radio-l); border: 1px solid var(--mzk-borde); padding: 18px; }
.mzk-tarjeta + .mzk-tarjeta { margin-top: 14px; }
.mzk-tarjeta h2 { margin: 0 0 12px; font-size: var(--mzk-t-l); font-weight: 700; }
.mzk-tarjeta h2 i { color: var(--mzk-rojo-texto); margin-right: 4px; }

/* ---- Botones del panel ---- */
.mzk-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mzk-herr { display: flex; gap: 14px; align-items: center; text-decoration: none; background: var(--mzk-superficie);
    border: 1px solid var(--mzk-borde); border-radius: var(--mzk-radio-l); padding: 16px; min-height: 84px;
    transition: border-color .15s, box-shadow .15s; }
.mzk-herr:hover { border-color: var(--mzk-borde-fuerte); box-shadow: var(--mzk-sombra-2); }
.mzk-herr:active { transform: scale(.985); }
.mzk-herr-icono { width: 48px; height: 48px; border-radius: var(--mzk-radio); display: grid; place-items: center; font-size: 1.25rem;
    background: var(--mzk-negro); color: var(--mzk-rojo); flex: 0 0 auto; }
.mzk-herr b { display: block; font-size: var(--mzk-t-m); font-weight: 700; }
.mzk-herr small { display: block; color: var(--mzk-texto-suave); font-size: var(--mzk-t-s); margin-top: 2px; }

/* ==========================================================================
   BOTONES
   rojo = la acción principal de la pantalla (una sola) · negro = acción fuerte secundaria
   claro = acciones normales · peligro = borrar/desactivar
   ========================================================================== */
.mzk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent;
    border-radius: var(--mzk-radio); padding: 12px 18px; font-weight: 700; font-size: var(--mzk-t-m); cursor: pointer;
    text-decoration: none; background: var(--mzk-superficie); color: var(--mzk-texto); border-color: var(--mzk-borde); line-height: 1.2; }
.mzk-btn:hover { border-color: var(--mzk-borde-fuerte); }
.mzk-btn:disabled { opacity: .5; cursor: default; }
.mzk-btn:active { transform: translateY(1px); }
.mzk-btn-rojo { background: var(--mzk-rojo); color: var(--mzk-blanco); border-color: var(--mzk-rojo); }
.mzk-btn-rojo:hover, .mzk-btn-rojo:active { background: var(--mzk-rojo-presionado); border-color: var(--mzk-rojo-presionado); }
.mzk-btn-negro { background: var(--mzk-negro); color: var(--mzk-blanco); border-color: var(--mzk-negro); }
.mzk-btn-negro:hover { background: var(--mzk-negro-elevado); }
.mzk-btn-peligro { background: var(--mzk-superficie); color: var(--mzk-error); border-color: var(--mzk-borde); }
.mzk-btn-peligro:hover { border-color: var(--mzk-error); }
.mzk-btn-chico { padding: 8px 12px; font-size: var(--mzk-t-s); border-radius: 10px; }
.mzk-btn-bloque { width: 100%; }

/* ---- Título de sección dentro de una pantalla (ej. "1. Ingresos") ---- */
.mzk-seccion { font-size: var(--mzk-t-l); font-weight: 700; color: var(--mzk-texto); margin: 26px 0 10px; padding-bottom: 6px;
    border-bottom: 1px solid var(--mzk-borde); text-transform: none; letter-spacing: 0; }
.mzk-seccion small { font-weight: 500; font-size: var(--mzk-t-s); color: var(--mzk-texto-suave); }

/* ---- Botón "agregar renglón" (línea punteada) ---- */
.mzk-agregar { width: 100%; padding: 12px; margin-top: 6px; border: 1.5px dashed var(--mzk-borde-fuerte); border-radius: var(--mzk-radio);
    background: var(--mzk-superficie); color: var(--mzk-texto-suave); font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.mzk-agregar:hover { border-color: var(--mzk-rojo); color: var(--mzk-rojo-texto); }
.mzk-agregar i { font-size: .9em; }

/* ==========================================================================
   PIEZAS PARA EL INTERIOR DE LAS HERRAMIENTAS (oct 2026)
   Una pantalla de captura o consulta se arma con PANELES: cada bloque es una
   tarjeta con su título a la izquierda y su cifra a la derecha.
   ========================================================================== */

/* ---- Panel: tarjeta con cabeza "Título ............ $1,234.00" ---- */
.mzk-panel { background: var(--mzk-superficie); border: 1px solid var(--mzk-borde); border-radius: var(--mzk-radio-l);
    padding: 4px 16px 14px; margin-bottom: 14px; }
.mzk-panel-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0 10px; }
.mzk-panel-cabeza h2 { margin: 0; font-size: var(--mzk-t-l); font-weight: 700; }
.mzk-panel-cabeza h2 small { display: block; font-size: var(--mzk-t-s); font-weight: 500; color: var(--mzk-texto-suave); margin-top: 2px; }
.mzk-panel-dato { font-size: var(--mzk-t-l); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mzk-panel-dato.menos { color: var(--mzk-rojo-texto); }
.mzk-panel-dato.mas { color: var(--mzk-ok); }
.mzk-panel-dato.cero { color: var(--mzk-texto-tenue); font-weight: 600; }
.mzk-panel .mzk-agregar { margin-top: 10px; background: transparent; }

/* ---- Renglón dentro de un panel (separado por línea, sin tarjeta propia) ---- */
.mzk-renglon { border-top: 1px solid var(--mzk-borde); padding: 12px 0; }
.mzk-renglon:first-child { border-top: 0; }

/* ---- Etiqueta + campo compacto (para capturar números rápido) ---- */
.mzk-entrada { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mzk-entrada > span { font-size: var(--mzk-t-xs); font-weight: 600; color: var(--mzk-texto-suave); }
.mzk-entrada input, .mzk-entrada select { width: 100%; height: 48px; padding: 0 12px; border: 1.5px solid var(--mzk-borde);
    border-radius: var(--mzk-radio); background: var(--mzk-superficie-2); font-size: var(--mzk-t-m); font-weight: 600; }
.mzk-entrada input[type=number], .mzk-entrada input[inputmode] { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mzk-entrada input:focus, .mzk-entrada select:focus { outline: none; border-color: var(--mzk-rojo); background: var(--mzk-superficie); box-shadow: none; }
.mzk-entrada input::placeholder { color: var(--mzk-texto-tenue); font-weight: 500; }

/* ---- Selector rápido (Hoy · Esta semana · Este mes) ---- */
.mzk-segmento { display: flex; gap: 4px; padding: 4px; background: var(--mzk-borde); border-radius: var(--mzk-radio); overflow-x: auto; }
.mzk-segmento button { flex: 1; white-space: nowrap; border: 0; background: transparent; padding: 10px 12px; border-radius: 9px;
    font-weight: 600; font-size: var(--mzk-t-s); color: var(--mzk-texto-suave); cursor: pointer; }
.mzk-segmento button.activo { background: var(--mzk-superficie); color: var(--mzk-texto); box-shadow: var(--mzk-sombra-1); }

/* ---- Punto de color por producto (el mismo en Control, Consultas y Ventas) ---- */
.mzk-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--mzk-borde-fuerte); flex: 0 0 auto; }
.mzk-punto.tradicional { background: var(--mzk-tradicional); }
.mzk-punto.ranchero { background: var(--mzk-ranchero); }

/* ---- Cifra destacada: número grande con su etiqueta ---- */
.mzk-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.mzk-cifra { background: var(--mzk-superficie); border: 1px solid var(--mzk-borde); border-radius: var(--mzk-radio-l); padding: 14px 16px; }
.mzk-cifra > span { display: block; font-size: var(--mzk-t-s); color: var(--mzk-texto-suave); font-weight: 500; }
.mzk-cifra b { display: block; font-size: var(--mzk-t-2xl); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 2px; }
.mzk-cifra > small { display: block; font-size: var(--mzk-t-xs); color: var(--mzk-texto-suave); margin-top: 2px; }
.mzk-cifra.oscura { background: var(--mzk-negro); border-color: var(--mzk-negro); color: var(--mzk-blanco); }
.mzk-cifra.oscura > span, .mzk-cifra.oscura > small { color: var(--mzk-sobre-negro-suave); }

/* ---- Pendiente: algo que necesita tu atención (panel de inicio) ---- */
.mzk-pendiente { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--mzk-radio);
    background: var(--mzk-superficie); border: 1px solid var(--mzk-borde); text-decoration: none; color: inherit; }
.mzk-pendiente:hover { border-color: var(--mzk-borde-fuerte); }
.mzk-pendiente-num { min-width: 40px; height: 40px; padding: 0 8px; border-radius: 12px; display: grid; place-items: center;
    background: var(--mzk-aviso-suave); color: var(--mzk-aviso); font-weight: 800; font-size: var(--mzk-t-l); font-variant-numeric: tabular-nums; }
.mzk-pendiente-num.rojo { background: var(--mzk-rojo-suave); color: var(--mzk-rojo-texto); }
.mzk-pendiente-info { flex: 1; min-width: 0; }
.mzk-pendiente-info b { display: block; font-weight: 700; }
.mzk-pendiente-info small { display: block; color: var(--mzk-texto-suave); font-size: var(--mzk-t-s); }
.mzk-pendiente > i { color: var(--mzk-texto-tenue); }

/* ---- Botón de quitar renglón (×) ---- */
.mzk-quitar { width: 36px; height: 36px; flex: 0 0 auto; border: 0; border-radius: 10px; background: transparent; color: var(--mzk-texto-tenue);
    font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; }
.mzk-quitar:hover { background: var(--mzk-rojo-suave); color: var(--mzk-rojo-texto); }

/* ---- Solo en teléfono / solo en computadora ---- */
@media (max-width: 560px) { .mzk-solo-pc { display: none !important; } }
@media (min-width: 561px) { .mzk-solo-cel { display: none !important; } }

/* ---- Campos ---- */
.mzk-campo { margin-bottom: 14px; }
.mzk-campo label { display: block; font-weight: 600; font-size: var(--mzk-t-s); margin-bottom: 6px; }
.mzk-campo input, .mzk-campo select, .mzk-campo textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--mzk-borde);
    border-radius: var(--mzk-radio); background: var(--mzk-superficie-2); transition: border-color .15s, background .15s; }
.mzk-campo input:focus, .mzk-campo select:focus, .mzk-campo textarea:focus { outline: none; border-color: var(--mzk-rojo); background: var(--mzk-superficie); box-shadow: none; }
.mzk-campo small { display: block; color: var(--mzk-texto-suave); margin-top: 5px; font-size: .82rem; }
.mzk-check { display: flex; gap: 10px; align-items: center; font-size: .93rem; color: var(--mzk-texto-suave); margin: 4px 0 16px; cursor: pointer; }
.mzk-check input { width: 20px; height: 20px; accent-color: var(--mzk-rojo); }
.mzk-error { color: var(--mzk-error); font-weight: 600; font-size: .92rem; min-height: 1.2em; margin: 4px 0 10px; }
.mzk-ok { color: var(--mzk-ok); font-weight: 600; }

/* ---- Avisos en franja ---- */
.mzk-aviso { text-align: center; max-width: 420px; }
.mzk-aviso-icono { font-size: 2rem; color: var(--mzk-rojo); margin-bottom: 6px; }
.mzk-aviso h1 { font-size: var(--mzk-t-xl); margin: 6px 0; }
.mzk-aviso p { color: var(--mzk-texto-suave); }
.mzk-franja { border-radius: var(--mzk-radio); padding: 12px 14px; margin-bottom: 14px; font-weight: 500; display: flex; gap: 10px; align-items: flex-start; border: 1px solid transparent; }
.mzk-franja i { margin-top: 3px; }
.mzk-franja-ok { background: var(--mzk-ok-suave); color: var(--mzk-ok); border-color: rgba(30, 138, 76, .25); }
.mzk-franja-error { background: var(--mzk-error-suave); color: var(--mzk-error); border-color: rgba(180, 35, 24, .25); }
.mzk-franja-info { background: var(--mzk-aviso-suave); color: var(--mzk-aviso); border-color: rgba(184, 116, 0, .25); }

/* ---- Chips (etiquetas de estado) ---- */
.mzk-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: var(--mzk-t-xs); font-weight: 700; background: var(--mzk-superficie-2); color: var(--mzk-texto-suave); border: 1px solid var(--mzk-borde); white-space: nowrap; }
.mzk-chip-admin { background: var(--mzk-negro); color: var(--mzk-blanco); border-color: var(--mzk-negro); }
.mzk-chip-vendedor { background: var(--mzk-rojo-suave); color: var(--mzk-rojo-texto); border-color: transparent; }
.mzk-chip-inactivo { background: var(--mzk-borde); color: var(--mzk-texto-suave); border-color: transparent; }
.mzk-chip-aviso { background: var(--mzk-aviso-fuerte); color: var(--mzk-blanco); border-color: transparent; }
.mzk-chip-ok { background: var(--mzk-ok-suave); color: var(--mzk-ok); border-color: transparent; }

/* ---- Listas ---- */
.mzk-lista { display: flex; flex-direction: column; gap: 8px; }
.mzk-fila { display: flex; align-items: center; gap: 12px; background: var(--mzk-superficie); border: 1px solid var(--mzk-borde); border-radius: var(--mzk-radio); padding: 12px 14px; }
.mzk-fila.inactivo { opacity: .6; }
.mzk-fila-info { flex: 1; min-width: 0; }
.mzk-fila-info b { display: block; }
.mzk-fila-info small { color: var(--mzk-texto-suave); font-size: var(--mzk-t-s); }
.mzk-fila-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---- Ventana emergente ---- */
.mzk-modal { position: fixed; inset: 0; background: rgba(3, 4, 5, .55); display: none; align-items: flex-end; justify-content: center; z-index: 2000; }
.mzk-modal.abierto { display: flex; }
.mzk-modal-caja { background: var(--mzk-superficie); width: 100%; max-width: 460px; border-radius: var(--mzk-radio-xl) var(--mzk-radio-xl) 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)); max-height: 92vh; overflow: auto; box-shadow: var(--mzk-sombra-3); }
.mzk-modal-caja h2 { margin: 0 0 16px; font-size: var(--mzk-t-l); }
.mzk-modal-pie { display: flex; gap: 10px; margin-top: 8px; }
.mzk-modal-pie .mzk-btn { flex: 1; }
@media (min-width: 600px) { .mzk-modal { align-items: center; } .mzk-modal-caja { border-radius: var(--mzk-radio-xl); } }

/* ---- Pantalla de entrar ---- */
.mzk-entrar { min-height: 100vh; background: var(--mzk-negro); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; color: var(--mzk-blanco); }
.mzk-entrar .logo { width: 320px; max-width: 78vw; margin-bottom: 18px; display: block; }
.mzk-entrar .caja { width: 100%; max-width: 380px; background: var(--mzk-superficie); color: var(--mzk-texto); border-radius: var(--mzk-radio-xl); padding: 26px; }
.mzk-entrar h1 { margin: 0 0 4px; font-size: var(--mzk-t-xl); font-weight: 800; }
.mzk-entrar .sub { margin: 0 0 20px; color: var(--mzk-texto-suave); font-size: var(--mzk-t-s); }
.mzk-entrar .mzk-campo { position: relative; }
.mzk-entrar .mzk-campo i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--mzk-texto-tenue); }
.mzk-entrar .mzk-campo input { padding-left: 42px; }

.mzk-pie { text-align: center; color: var(--mzk-texto-tenue); font-size: .8rem; margin-top: 30px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }