/*
 * Zunzun Logistics — reforma de diseño, Fase 0 (fundación global)
 * Perfex auto-carga este archivo si existe en assets/css/custom.css — no requiere
 * ningún hook ni edición de archivos core (ver _init_admin_assets()).
 *
 * Alcance de esta fase: tipografía de marca, radio/sombra de los paneles (.panel_s)
 * y recoloreo del color primario (Bootstrap .btn-primary + escala Tailwind
 * tw-*-primary-*) al teal de marca. El resto (sidebar colapsable, pantalla Inicio
 * de Courier, status-pills) es Fase 1/2, ver /home/jos/.claude/plans/mossy-spinning-coral.md
 */

/* ---------- 1. Tipografía autohospedada ---------- */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/zunzun/PlusJakartaSans-Variable.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/zunzun/IBMPlexMono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/zunzun/IBMPlexMono-500.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/zunzun/IBMPlexMono-600.woff2') format('woff2');
}

:root{
    --zz-font-ui:'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --zz-font-mono:'IBM Plex Mono', ui-monospace, Consolas, monospace;
    --zz-brand:#0059e6;
    --zz-brand-dark:#0046b3;
    --zz-brand-active:#003380;
    --zz-brand-tint:#e5f0fe;
    /* Violeta solido (2026-10-05, extremo oscuro del degradado del logo,
       #8b00f0, bajado de luminosidad para que funcione como color de UI
       plano): segundo color de marca para marcar jerarquia entre
       elementos del mismo tipo (ej. la metrica mas importante de un grupo
       de tarjetas KPI) - no reemplaza a --zz-brand, se usa junto a el. */
    --zz-brand-violet:#6a1fd0;
    --zz-brand-violet-dark:#53189f;
    --zz-brand-violet-tint:#efe8fc;
    /* Degradado real del logo (2026-10-05, sampleado del PNG) - reservado
       para superficies "hero" (item activo del sidebar, mark del sidebar).
       El resto de la UI (botones, badges, links, switches, texto, iconos
       chicos) sigue en --zz-brand/--zz-brand-violet solidos: un degradado
       ahi se ve sucio/recargado (confirmado en vivo con Jose, 2026-10-05:
       se probo en botones e iconos chicos y se volvio para atras). */
    --zz-brand-gradient:linear-gradient(100deg, #00a5f3 0%, #0059e6 35%, #3b1fe0 65%, #8b00f0 100%);
    --zz-radius:22px;
    --zz-radius-sm:14px;
    --zz-shadow:0 1px 2px rgba(20,24,31,.04), 0 10px 24px rgba(20,24,31,.06);
    --zz-border:#e3e6ea;
    --zz-n-50:#f6f7f8;
    --zz-n-100:#eef0f2;
    --zz-n-600:#4b5563;
    --zz-n-700:#333a44;
    --zz-anim:.28s cubic-bezier(.4,0,.2,1); /* colapso del sidebar: sidebar, header, contenido y barra Guardar juntos */
}

body, .btn, input, select, textarea, .form-control,
.dropdown-menu, table, .navbar, #side-menu, .tooltip, .popover {
    font-family: var(--zz-font-ui) !important;
}
/* puntos donde el tema usaba Helvetica/Verdana sueltos quedan cubiertos por el
   selector amplio de arriba; no se listan selectores puntuales porque no
   agregan especificidad relevante frente a la regla general. */

/* código/números — guías, tracking, montos: se aplica manualmente con la
   clase .zz-mono en las vistas propias de Courier, no globalmente. */
.zz-mono{ font-family: var(--zz-font-mono); }

/* ---------- 2. Paneles: radio + sombra ---------- */
.panel, .panel_s {
    border-radius: var(--zz-radius) !important;
    box-shadow: var(--zz-shadow) !important;
    border-color: var(--zz-border) !important;
}
.panel-body { border-radius: var(--zz-radius); }

/* ---------- 3. Color de marca ---------- */
/* Bootstrap .btn-primary (base #337ab7). El degradado completo en algo
   tan chico como un boton se ve recargado/poco profesional (Jose,
   2026-10-05, viendo el icono de Reportes + "Generar": "dejemosla en el
   azul de la paleta se ve mas profesional") - vuelve a azul solido. El
   degradado se reserva para superficies mas grandes donde entra completo
   sin apretarse (franja KPI de Inicio, acento del casillero del portal). */
.btn-primary{
    background-color: var(--zz-brand);
    border-color: var(--zz-brand-dark);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus{
    background-color: var(--zz-brand-dark);
    border-color: var(--zz-brand-dark);
}
.btn-primary.active,
.btn-primary:active,
.open>.dropdown-toggle.btn-primary{
    background-color: var(--zz-brand-active);
    border-color: var(--zz-brand-active);
}
.btn-primary .badge{ color: var(--zz-brand); }

/* Escala Tailwind tw-*-primary-* (todas las variantes detectadas en el build) */
.tw-bg-primary-50{ background-color:#eff6ff !important; }
.tw-bg-primary-100{ background-color:#dbeafe !important; }
.tw-bg-primary-200{ background-color:#bfdbfe !important; }
.tw-bg-primary-300{ background-color:#93c5fd !important; }
.tw-bg-primary-400{ background-color:#60a5fa !important; }
.tw-bg-primary-500{ background-color:#3b82f6 !important; }
.tw-bg-primary-600{ background-color:var(--zz-brand) !important; }
.tw-bg-primary-700{ background-color:var(--zz-brand-dark) !important; }
.tw-bg-primary-800{ background-color:#1e40af !important; }
.tw-bg-primary-900{ background-color:#1e3a8a !important; }
.tw-bg-primary-950{ background-color:#172554 !important; }

.tw-text-primary-50{ color:#eff6ff !important; }
.tw-text-primary-100{ color:#dbeafe !important; }
.tw-text-primary-200{ color:#bfdbfe !important; }
.tw-text-primary-300{ color:#93c5fd !important; }
.tw-text-primary-400{ color:#60a5fa !important; }
.tw-text-primary-500{ color:#3b82f6 !important; }
.tw-text-primary-600{ color:var(--zz-brand) !important; }
.tw-text-primary-700{ color:var(--zz-brand-dark) !important; }
.tw-text-primary-800{ color:#1e40af !important; }
.tw-text-primary-900{ color:#1e3a8a !important; }
.tw-text-primary-950{ color:#172554 !important; }

.tw-border-primary-600{ border-color: var(--zz-brand) !important; }
.tw-ring-primary-500{ --tw-ring-color:#3b82f6 !important; }

/* ---------- 4. Status-pill de Courier (reutilizado en Paquetes/Valijas/Embarques/Aduana) ---------- */
.zz-pill{
    display:inline-block; font-size:11.5px; font-weight:600;
    padding:4px 11px; border-radius:999px; font-family: var(--zz-font-ui);
    white-space: nowrap;
}
.zz-pill-warehouse{ background:#eaf0fe; color:#3d5cad; }
.zz-pill-valija{ background:#fbf1de; color:#96690f; }
.zz-pill-embarque{ background:#e5f0fe; color:var(--zz-brand-dark); }
.zz-pill-aduana{ background:#f1edfb; color:#5c3fb0; }
.zz-pill-default{ background:#eef0f2; color:#6b7280; }
.zz-pill-entregado{ background:#e7f6ee; color:#1e8e5a; }
.zz-pill-alerta{ background:#fbeaea; color:#d14343; }

/* código/tracking en tablas de Courier */
td.zz-mono, span.zz-mono{ font-family: var(--zz-font-mono); font-size: 12.5px; }

/* Links por defecto (Bootstrap: #337ab7 / hover #23527c) */
a{ color: var(--zz-brand-dark); }
a:hover, a:focus{ color: var(--zz-brand-active); }

/* Bootstrap .text-primary / .bg-primary (utilidades, no Tailwind) */
.text-primary{ color: var(--zz-brand-dark) !important; }
.bg-primary{ background-color: var(--zz-brand) !important; }

/* Item activo del submenú del sidebar (assets/css/style.min.css, hardcodeado #2b65e8) */
.sidebar li .nav-second-level li.active a{ background-color: var(--zz-brand) !important; }

/* Pestaña activa de "navbar-pills" (usado en Configuración y otras vistas con tabs verticales) */
.navbar-pills-flat>li.active>a,
.navbar-pills-flat>li.active>a:hover,
.navbar-pills-flat>li.active>a:focus{ color: var(--zz-brand-dark); }

/* Checkbox/radio "primary" (usados en toda la app para toggles Sí/No) */
.checkbox-primary input[type=checkbox]:checked+label:before,
.checkbox-primary input[type=radio]:checked+label:before,
.radio-primary input[type=radio]:checked+label:before{
    background-color: var(--zz-brand) !important;
    border-color: var(--zz-brand) !important;
}
.radio-primary input[type=radio]+label:after,
.radio-primary input[type=radio]:checked+label:after{ background-color: var(--zz-brand) !important; }

/* ---------- 5. Shell de desktop: sidebar + header iguales al mock ---------- */
/* Todo este bloque depende de html.zz-shell, que se agrega en el <head>
   (golat_reload_custom_css, antes del primer pintado, para que el menu nativo
   de Perfex no llegue a verse) solo en >=992px. El sidebar (#zz-sidebar) es markup propio con los links
   reales de Perfex; el #menu original queda oculto. Valores calcados de
   ~/Downloads/zunzun-mockup-dashboard.html (.frame padding/gap 24px,
   .sidebar 248px / 76px colapsado, .topbar). Por debajo de 992px Perfex
   conserva su layout y off-canvas nativos. */
.zzs-sidebar{ display:none; }

@media (min-width: 992px){
    html.zz-shell, html.zz-shell body{ background:var(--zz-n-50) !important; color:#14181f; -webkit-font-smoothing:antialiased; }
    html.zz-shell #menu,
    html.zz-shell #header .hide-menu,
    html.zz-shell #header .mobile-menu{ display:none !important; }
    /* "Que tienes en mente" (muro social interno de Perfex, por
       departamento) - sin uso real en el flujo de courier de Zunzun,
       2026-10-06 a pedido de Jose. */
    html.zz-shell #header .header-newsfeed{ display:none !important; }

    /* Mientras zunzun-theme.js (que corre al final de la carga) no construyo
       el sidebar: marco blanco vacio en su lugar, y el hueco del titulo del
       header reservado, para que nada salte cuando aparecen. */
    html.zz-shell body:not(:has(#zz-sidebar))::before{
        content:""; position:fixed; top:24px; left:24px; bottom:24px; width:248px; z-index:1000;
        background:#fff; border:1px solid var(--zz-border); box-shadow:var(--zz-shadow); border-radius:var(--zz-radius);
    }
    html.zz-shell.zz-sidebar-collapsed body:not(:has(#zz-sidebar))::before{ width:76px; }
    html.zz-shell #header > nav > .tw-flex:not(:has(> .zz-hdr-title))::before{ content:""; flex:1; }
    html.zz-shell #wrapper .zz-topbar{ display:none; }

    /* ----- sidebar (.sidebar del mock) ----- */
    html.zz-shell .zzs-sidebar{
        position:fixed; top:24px; left:24px; bottom:24px; z-index:1000;
        width:248px; display:flex; flex-direction:column;
        background:#fff; border:1px solid var(--zz-border); box-shadow:var(--zz-shadow);
        border-radius:var(--zz-radius); padding:24px 18px;
        transition:width var(--zz-anim), padding var(--zz-anim);
        font-family:var(--zz-font-ui); color:#14181f;
    }
    .zzs-icon{ width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
    /* 2026-10-06, Jose: "centralo ubicalo mejor", despues "eso no se ve
       centrado" - matematicamente SI quedaba centrado dentro de la fila
       (confirmado con getBoundingClientRect, margen identico de 65.9px a
       cada lado), pero el boton de colapso circular (position:absolute,
       right:-14px sobre .zzs-sidebar) se mete ~15px DENTRO de la tarjeta
       del lado derecho - esa masa visual extra hace que el centrado
       matematico se vea corrido a la izquierda. Se compensa con padding-
       right mayor que el left (shorthand de 4 valores) para que el
       centrado excluya la zona que ocupa visualmente el boton. */
    /* 2026-10-06, Jose (aclaracion final con imagen marcada): "la linea roja
       marca donde debe estar el logo a la altura de las secciones justo
       donde comienza el icono" - no va centrado, va alineado a la
       izquierda, mismo x donde arrancan los iconos de .zzs-nav-item (55px
       en vivo: 18px padding del sidebar + 12px padding del nav-item -> el
       padding-left de esta fila pasa de 3px a 12px para calzar ahi). */
    .zzs-brand-row{ display:flex; align-items:center; gap:11px; padding:0 18px 24px 12px; margin-bottom:8px; border-bottom:1px solid var(--zz-border); color:#14181f !important; text-decoration:none !important; overflow:hidden; transition:padding var(--zz-anim); flex-shrink:0; }
    /* 2026-10-06, Jose: "usala tal y como esta, sin recortar nada... cortaste
       el colibri del texto y los colocaste separados" - expandido es UNA
       sola imagen (zz-logo-full.png, colibri+wordmark juntos, con margen
       real alrededor - "hazlo bien no importa el tamano debe salir
       completo", altura 44px en vez de los 40px originales que lo dejaban
       muy pegado al borde). Colapsado muestra el colibri solo
       (zz-bird-mark.png, recorte aparte - esto si corresponde, Jose
       confirmo: "aca va solo el colibri... recortar bien el colibrio solo
       para este caso") via las dos imagenes de abajo, una de las cuales
       se oculta segun el estado. */
    .zzs-brand-logo{ position:relative; height:44px; display:flex; align-items:center; flex-shrink:0; }
    .zzs-brand-logo-img{ height:100%; width:auto; max-width:none; display:block; }
    .zzs-brand-logo-collapsed-img{ display:none; height:40px; width:40px; object-fit:contain; padding:5px; box-sizing:border-box; }
    html.zz-sidebar-collapsed .zzs-brand-logo-img{ display:none; }
    html.zz-sidebar-collapsed .zzs-brand-logo-collapsed-img{ display:block; }

    .zzs-nav{ margin-top:18px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; overflow-x:hidden; min-height:0; }
    /* Scrollbar delgada de marca (2026-10-05, pedido de Jose: la de Chrome
       por defecto quedaba muy ancha/gris al lado de los items). Firefox via
       scrollbar-width/color; Chrome/Edge/Safari via ::-webkit-scrollbar. */
    .zzs-nav{ scrollbar-width:thin; scrollbar-color:var(--zz-border) transparent; }
    .zzs-nav::-webkit-scrollbar{ width:5px; }
    .zzs-nav::-webkit-scrollbar-track{ background:transparent; }
    .zzs-nav::-webkit-scrollbar-thumb{ background:var(--zz-border); border-radius:999px; }
    .zzs-nav::-webkit-scrollbar-thumb:hover{ background:var(--zz-n-600); }
    .zzs-nav-item{
        display:flex; align-items:center; gap:12px; padding:0 12px; height:40px; width:100%;
        border-radius:var(--zz-radius-sm); color:var(--zz-n-600) !important; text-decoration:none !important;
        font-size:13.5px; font-weight:500; white-space:nowrap; line-height:1.4; flex-shrink:0;
        overflow:hidden; transition:width var(--zz-anim), background-color .15s ease;
    }
    .zzs-nav-item:hover{ background:var(--zz-n-100); }
    /* item activo: menta de marca, expandido Y colapsado (pedido de Jose).
       El oscuro+lima que tenia el colapsado (#1c1f22 / #c6ff4b, hover #26292d,
       texto #fff) queda reservado para un futuro modo oscuro.
       2026-10-05: la barra de color solido en el borde izquierdo (box-shadow
       inset) se probó y se sacó el mismo día - a pedido de Jose, se veía con
       las puntas redondeadas sobresaliendo de la píldora (no quedaba bien
       con el border-radius del item). Queda solo el fondo tinte + texto. */
    .zzs-nav-item.active{
        background:var(--zz-brand-tint); color:var(--zz-brand-dark) !important;
    }
    .zzs-nav-item.active svg{ stroke:var(--zz-brand-dark); }

    /* Secciones desplegables (2026-10-05, "empaquetar la sidebar en
       secciones"): mismo gap de 2px que .zzs-nav entre sus hijos, el
       encabezado es una etiqueta muda con chevron, no un item mas. */
    .zzs-group{ display:flex; flex-direction:column; gap:2px; }
    .zzs-group-toggle{
        display:flex; align-items:center; justify-content:space-between; gap:8px;
        width:100%; padding:10px 12px 4px; margin:0; border:none; background:none;
        font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em;
        text-transform:uppercase; color:var(--zz-n-600); cursor:pointer;
    }
    .zzs-group-toggle:hover{ color:var(--zz-n-700); }
    /* 2026-10-06, Jose: "estoy en una seccion de marketing y cierro la
       seccion no queda marca visible de donde estoy" - cuando la seccion
       tiene adentro la pagina activa, el encabezado queda marcado (texto +
       chevron en azul de marca, mas un punto) aunque el usuario la cierre a
       mano. El chevron hereda el color via stroke:currentColor, no hace
       falta tocarlo aparte. */
    .zzs-group-has-active .zzs-group-toggle{ color:var(--zz-brand-dark); }
    .zzs-group-has-active .zzs-group-toggle span{ position:relative; padding-left:11px; }
    .zzs-group-has-active .zzs-group-toggle span::before{
        content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
        width:5px; height:5px; border-radius:50%; background:var(--zz-brand);
    }
    .zzs-group-chev{ width:12px; height:12px; stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; transition:transform var(--zz-anim); }
    .zzs-group.zzs-group-collapsed .zzs-group-chev{ transform:rotate(-90deg); }
    /* Truco grid-template-rows 1fr/0fr (no max-height fijo): anima
       proporcional a la altura REAL del contenido de cada grupo, sin la
       "zona muerta" que max-height:500px tenia (la mayor parte de esa
       transicion no se veia porque el contenido real nunca llegaba a
       500px, y el colapso real pasaba de golpe en el ultimo tramo - 2026-10-06,
       Jose: "parece lag"). Hace falta el wrapper .zzs-group-items-inner
       porque el item de grid que se encoge tiene que ser uno solo (ver
       navGroupHtml en zunzun-theme.js).*/
    .zzs-group-items{ display:grid; grid-template-rows:1fr; transition:grid-template-rows var(--zz-anim); }
    .zzs-group.zzs-group-collapsed .zzs-group-items{ grid-template-rows:0fr; }
    .zzs-group-items-inner{ display:flex; flex-direction:column; gap:2px; overflow:hidden; min-height:0; }
    /* Colapsado a solo-iconos (76px): nada de encabezados de seccion, todos
       los items quedan planos y visibles, mismo criterio ya establecido de
       "la lista completa entra sin scroll". */
    html.zz-sidebar-collapsed .zzs-group-toggle{ display:none; }
    html.zz-sidebar-collapsed .zzs-group-items{ grid-template-rows:1fr !important; }
    html.zz-sidebar-collapsed .zzs-group{ gap:0; }

    .zzs-spacer{ flex:1; }
    .zzs-footer{ margin-top:12px; padding-top:14px; border-top:1px solid var(--zz-border); flex-shrink:0; }
    .zzs-user-row{ display:flex; align-items:center; gap:10px; padding:8px 6px; line-height:1.4; overflow:hidden; transition:padding var(--zz-anim); }
    .zzs-avatar{ width:30px; height:30px; border-radius:50%; background:#e3e6ea; flex-shrink:0; object-fit:cover; }
    .zzs-user-name{ font-size:12.5px; font-weight:600; white-space:nowrap; }
    .zzs-user-role{ font-size:11px; color:#6b7280; white-space:nowrap; }

    .zzs-collapse-btn{
        position:absolute; top:24px; right:-14px; width:28px; height:28px;
        border-radius:50%; background:#fff; border:1px solid var(--zz-border);
        box-shadow:var(--zz-shadow); display:flex; align-items:center; justify-content:center;
        cursor:pointer; z-index:2; padding:0; color:#6b7280;
    }
    .zzs-collapse-btn svg{ width:14px; height:14px; transition:transform var(--zz-anim); }
    html.zz-sidebar-collapsed .zzs-collapse-btn svg{ transform:rotate(180deg); }

    /* Colapso fluido: los iconos NO se reacomodan (mismo x en ambos estados:
       el centro del icono queda en ~38-40px), solo se anima el ancho y los
       textos se desvanecen. Al cerrar se van rapido; al abrir aparecen con un
       pequeño retraso, cuando ya hay lugar. Nada de display:none ni centrados
       que salten. Geometria colapsada: sidebar 76px, padding 16px ->
       item 40px de 17 a 57, icono (padding 11) centrado en 37. */
    .zzs-nav-item span,
    .zzs-user-row > div:last-child{ opacity:1; transition:opacity .18s ease .1s; }
    html.zz-shell.zz-sidebar-collapsed .zzs-sidebar{ width:76px; padding:24px 16px; }
    /* 2026-10-06, Jose: "retraido centralo a la altura de los iconos" - en
       colapsado los nav-item son una CAJA de 40px (no el svg de 18px
       solo), centrada en la columna; la fila del logo tiene que arrancar
       en el mismo x que esa caja (41px en vivo), no al x del icono interno
       (eso era para expandido, donde el ancho de fila y de nav-item
       difieren). Padding-left 0 en vez de 11px. */
    html.zz-sidebar-collapsed .zzs-brand-row{ padding:0 2px 24px 0; }
    /* Colapsado son solo iconos: mas compacto que expandido para que la
       lista completa de items del menu entre sin scroll (pedido de Jose,
       "eso nunca debe pasar" - el scroll interno de .zzs-nav es para casos
       extremos, no para el uso normal). */
    html.zz-sidebar-collapsed .zzs-nav{ gap:0; margin-top:12px; }
    html.zz-sidebar-collapsed .zzs-nav-item{ width:40px; height:34px; padding:0 11px; }
    html.zz-sidebar-collapsed .zzs-user-row{ padding:8px 5px; }
    html.zz-sidebar-collapsed .zzs-nav-item span,
    html.zz-sidebar-collapsed .zzs-user-row > div:last-child{ opacity:0; transition:opacity .1s ease; pointer-events:none; }

    /* ----- columna principal (.main del mock): 24 + 248 + 24 = 296px ----- */
    html.zz-shell #wrapper{ margin-left:296px !important; margin-right:0 !important; transition:margin-left var(--zz-anim); background:transparent !important; }
    html.zz-shell.zz-sidebar-collapsed #wrapper{ margin-left:124px !important; }
    /* Perfex fija un min-height inline en #wrapper por JS (mainWrapperHeightFix,
       pensado para su sidebar viejo): dejaba cientos de px vacios al final de
       la pagina. En este layout el alto lo da el contenido. */
    html.zz-shell #wrapper{ min-height:0 !important; }
    /* el margin-top del header se "escapaba" por arriba del body (margin
       collapsing) y, con body a 100% de alto, las paginas cortas quedaban
       con 24px de scroll de mas */
    html.zz-shell body{ display:flow-root; }
    html.zz-shell #wrapper .content{ margin:0 !important; padding:0 24px 24px 0 !important; }

    /* ----- header (.topbar del mock) ----- */
    /* Header FIJO (igual que el sidebar): position:fixed y su alto reservado
       arriba del contenido con --zz-hdr-h (lo mide zunzun-theme.js; 86px por
       defecto = alto sin subtitulo). No es sticky a proposito: al achicarse
       en flujo empujaria el contenido y el scroll saltaria. */
    html.zz-shell #header{
        position:fixed !important; z-index:950;
        top:24px; left:296px; right:24px; margin:0 !important;
        padding:22px 28px !important; height:auto !important; min-height:0 !important;
        background:#fff !important; border:1px solid var(--zz-border) !important;
        box-shadow:var(--zz-shadow) !important; border-radius:var(--zz-radius) !important;
        transition:left var(--zz-anim), padding .18s ease;
    }
    html.zz-shell.zz-sidebar-collapsed #header{ left:124px; }
    /* Fondo fijo DETRAS del header (z 949): cubre la franja de 24px de arriba y
       las esquinas redondeadas, y sigue 18px por debajo con un degradado para
       que el contenido se desvanezca al pasar por debajo en vez de cortarse
       en seco. --zz-hdr-cur = alto actual del header (JS, sigue al compacto). */
    html.zz-shell #wrapper::before{
        content:""; position:fixed; top:0; left:0; right:0; z-index:949; pointer-events:none;
        height:calc(24px + var(--zz-hdr-cur, var(--zz-hdr-h, 86px)) + 18px);
        background:linear-gradient(to bottom, var(--zz-n-50) calc(100% - 18px), rgba(246,247,248,0));
    }
    html.zz-shell #wrapper{ padding-top:calc(24px + var(--zz-hdr-h, 86px) + 20px) !important; }

    /* Al scrollear (html.zz-scrolled, lo pone el JS): barra compacta de ~64px,
       sin subtitulo; titulo, buscador y botones siguen visibles. */
    html.zz-shell.zz-scrolled #header{ padding:12px 20px !important; box-shadow:0 1px 2px rgba(20,24,31,.05), 0 12px 28px rgba(20,24,31,.10) !important; }
    html.zz-shell #header .zz-hdr-title h1{ transition:font-size .18s ease; }
    html.zz-shell #header .zz-hdr-title p{ max-height:20px; overflow:hidden; transition:max-height .18s ease, opacity .12s ease; }
    html.zz-shell.zz-scrolled #header .zz-hdr-title h1{ font-size:16px; margin-bottom:0; }
    html.zz-shell.zz-scrolled #header .zz-hdr-title p{ max-height:0; opacity:0; }
    html.zz-shell #header > nav{ margin:0; padding:0; min-height:0; }
    html.zz-shell #header > nav > .tw-flex{ display:flex !important; align-items:center; justify-content:space-between; gap:20px; }

    .zz-hdr-title{ flex:1; min-width:0; }
    .zz-hdr-title h1{ margin:0 0 3px; font-size:19px; font-weight:800; letter-spacing:-.01em; color:#14181f; line-height:1.3; }
    .zz-hdr-title h1:last-child{ margin-bottom:0; }
    .zz-hdr-title p{ margin:0; font-size:12.5px; color:#6b7280; }

    /* bloque derecho: buscador + quick-create + iconos, separados 14px como .topbar-right */
    /* Reparto: [buscador] 14px [+] 10px [iconos...] 10px [avatar al final, como en el mock].
       Perfex mete margenes sueltos (sm:tw-mr-3 en el buscador, tw-mr-1.5 en
       algunos <li>) que dejaban huecos desparejos: se anulan y todo el
       espaciado sale de gap. */
    html.zz-shell #header > nav > .tw-flex{ gap:0 !important; }
    html.zz-shell #header > nav > .tw-flex > .zz-hdr-title{ margin-right:20px; }
    html.zz-shell #header > nav > .tw-flex > .tw-flex{ flex:0 0 auto !important; display:flex; align-items:center; gap:14px; margin:0 !important; }
    html.zz-shell #header .navbar-nav{ margin:0 !important; float:none !important; display:flex !important; align-items:center; gap:10px; }
    html.zz-shell #header .navbar-nav > li{ float:none !important; margin:0 !important; }
    /* clearfix de Bootstrap: dentro de flex los ::before/::after cuentan como items y suman un gap extra */
    html.zz-shell #header .navbar-nav::before,
    html.zz-shell #header .navbar-nav::after{ display:none !important; }
    html.zz-shell #header .navbar-right{ margin-left:10px !important; }
    html.zz-shell #header .navbar-right > li.header-user-profile{ order:99; margin-left:6px !important; }

    /* buscador (.search-box del mock: 280x40, pill, lupa a la izquierda) */
    html.zz-shell #top_search{ margin:0 !important; width:280px; flex:0 0 280px !important; max-width:none; }
    html.zz-shell #search_input{
        width:280px !important; height:40px !important; margin:0 !important;
        padding:0 16px 0 39px !important;
        background:var(--zz-n-50) !important; border:1px solid var(--zz-border) !important;
        border-radius:999px !important; font-size:13px !important; color:#14181f !important;
        box-shadow:none !important;
    }
    html.zz-shell #search_input::placeholder{ color:#9aa1ab !important; }
    html.zz-shell #top_search_button{ left:16px !important; right:auto !important; top:50% !important; margin:0 !important; transform:translateY(-50%); line-height:0; }
    html.zz-shell #top_search_button{ width:auto !important; height:auto !important; padding:0 !important; }
    html.zz-shell #top_search_button button{ padding:0 !important; margin:0 !important; width:auto; height:auto; background:none; color:#9aa1ab !important; font-size:14px; line-height:1; }

    /* Panel de Configuracion de Perfex (#setup-menu-wrapper, se abre desde el
       item Configuracion): antes lo tapaba el #menu nativo; ahora se muestra
       ENCIMA del sidebar nuevo, con la misma forma de tarjeta blanca. */
    html.zz-shell #setup-menu-wrapper{
        position:fixed !important; top:24px !important; left:24px !important; bottom:24px !important;
        width:248px !important; height:auto !important; z-index:1001 !important; overflow-y:auto;
        min-height:0 !important; max-height:calc(100vh - 48px); /* Perfex trae min-height:100%: con el top de 24px se salia por abajo */
        background:#fff !important; border:1px solid var(--zz-border) !important;
        box-shadow:var(--zz-shadow) !important; border-radius:var(--zz-radius) !important;
        padding:16px 10px !important;
    }
    /* Perfex lo "cierra" con la animacion fadeOutLeft (queda display:block
       con opacity 0): sin esto seguiria tapando los clics del sidebar. */
    html.zz-shell #setup-menu-wrapper.fadeOutLeft{ pointer-events:none; }
    html.zz-shell #setup-menu-wrapper a,
    html.zz-shell #setup-menu-wrapper .customizer-heading,
    html.zz-shell #setup-menu-wrapper .close-customizer{ color:var(--zz-n-600) !important; }
    html.zz-shell #setup-menu-wrapper li a{ border-radius:var(--zz-radius-sm) !important; }
    html.zz-shell #setup-menu-wrapper li a:hover,
    html.zz-shell #setup-menu-wrapper li.active > a{ background:var(--zz-brand-tint) !important; color:var(--zz-brand-dark) !important; }

    /* botones redondos (.icon-btn del mock: 38x38, borde, gris) */
    html.zz-shell #header .navbar-nav > li > a{
        width:38px; height:38px; padding:0 !important; margin:0 !important;
        border-radius:50%; border:1px solid var(--zz-border); background:#fff !important;
        display:flex !important; align-items:center; justify-content:center;
        color:#6b7280 !important; position:relative;
    }
    html.zz-shell #header .navbar-nav > li > a:hover{ background:var(--zz-n-50) !important; }
    html.zz-shell #header .navbar-nav > li > a svg{ width:16px !important; height:16px !important; }
    /* quick-create y timers traen su propia "caja" interna: se neutraliza, el circulo es el <a> */
    html.zz-shell #header .navbar-nav > li > a > span.tw-rounded-full,
    html.zz-shell #header .navbar-nav > li > a > span.tw-rounded-md{
        width:auto !important; height:auto !important; margin:0 !important; border:0 !important;
        background:none !important; color:inherit !important;
    }
    html.zz-shell #header .navbar-nav > li > a > span .fa-plus{ font-size:15px; }
    html.zz-shell #header .navbar-nav > li > a svg.tw-text-neutral-900{ color:#6b7280 !important; }
    /* avatar llena el circulo, como en el mock */
    html.zz-shell #header .header-user-profile > a{ overflow:hidden; }
    html.zz-shell #header .header-user-profile img{
        width:100% !important; height:100% !important; margin:0 !important;
        border-radius:50%; box-shadow:none !important; --tw-ring-shadow:0 0 #0000 !important; --tw-ring-offset-shadow:0 0 #0000 !important;
    }
    /* contadores (todos / timers / notificaciones): puntito/badge arriba a la derecha */
    html.zz-shell #header .navbar-nav > li > a .tw-absolute{ top:-4px !important; right:-4px !important; }
}

/* ---------- 6. Botones de accion y tablas, como el mock ---------- */
/* Las vistas de Courier definen --golat-indigo (#5b5bef, violeta) en un
   <style> propio que carga DESPUES de este archivo: html:root gana por
   especificidad sin tener que editar las 8 vistas. */
html:root{
    --golat-indigo: var(--zz-brand);
    --golat-indigo-dark: var(--zz-brand-dark);
}

/* Botones principales de cada pantalla (.pill-btn del mock) */
.btn-golat,
#wrapper ._buttons .btn,
#wrapper .btn-golat + .btn{
    display:inline-flex; align-items:center; gap:6px;
    height:40px; padding:0 18px; border-radius:999px !important;
    font-size:13px; font-weight:600;
}
/* Perfex les agrega .display-block (display:block !important), que rompe el centrado vertical */
#wrapper ._buttons .btn{ display:inline-flex !important; }
/* .btn-golat es el boton "primario" real de las 8 vistas de Courier
   (Nuevo paquete, Guardar, etc) - cada vista define su propio
   .btn-golat{background-color:var(--golat-indigo)}, que ya resuelve a
   azul solido via el override --golat-indigo:var(--zz-brand) de arriba.
   Se probo con degradado (2026-10-05) y se volvio a azul solido el mismo
   dia: en un boton chico se ve recargado (Jose: "se ve mas profesional"
   en azul solido). No hace falta nada aca, el color ya sale bien de las
   vistas + la variable. */
#wrapper ._buttons .btn.btn-default,
#wrapper .btn-golat + .btn.btn-default{ background:#fff; color:var(--zz-n-700); border:1px solid var(--zz-border); }
#wrapper ._buttons .btn.btn-default:hover,
#wrapper .btn-golat + .btn.btn-default:hover{ background:var(--zz-n-50); }
#wrapper ._buttons .btn .fa-plus,
.btn-golat .fa-plus{ margin-right:0 !important; }

/* Tablas (table.activity del mock): encabezado sin fondo, en mayusculas
   chicas y gris; filas separadas por una linea fina; sin rayado. */
#wrapper table.dataTable thead > tr > th,
#wrapper .table > thead > tr > th{
    background:transparent !important;
    font-size:11px !important; font-weight:600 !important;
    text-transform:uppercase; letter-spacing:.03em;
    color:#6b7280 !important;
    border-top:0 !important; border-bottom:1px solid var(--zz-border) !important;
    padding-top:0 !important; padding-bottom:12px !important;
}
#wrapper table.dataTable tbody > tr > td,
#wrapper .table > tbody > tr > td{
    font-size:13px; color:#14181f;
    padding-top:13px !important; padding-bottom:13px !important;
    border-top:1px solid var(--zz-border) !important;
    vertical-align:middle !important;
}
#wrapper table.dataTable{ margin-top:14px !important; }
/* Perfex estira las tablas de borde a borde de la tarjeta (.table-responsive
   con margin 0 -24px): se respeta el padding de la tarjeta, como la tabla
   de Inicio, y sin lineas verticales entre columnas. */
#wrapper .panel-table-full .table-responsive,
#wrapper .panel-body > .table-responsive{ margin-left:0 !important; margin-right:0 !important; }
#wrapper table.dataTable thead > tr > th,
#wrapper table.dataTable tbody > tr > td{ border-left:0 !important; border-right:0 !important; }
#wrapper .panel_s > .panel-body{ padding:26px !important; }
/* una sola linea por celda, como Inicio (en pantallas angostas se permite
   partir para no forzar scroll horizontal) */
@media (min-width: 1400px){
    #wrapper table.dataTable tbody td{ white-space:nowrap; }
    #wrapper table.dataTable tbody > tr > td{ padding-left:8px !important; padding-right:8px !important; }
    #wrapper table.dataTable thead > tr > th{ padding-left:8px !important; }
}
#wrapper .table-striped > tbody > tr:nth-of-type(odd){ background:transparent !important; }
/* tablas con .table-bordered (Recepcion, Bolsa Negra...): sin lineas verticales ni marco, como el mock */
#wrapper .table-bordered{ border:0 !important; }
#wrapper .table-bordered > thead > tr > th,
#wrapper .table-bordered > tbody > tr > td{ border-left:0 !important; border-right:0 !important; }
#wrapper .table > tbody > tr:hover > td{ background:var(--zz-n-50); }
/* los enlaces de accion (Ver detalle, Etiqueta...) no se parten en dos lineas */
#wrapper table.dataTable td .tw-space-x-3 > a{ white-space:nowrap; }

/* Links de fila de Perfex (Ver | Editar | Eliminar bajo el nombre): Perfex
   los esconde con left:-9999em pero siguen ocupando su lugar, y el nombre
   quedaba mas alto que el resto de la fila. Fuera del flujo: en reposo el
   nombre queda centrado; al pasar el mouse sube 8px y los links aparecen
   debajo, sin cambiar el alto de la fila. Solo desktop (en mobile Perfex
   los muestra siempre, en flujo). */
@media (min-width: 992px){
    #wrapper table.dataTable tbody td:has(> .row-options){ position:relative; }
    #wrapper table.dataTable tbody td > .row-options{
        position:absolute !important; left:-9999em; top:50%; margin-top:3px;
        padding:0 !important; font-size:11.5px; line-height:16px; white-space:nowrap;
    }
    #wrapper table.dataTable tbody tr:hover td > .row-options{ left:10px; }
    #wrapper table.dataTable tbody td:has(> .row-options) > :not(.row-options){
        display:inline-block; transition:transform .15s ease;
    }
    #wrapper table.dataTable tbody tr:hover td:has(> .row-options) > :not(.row-options){ transform:translateY(-8px); }
}

/* Columna "Opciones" de Courier: iconos (courier_action_icon() en
   my_functions_helper.php) con la descripcion en un globo al pasar el mouse */
.zz-acts{ display:flex; align-items:center; gap:4px; }
.zz-acts > a,
.zz-acts > .zz-act-off{
    position:relative; width:32px; height:32px; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:10px; color:var(--zz-n-600) !important; text-decoration:none !important;
    transition:background-color .15s ease, color .15s ease;
}
.zz-acts > a:hover,
.zz-acts > a:focus-visible{ background:var(--zz-brand-tint); color:var(--zz-brand-dark) !important; outline:0; }
.zz-acts > a:has(.zz-act-eliminar):hover,
.zz-acts > a:has(.zz-act-eliminar):focus-visible{ background:#fbeaea; color:#d14343 !important; }
.zz-acts > .zz-act-off{ color:#cbd0d6 !important; cursor:default; }
.zz-act-icon{ width:17px; height:17px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.zz-act-tip{
    position:absolute; bottom:calc(100% + 6px); left:50%; z-index:20;
    transform:translate(-50%, 4px); opacity:0; pointer-events:none;
    background:#14181f; color:#fff; font-size:11.5px; font-weight:500; line-height:1.3;
    padding:5px 9px; border-radius:8px; white-space:nowrap;
    transition:opacity .12s ease, transform .12s ease;
}
.zz-acts > :hover > .zz-act-tip,
.zz-acts > :focus-visible > .zz-act-tip{ opacity:1; transform:translate(-50%, 0); }
/* Con iconos la columna Opciones necesita muy poco ancho: se achica a su
   contenido (width:1%, gana sobre el ancho que calcula DataTables) y se
   alinea a la derecha; el espacio liberado queda para las columnas de datos. */
#wrapper table:has(td > .zz-acts) > thead > tr > th:last-child,
#wrapper table td:has(> .zz-acts){ width:1% !important; white-space:nowrap; text-align:right; }
#wrapper table td > .zz-acts{ justify-content:flex-end; }
/* el ultimo icono queda pegado al borde derecho de la tabla: su globo se alinea a la derecha para no cortarse */
.zz-acts > :last-child > .zz-act-tip{ left:auto; right:0; transform:translate(0, 4px); }
.zz-acts > :last-child:hover > .zz-act-tip,
.zz-acts > :last-child:focus-visible > .zz-act-tip{ transform:translate(0, 0); }

/* Controles de la tabla: cantidad, Exportar/recargar, buscador */
/* CSS stock de DataTables/Perfex mete ".dataTables_length" en position:absolute
   a partir de max-width:767px (pensado para SU propio fallback de tabla con
   scroll, nunca reconciliado con nuestras tarjetas) — en un celular real
   (<=767px) esto colapsaba la altura de su columna y el "Buscar:" quedaba
   superpuesto encima del selector "25" en vez de al lado. Visto en vivo con
   getBoundingClientRect (mismo x/y, position:absolute confirmado por
   getComputedStyle) antes de tocar nada. #wrapper + !important le gana por
   especificidad e importancia sin depender de orden de carga. */
#wrapper .dataTables_length{ position:static !important; top:auto !important; z-index:auto !important; }
/* La misma regla stock trae ademas text-align:center en .dataTables_length
   Y .dataTables_filter — el "25" no se nota (el <select> ocupa casi todo su
   ancho) pero el buscador (<label><div class="input-group">, mas angosto
   que su contenedor) quedaba centrado en vez de pegado a la izquierda,
   desalineado del "25" de arriba (visto en vivo, mismo x reportado por
   Jose con captura). */
#wrapper .dataTables_length,
#wrapper .dataTables_filter{ text-align:left !important; }
#wrapper .dataTables_length select,
#wrapper .dt-buttons .btn{
    height:34px; border-radius:999px !important;
    border:1px solid var(--zz-border) !important; background:#fff !important;
    color:var(--zz-n-700) !important; box-shadow:none !important; font-size:12.5px;
}
#wrapper .dataTables_length select{ padding:0 26px 0 12px; }
#wrapper .dt-buttons .btn{ padding:0 14px; margin-right:6px; }
#wrapper .dt-buttons .btn:hover{ background:var(--zz-n-50) !important; }
#wrapper .dataTables_filter .input-group{ display:inline-flex; align-items:center; }
#wrapper .dataTables_filter .input-group-addon{
    height:34px; display:inline-flex; align-items:center;
    background:var(--zz-n-50) !important; border:1px solid var(--zz-border) !important; border-right:0 !important;
    border-radius:999px 0 0 999px !important; color:#9aa1ab; padding:0 4px 0 14px;
}
#wrapper .dataTables_filter input{
    height:34px; background:var(--zz-n-50) !important;
    border:1px solid var(--zz-border) !important; border-left:0 !important;
    border-radius:0 999px 999px 0 !important; box-shadow:none !important; font-size:12.5px;
}

/* Paginacion: activa en teal de marca, botones redondeados */
#wrapper .pagination > li > a,
#wrapper .pagination > li > span{
    border-radius:10px !important; margin:0 2px; border:1px solid var(--zz-border);
    color:var(--zz-n-600); font-size:12.5px;
}
/* Anterior / Siguiente -> flechas < > (el texto queda para lectores de pantalla) */
#wrapper .dataTables_paginate .paginate_button.previous > a,
#wrapper .dataTables_paginate .paginate_button.next > a{
    position:relative; width:34px; height:34px; padding:0 !important;
    font-size:0 !important; color:transparent !important;
}
#wrapper .dataTables_paginate .paginate_button.previous > a::before,
#wrapper .dataTables_paginate .paginate_button.next > a::before{
    content:""; position:absolute; inset:0; margin:auto; width:14px; height:14px;
    background:var(--zz-n-600);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
#wrapper .dataTables_paginate .paginate_button.next > a::before{ transform:rotate(180deg); }
#wrapper .dataTables_paginate .paginate_button.disabled > a::before{ background:#cbd0d6; }
#wrapper .dataTables_paginate .pagination > li > a{ min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; }
/* hover: tinte menta + flecha/numero en teal; deshabilitadas y la activa no reaccionan */
#wrapper .dataTables_paginate .pagination > li > a{ transition:background-color .15s ease, border-color .15s ease, color .15s ease; cursor:pointer; }
#wrapper .dataTables_paginate .pagination > li:not(.disabled):not(.active) > a:hover,
#wrapper .dataTables_paginate .pagination > li:not(.disabled):not(.active) > a:focus-visible{
    background:var(--zz-brand-tint) !important; border-color:#bfd4f5 !important; color:var(--zz-brand-dark) !important;
}
#wrapper .dataTables_paginate .pagination > li:not(.disabled) > a:hover::before{ background:var(--zz-brand-dark); }
#wrapper .dataTables_paginate .pagination > li.disabled > a,
#wrapper .dataTables_paginate .pagination > li.disabled > a:hover{ background:#fff !important; cursor:default; }
#wrapper .pagination > .active > a,
#wrapper .pagination > .active > a:hover,
#wrapper .pagination > .active > a:focus,
#wrapper .pagination > .active > span{
    background:var(--zz-brand) !important; border-color:var(--zz-brand) !important; color:#fff !important;
}

/* ---------- 7. Formularios, modales y pestañas ---------- */
/* Sin #wrapper ni !important a proposito: las reglas de .input-group de
   Bootstrap (mas especificas) siguen mandando en las esquinas interiores,
   asi los campos unidos a un addon/boton no se despegan. */
body .form-control{
    border:1px solid var(--zz-border); border-radius:12px;
    box-shadow:none; font-size:13.5px; color:#14181f;
}
body .form-control:not(textarea):not(.input-sm):not([multiple]){ height:40px; }
body textarea.form-control{ padding-top:10px; }
body .form-control::placeholder{ color:#9aa1ab; }
body .form-control:focus,
body .bootstrap-select > .dropdown-toggle:focus,
body .bootstrap-select.open > .dropdown-toggle{
    border-color:var(--zz-brand) !important;
    box-shadow:0 0 0 3px var(--zz-brand-tint) !important; outline:0 !important;
}
body .form-control[disabled], body .form-control[readonly]{ background:var(--zz-n-50); }
body .input-group-addon{ border-color:var(--zz-border); background:var(--zz-n-50); color:#6b7280; }
/* esquinas exteriores de los grupos, mismo radio que un campo suelto */
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn{ border-top-left-radius:12px; border-bottom-left-radius:12px; }
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn{ border-top-right-radius:12px; border-bottom-right-radius:12px; }

/* selects con buscador (bootstrap-select) */
body .bootstrap-select > .dropdown-toggle.btn-default{
    height:40px; border:1px solid var(--zz-border); border-radius:12px;
    background:#fff; box-shadow:none; font-size:13.5px;
}
body .bootstrap-select .dropdown-menu{ border-radius:14px; border-color:var(--zz-border); box-shadow:var(--zz-shadow); }

body #wrapper label,
body .modal label{ font-size:12.5px; font-weight:600; color:var(--zz-n-600); }

/* Modales: misma tarjeta que el resto del panel.
   overflow:hidden (sacado 2026-10-08) recortaba cualquier dropdown/select
   que necesitara salirse del modal (ej. el buscador de "Agregar regla" del
   filtro de Clientes potenciales, con mas opciones que alto del modal) -
   quedaba una caja blanca sin bordes tapando el pie del modal en vez del
   listado completo con su propio scroll. El redondeado de esquinas ahora lo
   hace cada franja con fondo propio (header es transparente, no necesita;
   footer si, por su fondo --zz-n-50).
*/
.modal-content{
    border:1px solid var(--zz-border) !important; border-radius:var(--zz-radius) !important;
    box-shadow:0 24px 60px rgba(20,24,31,.18) !important;
}
.modal-header{ padding:22px 26px 14px !important; border-bottom:0 !important; }
.modal-header .modal-title{ font-size:16px; font-weight:700; color:#14181f; }
.modal-header .close{ opacity:.5; font-size:24px; margin-top:-2px; }
.modal-body{ padding:8px 26px 20px !important; }
.modal-footer{
    padding:16px 26px !important; border-top:1px solid var(--zz-border) !important; background:var(--zz-n-50);
    border-bottom-left-radius:var(--zz-radius); border-bottom-right-radius:var(--zz-radius);
}
.modal-backdrop.in{ opacity:.35; }

/* Switch "Guardar filtro" del modal de filtros nativo de Perfex (Clientes
   potenciales, Clientes, etc.): el componente Vue posiciona el label con
   left:-80px relativo al switch (alcanza para "Save filter" en ingles, que
   es mas corto) - en español "Guardar filtro" mide mas y la ultima letra
   quedaba tapada por el propio switch. No se puede tocar el componente
   compilado, se le da mas aire por CSS.
*/
.modal-footer span.relative.tw-mt-1 > span.tw-absolute.-tw-left-20{ left:-96px !important; }

/* Botones sueltos de pie de modal y de la barra Guardar: pildoras como el mock */
.modal-footer > .btn,
.btn-bottom-toolbar > .btn,
.btn-bottom-toolbar .btn-group > .btn{
    height:40px; padding:0 18px; font-size:13px; font-weight:600;
    display:inline-flex; align-items:center; gap:6px; vertical-align:middle;
}
.modal-footer > .btn,
.btn-bottom-toolbar > .btn{ border-radius:999px; }
.btn-bottom-toolbar .btn-group > .btn:first-child{ border-radius:999px 0 0 999px; }
.btn-bottom-toolbar .btn-group > .btn:last-child{ border-radius:0 999px 999px 0; padding:0 12px; }
.btn-bottom-toolbar .btn-group > .btn:only-child{ border-radius:999px; }
.modal-footer > .btn-default,
.btn-bottom-toolbar > .btn-default{ background:#fff; border:1px solid var(--zz-border); color:var(--zz-n-700); }

/* Pestañas horizontales (detalle de cliente, factura...): pildoras */
#wrapper .nav-tabs:not(.nav-stacked){ border-bottom:0 !important; display:flex; flex-wrap:wrap; gap:4px; }
#wrapper .nav-tabs:not(.nav-stacked) > li{ float:none; margin:0 !important; }
/* Perfex pega estas barras al borde de la tarjeta (margin -24px) pensando en el subrayado */
#wrapper .panel-full-width-tabs{ margin:0 !important; }
#wrapper .nav-tabs.nav-tabs-horizontal{ margin:0 0 22px !important; padding:0 !important; }
#wrapper .nav-tabs:not(.nav-stacked) > li > a{
    border:0 !important; border-radius:999px !important; margin:0 !important;
    padding:8px 14px !important; font-size:13px; font-weight:500; color:var(--zz-n-600) !important;
    background:transparent !important;
}
#wrapper .nav-tabs:not(.nav-stacked) > li > a:hover{ background:var(--zz-n-100) !important; }
#wrapper .nav-tabs:not(.nav-stacked) > li.active > a,
#wrapper .nav-tabs:not(.nav-stacked) > li.active > a:hover,
#wrapper .nav-tabs:not(.nav-stacked) > li.active > a:focus{
    background:var(--zz-brand-tint) !important; color:var(--zz-brand-dark) !important; font-weight:600;
}
/* Pestañas verticales (menu lateral de Cliente y de Configuracion): como los items del sidebar */
#wrapper .navbar-pills-flat.nav-stacked{ border:0 !important; }
#wrapper .navbar-pills-flat.nav-stacked > li{ margin:0 0 2px !important; }
#wrapper .navbar-pills-flat.nav-stacked > li > a{
    border:0 !important; border-radius:var(--zz-radius-sm) !important;
    padding:10px 12px !important; color:var(--zz-n-600) !important; font-size:13.5px; font-weight:500;
    background:transparent !important;
}
#wrapper .navbar-pills-flat.nav-stacked > li > a:hover{ background:var(--zz-n-100) !important; }
#wrapper .navbar-pills-flat.nav-stacked > li.active > a,
#wrapper .navbar-pills-flat.nav-stacked > li.active > a:hover,
#wrapper .navbar-pills-flat.nav-stacked > li.active > a:focus{
    background:var(--zz-brand-tint) !important; color:var(--zz-brand-dark) !important;
}

/* ---------- 8. Barra "Guardar" inferior y tarjetas de Perfil ---------- */
@media (min-width: 992px){
    /* Perfex la fija a todo el ancho con margin-left:230px (su sidebar viejo):
       quedaba ~70px debajo del sidebar nuevo. Ahora es una tarjeta flotante
       alineada con el header y el contenido. */
    /* (2026-09-23) capsula compacta abajo a la derecha, solo del ancho de sus
       botones: la tarjeta a todo el ancho tapaba contenido sin necesidad */
    html.zz-shell .btn-bottom-toolbar{
        left:auto !important; right:24px !important; bottom:24px !important;
        width:auto !important; margin:0 !important;
        display:flex !important; align-items:center; gap:8px;
        padding:8px !important; z-index:900;
        background:rgba(255,255,255,.96) !important; border:1px solid var(--zz-border) !important;
        border-radius:999px !important; box-shadow:0 8px 28px rgba(20,24,31,.14) !important;
    }
    html.zz-shell .btn-bottom-toolbar > *{ margin:0 !important; }
    html.zz-shell .btn-bottom-toolbar .btn-group{ display:flex; }

    /* espacio para que la barra no tape los ultimos campos */
    html.zz-shell #wrapper .btn-bottom-pusher{ height:100px; }
}

/* Tarjetas de estadisticas de Perfex (Perfil y otras): como las KPI del mock */
#wrapper dl .tw-border.tw-rounded-md.tw-bg-white{
    border:1px solid var(--zz-border) !important; border-radius:var(--zz-radius) !important;
    box-shadow:var(--zz-shadow);
}
#wrapper dl .tw-border.tw-rounded-md.tw-bg-white > div > dt{
    font-size:12px; font-weight:500 !important; color:#6b7280 !important; margin-bottom:8px;
}
#wrapper dl .tw-border.tw-rounded-md.tw-bg-white > div > dd .tw-text-base{
    font-family:var(--zz-font-mono); font-size:23px !important; font-weight:600 !important;
    letter-spacing:-.02em; color:#14181f !important;
}
#wrapper dl .tw-border.tw-rounded-md.tw-bg-white > div{ padding:20px !important; }

/* ---------- 8c. Menus desplegables del header ---------- */
@media (min-width: 992px){
    /* base para todos (perfil, notificaciones, timers, +): tarjeta del panel */
    html.zz-shell #header .dropdown-menu{
        border:1px solid var(--zz-border) !important; border-radius:16px !important;
        box-shadow:0 1px 2px rgba(20,24,31,.04), 0 16px 40px rgba(20,24,31,.12) !important;
        padding:8px !important; margin-top:10px !important;
    }
    html.zz-shell #header .dropdown-menu > li > a{ border-radius:10px; padding:8px 10px; transition:background-color .12s ease, color .12s ease; }
    html.zz-shell #header .dropdown-menu > li > a:hover,
    html.zz-shell #header .dropdown-menu > li > a:focus{ background:var(--zz-brand-tint) !important; color:var(--zz-brand-dark) !important; }

    /* "+" (creacion rapida): dos columnas, sin cortes de linea */
    html.zz-shell #header nav > .tw-flex > .tw-flex .navbar-nav > li.open > .dropdown-menu{
        display:grid !important; grid-template-columns:1fr 1fr; gap:2px 4px; width:420px;
    }
    html.zz-shell #header nav > .tw-flex > .tw-flex .navbar-nav > li > .dropdown-menu > .dropdown-header{
        grid-column:1 / -1; padding:6px 10px 8px !important; margin-bottom:4px; border-bottom:1px solid var(--zz-border);
        /* texto = _l('quick_create'), traducido en cada idioma */
        font-size:11px !important; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#6b7280 !important;
    }
    html.zz-shell #header nav > .tw-flex > .tw-flex .navbar-nav > li > .dropdown-menu > li > a{
        display:flex !important; align-items:center; gap:10px; white-space:nowrap;
        font-size:13px; font-weight:500; color:var(--zz-n-700) !important;
    }
    html.zz-shell #header nav > .tw-flex > .tw-flex .navbar-nav > li > .dropdown-menu > li > a > i{
        width:18px !important; height:auto !important; text-align:center; font-size:14px; color:#9aa1ab !important; margin:0 !important;
    }
    html.zz-shell #header nav > .tw-flex > .tw-flex .navbar-nav > li > .dropdown-menu > li > a:hover > i{ color:var(--zz-brand-dark) !important; }
    html.zz-shell #header nav > .tw-flex > .tw-flex .navbar-nav > li > .dropdown-menu > li > a > span{ display:inline-block; margin:0 !important; }
    html.zz-shell #header nav > .tw-flex > .tw-flex .navbar-nav > li > .dropdown-menu > li > a > span::first-letter{ text-transform:uppercase; } /* "ticket" */
}

/* ---------- 8b. "Compartir" (newsfeed de Perfex, boton del header) ---------- */
/* Overlay fijo de Perfex (z 999): quedaba DEBAJO del sidebar nuevo (z 1000)
   y sin oscurecer la pagina. Ahora es un modal mas: fondo oscurecido con blur
   encima de todo, tarjeta centrada y el formulario ordenado con grid. */
#newsfeed{
    z-index:1200 !important; background:rgba(20,24,31,.32) !important;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    overflow-y:auto !important; padding:56px 24px 40px !important;
}
#newsfeed > .row{ margin:0 !important; }
#newsfeed > .row > [class*="col-"]{ float:none; width:100%; max-width:640px; margin:0 auto !important; padding:0 !important; }
#newsfeed .panel_s{ box-shadow:0 24px 60px rgba(20,24,31,.18) !important; margin-bottom:20px; }
#newsfeed .panel_s > .panel-body{ padding:24px 26px !important; }
#newsfeed .close_newsfeed{
    position:fixed !important; top:24px !important; right:24px !important;
    width:40px !important; height:40px !important; background:#fff !important;
    border:1px solid var(--zz-border); box-shadow:var(--zz-shadow); transition:background-color .15s ease;
}
#newsfeed .close_newsfeed:hover{ background:var(--zz-n-100) !important; }
#newsfeed .close_newsfeed i{ color:var(--zz-n-600) !important; font-size:16px; }

#new-post-form{ display:grid; grid-template-columns:auto 1fr auto; column-gap:10px; align-items:center; }
#new-post-form > *{ grid-column:1 / -1; order:10; }
#new-post-form > a:first-of-type{
    order:1; display:flex; align-items:center; gap:10px;
    font-size:13.5px; font-weight:600; color:#14181f !important; text-decoration:none !important;
}
#new-post-form > a:first-of-type img{ width:36px; height:36px; border-radius:50%; margin:0 !important; object-fit:cover; }
#new-post-form #post{
    order:2; border:0 !important; box-shadow:none !important; background:transparent !important;
    padding:14px 0 !important; min-height:110px; resize:none; font-size:15px; line-height:1.5;
}
#new-post-form #post:focus{ box-shadow:none !important; }
#new-post-form > hr{ order:3; margin:4px 0 16px; border-color:var(--zz-border); }
/* pie: [adjuntar] [departamentos] ........ [Enviar] */
#new-post-form > .add-post-attachments{
    order:4; grid-column:auto; width:40px; height:40px; padding:0; border-radius:50% !important;
    display:inline-flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--zz-border); color:var(--zz-n-600);
}
#new-post-form > .add-post-attachments:hover{ background:var(--zz-brand-tint); color:var(--zz-brand-dark); border-color:#bfd4f5; }
#new-post-form > .bootstrap-select{ order:5; grid-column:auto; width:280px !important; max-width:100%; justify-self:start; }
#new-post-form > button[type="submit"], #new-post-form > .btn-primary{
    order:6; grid-column:auto; float:none !important;
    height:40px; padding:0 22px; border-radius:999px; font-size:13px; font-weight:600;
}
/* Sin departamentos creados en Perfex el selector no tiene opciones y abria
   una franja vacia: se muestra como etiqueta informativa (la publicacion va
   a todos). Si se crea algun departamento vuelve a ser un selector normal. */
#new-post-form > .bootstrap-select:not(:has(option)){ pointer-events:none; width:auto !important; }
#new-post-form > .bootstrap-select:not(:has(option)) > .dropdown-toggle{
    background:var(--zz-n-50) !important; border-color:var(--zz-border) !important; border-radius:999px;
    padding:0 16px 0 36px !important; color:var(--zz-n-600) !important; position:relative;
}
#new-post-form > .bootstrap-select:not(:has(option)) > .dropdown-toggle::before{
    content:""; position:absolute; left:14px; top:50%; width:15px; height:15px; margin-top:-7.5px; background:var(--zz-n-600);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Ccircle cx='18' cy='9' r='2.4'/%3E%3Cpath d='M15.8 20a5 5 0 0 1 6.2-4.8'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Ccircle cx='18' cy='9' r='2.4'/%3E%3Cpath d='M15.8 20a5 5 0 0 1 6.2-4.8'/%3E%3C/svg%3E") center/contain no-repeat;
}
#new-post-form > .bootstrap-select:not(:has(option)) .bs-caret,
#new-post-form > .bootstrap-select:not(:has(option)) > .dropdown-menu{ display:none !important; }
#new-post-form > .dropzone-previews{ order:7; }
#new-post-form > .dropzone-previews:empty{ margin:0 !important; }

/* publicaciones ya hechas (debajo del formulario) */
#newsfeed_data .panel_s{ border-radius:var(--zz-radius) !important; }

/* ---------- 8d. Tareas personales (admin/todo) ---------- */
/* Columnas como tarjetas del panel; encabezado sin el bloque saturado de
   Perfex (bg-warning/bg-info), con icono en recuadro tintado como las KPI. */
#wrapper .col-md-6 > .tw-bg-white:has(> .todo-body){
    border:1px solid var(--zz-border); border-radius:var(--zz-radius); box-shadow:var(--zz-shadow); overflow:hidden;
}
#wrapper .todo-body > h4{
    background:transparent !important; color:#14181f !important; border-radius:0 !important;
    display:flex; align-items:center; gap:12px; margin:0 !important;
    padding:22px 24px 16px !important; font-size:14.5px !important; font-weight:700 !important;
}
#wrapper .todo-body > h4 > .fa{
    width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:14px;
}
#wrapper .todo-body > h4.bg-warning > .fa{ background:#fbf1de; color:#c98a1b; }
#wrapper .todo-body > h4.bg-info > .fa{ background:var(--zz-brand-tint); color:var(--zz-brand-dark); }
#wrapper .todo-body > ul.todo{ margin:0 !important; padding:0 24px 10px !important; }
#wrapper .todo-body > ul.todo > li{
    padding:12px 0 !important; border-top:1px solid var(--zz-border); font-size:13.5px; color:#14181f;
    background:transparent !important; margin:0 !important; /* Perfex trae margin 0 -10px 0 -18px */
}
#wrapper .todo-body > ul.todo > li.no-todos{ color:#6b7280; font-size:13px; opacity:1 !important; padding-bottom:16px !important; }
#wrapper .todo-body > ul.todo > li .todo-date,
#wrapper .todo-body > ul.todo > li small{ color:#9aa1ab; font-size:11.5px; }
#wrapper .todo-body > ul.todo > li:hover{ background:var(--zz-n-50) !important; }
/* "Cargar mas": pildora; oculto cuando Perfex lo deshabilita (no hay mas que cargar) */
#wrapper .unfinished-loader, #wrapper .finished-loader{
    border-radius:999px !important; height:36px; padding:0 18px; display:inline-flex !important; align-items:center;
    background:#fff; border:1px solid var(--zz-border); color:var(--zz-n-700);
}
#wrapper .unfinished-loader.disabled, #wrapper .finished-loader.disabled{ display:none !important; }
#wrapper .col-md-12.text-center.padding:has(> .disabled:only-child){ padding:0 !important; }
/* boton "Nueva tarea personal" como pildora (no esta dentro de ._buttons) */
#wrapper a.btn-primary[href="#__todo"]{
    display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 18px;
    border-radius:999px !important; font-size:13px; font-weight:600;
}

/* ---------- 9. Buscador del header (tambien en mobile) ---------- */
.tw-bg-neutral-300\/30{ background-color:var(--zz-n-50) !important; }
.tw-bg-neutral-300\/50{ background-color:var(--zz-n-100) !important; }

/* ---------- 10. Pantallas de acceso: login admin, login y registro del portal ---------- */
/* Mismo lenguaje que el admin: fondo gris claro, tarjetas blancas radio 22,
   marca "Z + Zunzun Logistics" del sidebar (sale del filtro company_logo en
   my_functions_helper.php cuando no hay logo subido). */
body.customers{ background:var(--zz-n-50) !important; color:#14181f; -webkit-font-smoothing:antialiased; }
/* 2026-10-05, pedido de Jose ("redisenemos el login/register... para
   adaptarlo al nuevo logo"): wash suave de marca solo en login/registro
   (no en el resto del portal, que se queda en el gris plano de siempre) -
   tintes muy claros para no afectar la legibilidad del texto encima. */
body.login_admin, body.customers_login, body.register, body.zz_public_tool{
    background:linear-gradient(160deg, #f2f7ff 0%, #f6f4fe 55%, #faf2fd 100%) !important;
    color:#14181f; -webkit-font-smoothing:antialiased;
}

.zz-brand{ display:inline-flex; align-items:center; gap:11px; color:#14181f !important; text-decoration:none !important; }
.zz-brand-mark{ width:36px; height:36px; border-radius:11px; background:var(--zz-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; flex-shrink:0; }
.zz-brand-text{ display:flex; flex-direction:column; text-align:left; }
.zz-brand-text b{ font-weight:700; font-size:14.5px; line-height:1.2; }
.zz-brand-text small{ font-size:11px; color:#6b7280; line-height:1.4; }

.zz-auth-sub{ margin:-4px 0 22px; font-size:13.5px; color:#6b7280; }

/* botones de acceso: pildora alta como las acciones principales del admin */
body.login_admin .btn-primary, body.customers_login .btn-block, body.register .panel-footer .btn-primary{
    height:44px; border-radius:999px !important; font-weight:600; font-size:14px;
    display:flex; align-items:center; justify-content:center;
}
body.customers_login .zz-btn-outline{
    background:#fff !important; color:var(--zz-brand-dark) !important; border:1px solid var(--zz-border) !important; margin-top:10px;
}
body.customers_login .zz-btn-outline:hover{ background:var(--zz-brand-tint) !important; border-color:var(--zz-brand-tint) !important; }
body.login_admin a:not(.btn):not(.zz-brand), body.customers a[href*="forgot_password"]{ color:var(--zz-brand); font-weight:600; font-size:13px; }

/* Login admin */
body.login_admin .authentication-form-wrapper{ padding-top:10vh !important; max-width:440px !important; }
body.login_admin .company-logo{ display:flex; justify-content:center; margin-bottom:28px; }
/* 2026-10-05, pedido de Jose ("mas grande el logo"): el <img> real subido
   en Settings no traia alto propio, heredaba el default chico de Perfex
   (pensado para el viejo 150x34). Mismo criterio en el logo del login
   admin (standalone, mucho lugar). En el navbar del portal el logo seguia
   viendose chico con la barra original de 68px - Jose dio luz verde a
   agrandar la barra tambien para poder subir el logo a 60px sin que
   quede apretado (primer intento a 92px quedo "demaciado grande", la
   barra bajo a 78px pero el logo a 60px quedo bien - ver "Portal: barra
   superior y pie" mas abajo). */
body.login_admin .company-logo img{ height:72px !important; width:auto !important; }
body.customers .navbar.header .navbar-brand.logo img{ height:60px !important; width:auto !important; max-width:none !important; }
/* El padding-top/bottom de .navbar-brand (23px/25px, default de Perfex
   pensado para el logo viejo de ~20px de alto) estaba empujando la barra
   a 108px aunque .navbar.header tuviera min-height:78px - el padding fijo
   ganaba por ser mas alto que el min-height. Se saca el padding y se
   centra con flex, asi la barra queda en los 78px reales. */
body.customers .navbar.header .navbar-brand.logo{
    display:flex !important; align-items:center !important; height:auto !important;
    padding-top:0 !important; padding-bottom:0 !important;
}
body.login_admin h1{ font-size:24px !important; font-weight:800 !important; letter-spacing:-.01em; color:#14181f !important; margin-bottom:6px !important; }
body.login_admin .authentication-form-wrapper > .tw-bg-white{
    border-radius:var(--zz-radius) !important; box-shadow:var(--zz-shadow) !important; border:1px solid var(--zz-border);
    padding:30px 32px 14px !important;
}

/* Portal: barra superior y pie */
body.customers .navbar.header{ background:#fff; border:0; border-bottom:1px solid var(--zz-border); min-height:78px; margin-bottom:0; }
body.customers .navbar.header .navbar-header{ min-height:78px; display:flex; align-items:center; }
body.customers .navbar.header .zz-brand{ padding:0; }
body.customers footer{ background:transparent !important; border-top:1px solid var(--zz-border); color:#9aa1ab; font-size:12px; }

/* Login portal */
body.customers_login .login-heading{ font-size:24px; font-weight:800; letter-spacing:-.01em; color:#14181f; margin:44px 0 6px !important; }
body.customers_login .col-md-4{ max-width:440px; }
@media (min-width:992px){
    body.customers_login .col-md-4{ width:440px; margin-left:calc(50% - 220px); float:none; }
}
body.customers .panel_s .panel-body{ padding:30px 32px !important; }

/* Registro: titulo centrado + formulario en 2 columnas agrupado por secciones */
body.register .register-heading{ text-align:center !important; font-size:24px; font-weight:800; letter-spacing:-.01em; color:#14181f; margin:44px 0 10px; }
body.register .register-heading, body.register .row.col-md-10 > .col-md-6{ width:100%; float:none; }
body.register .register-contact-info-heading{ font-size:15px !important; font-weight:600 !important; color:#6b7280; margin:0 0 4px !important; text-align:center; }
@media (min-width:992px){
    body.register .col-md-10.col-md-offset-1{ width:820px; max-width:100%; margin-left:calc(50% - 410px); float:none; }
}
.zz-reg-sec{ display:none; }
@media (min-width:768px){
    body.register .zz-reg-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:18px; }
    body.register .zz-reg-grid > *{ grid-column:span 1; min-width:0; }
    body.register .zz-reg-grid > .form-group{ margin-bottom:14px; }
    .zz-reg-sec{
        display:block; grid-column:1 / -1 !important; margin:22px 0 12px; padding-top:20px; border-top:1px solid var(--zz-border);
        font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--zz-brand-dark);
    }
    body.register .register-contact-info-heading{ grid-column:1 / -1; order:0; }
    .zz-reg-sec-1{ order:10; border-top:0; padding-top:0; margin-top:18px; }
    body.register .register-firstname-group{ order:11; margin-top:0 !important; }
    body.register .register-lastname-group{ order:12; }
    body.register .register-email-group{ order:13; }
    body.register .register-email-repeat-group{ order:14; }
    /* 2026-10-09, a pedido de Jose: Pais pasa a completarse ANTES de
    Telefono (para que el prefijo ya este listo cuando el usuario empieza a
    tipear su numero) - sigue siendo el mismo <select id="pais"> de la
    seccion Direccion, solo cambia su orden visual. */
    body.register .register-country-group{ order:15; }
    body.register .register-contact-phone-group{ order:16; }
    .zz-reg-sec-2{ order:20; }
    body.register .register-city-group{ order:21; }
    body.register .register-direccion-group{ order:22; grid-column:1 / -1; }
    .zz-reg-sec-3{ order:30; }
    body.register .register-company-account-group{ order:31; grid-column:1 / -1; }
    body.register #website_group{ order:32; }
    body.register #document_number_group{ order:33; }
    body.register #nif_group{ order:34; }
    .zz-reg-sec-4{ order:40; }
    body.register .register-password-group{ order:41; }
    body.register .register-password-repeat-group{ order:42; }
    /* "Su casillero" (2026-10-09, a pedido de Jose: volvio al final, solo
    se queda el realce visual del punto 6, no el cambio de ubicacion). */
    .zz-reg-sec-5{ order:50; }
    body.register .register-casillero-group{ order:51; grid-column:1 / -1; }
    body.register .register-contact-custom-fields{ order:60; grid-column:1 / -1; }
}
/* Telefono: mini campo de prefijo (2026-10-09, a pedido de Jose) + el
numero propiamente dicho, lado a lado. El prefijo se completa solo al
elegir pais (readonly, nunca lo tipea el usuario). */
body.register .zz-phone-field{ display: flex; gap: 8px; }
body.register .zz-phone-code{
    flex: 0 0 76px; text-align: center; font-weight: 600;
}
body.register .zz-input-digits{ flex: 1; }

/* Aviso "solo clientes nuevos" en el registro (2026-10-09, a pedido de Jose) */
body.register .zz-reg-new-clients-notice{
    background: var(--zz-brand-tint, #eaf1ff); color: var(--zz-brand-dark, #04438f);
    border: 1px solid var(--zz-border); border-radius: var(--zz-radius-sm, 8px);
    padding: 12px 16px; margin-bottom: 20px; font-size: 14px; line-height: 1.5;
}
body.register .zz-reg-new-clients-notice a{
    font-weight: 600; text-decoration: underline; color: var(--zz-brand, #0059e6);
    white-space: nowrap;
}
body.register .zz-reg-new-clients-notice a:hover{ color: var(--zz-brand-dark, #0046b3); }
body.register .zz-reg-new-clients-notice a::after{ content: " \2192"; text-decoration: none; display: inline-block; }

/* casillero: se genera solo con pais + ciudad, se muestra como etiqueta de marca.
2026-10-09, a pedido de Jose: mas presencia visual ademas de moverlo mas
arriba en el form - es "el premio" de registrarse, el numero que van a usar
siempre. */
body.register .register-casillero-group{
    background: var(--zz-brand-tint, #e5f0fe); border: 1px solid var(--zz-border);
    border-radius: var(--zz-radius-sm, 8px); padding: 16px 18px; margin-top: 4px;
}
body.register .register-casillero-group .control-label{ font-size: 13px; }
body.register .zz-casillero-hint{ font-size: 13px; color: var(--zz-n-700, #4b5563); margin-top: 8px; }
body.register #casillero{
    background:#fff !important; border-color:transparent !important; color:var(--zz-brand-dark);
    font-family:var(--zz-font-mono); font-weight:700; font-size:20px; letter-spacing:.04em; height:52px !important;
}
body.register #casillero:placeholder-shown{ font-family:var(--zz-font-ui); font-weight:400; font-size:14px; letter-spacing:0; }
body.register .register-company-account-group{ display:flex; align-items:center; gap:8px; }
body.register .register-company-account-group label{ margin:0; font-weight:500; }
body.register .panel-footer{ background:#fff; border-top:1px solid var(--zz-border); padding:18px 32px; border-radius:0 0 var(--zz-radius) var(--zz-radius); }
body.register .panel-footer .btn-primary{ width:100%; }

/* Ciudad: lista de sugerencias propia (reemplaza el <datalist> nativo del
   navegador, cuyo popup no se puede estilar y en Linux/Chrome se veia oscuro,
   inconsistente con el <select> de Pais). Mismo look que el resto de los
   dropdowns del sitio; sigue aceptando texto libre si la ciudad no esta listada. */
.register-city-group{ position:relative; }
.zz-city-suggestions{
    display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40;
    margin:0; padding:6px; list-style:none; max-height:240px; overflow-y:auto;
    background:#fff; border:1px solid var(--zz-border); border-radius:var(--zz-radius-sm); box-shadow:var(--zz-shadow);
}
.zz-city-suggestions.is-open{ display:block; }
.zz-city-suggestions li{
    padding:8px 10px; border-radius:8px; font-size:13px; color:var(--zz-n-700); cursor:pointer;
}
.zz-city-suggestions li:hover,
.zz-city-suggestions li.is-active{ background:var(--zz-brand-tint); color:var(--zz-brand-dark); }

/* ---------- 11. Panel principal: tablero fijo ---------- */
/* Sin arrastrar widgets: el sortable de Perfex usa handle '.widget-dragger',
   sin manija no hay arrastre. "Opciones de Tablero" oculto a pedido de Jose. */
#wrapper .widget-dragger,
#wrapper .screen-options-btn,
#wrapper .screen-options-area{ display:none !important; }
/* las 4 tarjetas de arriba a la misma altura (Proyectos quedaba 4px mas alta) */
#widget-top_stats .row:has(> [class*="quick-stats-"]){ display:flex; flex-wrap:wrap; }
#widget-top_stats [class*="quick-stats-"]{ display:flex; }
#widget-top_stats [class*="quick-stats-"] > .top_stats_wrapper{ flex:1; }

/* ---------- 12. Clientes y componentes compartidos ---------- */
/* Interruptores Activo (Perfex .onoffswitch venia en azul #3b82f6) */
#wrapper .onoffswitch-checkbox:checked + .onoffswitch-label{ background-color:var(--zz-brand) !important; border-color:var(--zz-brand) !important; }
#wrapper .onoffswitch-checkbox:checked + .onoffswitch-label::before{ border-color:var(--zz-brand) !important; }

/* Indicador de orden de las tablas (chip con flecha junto al encabezado):
   oculto a pedido de Jose. Ordenar con clic en el encabezado sigue igual. */
#wrapper table.dataTable thead th.sorting::after,
#wrapper table.dataTable thead th.sorting_asc::after,
#wrapper table.dataTable thead th.sorting_desc::after,
#wrapper table.dataTable thead th.sorting::before,
#wrapper table.dataTable thead th.sorting_asc::before,
#wrapper table.dataTable thead th.sorting_desc::before{ display:none !important; }

/* Avisos informativos de Perfex (azul bootstrap) al tono de la app */
#wrapper .alert-info{
    background:var(--zz-brand-tint); border:0; border-radius:var(--zz-radius-sm); color:var(--zz-brand-active);
    padding:16px 20px; font-size:13px; line-height:1.7;
}
#wrapper .alert-info a{ color:var(--zz-brand-dark); font-weight:600; text-decoration:underline; }
#wrapper .alert-info .text-danger{ color:#b42318; }

/* Importacion de clientes: encabezados de la tabla de ejemplo */
#wrapper .table-import th, #wrapper table th .text-info{ color:var(--zz-brand-dark) !important; }
#wrapper .table-import th{ white-space:nowrap; }

/* Archivos: zona para soltar archivos */
#wrapper .dropzone{
    border:1.5px dashed #bfd4f5 !important; border-radius:var(--zz-radius-sm) !important; background:#fbfdfd !important;
    min-height:120px; display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s;
}
#wrapper .dropzone:hover, #wrapper .dropzone.dz-drag-hover{ background:var(--zz-brand-tint) !important; border-color:var(--zz-brand) !important; }
#wrapper .dropzone .dz-message{ color:var(--zz-brand-dark) !important; font-weight:600; font-size:13px; margin:0; }

/* Pestaña FEED (Actividad del cliente): linea de tiempo */
.zz-feed{ list-style:none; margin:6px 0 0; padding:0 0 0 6px; position:relative; }
.zz-feed::before{ content:""; position:absolute; left:10px; top:10px; bottom:10px; width:2px; background:var(--zz-n-100); border-radius:2px; }
.zz-feed-item{ position:relative; display:flex; gap:16px; padding:10px 0; }
.zz-feed-dot{ width:10px; height:10px; margin-top:6px; border-radius:50%; background:#fff; border:2px solid var(--zz-brand); flex-shrink:0; position:relative; z-index:1; }
.zz-feed-body{ flex:1; min-width:0; background:var(--zz-n-50); border:1px solid var(--zz-border); border-radius:var(--zz-radius-sm); padding:12px 16px; }
.zz-feed-text{ font-size:13.5px; color:#14181f; word-break:break-word; }
.zz-feed-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:6px; font-size:12px; color:#6b7280; }
.zz-feed-tag{ background:#fff; border:1px solid var(--zz-border); border-radius:999px; padding:1px 9px; font-size:11.5px; color:var(--zz-n-700); }
.zz-feed-link{ color:var(--zz-brand) !important; font-weight:600; }
.zz-feed-empty{ padding:10px 0; }

/* ---------- 13. Pantallas stock de Perfex (paso 3) ---------- */
/* Contratos: el resumen vive en ._buttons, fuera de la tarjeta; se le da la
   misma tarjeta que el "Resumen de clientes" */
#wrapper #contract_summary{
    background:#fff; border:1px solid var(--zz-border); border-radius:var(--zz-radius); box-shadow:var(--zz-shadow);
    padding:20px 26px; margin-top:4px;
}
/* Reportes: el selector de reportes quedaba suelto sobre el fondo gris */
body.reports #wrapper .content > .sm\:tw-flex:first-child{
    background:#fff; border:1px solid var(--zz-border); border-radius:var(--zz-radius); box-shadow:var(--zz-shadow);
    padding:20px 22px; margin-bottom:24px;
}

/* Destinatarios con correo sin verificar (tablas de Casilleros) */
.zz-unverified{ display:flex; align-items:center; gap:8px; margin-top:3px; font-size:11.5px; }
.zz-unverified-pill{ background:#fbf1de; color:#9a6512; border-radius:999px; padding:1px 8px; font-weight:600; }
.zz-unverified a{ color:var(--zz-brand) !important; font-weight:600; }

/* ---------- 14. Portal de clientes ---------- */
/* submenu suelto Archivos/Calendario (index.php del tema): los links pasaron al navbar */
body.customers .customer-top-submenu{ display:none !important; }

/* Navbar: items como pildoras, activo en menta (igual que el sidebar del admin) */
/* logo y menu en una sola linea (antes el menu caia 16px + items altos: barra de ~100px) */
@media (min-width:768px){
    body.customers .navbar.header > .container{ display:flex; align-items:center; min-height:78px; }
    body.customers .navbar.header > .container::before,
    body.customers .navbar.header > .container::after{ display:none; }
    body.customers .navbar.header .navbar-header{ float:none; min-height:78px; }
    body.customers .navbar.header #theme-navbar-collapse{ margin-left:auto; display:flex !important; align-items:center; padding-right:0; }
    body.customers .navbar.header .navbar-nav{ display:flex; align-items:center; gap:4px; margin:0; float:none; }
    body.customers .navbar.header .navbar-nav > li{ float:none; display:flex; align-items:center; }
    /* el tema de Perfex trae line-height:85px en los links del menu */
    body.customers .navbar.header .navbar-nav > li > a{ line-height:20px !important; }
}
body.customers .navbar.header .zz-nav-item > a{
    padding:9px 14px !important; border-radius:12px; color:var(--zz-n-700) !important; font-weight:500; font-size:13.5px;
    background:transparent !important; transition:background .15s;
}
body.customers .navbar.header .zz-nav-item > a:hover{ background:var(--zz-n-100) !important; }
body.customers .navbar.header .zz-nav-item.active > a{ background:var(--zz-brand-tint) !important; color:var(--zz-brand-dark) !important; font-weight:600; }
body.customers .navbar.header .customers-nav-item-profile > a{ padding:6px 4px 6px 10px !important; }
body.customers .navbar.header .dropdown-menu{
    border:1px solid var(--zz-border); border-radius:16px; box-shadow:0 12px 32px rgba(20,24,31,.12); padding:6px;
}
body.customers .navbar.header .dropdown-menu > li > a{ border-radius:10px; padding:8px 12px; font-size:13px; }
body.customers .navbar.header .dropdown-menu > li > a:hover{ background:var(--zz-brand-tint); color:var(--zz-brand-dark); }

body.customers #content{ padding-top:28px; padding-bottom:40px; }

/* Encabezado de pagina y tarjetas */
.zz-portal-hello{ margin:0 0 22px; }
.zz-portal-hello h1{ margin:0 0 4px; font-size:26px; font-weight:800; letter-spacing:-.015em; color:#14181f; }
.zz-portal-hello p{ margin:0; color:#6b7280; font-size:14px; }
.zz-back{ display:inline-block; margin-bottom:14px; font-size:13px; font-weight:600; color:var(--zz-brand) !important; }
.zz-card{
    background:#fff; border:1px solid var(--zz-border); border-radius:var(--zz-radius); box-shadow:var(--zz-shadow);
    padding:24px 26px; margin-bottom:22px;
}
.zz-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; }
.zz-card-head h2{ margin:0; font-size:16px; font-weight:700; color:#14181f; }
.zz-card-head a{ font-size:13px; font-weight:600; color:var(--zz-brand) !important; }
/* Pre-alertas (2026-10-08): aclara que la misma pre-alerta sirve tanto antes
   de que el paquete llegue como para "reclamarlo" si ya deberia estar y no
   aparece - antes solo se explicaba el primer caso. */
.zz-pa-subtitle{ margin:-10px 0 16px; font-size:12.5px; color:var(--zz-n-600); }
.zz-card-sub{ font-size:12.5px; color:#6b7280; }
.zz-card-head-right{ display:flex; align-items:baseline; gap:14px; }
.zz-card-label{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6b7280; margin-bottom:6px; }

/* Portada: casillero (1/3) + estados (2/3), un poco mas de ancho para la
   del casillero (2026-10-09, a pedido de Jose) - ahora trae la direccion
   de envio adentro, reorganizada en 2 columnas para no ganar altura (ver
   .zz-casillero-cols mas abajo). align-items:start: cada tarjeta se queda
   con su propia altura de contenido, sin que el grid las estire parejo. */
.zz-portal-top{ display:grid; grid-template-columns:minmax(260px,1fr) 2fr; gap:22px; margin-bottom:0; }
@media (max-width:991px){ .zz-portal-top{ grid-template-columns:1fr; } }
/* 2026-10-05, plan de estilizado con la paleta oficial: tarjeta mas
   visible del home del portal, Jose eligio mantenerla en azul solido
   (facil de leer) con un acento decorativo del degradado real en la
   esquina (mockup ~/Downloads/zunzun_casillero_card_opciones.html,
   Opcion C) - se mantiene asi, con el "blob" pintado detras del
   contenido (position:relative en los hijos directos para que el
   degradado quede atras, no encima del texto). */
.zz-casillero-card{ background:var(--zz-brand); border-color:var(--zz-brand); color:#fff; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.zz-casillero-card::before{
    content:""; position:absolute; top:-40px; right:-40px; width:140px; height:140px; border-radius:50%;
    background:var(--zz-brand-gradient); opacity:.55; filter:blur(2px);
}
.zz-casillero-card > *{ position:relative; }
.zz-casillero-card .zz-card-label{ color:rgba(255,255,255,.7); }
/* Zunzun (2026-10-09, a pedido de Jose): casillero+nombre+Copiar juntos
   arriba, pegados al codigo grande - antes esto vivia repetido mas abajo
   dentro de "Direccion de envio". */
.zz-casillero-top-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.zz-casillero-code{ font-size:30px; font-weight:600; letter-spacing:.04em; word-break:break-all; }
/* Zunzun (2026-10-09, a pedido de Jose): "asi como el casillero esta en
   grande el nombre tambien debe estar, solo un poquito mas pequeno" -
   antes era un hint chico (13px), ahora acompaña al codigo en jerarquia. */
.zz-casillero-name-hint{ font-size:19px; font-weight:600; color:rgba(255,255,255,.88); margin:2px 0 0; }

/* "si tiene mas width es obvio que se redistribuye el contenido para bajar
   el height" - la tarjeta de envio (ya sin la fila de nombre, ver
   zz_shipping_cards_html($show_name_row=false)) y el bloque Direccion+
   boton van en 2 columnas en vez de apilados. */
.zz-casillero-cols{
    display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;
    margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.18);
}
.zz-casillero-cols .zz-ship-card{ flex:1 1 260px; }
.zz-casillero-col-right{ flex:1 1 160px; display:flex; flex-direction:column; gap:14px; }
@media (max-width:560px){ .zz-casillero-cols{ flex-direction:column; } }

.zz-casillero-block{ margin:0; }
.zz-casillero-address{ font-size:13.5px; line-height:1.55; color:#fff; }
.zz-casillero-card .zz-btn-light{ align-self:flex-start; }
.zz-btn-light{
    background:#fff !important; color:var(--zz-brand-dark) !important; border:1px solid var(--zz-border) !important;
    border-radius:999px !important; font-weight:600; padding:8px 16px;
}
.zz-btn-light:hover{ background:var(--zz-brand-tint) !important; }
.zz-casillero-card .zz-btn-light{ border-color:transparent !important; }

/* Tarjeta unica de "direccion de envio" (2026-10-09, a pedido de Jose,
   reemplaza las 2 tarjetas Aereo/Maritimo de antes - misma bodega para
   ambas, la separacion no aportaba nada). Copiar ahora solo copia
   "casillero - nombre" (zz-ship-name-row), el resto de los datos de la
   bodega es fijo y se muestra en zz-ship-grid sin boton propio. Reusada tal
   cual en la portada del portal (dentro de la tarjeta azul del casillero,
   ver overrides ".zz-casillero-card .zz-ship-*" mas abajo) y en el modal
   "Ver detalles" de Destinatarios (fondo blanco, estilo por defecto). */
.zz-ship-card{ border:1px solid var(--zz-border); border-radius:var(--zz-radius-sm); overflow:hidden; }
.zz-ship-card-head{
    background:var(--zz-n-50); padding:12px 16px; font-weight:700; font-size:14px; color:var(--zz-brand-dark);
}
.zz-ship-card-body{ padding:14px 16px; }

.zz-ship-name-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.zz-ship-name-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--zz-n-600); margin-bottom:2px; }
.zz-ship-name{ font-size:14.5px; font-weight:600; color:var(--zz-n-700); }

/* Boton "Copiar" (2026-10-08): copia "casillero - nombre" para que el
   cliente lo pegue en el checkout de la tienda en vez de retipearlo - el
   typo del casillero al retipear es la causa mas comun de "paquete
   huerfano". */
.zz-ship-copy-btn{
    display:inline-flex; align-items:center; gap:5px; background:#fff; border:1px solid var(--zz-border);
    border-radius:999px; padding:5px 13px; font-size:12px; font-weight:600; color:var(--zz-n-600);
    cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background .15s, border-color .15s, color .15s;
}
.zz-ship-copy-btn:hover{ border-color:var(--zz-brand); color:var(--zz-brand); }
.zz-ship-copy-btn.zz-copied{ background:var(--zz-brand); border-color:var(--zz-brand); color:#fff; }

.zz-ship-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; background:var(--zz-n-50); border-radius:12px; padding:12px 14px; }
.zz-ship-field--full{ grid-column:1 / -1; }
.zz-ship-field-label{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--zz-n-600); margin-bottom:2px; }
.zz-ship-field-value{ display:block; font-size:13.5px; font-weight:500; color:var(--zz-n-700); }

/* Contexto dentro de la tarjeta azul del casillero (portada del portal) -
   mismo fragmento de arriba, solo cambian los colores para quedar legible
   sobre fondo azul (mismo patron que ".zz-casillero-card .zz-btn-light"). */
.zz-casillero-card .zz-ship-card{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.zz-casillero-card .zz-ship-card-head{ background:transparent; color:#fff; border-bottom:1px solid rgba(255,255,255,.18); }
.zz-casillero-card .zz-ship-name-label{ color:rgba(255,255,255,.65); }
.zz-casillero-card .zz-ship-name{ color:#fff; }
.zz-casillero-card .zz-ship-copy-btn{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.35); color:#fff; }
.zz-casillero-card .zz-ship-copy-btn:hover{ background:rgba(255,255,255,.24); border-color:#fff; color:#fff; }
.zz-casillero-card .zz-ship-copy-btn.zz-copied{ background:#fff; border-color:#fff; color:var(--zz-brand-dark); }
.zz-casillero-card .zz-ship-grid{ background:rgba(255,255,255,.08); }
.zz-casillero-card .zz-ship-field-label{ color:rgba(255,255,255,.55); }
.zz-casillero-card .zz-ship-field-value{ color:#fff; }
.zz-ship-warning{
    margin-top:14px; background:#fdf6e3; border:1px solid #f0e2b6; border-radius:var(--zz-radius-sm);
    padding:12px 16px; font-size:12.5px; color:#8a6d1f; line-height:1.5;
}

.zz-status-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
@media (max-width:767px){ .zz-status-grid{ grid-template-columns:repeat(2,1fr); } }
.zz-status-tile{ border-radius:var(--zz-radius-sm); padding:16px; display:flex; flex-direction:column; gap:4px; background:var(--zz-n-50); }
.zz-status-n{ font-family:var(--zz-font-mono); font-size:26px; font-weight:600; line-height:1.1; }
.zz-status-l{ font-size:12.5px; font-weight:600; }
.zz-tile-en-warehouse{ background:#eaf0fe; color:#3d5cad; }
.zz-tile-en-valija{ background:#fbf1de; color:#96690f; }
.zz-tile-en-embarque{ background:#e5f0fe; color:var(--zz-brand-dark); }
.zz-tile-en-aduana{ background:#f1edfb; color:#5c3fb0; }
.zz-tile-entregado{ background:#e7f6ee; color:#1e8e5a; }

/* Tablas del portal */
.zz-table{ margin:0; }
.zz-table > thead > tr > th{
    border-bottom:1px solid var(--zz-border) !important; border-top:0 !important; font-size:11.5px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; color:#6b7280; padding:10px 12px !important;
}
.zz-table > tbody > tr > td{ border-top:1px solid var(--zz-n-100) !important; padding:12px !important; vertical-align:middle !important; font-size:13.5px; color:#14181f; }
.zz-table > tbody > tr:hover > td{ background:var(--zz-n-50); }
.zz-table a{ color:var(--zz-brand) !important; font-weight:600; }

.zz-empty{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:28px 12px; text-align:center; }
.zz-empty b{ font-size:14.5px; color:#14181f; }
.zz-empty span{ font-size:13px; color:#6b7280; }
.zz-feed-pk .zz-feed-dot{ background:var(--zz-brand); }
/* titulos de las paginas stock del portal (Destinatarios, Mis facturas...) al tamaño de .zz-portal-hello */
body.customers h4.section-heading{ font-size:24px !important; font-weight:800 !important; letter-spacing:-.015em; color:#14181f !important; }
body.customers #content .btn-primary{ border-radius:999px !important; padding-left:18px; padding-right:18px; font-weight:600; }

/* ---------- 15. Seccion Courier de presupuestos y facturas ---------- */
#wrapper .zz-courier{
    margin:8px 24px 20px; padding:22px 24px; border:1px solid var(--zz-border); border-radius:var(--zz-radius-sm);
    background:var(--zz-n-50);
}
#wrapper .zz-courier-invoice{ margin:4px 0 24px; }
#wrapper .zz-courier-head{ margin-bottom:16px; }
#wrapper .zz-courier-head h4{ margin:0 0 3px; font-size:15px; font-weight:700; color:#14181f; }
#wrapper .zz-courier-head p{ margin:0; font-size:12.5px; color:#6b7280; }
#wrapper .zz-courier label{ font-weight:600; }
#wrapper .zz-courier .form-control{ background:#fff; }
#wrapper .zz-courier select.form-control{ -webkit-appearance:none; appearance:none; padding-right:34px;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center; }
/* buscador con boton integrado (en factura venia suelto: campo corto + boton gris debajo) */
#wrapper .zz-courier .input-group{ display:flex; width:100%; max-width:560px; margin-bottom:12px; }
#wrapper .zz-courier .input-group > .form-control{ flex:1; float:none; border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; }
#wrapper .zz-courier .input-group > .input-group-btn,
#wrapper .zz-courier .input-group > #searchButton{ width:auto; display:flex; }
#wrapper .zz-courier #searchButton{
    height:40px; padding:0 20px; border-radius:0 12px 12px 0 !important; margin:0;
    background:var(--zz-brand) !important; border:1px solid var(--zz-brand) !important; color:#fff !important; font-weight:600;
}
#wrapper .zz-courier input[type=hidden] + #searchButton{ margin-left:0; }
/* resultados: filas marcables */
#wrapper .zz-courier #searchResults:empty{ display:none; }
#wrapper .zz-courier #searchResults{
    display:flex; flex-direction:column; gap:6px; max-height:300px; overflow-y:auto; margin-bottom:14px;
}
#wrapper .zz-courier .select-package{
    display:flex !important; align-items:center; gap:10px; margin:0 !important; padding:10px 14px !important;
    background:#fff !important; border:1px solid var(--zz-border) !important; border-radius:12px !important;
    font-size:13px; color:#14181f; cursor:pointer; box-shadow:none !important;
}
#wrapper .zz-courier .select-package:hover{ border-color:#bfd4f5 !important; }
#wrapper .zz-courier .select-package:has(.package-checkbox:checked){ background:var(--zz-brand-tint) !important; border-color:var(--zz-brand) !important; }
#wrapper .zz-courier .select-package .package-checkbox{ margin:0; width:16px; height:16px; accent-color:var(--zz-brand); flex-shrink:0; }
#wrapper .zz-courier .select-package span:nth-of-type(1),
#wrapper .zz-courier .select-package span:nth-of-type(2){ font-family:var(--zz-font-mono); font-size:12.5px; }
#wrapper .zz-courier-msg{ font-size:13px; color:#6b7280; padding:4px 2px; }
/* pie: resumen menta + agregar */
#wrapper .zz-courier-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
#wrapper .zz-courier-summary{ flex:1; min-width:220px; background:var(--zz-brand-tint); color:var(--zz-brand-active); border-radius:12px; padding:11px 16px; font-size:13.5px; }
#wrapper .zz-courier #addPackagesButton{ height:40px; border-radius:999px !important; padding:0 20px; font-weight:600; margin:0; }
#wrapper .zz-courier #addPackagesButton[disabled]{ opacity:.45; }
/* factura: resultado/resumen del calculo como caja menta */
#wrapper .zz-courier-invoice #calculationResult,
#wrapper .zz-courier-invoice #calculationSummary{ background:var(--zz-brand-tint); border-radius:12px; padding:11px 16px; margin-top:12px !important; }
#wrapper .zz-courier-invoice #calculationResult label,
#wrapper .zz-courier-invoice #calculationSummary label{ color:var(--zz-brand-active); margin:0; }
#wrapper .zz-courier-invoice #calculationResult p,
#wrapper .zz-courier-invoice #calculationSummary p{ margin:2px 0 0; color:var(--zz-brand-active); font-weight:600; }
#wrapper .zz-courier-invoice #calculationSummary:has(#calculationSummaryText:empty){ display:none; }
/* la factura trae un #calculationSummary vacio duplicado: sin contenido no se muestra */
#wrapper .zz-courier-invoice #calculationSummary:empty{ display:none; }
#wrapper .zz-courier #searchButton{ align-items:center; justify-content:center; }
#wrapper .zz-courier-invoice #addPackagesButton{ margin-bottom:18px; }
/* Presupuesto: el .btn-bottom-pusher (margin-top 60) colapsaba a traves del
   form (su columna esta flotada) y dejaba ~60px vacios arriba del titulo */
#wrapper #estimate-form{ display:flow-root; }

/* Botones "success" de Perfex (Convertir a factura, etc.): verde bootstrap
   fuera de paleta -> teal de marca, como .btn-primary */
#wrapper .btn-success{ background-color:var(--zz-brand) !important; border-color:var(--zz-brand) !important; color:#fff !important; }
#wrapper .btn-success:hover, #wrapper .btn-success:focus, #wrapper .btn-success.active,
#wrapper .open > .dropdown-toggle.btn-success{ background-color:var(--zz-brand-dark) !important; border-color:var(--zz-brand-dark) !important; }

/* ---------- 16. Formulario de presupuesto (y factura, comparten .accounting-template) ---------- */
/* el pie (Nota cliente / Terminos) quedaba tapado por la barra Guardar flotante:
   el .btn-bottom-pusher no bajaba por debajo de la columna flotada */
#wrapper #estimate-form > .btn-bottom-pusher{ clear:both; }

/* "Facturado a / Direccion de envio": caja suave, lapiz como boton "Editar" arriba a la derecha */
#wrapper .accounting-template .row:has(> .col-md-12 > .edit_shipping_billing_info){
    position:relative; margin:4px 0 18px; padding:14px 6px 4px; background:var(--zz-n-50);
    border:1px solid var(--zz-border); border-radius:var(--zz-radius-sm);
}
#wrapper .accounting-template .row > .col-md-12:has(> .edit_shipping_billing_info){ position:static; min-height:0; }
#wrapper .accounting-template .edit_shipping_billing_info{
    position:absolute; top:10px; right:12px; z-index:2; display:inline-flex; align-items:center; gap:6px;
    height:28px; padding:0 11px; border-radius:999px; background:#fff; border:1px solid var(--zz-border);
    font-size:12px; font-weight:600; color:var(--zz-brand-dark) !important; text-decoration:none !important;
}
/* texto desde la plantilla (data-zz-label = _l('zz_edit')): funciona en todos los idiomas */
#wrapper .accounting-template .edit_shipping_billing_info::after{ content:attr(data-zz-label); }
#wrapper .accounting-template .edit_shipping_billing_info:hover{ background:var(--zz-brand-tint); border-color:var(--zz-brand-tint); }
#wrapper .accounting-template .row:has(> .col-md-12 > .edit_shipping_billing_info) p.bold{
    font-size:11.5px; font-weight:700 !important; letter-spacing:.06em; text-transform:uppercase; color:#6b7280; margin-bottom:6px;
}
#wrapper .accounting-template .row:has(> .col-md-12 > .edit_shipping_billing_info) address{ font-size:13px; color:var(--zz-n-700); line-height:1.6; margin-bottom:10px; }

/* Etiquetas: el tagit venia sin borde, como texto suelto */
#wrapper .accounting-template ul.tagit{
    min-height:40px; border:1px solid var(--zz-border) !important; border-radius:12px !important;
    background:#fff !important; padding:4px 8px !important; box-shadow:none !important;
}
#wrapper .accounting-template ul.tagit li.tagit-new input{ height:28px; font-size:13.5px; }
#wrapper .accounting-template ul.tagit li.tagit-choice{ background:var(--zz-brand-tint) !important; border:0 !important; border-radius:999px !important; color:var(--zz-brand-dark) !important; }

/* Fila "Añadir articulo" + "Mostrar la cantidad como": alineadas en una linea */
#wrapper .accounting-template .row:has(> .show_quantity_as_wrapper){ display:flex; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
#wrapper .accounting-template .row:has(> .show_quantity_as_wrapper) > [class*="col-"]{ float:none; }
#wrapper .accounting-template .show_quantity_as_wrapper .mtop10{ margin-top:0 !important; font-size:13px; color:var(--zz-n-700); }
#wrapper .accounting-template .show_quantity_as_wrapper .radio{ margin:0 0 0 12px; }

/* Tabla de articulos: encabezado y fila de carga integrados a la tarjeta */
#wrapper .accounting-template table.items > thead > tr > th{ background:var(--zz-n-50) !important; border-bottom:1px solid var(--zz-border) !important; }
#wrapper .accounting-template table.items > tbody > tr.main > td{ background:#fbfcfc !important; }
#wrapper .accounting-template table.items textarea.form-control{ min-height:74px; }
#wrapper .accounting-template .row:has(> .show_quantity_as_wrapper) > .items-wrapper{ flex:1 1 360px; max-width:520px; margin:0 15px !important; }
#wrapper .accounting-template .row:has(> .show_quantity_as_wrapper) > .show_quantity_as_wrapper{ flex:1 1 auto; width:auto; }
/* "Guardar" + flecha: una sola capsula (mismo color en las dos mitades,
   separador fino que no toca los bordes, chevron chico). El tono oscuro solo
   mientras el menu esta abierto o al pasar el mouse por cada mitad. */
html.zz-shell .btn-bottom-toolbar .btn-group > .btn-primary{
    background-color:var(--zz-brand) !important; border:0 !important; box-shadow:none !important; outline:0 !important;
    color:#fff !important; transition:background-color .15s ease;
}
html.zz-shell .btn-bottom-toolbar .btn-group > .btn-primary:first-child{ padding:0 18px 0 20px; }
html.zz-shell .btn-bottom-toolbar .btn-group > .btn-primary.dropdown-toggle{
    position:relative; width:40px; padding:0 !important; justify-content:center; margin-left:0 !important;
}
html.zz-shell .btn-bottom-toolbar .btn-group > .btn-primary.dropdown-toggle::before{
    content:""; position:absolute; left:0; top:10px; bottom:10px; width:1px; background:rgba(255,255,255,.3);
}
/* chevron propio (el caret/icono de Perfex queda oculto) */
html.zz-shell .btn-bottom-toolbar .btn-group > .btn-primary.dropdown-toggle > *{ display:none !important; }
html.zz-shell .btn-bottom-toolbar .btn-group > .btn-primary.dropdown-toggle::after{
    content:""; width:12px; height:12px; background:currentColor; transition:transform .18s ease;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
html.zz-shell .btn-bottom-toolbar .btn-group > .btn-primary:hover{ background-color:var(--zz-brand-dark) !important; }
html.zz-shell .btn-bottom-toolbar .btn-group.open > .btn-primary.dropdown-toggle{ background-color:var(--zz-brand-active) !important; }
html.zz-shell .btn-bottom-toolbar .btn-group.open > .btn-primary.dropdown-toggle::after{ transform:rotate(180deg); }
html.zz-shell .btn-bottom-toolbar .btn-group > .btn-primary:focus-visible{ box-shadow:0 0 0 3px var(--zz-brand-tint) !important; }
html.zz-shell .btn-bottom-toolbar .dropdown-menu{ border-radius:14px; padding:6px; border:1px solid var(--zz-border); box-shadow:0 12px 32px rgba(20,24,31,.12); margin-bottom:10px; }
html.zz-shell .btn-bottom-toolbar .dropdown-menu > li > a{ border-radius:10px; padding:8px 12px; font-size:13px; }
html.zz-shell .btn-bottom-toolbar .dropdown-menu > li > a:hover{ background:var(--zz-brand-tint); color:var(--zz-brand-dark); }

/* ---------- 17. Menu "+" : detalles comunes a todos los formularios ---------- */
/* Etiquetas (tagit) con borde en todos los formularios y ventanas, no solo facturas/presupuestos */
ul.tagit{
    min-height:40px; border:1px solid var(--zz-border) !important; border-radius:12px !important;
    background:#fff !important; padding:4px 8px !important; box-shadow:none !important;
}
ul.tagit li.tagit-new input{ height:28px; font-size:13.5px; }
ul.tagit li.tagit-choice{ background:var(--zz-brand-tint) !important; border:0 !important; border-radius:999px !important; color:var(--zz-brand-dark) !important; }

/* Selector de archivo nativo ("Choose File") como campo + boton de la app */
input[type=file].form-control, #wrapper input[type=file]{
    height:auto !important; padding:6px !important; font-size:13px; color:var(--zz-n-600);
    border:1px solid var(--zz-border); border-radius:12px; background:#fff;
}
input[type=file]::file-selector-button{
    margin-right:10px; height:30px; padding:0 14px; border:0; border-radius:999px; cursor:pointer;
    background:var(--zz-brand-tint); color:var(--zz-brand-dark); font-weight:600; font-size:12.5px; font-family:var(--zz-font-ui);
}
input[type=file]::file-selector-button:hover{ background:#d2e3fb; }

/* Botones dentro del pie de una tarjeta (Articulo de base de conocimiento, etc.): pildora */
#wrapper .panel-footer .btn{ height:40px; padding:0 20px; border-radius:999px !important; font-weight:600; display:inline-flex; align-items:center; }
#wrapper .panel_s > .panel-footer{ background:#fff; border-top:1px solid var(--zz-border); border-radius:0 0 var(--zz-radius) var(--zz-radius); }

/* Calendario (FullCalendar): botones en la paleta y "hoy" en menta (venian azul marino / amarillo) */
#wrapper .fc .fc-button-primary{
    background:#fff !important; border:1px solid var(--zz-border) !important; color:var(--zz-n-700) !important;
    box-shadow:none !important; font-weight:600; font-size:12.5px; text-transform:none;
}
#wrapper .fc .fc-button-primary:hover{ background:var(--zz-n-100) !important; }
#wrapper .fc .fc-button-primary:not(:disabled).fc-button-active,
#wrapper .fc .fc-button-primary:not(:disabled):active{ background:var(--zz-brand-tint) !important; color:var(--zz-brand-dark) !important; border-color:var(--zz-brand-tint) !important; }
#wrapper .fc .fc-button-primary:disabled{ opacity:.55; }
#wrapper .fc .fc-button-group > .fc-button:first-child{ border-radius:999px 0 0 999px !important; }
#wrapper .fc .fc-button-group > .fc-button:last-child{ border-radius:0 999px 999px 0 !important; }
#wrapper .fc .fc-button-group > .fc-button:only-child,
#wrapper .fc .fc-toolbar-chunk > .fc-button{ border-radius:999px !important; }
#wrapper .fc .fc-day-today{ background:var(--zz-brand-tint) !important; }
#wrapper .fc .fc-toolbar-title{ font-size:18px; font-weight:700; color:#14181f; }

/* ---------- 18. Titulo repetido + Gastos ---------- */
/* titulo de creacion que zunzun-theme.js subio al header */
html.zz-shell #wrapper h4.zz-dup-title{ display:none !important; }
/* el estilo de zona para soltar archivos NO va en formularios completos
   (Gastos: todo #expense-form es .dropzone -> quedaba flex centrado y punteado) */
/* solo Gastos: ahi TODO el formulario es la zona de carga (en Archivos el form
   ES el recuadro para soltar archivos y tiene que conservar su estilo) */
#wrapper form#expense-form.dropzone{
    display:block !important; border:0 !important; background:transparent !important; min-height:0 !important; padding:0 !important;
}
#wrapper form#expense-form.dropzone:hover, #wrapper form#expense-form.dropzone.dz-drag-hover{ background:transparent !important; }
#wrapper form#expense-form.dropzone > [class*="col-"]{ float:left; }
/* Gastos: zona del recibo como las del resto de la app */
#wrapper #expense-form #dropzoneDragArea{
    border:1.5px dashed #bfd4f5 !important; border-radius:var(--zz-radius-sm) !important; background:#fbfdfd;
    margin:0 !important; padding:26px 12px !important; text-align:center; color:var(--zz-brand-dark); font-weight:600; font-size:13px; cursor:pointer;
}
#wrapper #expense-form #dropzoneDragArea:hover{ background:var(--zz-brand-tint); border-color:var(--zz-brand) !important; }
#wrapper #expense-form.dz-drag-hover #dropzoneDragArea{ background:var(--zz-brand-tint); border-color:var(--zz-brand) !important; }
/* "Opciones avanzadas": titulo de seccion alineado con la tarjeta de la izquierda */
#wrapper #expense-form > .col-md-6 > h4{ font-size:15px !important; font-weight:700 !important; color:#14181f !important; margin:0 0 12px !important; }


/* ---------- 19. Archivos (cliente y portal): zona de carga ---------- */
#wrapper form.dropzone:not(#expense-form){
    flex-direction:column; gap:10px; min-height:150px !important; padding:24px !important; cursor:pointer;
    border:1.5px dashed #bfd4f5 !important; border-radius:var(--zz-radius-sm) !important; background:#fbfdfd !important;
    margin:6px 0 22px;
}
/* cuadrado menta con la flecha de subida centrada (una sola pieza: el icono va
   como imagen de fondo del mismo cuadrado, asi no se desalinea) */
#wrapper form.dropzone:not(#expense-form)::before{
    content:""; width:44px; height:44px; border-radius:14px; flex-shrink:0;
    background:var(--zz-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230046b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
    box-shadow:inset 0 0 0 1px #d2e3fb;
}
#wrapper form.dropzone:not(#expense-form) .dz-message{ position:relative; margin:0 !important; }
#wrapper form.dropzone:not(#expense-form){ position:relative; }
#wrapper form.dropzone:not(#expense-form):has(.dz-preview)::before{ display:none; }
/* nota "Los archivos de proyectos y tareas... no se muestran": aviso discreto, no texto azul */
#wrapper .tab-content > p.text-info{
    color:var(--zz-n-600) !important; font-size:12.5px; background:var(--zz-n-50); border:1px solid var(--zz-border);
    border-radius:12px; padding:9px 14px 9px 36px; margin:0 0 14px; position:relative;
}
#wrapper .tab-content > p.text-info::before{
    content:""; position:absolute; left:13px; top:50%; width:15px; height:15px; margin-top:-7.5px; background:#6b7280;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- 20. Pestaña "Paquetes" del cliente ---------- */
#wrapper .zz-cp-summary{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
#wrapper .zz-cp-count{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 4px; border:1px solid var(--zz-border); border-radius:999px; background:#fff; font-size:12.5px; }
#wrapper .zz-cp-count b{ font-family:var(--zz-font-mono); font-weight:600; color:#14181f; }

/* ---------- 21. Rastreo publico (/tracking) ---------- */
.zz-track-page{ max-width:760px; margin:0 auto; float:none; }
.zz-track-form{ display:flex; gap:10px; padding:16px !important; }
.zz-track-form .form-control{ flex:1; height:46px !important; font-size:15px; border-radius:12px; }
.zz-track-form .btn{ height:46px; padding:0 26px; border-radius:999px !important; font-weight:600; }
.zz-track-head{ display:flex; flex-wrap:wrap; gap:18px 40px; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--zz-border); }
.zz-track-guide{ font-size:20px; font-weight:600; color:#14181f; }
.zz-track-dest{ font-size:15px; font-weight:600; color:#14181f; }
.zz-track-steps{ list-style:none; margin:0; padding:0 0 0 4px; position:relative; }
.zz-track-steps li{ display:flex; gap:14px; position:relative; padding:0 0 22px; }
.zz-track-steps li:last-child{ padding-bottom:0; }
.zz-track-steps li:not(:last-child)::before{ content:""; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:var(--zz-n-100); }
.zz-track-steps li.is-done:not(:last-child)::before{ background:var(--zz-brand-tint); }
.zz-track-dot{ width:14px; height:14px; border-radius:50%; margin-top:2px; flex-shrink:0; background:#fff; border:2px solid #d5dade; position:relative; z-index:1; }
.zz-track-steps li.is-done .zz-track-dot{ background:var(--zz-brand); border-color:var(--zz-brand); }
.zz-track-step{ font-size:14px; font-weight:600; color:#14181f; }
.zz-track-steps li.is-pending .zz-track-step{ color:#9aa1ab; font-weight:500; }
.zz-track-date{ font-size:12.5px; color:#6b7280; margin-top:2px; }
body.customers_login .zz-track-cta{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--zz-border); font-size:13px; color:#6b7280; }
body.customers_login .zz-track-cta a{ color:var(--zz-brand); font-weight:600; }
.zz-quote-page .zz-track-cta{ margin:14px 0 0; font-size:13px; color:#6b7280; text-align:center; }
.zz-quote-page .zz-track-cta a{ color:var(--zz-brand); font-weight:600; }

/* ---------- 22. Entregas + estado "En destino" ---------- */
.zz-pill-destino{ background:#dff3f3; color:#0b6f70; }
.zz-tile-en-destino{ background:#dff3f3; color:#0b6f70; }
/* "Disponible para entrega" (2026-10-19) */
.zz-pill-disponible{ background:#d5f3e6; color:#0b7a55; }
.zz-tile-disponible-para-entrega{ background:#d5f3e6; color:#0b7a55; }
.zz-status-grid{ grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)) !important; }
#wrapper .zz-dl-find{ display:flex; gap:10px; max-width:620px; }
#wrapper .zz-dl-find .form-control{ flex:1; height:44px !important; font-size:15px; }
#wrapper .zz-dl-find .btn{ height:44px; padding:0 22px; border-radius:999px !important; font-weight:600; }
#wrapper .zz-dl-result:not(:empty){ margin-top:18px; }
#wrapper .zz-dl-card{ border:1px solid var(--zz-border); border-radius:var(--zz-radius-sm); padding:18px 20px; background:var(--zz-n-50); }
#wrapper .zz-dl-facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:14px 24px; }
#wrapper .zz-dl-facts > div > span:first-child{ display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#6b7280; margin-bottom:4px; }
#wrapper .zz-dl-facts b{ font-size:14px; color:#14181f; font-weight:600; }
#wrapper .zz-dl-form, #wrapper .zz-dl-bulk{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
#wrapper .zz-dl-form .form-control, #wrapper .zz-dl-bulk .form-control{ flex:1 1 200px; }
#wrapper .zz-dl-form .btn, #wrapper .zz-dl-bulk .btn{ height:40px; padding:0 20px; border-radius:999px !important; font-weight:600; }
#wrapper .zz-dl-block{ margin:16px 0 0; border-radius:12px; }
#wrapper .zz-dl-table td .zz-pill + a{ margin-left:6px; font-size:12.5px; font-weight:600; }

/* ---------- 23. Shell mobile: barra de pestañas + panel "Más" ----------
 * Fase 0 de la reforma responsive. Se activa con html.zz-mobile-shell
 * (marcada por zunzun-theme.js, igual que html.zz-shell en desktop) por
 * debajo de 992px — mismo breakpoint que ya usaba el shell de escritorio,
 * no se agrega un tercer tratamiento "tablet" en esta ronda.
 * #zz-tabbar y #zz-more-panel los arma zunzun-theme.js (mountMobileShell),
 * no viven en ningun view/include de Perfex. */
@media (max-width: 991px){
    /* Transicion entre pantallas (pedido de Jose "agrega animaciones entre
       secciones"): esta app no es una SPA — cada pantalla es una carga real
       de pagina — asi que se usa la View Transitions API nativa del
       navegador para navegacion entre documentos, sin JS ni routing propio.
       Donde no esta soportada, navega instantaneo como siempre (no rompe
       nada). Solo mobile: en desktop el sidebar queda siempre visible y la
       navegacion ya se siente distinta. */
    @view-transition{ navigation: auto; }

    /* Oculta los menus nativos de Perfex que quedarian duplicados con la
       barra de pestañas nueva. Gateado por la clase (no solo por el media
       query) para que si el JS llegara a fallar, Perfex conserve su propio
       menu nativo como red de contencion en vez de quedar sin navegacion. */
    html.zz-mobile-shell #menu,
    html.zz-mobile-shell .hide-menu,
    html.zz-mobile-shell .mobile-menu{ display:none !important; }
    /* Accesos rapidos del header real (+/compartir/timers/notificaciones/
       avatar+logout) — su funcionalidad de perfil/logout ya esta cubierta
       por el panel "Más" (buildMorePanel). En un celular real (<=640px)
       quedaban ocultos "gratis" por las clases sm:* de Tailwind del propio
       markup de Perfex (breakpoint 640px), pero eso nunca cubria el rango
       768-991px (Tailwind ya los trata como "desktop" ahi) — quedaban
       flotando sueltos arriba a la derecha, encima del buscador. Bug real
       visto en vivo al revisar tablet por primera vez (nunca se habia
       mirado ese rango con cuidado). Regla propia, ya no depende del
       breakpoint de Tailwind. */
    html.zz-mobile-shell #header nav > .tw-flex > ul.navbar-nav{ display:none !important; }

    /* 64px fijo no alcanzaba en celulares con gesture bar (safe-area-inset-
       bottom, ej. iPhone sin botón físico): ahí la barra de pestañas es más
       alta que eso (mismo cálculo que .zz-tabbar usa para su propio padding
       inferior), y el final del contenido quedaba tapado. */
    html.zz-mobile-shell body{ padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px)); }

    /* Barra "Guardar"/accion inferior de Perfex (.btn-bottom-toolbar): en
       escritorio ya es una capsula flotante (seccion 8), pero eso esta
       gateado a esa vista — en mobile quedaba con el estilo nativo de
       Perfex, fija a todo el ancho pegada abajo de todo, chocando con la
       barra de pestañas nueva. Se sube arriba de la barra de pestañas. */
    html.zz-mobile-shell .btn-bottom-toolbar{
        position:fixed !important; left:auto !important; right:12px !important;
        bottom:calc(64px + env(safe-area-inset-bottom, 0px) + 12px) !important;
        width:auto !important; margin:0 !important; z-index:980;
        display:flex !important; align-items:center; gap:8px; padding:8px !important;
        background:rgba(255,255,255,.96) !important; border:1px solid var(--zz-border) !important;
        border-radius:999px !important; box-shadow:0 8px 20px rgba(20,24,31,.16) !important;
        text-align:left !important;
    }
    html.zz-mobile-shell .btn-bottom-toolbar > *{ margin:0 !important; }
    html.zz-mobile-shell .btn-bottom-toolbar .btn-group{ display:flex; }
    html.zz-mobile-shell #wrapper .btn-bottom-pusher{ height:90px !important; }
    /* #wrapper{margin-left:230px} es el ancho stock de la sidebar nativa de
       Perfex — su propio CSS lo resetea a 0 recien por debajo de SU
       breakpoint (768px), no del nuestro (991px). Entre 768-991px, #menu ya
       esta oculto (regla de arriba) pero el wrapper seguia reservando el
       espacio vacio como si la sidebar siguiera ahi — bug real visto en
       vivo al revisar tablet por primera vez, mismo motivo que los iconos
       sueltos del header (breakpoint ajeno que no cubre este rango). */
    html.zz-mobile-shell #wrapper{ margin-left:0 !important; margin-right:0 !important; }
    /* Gutter lateral general: nunca se agrego, todo quedaba pegado a los
       bordes de la pantalla (titulo, buscador, tarjetas, tabla) en TODAS
       las pantallas mobile, no solo Inicio. */
    html.zz-mobile-shell #wrapper .content{ padding-left:16px !important; padding-right:16px !important; padding-bottom:24px !important; }
    /* Perfex trae background:#1e293b (oscuro) en <body> por defecto, pensado
       para su sidebar viejo edge-to-edge. Nunca se sobreescribio para mobile
       (solo para desktop, ver seccion 5) — asomaba oscuro en el rebote de
       scroll de iOS/Android. */
    html.zz-mobile-shell body{ background:var(--zz-n-50) !important; }
    /* Mismo fondo tambien en <html> (por si el area junto al scrollbar/borde
       muestra el fondo de html en vez del de body) + freno de scroll
       horizontal por las dudas de que algo desborde el ancho. */
    html.zz-mobile-shell{ background:var(--zz-n-50) !important; overflow-x:hidden; }

    .zz-tabbar{
        position:fixed; left:0; right:0; bottom:0; z-index:1000;
        display:flex; background:#fff; border-top:1px solid var(--zz-border);
        padding:6px 2px calc(4px + env(safe-area-inset-bottom, 0px));
        font-family:var(--zz-font-ui);
        /* elemento persistente de la transicion entre paginas: no hace
           cross-fade con el contenido, se siente fija como el "chrome" de
           una app nativa (cada pagina la reconstruye igual, mismo id). */
        view-transition-name: zz-tabbar;
    }
    .zz-tab{
        flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
        padding:4px 2px; color:#9aa1ab; text-decoration:none !important;
        background:none; border:0; font-family:inherit; cursor:pointer;
        transition:color .15s ease, transform .15s ease;
    }
    .zz-tab:active{ transform:scale(.92); }
    .zz-tab svg{ width:22px; height:22px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:stroke-width .15s ease; }
    .zz-tab span{ font-size:10px; font-weight:600; }
    .zz-tab.active{ color:var(--zz-brand); }
    .zz-tab.active svg{ stroke-width:2.1; }

    /* Panel "Más": fade + deslizamiento hacia arriba al abrir, inverso al
       cerrar (antes aparecia/desaparecia de golpe con display:none/block —
       eso no se puede animar, por eso el cambio a opacity/transform). */
    .zz-more-panel{
        position:fixed; inset:0; z-index:1090; background:var(--zz-n-50);
        overflow-y:auto; -webkit-overflow-scrolling:touch;
        padding:20px 16px calc(84px + env(safe-area-inset-bottom, 0px));
        opacity:0; visibility:hidden; transform:translateY(14px); pointer-events:none;
        transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    }
    html.zz-more-open .zz-more-panel{
        opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
        transition:opacity .22s ease, transform .22s ease, visibility 0s linear 0s;
    }
    html.zz-more-open .zz-tabbar{ z-index:1100; } /* "Más" queda tocable arriba del panel, para cerrar */

    .zz-more-account{
        display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--zz-border);
        border-radius:var(--zz-radius-sm); padding:14px; margin-bottom:16px;
    }
    .zz-more-avatar{ width:44px; height:44px; border-radius:50%; background:#dbe0e5; flex-shrink:0; object-fit:cover; }
    .zz-more-name{ font-size:14.5px; font-weight:700; color:#14181f; }
    .zz-more-role{ font-size:12px; color:#6b7280; }
    .zz-more-group{ background:#fff; border:1px solid var(--zz-border); border-radius:var(--zz-radius-sm); overflow:hidden; margin-bottom:16px; }
    .zz-more-row{
        display:flex; align-items:center; gap:12px; padding:12px 14px;
        border-bottom:1px solid var(--zz-border); color:#14181f !important; text-decoration:none !important;
    }
    .zz-more-row:last-child{ border-bottom:none; }
    .zz-more-row svg:first-child{ width:19px; height:19px; stroke:var(--zz-brand-dark); stroke-width:1.8; fill:none; flex-shrink:0; }
    .zz-more-lbl{ flex:1; font-size:14px; font-weight:500; }
    .zz-more-chev{ width:15px; height:15px; stroke:#c3c9d1; stroke-width:2; fill:none; flex-shrink:0; }

    /* ---------- 23b. Inicio mobile: titulo grande + buscador (Fase 1) ----------
     * Calcado de memoria/frame "1 - Inicio" del mock aprobado
     * (~/Downloads/zunzun-mockup-mobile-admin.html): .largehead/.searchbar/
     * .kpi-row/.kpi/.zz-card, mismos valores exactos (font-size, padding,
     * radius, gap). Solo se activa con html.zz-mobile-largehead, que JS
     * agrega SOLO si la pagina tiene .zz-topbar (hoy, unicamente Inicio) —
     * el resto de las paginas mobile no se tocan en esta fase.
     * !important en casi todo porque .zz-topbar/.zz-kpi-card/etc. son estilos
     * inline de la propia vista (views/admin/inicio/manage.php), que cargan
     * DESPUES de custom.css en el <body> y ganarian el cascade sin esto. */
    html.zz-mobile-largehead #header{ display:none !important; }
    html.zz-mobile-largehead #wrapper .content{ padding-top:0 !important; }

    /* Rediseño a pedido de Jose: titulo+buscador sueltos sobre el fondo
       gris se sentian vacios y desconectados de la marca/avatar — ahora es
       UNA sola tarjeta blanca (marca+avatar arriba, titulo, subtitulo real
       con la fecha, buscador), como el resto de tarjetas de la app. */
    html.zz-mobile-largehead .zz-topbar{
        display:block !important; align-items:initial !important; justify-content:initial !important;
        background:#fff !important; border:1px solid var(--zz-border) !important; box-shadow:var(--zz-shadow) !important;
        border-radius:16px !important; padding:14px 16px 16px !important; margin:0 0 12px !important;
    }
    .zz-mh-row1{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
    .zz-mh-brand{ height:28px; width:auto; object-fit:contain; flex-shrink:0; }
    .zz-mh-avatar-link{ display:block; width:30px; height:30px; flex-shrink:0; }
    .zz-mh-avatar{ width:30px; height:30px; border-radius:50%; background:#dbe0e5; object-fit:cover; }
    html.zz-mobile-largehead .zz-topbar h1{
        font-size:22px !important; font-weight:800 !important; letter-spacing:-.01em !important;
        margin:0 0 2px !important;
    }
    html.zz-mobile-largehead .zz-topbar p{
        display:block !important; font-size:12px !important; color:#6b7280 !important; margin:0 0 12px !important;
    }

    /* buscador real (#top_search/#search_input de Perfex), movido por JS
       (mobileifyTopbar) debajo del titulo — mismo <input>, misma logica de
       autocomplete, solo cambia donde vive en el DOM y como se ve. */
    html.zz-mobile-largehead #top_search{ width:100% !important; margin:0 !important; flex:none !important; }
    html.zz-mobile-largehead #search_input{
        width:100% !important; height:38px !important; margin:0 !important;
        border-radius:11px !important; background:var(--zz-n-50) !important;
        border:1px solid var(--zz-border) !important; padding:0 12px 0 34px !important;
        font-size:13.5px !important; box-shadow:none !important;
    }
    html.zz-mobile-largehead #top_search_button{
        left:12px !important; right:auto !important; top:50% !important; margin:0 !important;
        width:auto !important; height:auto !important; padding:0 !important;
        transform:translateY(-50%); line-height:0;
    }
    html.zz-mobile-largehead #top_search_button button{
        padding:0 !important; margin:0 !important; width:auto; height:auto;
        background:none; color:#9aa1ab !important; font-size:14px; line-height:1;
    }

    html.zz-mobile-largehead .zz-actions-row{ display:none !important; } /* no esta en el mock */
    html.zz-mobile-largehead .zz-kpi-row{ grid-template-columns:1fr 1fr !important; gap:10px !important; margin-bottom:12px !important; }
    html.zz-mobile-largehead .zz-kpi-card{ padding:12px 14px !important; border-radius:16px !important; box-shadow:none !important; }
    html.zz-mobile-largehead .zz-kpi-icon{ display:none !important; } /* el mock solo muestra numero+label */
    html.zz-mobile-largehead .zz-kpi-label{ font-size:11px !important; margin-bottom:2px !important; }
    html.zz-mobile-largehead .zz-kpi-value{ font-size:19px !important; }
    html.zz-mobile-largehead .zz-card{ padding:14px 16px !important; border-radius:16px !important; margin-bottom:12px !important; }
    html.zz-mobile-largehead .zz-card-title{ font-size:12px !important; font-weight:700 !important; margin:0 0 8px !important; }
}

/* ---------- 23c. Portal de clientes mobile: shell (tab bar + "Más") ----------
 * Equivalente a la seccion 23 pero para el portal (views/themes/perfex/),
 * que nunca cargaba zunzun-theme.js antes de esto — ver IIFE propio en el
 * JS. .zz-tabbar/.zz-more-panel/etc ya son genericos (seccion 23 arriba,
 * sin prefijo html.zz-mobile-shell), se reusan tal cual, solo hace falta
 * ocultar el navbar nativo del portal y reservar el espacio de la tab bar. */
@media (max-width: 991px){
    html.zz-portal-mobile-shell body.customers nav.navbar.header{ display:none !important; }
    html.zz-portal-mobile-shell body.customers{
        padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        background:var(--zz-n-50) !important;
    }
    html.zz-portal-mobile-shell body.customers #content{ padding-top:16px !important; }
    html.zz-portal-mobile-shell body.customers .container{ padding-left:16px !important; padding-right:16px !important; }
}

/* ---------- 24. Paquetes mobile: tarjetas (Fase 2) ----------
 * .zz-cards lo llena zzBuildMobileCards() (zunzun-theme.js) a partir de la
 * misma aaData de DataTables — reusa el pill/opciones ya renderizados.
 * La tabla de escritorio NO se toca ni se reemplaza; solo se oculta por CSS
 * en mobile, y unicamente si las tarjetas realmente tienen contenido
 * (:has()) — si el JS llegara a fallar, la tabla con scroll horizontal
 * sigue ahi como red de contencion, igual criterio que el resto del shell
 * mobile. */
.zz-cards{ display:none; }
.zz-cards-empty{ text-align:center; padding:24px; color:#6b7280; font-size:13px; }
.zz-card-row{
    display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--zz-border);
    border-radius:14px; padding:12px 14px; margin-bottom:8px;
}
.zz-card-row:last-child{ margin-bottom:0; }
.zz-card-row-body{ flex:1; min-width:0; }
.zz-card-row-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.zz-card-row-guide{ font-size:13px; font-weight:600; }
.zz-card-row-meta{ display:flex; flex-wrap:wrap; gap:5px 12px; font-size:11.5px; color:#6b7280; }

/* ---------- 24b. Clientes/Destinatarios mobile: tarjetas ----------
 * zzBuildContactCards() (zunzun-theme.js). El casillero se muestra con el
 * mismo tratamiento que "guide" en las tarjetas de Courier (mono, en
 * negrita) porque es el identificador real del destinatario en el negocio,
 * igual de importante que el numero de guia en Paquetes. Las acciones
 * (Editar/Ver Paquetes/Eliminar) sustituyen al menu que dependia de hover
 * (".row-options", roto en touch — bug real visto en vivo). */
.zz-contact-card .zz-card-row-top{ align-items:flex-start; }
.zz-contact-name{ display:flex; align-items:center; gap:8px; min-width:0; }
.zz-contact-avatar{ width:28px; height:28px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.zz-contact-name > a{
    font-size:13.5px; font-weight:600; color:var(--zz-n-700); text-decoration:none;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.zz-contact-card .zz-card-row-top > .onoffswitch{ flex-shrink:0; margin-top:2px; }
.zz-contact-card .zz-card-row-guide{ margin-bottom:6px; color:var(--zz-brand-dark); }
.zz-contact-card .zz-card-row-meta > span{ display:flex; flex-direction:column; gap:2px; }
.zz-contact-card .zz-unverified{ display:flex; align-items:center; gap:6px; }

@media (max-width: 991px){
    #zz-cards-paquetes:not(:empty){ display:block; }
    .panel-table-full:has(#zz-cards-paquetes:not(:empty)) table.table-paquetes{ display:none; }
    #zz-cards-valijas:not(:empty){ display:block; }
    .panel-table-full:has(#zz-cards-valijas:not(:empty)) table.table-valijas{ display:none; }
    #zz-cards-embarcaciones:not(:empty){ display:block; }
    .panel-table-full:has(#zz-cards-embarcaciones:not(:empty)) table.table-embarcaciones{ display:none; }
    #zz-cards-aduana:not(:empty){ display:block; }
    .panel-table-full:has(#zz-cards-aduana:not(:empty)) table.table-aduana{ display:none; }
    /* Destinatarios/Casilleros: no siempre viven dentro de .panel-table-full
       (la pestaña "Casilleros" del cliente usa .panel-body a secas), asi que
       se usa .panel-body como ancla — el id de #zz-cards-* es unico, no hace
       falta ser mas especifico. */
    #zz-cards-contacts:not(:empty){ display:block; }
    .panel-body:has(#zz-cards-contacts:not(:empty)) table.table-contacts{ display:none; }
    #zz-cards-all-contacts:not(:empty){ display:block; }
    .panel-body:has(#zz-cards-all-contacts:not(:empty)) table.table-all-contacts{ display:none; }
    #zz-cards-cp:not(:empty){ display:block; }
    .panel-body:has(#zz-cards-cp:not(:empty)) table.zz-cp-table{ display:none; }
    /* Portal de clientes (Destinatarios/Facturas) — mismo patron, otra
       familia de vistas (views/themes/perfex/), sin html.zz-mobile-shell
       (ese shell es exclusivo del admin) pero esto no depende de esa clase. */
    #zz-cards-portal-contacts:not(:empty){ display:block; }
    .panel-body:has(#zz-cards-portal-contacts:not(:empty)) table.table-contacts{ display:none; }
    #zz-cards-portal-invoices:not(:empty){ display:block; }
    .panel-body:has(#zz-cards-portal-invoices:not(:empty)) table.table-invoices{ display:none; }

    /* boton real "Nuevo X" (abre el modal existente, misma logica) -> FAB
       fijo abajo a la derecha, arriba de la barra de pestañas. Excluido el
       caso de Aduana (2 botones reales: Nuevo tramite + Exportar CSV en el
       mismo contenedor), que queda como barra normal mas abajo. */
    html.zz-mobile-shell #wrapper .tw-mb-2:has(> a.btn-golat):not(:has(> a.btn-default)){
        position:fixed; right:16px; bottom:76px; z-index:990; margin:0 !important;
    }
    html.zz-mobile-shell #wrapper .tw-mb-2:has(> a.btn-golat):not(:has(> a.btn-default)) a.btn-golat{
        width:52px; height:52px; border-radius:50% !important; padding:0 !important;
        display:flex; align-items:center; justify-content:center;
        box-shadow:0 10px 22px rgba(14,107,98,.35);
        font-size:0; /* oculta el texto (nodo suelto, sin span propio) sin tocar el HTML */
        position:relative; /* ancla el icono por posicion absoluta, ver nota abajo */
    }
    /* position:absolute en vez de depender del centrado flex del boton: el
       texto real ("Nuevo embarque"/"Nuevo tramite") sigue siendo un nodo de
       texto suelto (sin span propio) que participa del flex aunque este a
       font-size:0 — su ancho fantasma desbalanceaba el justify-content:center
       y el "+" quedaba ~3px corrido del centro real del circulo (visto en
       vivo con getBoundingClientRect). Posicion absoluta ignora por completo
       a los hermanos, queda perfecto sin tocar el HTML. */
    html.zz-mobile-shell #wrapper .tw-mb-2:has(> a.btn-golat):not(:has(> a.btn-default)) a.btn-golat i{
        margin:0 !important; font-size:18px;
        position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    }

    /* Aduana: "Nuevo tramite" + "Exportar CSV" en el mismo contenedor, sin
       tratamiento FAB (2 acciones reales, no cabe un solo circulo). Barra
       normal apilada, ambos botones a todo el ancho disponible. */
    html.zz-mobile-shell #wrapper .tw-mb-2:has(> a.btn-golat):has(> a.btn-default){
        display:flex; flex-wrap:wrap; gap:8px;
    }
    html.zz-mobile-shell #wrapper .tw-mb-2:has(> a.btn-golat):has(> a.btn-default) > a{
        flex:1 1 auto; text-align:center;
    }

    /* Fase 4: modales de alta/edicion a pantalla completa (patron "pantalla
       empujada" del mock) en vez de ventana flotante chica. CSS generico,
       un solo cambio para TODOS los modales de la app (courier + stock
       Perfex): mismo HTML/JS, el boton "X" (data-dismiss="modal") sigue
       cerrando igual, solo se redibuja como flecha-atras; Cancelar/Guardar
       siguen siendo los botones reales del footer — display:flex en
       modal-content (header/body/footer) ya deja el body con scroll propio
       y header/footer siempre visibles sin position:sticky. */
    html.zz-mobile-shell .modal-dialog{
        width:100% !important; max-width:100% !important; height:100% !important;
        margin:0 !important; position:fixed !important; inset:0 !important;
        top:0 !important; left:0 !important;
    }
    html.zz-mobile-shell .modal.fade .modal-dialog{ transform:none !important; }
    html.zz-mobile-shell .modal-content{
        width:100%; height:100% !important; border-radius:0 !important; border:0;
        display:flex; flex-direction:column; box-shadow:none;
    }
    /* Algunos modales (ej. "Nueva tarea personal") envuelven modal-body +
       modal-footer en un <form> hijo directo de modal-content, en vez de
       tenerlos como hijos directos — el flex de arriba no llegaba a esa
       capa, el form quedaba con su alto natural y el footer no pegaba
       abajo (visto en vivo). El form pasa a ser el flex column real; min-
       height:0 es necesario para que el modal-body de adentro pueda
       scrollear en vez de forzar la altura del form entero. */
    html.zz-mobile-shell .modal-content > form{
        display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
    }
    html.zz-mobile-shell .modal-header{
        flex:0 0 auto; display:flex; align-items:center; gap:12px;
        padding:14px 16px; border-bottom:1px solid var(--zz-border);
    }
    /* neutraliza el clearfix de Bootstrap (:before/:after display:table) —
       con el header en flex esos pseudo-elementos pasarian a ser items
       fantasma y descuadrarian el centrado, mismo tipo de bug que el "+"
       del FAB (nodo invisible que igual ocupa lugar en el flex). */
    html.zz-mobile-shell .modal-header:before,
    html.zz-mobile-shell .modal-header:after,
    html.zz-mobile-shell .modal-footer:before,
    html.zz-mobile-shell .modal-footer:after{ display:none !important; }
    html.zz-mobile-shell .modal-title{ flex:1; font-size:16px; font-weight:700; margin:0; }
    /* "X" -> flecha atras, mismo trazo que el boton de colapso del sidebar */
    html.zz-mobile-shell .modal-header .close{
        opacity:1 !important; width:26px; height:26px; margin:0;
        flex:0 0 auto; position:relative; font-size:0;
    }
    html.zz-mobile-shell .modal-header .close::before{
        content:""; position:absolute; inset:0; background:var(--zz-n-600);
        -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
                mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    }
    html.zz-mobile-shell .modal-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px; }
    html.zz-mobile-shell .modal-footer{
        flex:0 0 auto; background:#fff; border-top:1px solid var(--zz-border);
        padding:10px 16px; display:flex; gap:8px; text-align:left;
    }
    html.zz-mobile-shell .modal-footer .btn{ flex:1; margin:0 !important; }
}

/* ---------- 25. Tablet (768-991px): mismo patron que mobile, mas aire ----------
 * Fase 5 opcional. Decidido con Jose 2026-09-24 (AskUserQuestion): misma
 * tab bar inferior que mobile (nada nuevo de navegacion), tarjetas en
 * grilla de 2 columnas en vez de 1 sola, mas gutter lateral. Todo lo demas
 * (FAB, modales a pantalla completa, iconos de acciones) queda identico a
 * mobile — no se duplica ningun componente, solo se ajusta el layout de
 * los que ya existen dentro de este rango angosto de ancho. */
@media (min-width: 768px) and (max-width: 991px){
    /* especificidad: gana por !important, no por selector — las reglas
       #zz-cards-X:not(:empty){display:block} de mas arriba son por ID
       (mas especificas que esta clase), sin !important quedarian ganando
       igual con "display:block" y la grilla nunca se aplicaria. */
    .zz-cards:not(:empty){
        display:grid !important; grid-template-columns:1fr 1fr; gap:10px;
    }
    /* el spacing entre tarjetas pasa a ser 100% "gap" del grid — el
       margin-bottom pensado para una sola columna apilada (mas el ":last-
       child" que solo zera la ultima tarjeta del DOM, no la ultima de cada
       fila visual) desalinearia filas dispares en 2 columnas. */
    .zz-card-row{ margin-bottom:0 !important; }

    html.zz-mobile-shell #wrapper .content{
        padding-left:24px !important; padding-right:24px !important;
    }
    html.zz-portal-mobile-shell body.customers .container{
        padding-left:24px !important; padding-right:24px !important;
    }
}

/* ---------- 24. Calculadora publica de tarifa (/cotizar) ---------- */
.zz-quote-page{ max-width:520px; margin:0 auto; float:none; }
/* 2026-10-05, pedido de Jose: el titulo/subtitulo quedaban alineados a la
   izquierda DENTRO de esta columna ya centrada - visualmente parecia
   desalineado contra la tarjeta de abajo (que si se ve centrada). */
.zz-quote-page .zz-portal-hello{ text-align:center; }
.zz-quote-form{ display:flex; flex-direction:column; gap:14px; padding:20px !important; }
.zz-quote-row label{ display:block; font-size:12.5px; font-weight:600; color:#6b7280; margin-bottom:6px; }
.zz-quote-row .form-control{ height:46px !important; font-size:15px; border-radius:12px; }
/* Zunzun (2026-10-09, a pedido de Jose): el texto del select de pais (con
   bandera emoji + nombre) quedaba pegado arriba, no centrado en la altura
   de 46px del control - bootstrap-select no ajusta el line-height del
   boton solo. Flex + align-items:center lo centra sin depender de la
   metrica de fuente del emoji. */
.zz-quote-row .bootstrap-select > .dropdown-toggle{ display:flex !important; align-items:center; }
.zz-quote-row .bootstrap-select .filter-option{ display:flex; align-items:center; }
.zz-quote-toggle{ display:flex; gap:18px; }
.zz-quote-radio{ display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500; color:#14181f; margin:0; }
.zz-quote-radio input{ margin:0; }
.zz-quote-dims-inputs{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.zz-quote-form .btn{ height:46px; border-radius:999px !important; font-weight:600; align-self:flex-start; padding:0 30px; }
.zz-quote-result{ text-align:center; padding:24px !important; }
.zz-quote-cost{ font-size:32px; font-weight:700; color:var(--zz-brand-dark); margin:2px 0 4px; }
.zz-quote-detail{ font-size:13px; color:#6b7280; }
.zz-quote-note{ font-size:12px; color:#9aa1ab; margin-top:8px; }
.zz-quote-disclaimer{ font-size:12px; color:#9aa1ab; margin:14px 0 0; padding-top:12px; border-top:1px solid var(--zz-border); }
@media (max-width: 480px){
    .zz-quote-dims-inputs{ grid-template-columns:1fr 1fr 1fr; gap:6px; }
}

/* ---------- 25. Panel "campos combinados disponibles" (admin > Plantillas de email) ---------- */
/* solo estilo visual, misma estructura/clases nativas de Perfex — no se toco el PHP */
.available_merge_fields_container .merge_fields_col{ margin-bottom:22px; }
.available_merge_fields_container h5{
    background:var(--zz-brand-tint) !important; color:var(--zz-brand-dark) !important;
    text-transform:uppercase; font-size:11px !important; letter-spacing:.05em; font-weight:700 !important;
    padding:6px 12px !important; border-radius:999px !important; display:inline-block; margin-bottom:8px;
}
.available_merge_fields_container p{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    flex-wrap:wrap;
    padding:7px 2px; margin:0; border-bottom:1px solid var(--zz-border);
    font-size:13px; color:var(--zz-n-700);
}
.available_merge_fields_container p:last-of-type{ border-bottom:none; }
.available_merge_fields_container p:has(.add_merge_field:empty){ display:none; }
.available_merge_fields_container p .pull-right{ float:none; }
.available_merge_fields_container .add_merge_field{
    font-family:var(--zz-font-mono); font-size:11.5px; background:var(--zz-n-50); color:var(--zz-brand-dark);
    padding:3px 8px; border-radius:7px; text-decoration:none !important; border:1px solid var(--zz-border);
    white-space:nowrap;
}
.available_merge_fields_container .add_merge_field:hover{ background:var(--zz-brand-tint); border-color:var(--zz-brand); }

/* ---------- 26. Escaneo de verificacion (Valijas/Embarques: identificar lo no escaneado) ---------- */
.zz-scan-verify{
    background:var(--zz-n-50); border:1px solid var(--zz-border); border-radius:var(--zz-radius-sm);
    padding:12px 14px;
}
.zz-scan-verify label{ font-weight:600; font-size:12.5px; margin-bottom:4px; }
.zz-scan-verify input{ font-family:var(--zz-font-mono); }
.zz-scan-counter{ margin-top:6px; font-size:12.5px; color:var(--zz-n-600); font-weight:600; }
.zz-scan-counter span{ font-family:var(--zz-font-mono); color:var(--zz-brand-dark); }
.zz-scan-feedback{ margin-top:4px; font-size:12.5px; min-height:16px; font-family:var(--zz-font-mono); }
.zz-scan-feedback.zz-scan-ok{ color:var(--zz-brand-dark); }
.zz-scan-feedback.zz-scan-error{ color:#c0392b; }
.zz-scan-feedback.zz-scan-info{ color:var(--zz-n-600); }
.zz-scan-guide{ font-family:var(--zz-font-mono); }
/* Fila escaneada: se resalta en verde. Las que NUNCA se tildan asi (ni a
   mano ni por escaneo) son justamente "lo no escaneado" que se ve a simple
   vista por seguir con el fondo blanco normal, sin tener que buscarlas. */
.valija-package-row{ padding:4px 8px; border-radius:8px; transition:background-color .15s ease, color .15s ease; }
/* Zunzun (2026-10-16): lo escaneado se ve en AZUL (todo el texto de la fila, la guia en negrita). */
.valija-package-row.zz-scan-hit{ background:var(--zz-brand-tint); color:#0059e6; }
.valija-package-row.zz-scan-hit .zz-scan-guide{ color:#0046b3; font-weight:700; }
/* Aviso de "Solo escaneo" bajo los campos protegidos. */
.zz-scan-only-msg{ color:#c0392b; font-size:12.5px; font-weight:600; margin-top:4px; }
/* Bloque "Filtros" de los modales de Valijas / Embarques. */
.zz-filter-box{ border:1px solid var(--zz-border); border-radius:var(--zz-radius-sm); background:var(--zz-n-50); padding:12px 16px 14px; margin-bottom:6px; }
.zz-filter-box .zz-filter-title{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--zz-n-600); margin:0 0 8px; }

/* ---------- 27. Verificacion completa + lista de faltantes + reporte de auditoria (2026-09-28) ---------- */
.zz-scan-status{ margin-top:4px; font-size:12.5px; min-height:16px; font-weight:700; }
.zz-scan-status.zz-scan-complete{ color:var(--zz-brand-dark); }
.zz-scan-status.zz-scan-complete::before{ content:"\2713  "; }

.zz-scan-missing-list{ list-style:none; margin:0; padding:0; max-height:220px; overflow-y:auto; }
.zz-scan-missing-list li{
    font-family:var(--zz-font-mono); font-size:13px; color:#c0392b; background:#fdf1f0;
    border:1px solid #f3c9c6; border-radius:7px; padding:5px 10px; margin-bottom:6px;
}

.zz-audit-summary{ margin-bottom:14px; }
.zz-audit-summary p{ margin:0 0 4px; font-size:13.5px; }
.zz-audit-counts{ color:var(--zz-n-600); font-family:var(--zz-font-mono); font-size:12.5px !important; }
.zz-audit-short-badge{
    display:inline-block; background:#c0392b; color:#fff; text-transform:uppercase;
    font-size:10.5px; font-weight:700; letter-spacing:.05em; padding:3px 9px; border-radius:999px; margin:2px 0 8px;
}
.zz-audit-row-scanned td:last-child{ color:var(--zz-brand-dark); font-weight:600; }
.zz-audit-row-manual td:last-child{ color:var(--zz-n-600); }
.zz-audit-row-missing{ background:#fdf1f0; }
.zz-audit-row-missing td:last-child{ color:#c0392b; font-weight:600; }

/* ---------- 28. Control de valijas/paquetes no relacionados (2026-09-28) ---------- */
/* Termino real de aduana (DIAN Decreto 1165/2019 art.635): carga presente
   pero no incluida en el manifiesto ya declarado. Badge visible de un
   vistazo en el listado de Valijas/Embarcaciones. */
.zz-manifest-badge{
    display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em;
    padding:3px 9px; border-radius:999px; text-transform:none;
}
.zz-manifest-undeclared{ background:var(--zz-n-50); color:var(--zz-n-600); border:1px solid var(--zz-border); }
.zz-manifest-declared{ background:var(--zz-brand-tint); color:var(--zz-brand-dark); }
.zz-manifest-drift{ background:#fdf1f0; color:#c0392b; border:1px solid #f3c9c6; }

/* ---------- 29. Verificacion de precinto en salida/apertura (2026-09-29) ---------- */
/* Mismo criterio visual que el badge de manifiesto de arriba - reusa el mismo
   .zz-manifest-badge para tamano/forma, solo cambia de nombre por claridad. */
.zz-seal-badge{
    display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em;
    padding:3px 9px; border-radius:999px; text-transform:none;
}
.zz-seal-pending{ background:var(--zz-n-50); color:var(--zz-n-600); border:1px solid var(--zz-border); }
.zz-seal-partial{ background:#fbf1de; color:#96690f; border:1px solid #f0dcb0; }
.zz-seal-verified{ background:var(--zz-brand-tint); color:var(--zz-brand-dark); }
.zz-seal-discrepancy{ background:#fdf1f0; color:#c0392b; border:1px solid #f3c9c6; }

/* ---------- 30. Reporte de paquetes procesados por operador (2026-10-02) ---------- */
/* Icono circular del encabezado de pantalla - mismo verde de marca que el
   resto del modulo, para que la pantalla no arranque con solo texto plano. */
.zz-rp-header{ display:flex; align-items:center; gap:14px; margin-bottom:4px; }
/* Fase 4 del plan de estilizado: mismo tratamiento ya aprobado para los
   iconos KPI de Inicio (tinte plano -> degradado real + icono blanco). */
/* 2026-10-05: se probo con el degradado completo y volvio a azul solido
   el mismo dia - en un icono de 44px el degradado de 4 paradas se ve
   recargado (Jose: "dejemosla en el azul de la paleta se ve mas
   profesional"). Mismo criterio aplicado a los botones .btn-primary/
   .btn-golat/.btn-success. */
.zz-rp-icon-badge{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:44px; height:44px; border-radius:12px;
    background:var(--zz-brand); color:#fff;
}
.zz-rp-icon-badge svg{ width:22px; height:22px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.zz-rp-operator{ display:flex; align-items:center; gap:10px; }
.zz-rp-operator img{ width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.zz-rp-zero{ color:#9aa2ad; }
.zz-rp-total{ color:var(--zz-brand-dark); font-size:15px; }
#zz-reporte-table tbody tr:hover{ background:var(--zz-n-50); }

/* Leads ("Clientes potenciales"): "Valor"/"Asignado" no se usan en Zunzun
   (sin pipeline de ventas por plata, sin asignacion de leads a staff) -
   2026-10-06, a pedido de Jose. No se puede sacar la columna desde el
   array de headers (leads_table_columns hook) sin romper la alineacion
   con las celdas reales, armadas en un archivo core sin hook equivalente
   (application/views/admin/tables/leads.php) - se ocultan por posicion en
   vez de editar ese archivo. th-lead-value/th-assigned son columnas 7 y 9
   (1-based, con el checkbox de seleccion como primera) - confirmado via
   DOM en vivo, no asumido. */
#leads th#th-lead-value, #leads td:nth-child(7),
#leads th#th-assigned, #leads td:nth-child(9){ display:none; }

/* Marketing (modulo Marketing Automation): sub-navegacion por dropdown
   (2026-10-06, pedido de Jose - "esas secciones ocupan mucha pantalla y
   dejan poco espacio al contenido"). Reemplaza la columna lateral fija de
   pestanas verticales (col-md-3, patron del vendor en Canales/Puntos/
   Componentes/Configuracion) por un selector compacto arriba del
   contenido + breadcrumb. Reusa el dropdown nativo de Bootstrap que ya
   usa el header (data-toggle="dropdown"), sin JS propio. */
.zz-subnav{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px;
}
.zz-subnav-crumb{ font-size:12.5px; color:#8a93a1; }
.zz-subnav-crumb .zz-subnav-sep{ margin:0 5px; color:#c4cad2; }
.zz-subnav-dd{ position:relative; }
.zz-subnav-trigger{
    display:inline-flex; align-items:center; gap:9px; padding:10px 14px; border-radius:var(--zz-radius-sm);
    border:1px solid var(--zz-border); background:#fff; font-size:13.5px; font-weight:700; color:#14181f !important;
    cursor:pointer; transition:border-color .15s, box-shadow .15s;
}
.zz-subnav-trigger:hover,
.zz-subnav-trigger:focus{ border-color:var(--zz-brand); text-decoration:none; outline:0; }
.zz-subnav-trigger .fa{ color:var(--zz-brand); font-size:13px; }
.zz-subnav-chev{ width:13px; height:13px; stroke:#8a93a1; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s; }
.zz-subnav-dd.open .zz-subnav-chev,
.zz-subnav-dd.show .zz-subnav-chev{ transform:rotate(180deg); }
.zz-subnav-menu.dropdown-menu{
    padding:6px; min-width:230px; border:1px solid var(--zz-border); border-radius:var(--zz-radius-sm);
    box-shadow:var(--zz-shadow); margin-top:8px;
}
.zz-subnav-menu.dropdown-menu > li > a{
    display:flex; align-items:center; gap:10px; padding:9px 11px !important; border-radius:10px;
    font-size:13.5px; font-weight:600; color:#333a44 !important;
}
.zz-subnav-menu.dropdown-menu > li > a .fa{ width:15px; text-align:center; color:#8a93a1; font-size:13px; }
.zz-subnav-menu.dropdown-menu > li > a:hover,
.zz-subnav-menu.dropdown-menu > li > a:focus{ background:var(--zz-n-50); }
.zz-subnav-menu.dropdown-menu > li.active > a{ background:var(--zz-brand-tint); color:var(--zz-brand-dark) !important; }
.zz-subnav-menu.dropdown-menu > li.active > a .fa{ color:var(--zz-brand-dark); }

/* 2026-10-07: topbar compartido para las vistas de detalle del modulo ma
   que todavia no tenian el rediseno de campaign_detail.php (stage, sms,
   email, whatsapp, asset, segment, point_action, email_template,
   text_message). Mismo patron ya shippeado en
   modules/ma/views/campaigns/campaign_detail.php (ahi vive en un <style>
   local porque es un solo archivo; aca va compartido porque son 9).
   Arregla el titulo duplicado: la barra global de Perfex ya muestra el
   nombre generico de la entidad (ej "Etapa"), este topbar antes repetia
   el mismo texto generico en vez del nombre real de cada registro. */
.zz-detail-topbar{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    background:#fff; border:1px solid var(--zz-border); box-shadow:var(--zz-shadow);
    border-radius:var(--zz-radius); padding:22px 28px; margin-bottom:20px;
}
.zz-detail-topbar h1{ margin:0 0 3px; font-size:19px; font-weight:800; letter-spacing:-.01em; }
.zz-detail-topbar-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.zz-btn{
    display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 18px;
    border-radius:999px; background:var(--zz-brand);
    color:#fff !important; border:none;
    font-family:var(--zz-font-ui); font-size:13px; font-weight:600; text-decoration:none !important;
}
.zz-btn:hover{ background:var(--zz-brand-dark); color:#fff !important; }
.zz-btn.zz-btn-ghost{ background:#fff; color:#333a44 !important; border:1px solid var(--zz-border); }
.zz-btn.zz-btn-ghost:hover{ background:#f6f7f8; }
.zz-btn.zz-btn-danger{ background:#dc2626; }
.zz-btn.zz-btn-danger:hover{ background:#b91c1c; }

/* Archivos del portal de cliente (2026-10-08): caja de subida con boton
   explicito "Subir" en vez del dropzone automatico de antes - el click
   abre el selector de archivos (es un <label for>), el drag&drop lo
   maneja zunzun-theme.js a mano (ver zz-upload-box). */
.zz-upload-box{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    border:1.5px dashed var(--zz-border); border-radius:var(--zz-radius-sm);
    padding:30px 16px; cursor:pointer; text-align:center;
    background:var(--zz-n-50); transition:border-color .15s, background .15s;
}
.zz-upload-box:hover{ border-color:var(--zz-brand); background:var(--zz-brand-tint); }
.zz-upload-box.zz-drag-over{ border-color:var(--zz-brand); background:var(--zz-brand-tint); }
.zz-upload-box-icon{
    width:40px; height:40px; border-radius:50%; background:var(--zz-brand-tint); color:var(--zz-brand);
    display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}
.zz-upload-box.zz-has-file .zz-upload-box-icon{ background:var(--zz-brand); color:#fff; }
.zz-upload-box-text{ font-size:13.5px; font-weight:600; color:var(--zz-brand-dark); word-break:break-all; }
.zz-upload-box.zz-has-file .zz-upload-box-text{ color:var(--zz-n-700); font-weight:500; }
.zz-upload-row{ display:flex; gap:10px; margin-top:14px; align-items:center; }
.zz-upload-desc-input{ flex:1; }
.zz-upload-submit-btn{ border-radius:999px !important; font-weight:600; white-space:nowrap; padding:8px 20px; }
.zz-upload-desc-cell{ font-size:13px; color:var(--zz-n-700); max-width:260px; }
@media (max-width:600px){ .zz-upload-row{ flex-direction:column; align-items:stretch; } }

/* Menu del portal atenuado hasta verificar el correo (2026-10-14, a pedido del cliente) */
.zz-nav-item.zz-nav-locked > a { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ---------- Portal "Mi cartera" del vendedor (2026-10-14) ----------
   Mismos componentes que la portada del portal (.zz-card, .zz-status-tile,
   .zz-table, .zz-pill); esto solo agrega pestañas, filtros, caja del enlace
   para referir y la grilla de la pagina. */
.zz-cartera-hello{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.zz-ref-box{ display:flex; align-items:center; gap:10px; background:var(--zz-brand-tint); border:1px solid #cfe0fb; border-radius:999px; padding:6px 6px 6px 16px; max-width:100%; }
.zz-ref-label{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--zz-brand-dark); white-space:nowrap; }
.zz-ref-url{ font-size:12.5px; color:var(--zz-brand-dark); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.zz-ref-box .btn{ border-radius:999px; }
.zz-cartera-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--zz-border); margin:0 0 18px; overflow-x:auto; }
.zz-cartera-tabs a{ padding:10px 14px; font-weight:600; font-size:14px; color:#6b7280 !important; border-bottom:2px solid transparent; white-space:nowrap; text-decoration:none !important; }
.zz-cartera-tabs a.on{ color:var(--zz-brand-dark) !important; border-color:var(--zz-brand); }
.zz-cartera-filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 18px; }
.zz-cartera-filters .form-control{ width:auto; min-width:180px; height:38px; border-radius:12px; }
.zz-cartera-filters .btn{ border-radius:999px; height:38px; }
.zz-cartera .zz-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.zz-cartera .zz-chip{ height:38px; display:inline-flex; align-items:center; padding:0 14px; border-radius:999px; border:1px solid var(--zz-border); background:#fff; font-weight:600; font-size:12.5px; color:var(--zz-n-700) !important; text-decoration:none !important; }
.zz-cartera .zz-chip.on{ background:var(--zz-brand-tint); border-color:#cfe0fb; color:var(--zz-brand-dark) !important; }
.zz-cartera-check{ display:inline-flex; align-items:center; gap:6px; font-weight:500; margin:0; }
.zz-cartera-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px; }
.zz-cartera-kpis .zz-status-n{ font-size:22px; }
.zz-cartera-grid{ display:grid; grid-template-columns:2fr 1fr; gap:22px; align-items:start; }
.zz-cartera-grid-even{ grid-template-columns:1fr 1fr; }
.zz-cartera-grid > div{ min-width:0; }
.zz-cartera-line{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--zz-n-100); }
.zz-cartera-payout{ margin-top:16px; display:grid; gap:8px; }
.zz-cartera-payout form{ display:grid; gap:8px; }
.zz-cartera-payout .btn{ border-radius:999px; }
.zz-cartera-note{ background:#fbf1de; color:#96690f; border-radius:14px; padding:10px 14px; font-size:13px; }
.zz-cartera .zz-sub{ font-size:12px; color:#6b7280; }
.zz-cartera .zz-amber{ color:#96690f; }
.zz-cartera .zz-red{ color:#c0392b; }
@media (max-width:991px){
    .zz-cartera-grid, .zz-cartera-grid-even{ grid-template-columns:1fr; }
    .zz-cartera-kpis{ grid-template-columns:repeat(2,1fr); }
}
/* Mi cartera: filtros compactos en una fila (2026-10-14, Jose: "ocupan mas espacio del que deberian") */
.zz-cartera-filters > *{ flex:0 0 auto; }
.zz-cartera-filters select.form-control, .zz-cartera-filters input.form-control{ width:220px !important; min-width:0; display:inline-block; }
.zz-cartera-filters .bootstrap-select > .btn.dropdown-toggle{ height:38px; border-radius:12px !important; border:1px solid var(--zz-border); background:#fff; font-size:13px; color:var(--zz-n-700); box-shadow:none; display:flex; align-items:center; }
.zz-cartera-filters .bootstrap-select .dropdown-menu{ border-radius:14px; border:1px solid var(--zz-border); box-shadow:0 10px 30px rgba(16,24,40,.12); padding:6px; }
.zz-cartera-filters .bootstrap-select .dropdown-menu li a{ border-radius:10px; padding:8px 12px; }
.zz-cartera-filters .bootstrap-select .dropdown-menu li.selected a{ background:var(--zz-brand-tint); color:var(--zz-brand-dark); }
.zz-tile-descuento{ background:#fbeaea; color:#d14343; } /* Mi cartera: descuentos y pagos (2026-10-14) */
.zz-cartera-kpis-5{ grid-template-columns:repeat(5,1fr); } @media (max-width:991px){ .zz-cartera-kpis-5{ grid-template-columns:repeat(2,1fr); } } /* Estado de cuenta: pagos recibidos y descuentos separados (2026-10-14) */
/* Portal: "Cerrar sesion" del menu del avatar en rojo (2026-10-14, a pedido de Jose) */
body.customers .customers-nav-item-logout > a{ color:#d14343 !important; font-weight:600; }
body.customers .customers-nav-item-logout > a:hover, body.customers .customers-nav-item-logout > a:focus{ background:#fbeaea !important; color:#b93636 !important; }
/* Mi cartera - filtros del Estado de cuenta (2026-10-14) */
.zz-cuenta-range{ display:inline-flex; gap:8px; }
.zz-cartera-filters .zz-cuenta-range input.form-control{ width:150px !important; }
.zz-cartera-filters input.zz-cuenta-factura{ width:140px !important; }
.zz-cuenta-clear{ font-size:13px; font-weight:600; color:var(--zz-brand) !important; }
/* Mi cartera - botones de descarga PDF/Excel (2026-10-14) */
.zz-dl-group{ display:flex; gap:8px; flex-wrap:wrap; }
.zz-dl-btn{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:999px; background:#fff; border:1px solid var(--zz-border); box-shadow:var(--zz-shadow); font-size:13px; font-weight:600; color:var(--zz-n-700) !important; text-decoration:none !important; transition:background .15s, border-color .15s; }
.zz-dl-btn i{ font-size:15px; }
.zz-dl-pdf i{ color:#d14343; }
.zz-dl-xls i{ color:#1e8e5a; }
.zz-dl-pdf:hover{ background:#fbeaea; border-color:#f3c9c9; }
.zz-dl-xls:hover{ background:#e7f6ee; border-color:#c3e7d2; }

/* Ficha del cliente (admin/clients/client): encabezado en una franja y contenido a todo el ancho (2026-10-14) */
.customer_profile .zz-client-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.customer_profile .zz-client-head > h4{ margin:0 !important; }
.customer_profile .zz-client-subnav{ display:flex; align-items:center; }
.customer_profile .zz-client-subnav > *{ margin:0 !important; }
.customer_profile .zz-client-subnav .zz-subnav-menu.dropdown-menu{ right:0; left:auto; }
.customer_profile .customer-profile-group-heading{ display:none; } /* el menu de la franja ya indica la seccion; con el layout nuevo se montaba sobre el nombre */

/* Ficha de cliente > Perfil > Detalles del cliente (2026-10-14, Jose: "demasiado
   ancho sin usar"): la columna unica (col-md-8) pasa a grilla de 3 columnas en
   escritorio, 2 en tablet, 1 en movil. Todos los campos vienen envueltos en
   .form-group (incluidos los que agregan hooks), asi que fluyen solos. */
.customer_profile #contact_info > .row > .col-md-8,
.customer_profile #contact_info > .row > .col-md-12:not(#client-show-primary-contact-wrapper){
    width:100%; float:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:24px; align-items:start;
}
.customer_profile #contact_info > .row > div:not(#client-show-primary-contact-wrapper) > .row{ display:contents; }
.customer_profile #contact_info > .row > div:not(#client-show-primary-contact-wrapper) > .row > [class*="col-"]{ width:auto; float:none; padding:0; }
.customer_profile #contact_info > .row > div:not(#client-show-primary-contact-wrapper) > hr{ grid-column:1 / -1; margin:6px 0 18px; }
.customer_profile #contact_info > .row > div:not(#client-show-primary-contact-wrapper) > #company_exists_info{ grid-column:1 / -1; }
.customer_profile #contact_info .zz-marketing-toggle .help-block,
.customer_profile #contact_info .zz-marketing-toggle p{ font-size:12px; }
.customer_profile #contact_info textarea#address{ min-height:40px; height:40px; resize:vertical; }
@media (max-width:1199px){
    .customer_profile #contact_info > .row > .col-md-8,
    .customer_profile #contact_info > .row > .col-md-12:not(#client-show-primary-contact-wrapper){ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:767px){
    .customer_profile #contact_info > .row > .col-md-8,
    .customer_profile #contact_info > .row > .col-md-12:not(#client-show-primary-contact-wrapper){ grid-template-columns:1fr; }
}

/* Ficha de cliente > Casilleros: tarjetas por destinatario (2026-10-14) */
.zz-locker-table-hidden{ display:none !important; }
.zz-locker-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; margin-top:6px; }
.zz-locker-card{ background:#fff; border:1px solid var(--zz-border); border-radius:18px; box-shadow:var(--zz-shadow); padding:18px; display:flex; flex-direction:column; gap:10px; }
.zz-locker-card.is-inactive{ opacity:.6; }
.zz-locker-top{ display:flex; align-items:center; gap:12px; }
.zz-locker-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 40px; }
.zz-locker-who{ flex:1; min-width:0; }
.zz-locker-name{ font-weight:700; font-size:14.5px; color:#14181f !important; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zz-locker-tags{ display:flex; gap:6px; margin-top:4px; flex-wrap:wrap; }
.zz-locker-switch{ flex:0 0 auto; }
.zz-locker-code-label{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6b7280; margin-top:4px; }
.zz-locker-code{ font-size:22px; font-weight:700; color:var(--zz-brand-dark); background:var(--zz-brand-tint); border-radius:12px; padding:8px 12px; letter-spacing:.02em; }
.zz-locker-info{ display:flex; flex-direction:column; gap:4px; font-size:13px; }
.zz-locker-info a{ color:var(--zz-n-700) !important; }
.zz-locker-info i{ width:16px; color:#9aa3af; }
.zz-locker-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:8px; border-top:1px solid var(--zz-n-100); }
.zz-locker-actions .btn{ border-radius:999px; }

/* Ficha de cliente > Facturas / Pagos / Presupuestos (2026-10-14) */
.customer_profile .tab-content a.btn.mbot15{ display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 16px; border-radius:999px !important; font-weight:600; font-size:13px; margin-bottom:14px; }
.customer_profile .tab-content a.btn[data-target^="#client_zip_"]{ background:#fff !important; color:var(--zz-n-700) !important; border:1px solid var(--zz-border) !important; }
.customer_profile .tab-content a.btn[data-target^="#client_zip_"]:hover{ background:var(--zz-n-50) !important; }
/* Totales de Perfex (pendientes / vencidas / pagadas) con los colores del sistema */
.customer_profile #invoices_total dl > div,
.customer_profile #estimates_total dl > div{ border:0 !important; border-radius:16px !important; box-shadow:var(--zz-shadow); }
.customer_profile #invoices_total dl > div:nth-child(1){ background:#fbf1de !important; }
.customer_profile #invoices_total dl > div:nth-child(1) dd{ color:#96690f; }
.customer_profile #invoices_total dl > div:nth-child(2){ background:#fbeaea !important; }
.customer_profile #invoices_total dl > div:nth-child(2) dd{ color:#d14343; }
.customer_profile #invoices_total dl > div:nth-child(3){ background:#e7f6ee !important; }
.customer_profile #invoices_total dl > div:nth-child(3) dd{ color:#1e8e5a; }
.customer_profile #estimates_total dl > div{ background:var(--zz-brand-tint) !important; }
/* Resumen de pagos del cliente */
.zz-client-kpis{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.zz-client-kpi{ background:var(--zz-brand-tint); border-radius:16px; box-shadow:var(--zz-shadow); padding:12px 16px; display:flex; flex-direction:column; }
.zz-client-kpi span{ font-family:var(--zz-font-mono); font-size:20px; font-weight:700; color:var(--zz-brand-dark); }
.zz-client-kpi small{ font-size:12px; color:#6b7280; }
.zz-client-kpi.zz-kpi-green{ background:#e7f6ee; }
.zz-client-kpi.zz-kpi-green span{ color:#1e8e5a; }
@media (max-width:767px){ .zz-client-kpis{ grid-template-columns:1fr; } }
/* FEED de la ficha: color del punto segun tipo (2026-10-14) */
.zz-feed-login .zz-feed-dot{ background:#9aa3af !important; }
.zz-feed-cuenta .zz-feed-dot{ background:var(--zz-brand) !important; }
.zz-feed-factura .zz-feed-dot{ background:#d9a034 !important; }
.zz-feed-pago .zz-feed-dot{ background:#1e8e5a !important; }
.zz-feed-vendedor .zz-feed-dot{ background:#5c3fb0 !important; }
.zz-feed-paquete .zz-feed-dot{ background:#2f6fd0 !important; }
/* montos de los totales de Facturas en el color de cada tarjeta */
.customer_profile #invoices_total dl > div:nth-child(1) dd *{ color:#96690f !important; }
.customer_profile #invoices_total dl > div:nth-child(2) dd *{ color:#d14343 !important; }
.customer_profile #invoices_total dl > div:nth-child(3) dd *{ color:#1e8e5a !important; }
.zz-dl-row.zz-scan-hit td{ background:var(--zz-brand-tint); color:#0059e6; }
.zz-dl-row.zz-scan-hit .zz-scan-guide{ color:#0046b3; font-weight:700; }
#wrapper .zz-dl-bulk-scan{ margin-top:14px; max-width:620px; }
#wrapper .form-control.rc-locked[readonly], #wrapper .bootstrap-select .btn.disabled{ background:var(--zz-n50, #f6f7f8) !important; color:#4b5563; cursor:not-allowed; }