/**
 * enterprise.css — Sistema de diseno del Portal Aliados Enterprise
 *
 * Base visual premium alineada al Brandbook de YaYa. Todo vive bajo el
 * prefijo --ent- (variables) y .ent- (clases) para aislarse por completo
 * de los estilos del panel de empleados. Estos estilos solo aplican dentro
 * del mundo enterprise (body[data-modo="enterprise"]).
 */

/* Tipografias oficiales del Brandbook */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

:root {
    /* Verdes principales (Brandbook) */
    --ent-verde-crecimiento: #022D2B;  /* Verde oscuro profundo, peso y sofisticacion */
    --ent-verde-yaya: #2AA048;         /* Verde vibrante, acento y acciones */
    --ent-verde-emprendedor: #D8F4D7;  /* Verde muy claro, fondos suaves */

    /* Secundarios (solo acentos puntuales; nunca fondos, segun Brandbook) */
    --ent-amarillo: #DBFE87;
    --ent-morado: #857DE6;
    --ent-azul: #6BD5D0;
    --ent-coral: #F07C63;

    /* Derivados utiles */
    --ent-verde-crecimiento-90: rgba(2, 45, 43, 0.90);
    --ent-verde-crecimiento-06: rgba(2, 45, 43, 0.06);
    --ent-verde-yaya-12: rgba(42, 160, 72, 0.12);
    --ent-verde-yaya-oscuro: #1E8038;

    /* Neutros */
    --ent-blanco: #ffffff;
    --ent-gris-50: #f7faf9;
    --ent-gris-100: #eef2f1;
    --ent-gris-200: #e2e8e6;
    --ent-gris-300: #cbd5d2;
    --ent-gris-500: #6b7a77;
    --ent-gris-700: #3a4a47;
    --ent-texto: #0f1f1d;
    --ent-texto-suave: #5a6b68;

    /* Tipografia */
    --ent-font-titulo: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --ent-font-texto: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Espaciado (modular 4px) */
    --ent-space-1: 4px;
    --ent-space-2: 8px;
    --ent-space-3: 12px;
    --ent-space-4: 16px;
    --ent-space-5: 20px;
    --ent-space-6: 24px;
    --ent-space-8: 32px;
    --ent-space-10: 40px;
    --ent-space-12: 48px;
    --ent-space-16: 64px;

    /* Radios */
    --ent-radius-sm: 8px;
    --ent-radius-md: 12px;
    --ent-radius-lg: 16px;
    --ent-radius-xl: 24px;
    --ent-radius-full: 999px;

    /* Sombras premium (suaves, difusas) */
    --ent-shadow-sm: 0 1px 3px rgba(2, 45, 43, 0.06);
    --ent-shadow-md: 0 4px 16px rgba(2, 45, 43, 0.08);
    --ent-shadow-lg: 0 12px 32px rgba(2, 45, 43, 0.10);
    --ent-shadow-xl: 0 24px 48px rgba(2, 45, 43, 0.14);

    /* Transiciones */
    --ent-trans-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --ent-trans-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --ent-trans-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset acotado al mundo enterprise */
body[data-modo="enterprise"] .ent-root *,
.ent-root * {
    margin: 0;
    box-sizing: border-box;
}

/* Contenedor raiz del portal enterprise */
.ent-root {
    font-family: var(--ent-font-texto);
    color: var(--ent-texto);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ent-root h1,
.ent-root h2,
.ent-root h3,
.ent-root h4 {
    font-family: var(--ent-font-titulo);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ent-verde-crecimiento);
}

/* Utilidades tipograficas */
.ent-titulo-xl { font-size: 32px; font-weight: 700; }
.ent-titulo-lg { font-size: 24px; font-weight: 600; }
.ent-titulo-md { font-size: 19px; font-weight: 600; }
.ent-texto-suave { color: var(--ent-texto-suave); }
.ent-texto-sm { font-size: 13px; }

/* Marca YaYa: siempre "YaYa" (regla del Brandbook) */
.ent-marca { font-family: var(--ent-font-titulo); font-weight: 700; }

/* ============================================================
   LOGIN ENTERPRISE — Camino 2: panel verde + aliado nitido
   ============================================================ */

.ent-login {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    grid-template-columns: 52% 48%;
    background: var(--ent-blanco);
    font-family: var(--ent-font-texto);
    animation: ent-fade-in var(--ent-trans-slow) ease;
}

@keyframes ent-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ent-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Panel izquierdo: verde de marca + aliado ---------- */
.ent-login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 56px 60px 56px 32px;
    overflow: hidden;
    background: var(--ent-verde-crecimiento);
    color: var(--ent-blanco);
}

/* Resplandor sutil de marca */
.ent-login-brand::after {
    content: '';
    position: absolute;
    right: -160px;
    top: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(42,160,72,0.20) 0%, transparent 66%);
    z-index: 1;
    pointer-events: none;
}

/* Aliado: PNG a tamano natural, nitido, anclado abajo-derecha. Sin cover. */
.ent-login-brand-foto {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 78%;
    width: auto;
    z-index: 2;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    filter: drop-shadow(0 8px 30px rgba(0,0,0,0.28));
}

.ent-login-brand-top {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ent-login-brand-top img {
    height: 56px;
    width: auto;
    filter: brightness(0) invert(1);
}

.ent-login-brand-top span {
    font-family: var(--ent-font-titulo);
    font-weight: 700;
    font-size: 40px;
    letter-spacing: -0.02em;
    color: var(--ent-blanco);
}

.ent-login-brand-center {
    position: relative;
    z-index: 3;
    max-width: 380px;
}

.ent-login-brand-accent {
    width: 46px;
    height: 4px;
    border-radius: var(--ent-radius-full);
    background: var(--ent-verde-yaya);
    margin-bottom: 24px;
}

.ent-login-brand-center h1 {
    font-family: var(--ent-font-titulo);
    color: var(--ent-blanco);
    font-size: 42px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 18px;
}

.ent-login-brand-center p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.72);
    font-weight: 400;
    max-width: 340px;
}

.ent-login-brand-foot {
    position: relative;
    z-index: 3;
    font-size: 13px;
    letter-spacing: 0.01em;
    color: rgba(255,255,255,0.45);
}

/* ---------- Panel derecho: formulario ---------- */
.ent-login-form-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 56px;
}

.ent-login-form {
    width: 100%;
    max-width: 350px;
    animation: ent-rise var(--ent-trans-slow) ease;
}

.ent-login-form-title {
    font-family: var(--ent-font-titulo);
    font-size: 28px;
    font-weight: 600;
    color: var(--ent-verde-crecimiento);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.ent-login-form-sub {
    font-size: 15px;
    color: var(--ent-texto-suave);
    line-height: 1.5;
    margin-bottom: 36px;
}

.ent-field { margin-bottom: 20px; }

.ent-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ent-texto);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.ent-input-wrap { position: relative; }

.ent-field input {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    font-family: var(--ent-font-texto);
    font-size: 15px;
    color: var(--ent-texto);
    background: transparent;
    border: 1.5px solid var(--ent-gris-300);
    border-radius: var(--ent-radius-md);
    outline: none;
    transition: border-color var(--ent-trans-fast), background var(--ent-trans-fast), box-shadow var(--ent-trans-fast);
}

.ent-field input::placeholder { color: var(--ent-gris-500); }

.ent-field input:focus {
    border-color: var(--ent-verde-yaya);
    background: rgba(255,255,255,0.35);
    box-shadow: 0 0 0 4px var(--ent-verde-yaya-12);
}

.ent-toggle-pass {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ent-gris-500);
    font-size: 16px;
    padding: 6px;
    line-height: 1;
    transition: color var(--ent-trans-fast);
}

.ent-toggle-pass:hover { color: var(--ent-verde-yaya); }

.ent-btn-primary {
    width: 100%;
    height: 52px;
    margin-top: 28px;
    font-family: var(--ent-font-titulo);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ent-blanco);
    background: var(--ent-verde-yaya);
    border: none;
    border-radius: var(--ent-radius-md);
    cursor: pointer;
    transition: background var(--ent-trans-fast), transform var(--ent-trans-fast), box-shadow var(--ent-trans-fast);
    box-shadow: 0 4px 14px rgba(42,160,72,0.25);
}

.ent-btn-primary:hover {
    background: var(--ent-verde-yaya-oscuro);
    box-shadow: 0 6px 20px rgba(42,160,72,0.32);
}

.ent-btn-primary:active { transform: scale(0.99); }

.ent-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

.ent-login-error {
    display: none;
    font-size: 13px;
    color: var(--ent-coral);
    margin-top: 14px;
    text-align: center;
    line-height: 1.5;
}

.ent-login-error.visible { display: block; }

/* Marca de agua: chasquido de tres colores, esquina inferior derecha */
.ent-login-form-wrap {
    position: relative;
    overflow: hidden;
}

.ent-login-watermark {
    position: absolute;
    right: -220px;
    bottom: -240px;
    width: 900px;
    height: 900px;
    transform: rotate(-45deg);
    opacity: 0.28;
    z-index: 0;
    pointer-events: none;
}

.ent-login-form {
    position: relative;
    z-index: 1;
}

/* ---------- Responsivo ---------- */
@media (max-width: 920px) {
    .ent-login { grid-template-columns: 1fr; }
    .ent-login-brand { display: none; }
    .ent-login-form-wrap { padding: 32px 24px; }
}

/* ============================================================
   VISTA CAJERO (rol PUNTO) — ventas en tiempo real
   Reutiliza el sistema de diseno --ent- del login. Aislado en .ent-cajero.
   ============================================================ */

.ent-cajero {
    min-height: 100vh;
    background: var(--ent-gris-50);
    font-family: var(--ent-font-texto);
    color: var(--ent-texto);
    padding: var(--ent-space-6);
    max-width: 720px;
    margin: 0 auto;
}

.ent-cajero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ent-space-4);
    padding-bottom: var(--ent-space-5);
    border-bottom: 1px solid var(--ent-gris-200);
}

.ent-cajero-marca {
    display: flex;
    align-items: center;
    gap: var(--ent-space-3);
}

.ent-cajero-logo {
    height: 40px;
    width: auto;
}

.ent-cajero-identidad {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ent-cajero-punto {
    font-family: var(--ent-font-titulo);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    color: var(--ent-verde-crecimiento);
}

.ent-cajero-subtitulo {
    font-size: 13px;
    color: var(--ent-texto-suave);
}

.ent-cajero-salir {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto-suave);
    background: transparent;
    border: 1px solid var(--ent-gris-300);
    padding: var(--ent-space-2) var(--ent-space-4);
    border-radius: var(--ent-radius-md);
    cursor: pointer;
    transition: border-color var(--ent-trans-fast), color var(--ent-trans-fast);
}

.ent-cajero-salir:hover {
    border-color: var(--ent-coral);
    color: var(--ent-coral);
}

.ent-cajero-controles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ent-space-4);
    margin: var(--ent-space-5) 0;
    flex-wrap: wrap;
}

.ent-cajero-periodos {
    display: inline-flex;
    background: var(--ent-gris-100);
    border-radius: var(--ent-radius-full);
    padding: var(--ent-space-1);
    gap: var(--ent-space-1);
}

.ent-periodo {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto-suave);
    background: transparent;
    border: none;
    padding: var(--ent-space-2) var(--ent-space-4);
    border-radius: var(--ent-radius-full);
    cursor: pointer;
    transition: background var(--ent-trans-fast), color var(--ent-trans-fast);
}

.ent-periodo.activo {
    background: var(--ent-blanco);
    color: var(--ent-verde-crecimiento);
    font-weight: 600;
    box-shadow: var(--ent-shadow-sm);
}

.ent-cajero-actualizar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 16px;
    color: var(--ent-verde-crecimiento);
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--ent-shadow-sm);
    transition: background var(--ent-trans-fast), color var(--ent-trans-fast), transform var(--ent-trans-fast);
}

.ent-cajero-actualizar:hover {
    background: var(--ent-verde-yaya);
    color: var(--ent-blanco);
    transform: rotate(90deg);
}

.ent-cajero-resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ent-space-4);
    margin-top: var(--ent-space-6);
    margin-bottom: var(--ent-space-6);
}

.ent-resumen-card {
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-lg);
    padding: var(--ent-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ent-space-2);
    box-shadow: var(--ent-shadow-sm);
}

.ent-resumen-label {
    font-size: 13px;
    color: var(--ent-texto-suave);
}

.ent-resumen-valor {
    font-family: var(--ent-font-titulo);
    font-weight: 700;
    font-size: 24px;
    color: var(--ent-verde-crecimiento);
}

.ent-cajero-lista {
    display: flex;
    flex-direction: column;
    gap: var(--ent-space-2);
}

.ent-venta {
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-md);
    padding: var(--ent-space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ent-space-4);
    transition: box-shadow var(--ent-trans-fast);
}

.ent-venta:hover {
    box-shadow: var(--ent-shadow-md);
}

.ent-venta-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ent-venta-pagador {
    font-weight: 600;
    font-size: 15px;
    color: var(--ent-texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ent-venta-hora {
    font-size: 13px;
    color: var(--ent-texto-suave);
}

.ent-venta-fecha {
    font-family: var(--ent-font-texto);
    font-size: 11px;
    color: var(--ent-gris-500);
    line-height: 1.3;
}

.ent-pag-input {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    font-weight: 600;
    color: var(--ent-texto);
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-sm);
    padding: 3px 6px;
    margin: 0 5px;
    width: 52px;
    text-align: center;
    transition: border-color var(--ent-trans-fast);
}

.ent-pag-input:focus {
    outline: none;
    border-color: var(--ent-verde-yaya);
    box-shadow: 0 0 0 3px var(--ent-verde-yaya-12);
}

.ent-venta-derecha {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.ent-venta-monto {
    font-family: var(--ent-font-titulo);
    font-weight: 700;
    font-size: 16px;
    color: var(--ent-verde-yaya);
}

.ent-venta-estado {
    font-size: 12px;
    color: var(--ent-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ent-cajero-vacio {
    text-align: center;
    color: var(--ent-texto-suave);
    padding: var(--ent-space-10) var(--ent-space-4);
    font-size: 15px;
}

@media (max-width: 520px) {
    .ent-cajero-resumen {
        grid-template-columns: 1fr;
    }
    .ent-cajero-controles {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================
   AVISO DE VENTA NUEVA (banner flotante) + resaltado de fila
   Confirmacion anti-fraude en tiempo real para el cajero.
   ============================================================ */

.ent-aviso-venta {
    position: fixed;
    top: var(--ent-space-5);
    left: 50%;
    transform: translateX(-50%) translateY(-140%);
    z-index: 9999;
    background: var(--ent-verde-crecimiento);
    color: var(--ent-blanco);
    border-radius: var(--ent-radius-lg);
    box-shadow: var(--ent-shadow-xl);
    padding: var(--ent-space-4) var(--ent-space-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: transform var(--ent-trans-base), opacity var(--ent-trans-base);
    pointer-events: none;
    min-width: 260px;
}

.ent-aviso-venta.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.ent-aviso-titulo {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
}

.ent-aviso-monto {
    font-family: var(--ent-font-titulo);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.1;
}

.ent-aviso-pagador {
    font-family: var(--ent-font-texto);
    font-size: 15px;
    opacity: 0.9;
}

/* Resaltado de la fila recien entrada en la lista */
.ent-venta-nueva {
    animation: ent-destello 2.5s ease-out;
    border-color: var(--ent-verde-yaya);
}

@keyframes ent-destello {
    0% { background: var(--ent-verde-yaya-12); box-shadow: 0 0 0 3px var(--ent-verde-yaya-12); }
    100% { background: var(--ent-blanco); box-shadow: none; }
}

/* ============================================================
   PORTAL CON SIDEBAR (3 secciones) — reemplaza el layout simple
   ============================================================ */

.ent-portal {
    min-height: 100vh;
    background: var(--ent-gris-50);
    font-family: var(--ent-font-texto);
    color: var(--ent-texto);
    display: flex;
    flex-direction: column;
}

.ent-portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ent-space-4);
    padding: var(--ent-space-5) var(--ent-space-6);
    background: var(--ent-blanco);
    border-bottom: 1px solid var(--ent-gris-200);
}

.ent-portal-cuerpo {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Sidebar de navegacion */
.ent-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--ent-verde-crecimiento);
    padding: var(--ent-space-5) var(--ent-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--ent-space-1);
}

.ent-nav-item {
    display: flex;
    align-items: center;
    gap: var(--ent-space-2);
    width: 100%;
    text-align: left;
    font-family: var(--ent-font-texto);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    border: none;
    padding: var(--ent-space-3) var(--ent-space-4);
    border-radius: var(--ent-radius-md);
    cursor: pointer;
    transition: background var(--ent-trans-fast), color var(--ent-trans-fast);
}

.ent-nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ent-blanco);
}

.ent-nav-item.activo {
    background: rgba(255, 255, 255, 0.15);
    color: var(--ent-blanco);
    font-weight: 600;
}

.ent-nav-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ent-verde-yaya);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(42, 160, 72, 0.6);
    animation: ent-latido 1.8s ease-out infinite;
}

@keyframes ent-latido {
    0% { box-shadow: 0 0 0 0 rgba(42, 160, 72, 0.6); }
    70% { box-shadow: 0 0 0 6px rgba(42, 160, 72, 0); }
    100% { box-shadow: 0 0 0 0 rgba(42, 160, 72, 0); }
}

/* Area de contenido */
.ent-contenido {
    flex: 1;
    min-width: 0;
    padding: var(--ent-space-6);
    overflow-y: auto;
}

.ent-seccion-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ent-space-4);
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.ent-seccion-titulo {
    font-family: var(--ent-font-titulo);
    font-weight: 700;
    font-size: 22px;
    color: var(--ent-verde-crecimiento);
    margin: 0;
}

/* Metricas: tarjetas grandes */
.ent-metricas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ent-space-5);
}

.ent-metrica-card {
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-lg);
    padding: var(--ent-space-8) var(--ent-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ent-space-3);
    box-shadow: var(--ent-shadow-sm);
    align-items: flex-start;
}

.ent-metrica-label {
    font-size: 14px;
    color: var(--ent-texto-suave);
}

.ent-metrica-valor {
    font-family: var(--ent-font-titulo);
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    color: var(--ent-verde-crecimiento);
}

/* Responsive: sidebar arriba en pantallas estrechas */
@media (max-width: 640px) {
    .ent-portal-cuerpo {
        flex-direction: column;
    }
    .ent-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: var(--ent-space-2) var(--ent-space-3);
    }
    .ent-nav-item {
        white-space: nowrap;
    }
    .ent-metricas-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   SIDEBAR PLEGABLE — boton hamburguesa y estado colapsado
   ============================================================ */

.ent-menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 0 9px;
    background: transparent;
    border: 1px solid var(--ent-gris-300);
    border-radius: var(--ent-radius-md);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--ent-trans-fast);
}

.ent-menu-toggle:hover {
    border-color: var(--ent-verde-yaya);
}

.ent-menu-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--ent-verde-crecimiento);
    border-radius: 2px;
}

/* Estado colapsado: el sidebar se contrae, solo se ven puntos/iconos */
.ent-sidebar-colapsado .ent-sidebar {
    width: 64px;
    padding-left: var(--ent-space-2);
    padding-right: var(--ent-space-2);
}

.ent-sidebar-colapsado .ent-nav-texto {
    display: none;
}

.ent-sidebar-colapsado .ent-nav-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* En movil, colapsado esconde el sidebar por completo */
@media (max-width: 640px) {
    .ent-sidebar-colapsado .ent-sidebar {
        display: none;
    }
}

/* ============================================================
   LAYOUT PORTAL v2: sidebar de altura completa (marca + nav +
   cerrar sesion dentro del sidebar; sin header horizontal).
   Estas reglas se agregan al final para prevalecer por cascada.
   ============================================================ */

.ent-portal {
    min-height: 100vh;
    background: var(--ent-gris-50);
    font-family: var(--ent-font-texto);
    color: var(--ent-texto);
    display: flex;
    flex-direction: row;
}

/* Sidebar de altura completa, en columna: top / nav / footer */
.ent-portal .ent-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--ent-verde-crecimiento);
    display: flex;
    flex-direction: column;
    padding: var(--ent-space-5) var(--ent-space-3);
    gap: var(--ent-space-5);
    min-height: 100vh;
}

.ent-sidebar-top {
    display: flex;
    flex-direction: column;
    gap: var(--ent-space-4);
}

.ent-menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 0 9px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: var(--ent-radius-md);
    cursor: pointer;
    transition: background var(--ent-trans-fast);
}

.ent-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ent-menu-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--ent-blanco);
    border-radius: 2px;
}

/* Marca dentro del sidebar (sobre fondo verde: texto claro) */
.ent-portal .ent-cajero-marca {
    display: flex;
    align-items: center;
    gap: var(--ent-space-3);
}

.ent-portal .ent-cajero-logo {
    height: 36px;
    width: auto;
}

.ent-portal .ent-cajero-identidad {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ent-portal .ent-cajero-punto {
    font-family: var(--ent-font-titulo);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.15;
    color: var(--ent-blanco);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ent-portal .ent-cajero-subtitulo {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

/* Navegacion (ocupa el espacio central) */
.ent-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--ent-space-1);
    flex: 1;
}

.ent-portal .ent-nav-item {
    display: flex;
    align-items: center;
    gap: var(--ent-space-3);
    width: 100%;
    text-align: left;
    font-family: var(--ent-font-texto);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    border: none;
    padding: var(--ent-space-3) var(--ent-space-4);
    border-radius: var(--ent-radius-md);
    cursor: pointer;
    transition: background var(--ent-trans-fast), color var(--ent-trans-fast);
}

.ent-portal .ent-nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ent-blanco);
}

.ent-portal .ent-nav-item.activo {
    background: rgba(255, 255, 255, 0.15);
    color: var(--ent-blanco);
    font-weight: 600;
}

.ent-nav-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    flex-shrink: 0;
    font-size: 15px;
}

/* El punto latiente de tiempo real, junto al icono */
.ent-portal .ent-nav-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ent-verde-yaya);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(42, 160, 72, 0.6);
    animation: ent-latido 1.8s ease-out infinite;
}

/* Footer del sidebar: cerrar sesion abajo */
.ent-sidebar-footer {
    margin-top: auto;
}

.ent-portal .ent-cajero-salir {
    display: flex;
    align-items: center;
    gap: var(--ent-space-3);
    width: 100%;
    text-align: left;
    font-family: var(--ent-font-texto);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    border: none;
    padding: var(--ent-space-3) var(--ent-space-4);
    border-radius: var(--ent-radius-md);
    cursor: pointer;
    transition: background var(--ent-trans-fast), color var(--ent-trans-fast);
}

.ent-portal .ent-cajero-salir:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--ent-blanco);
}

/* Contenido a la derecha */
.ent-portal .ent-contenido {
    flex: 1;
    min-width: 0;
    padding: var(--ent-space-8) var(--ent-space-8);
    overflow-y: auto;
    min-height: 100vh;
}

/* Estado colapsado: sidebar estrecho, solo iconos/punto */
.ent-sidebar-colapsado .ent-sidebar {
    width: 68px;
}

.ent-sidebar-colapsado .ent-nav-texto,
.ent-sidebar-colapsado .ent-cajero-identidad {
    display: none;
}

.ent-sidebar-colapsado .ent-nav-item,
.ent-sidebar-colapsado .ent-cajero-salir {
    justify-content: center;
    gap: 0;
}

.ent-sidebar-colapsado .ent-cajero-marca {
    justify-content: center;
}

.ent-sidebar-colapsado .ent-cajero-logo {
    height: 30px;
}

/* Responsive: en movil el sidebar pasa a fila horizontal arriba */
@media (max-width: 640px) {
    .ent-portal {
        flex-direction: column;
    }
    .ent-portal .ent-sidebar {
        width: 100%;
        min-height: auto;
        flex-direction: column;
    }
    .ent-portal .ent-contenido {
        min-height: auto;
    }
}

/* ============================================================
   LAYOUT PORTAL v3 (Opcion 2): sidebar full-height + topbar
   sobre el contenido con "Comercio - Punto". Prevalece por cascada.
   ============================================================ */

.ent-portal {
    height: 100vh;
    overflow: hidden;
    background: var(--ent-gris-50);
    font-family: var(--ent-font-texto);
    color: var(--ent-texto);
    display: flex;
    flex-direction: row;
}

/* Sidebar full-height */
.ent-portal .ent-sidebar {
    width: 200px;
    flex-shrink: 0;
    background: var(--ent-verde-crecimiento);
    display: flex;
    flex-direction: column;
    padding: var(--ent-space-5) var(--ent-space-3);
    gap: var(--ent-space-6);
    height: 100vh;
    transition: width var(--ent-trans-base);
}

.ent-sidebar-top {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--ent-space-2) 0 var(--ent-space-4);
}

.ent-sidebar-logo {
    height: 44px;
    width: auto;
    /* La manito en su color original, como en el login */
}

.ent-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--ent-space-2);
    flex: 1;
}

/* Item: icono ENCIMA del texto, centrado */
.ent-portal .ent-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ent-space-2);
    width: 100%;
    font-family: var(--ent-font-texto);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    border: none;
    padding: var(--ent-space-4) var(--ent-space-2);
    border-radius: var(--ent-radius-md);
    cursor: pointer;
    transition: background var(--ent-trans-fast), color var(--ent-trans-fast);
}

.ent-portal .ent-nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ent-blanco);
}

.ent-portal .ent-nav-item.activo {
    background: rgba(255, 255, 255, 0.15);
    color: var(--ent-blanco);
    font-weight: 600;
}

.ent-portal .ent-nav-icono {
    font-size: 20px;
    line-height: 1;
}

/* Footer del sidebar */
.ent-sidebar-footer {
    margin-top: auto;
}

.ent-portal .ent-cajero-salir {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ent-space-2);
    width: 100%;
    font-family: var(--ent-font-texto);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    border: none;
    padding: var(--ent-space-4) var(--ent-space-2);
    border-radius: var(--ent-radius-md);
    cursor: pointer;
    transition: background var(--ent-trans-fast), color var(--ent-trans-fast);
}

.ent-portal .ent-cajero-salir:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--ent-blanco);
}

.ent-portal .ent-cajero-salir .ent-nav-icono {
    font-size: 18px;
}

/* Columna derecha: topbar + contenido */
.ent-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
}

.ent-topbar {
    display: flex;
    align-items: center;
    gap: var(--ent-space-4);
    padding: var(--ent-space-5, 20px) var(--ent-space-6);
    background: var(--ent-blanco);
    border-bottom: 1px solid var(--ent-gris-200);
}

.ent-topbar-titulo { flex-shrink: 0; }

.ent-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--ent-gris-300);
    border-radius: var(--ent-radius-md);
    color: var(--ent-verde-crecimiento);
    font-size: 17px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--ent-trans-fast), background var(--ent-trans-fast);
}

.ent-menu-toggle:hover {
    border-color: var(--ent-verde-yaya);
    background: var(--ent-gris-50);
}

.ent-topbar-titulo {
    display: flex;
    align-items: baseline;
    gap: var(--ent-space-2);
    min-width: 0;
    flex-shrink: 1;
}

.ent-topbar-comercio {
    font-family: var(--ent-font-titulo);
    font-weight: 700;
    font-size: 19px;
    color: var(--ent-verde-crecimiento);
    white-space: nowrap;
}

.ent-topbar-sep {
    color: var(--ent-gris-300);
    font-size: 18px;
}

.ent-topbar-punto {
    font-family: var(--ent-font-texto);
    font-weight: 500;
    font-size: 18px;
    color: var(--ent-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ent-main .ent-contenido {
    flex: 1;
    min-width: 0;
    padding: var(--ent-space-6) var(--ent-space-8);
    overflow-y: auto;
}

/* Estado colapsado: solo iconos, sin texto */
.ent-sidebar-colapsado .ent-sidebar {
    width: 72px;
}

.ent-sidebar-colapsado .ent-nav-texto {
    display: none;
}

.ent-sidebar-colapsado .ent-sidebar-logo {
    height: 32px;
}

/* Responsive: sidebar horizontal arriba en movil */
@media (max-width: 640px) {
    .ent-portal {
        flex-direction: column;
    }
    .ent-portal .ent-sidebar {
        width: 100%;
        min-height: auto;
        flex-direction: row;
        align-items: center;
        gap: var(--ent-space-3);
    }
    .ent-sidebar-top { padding: 0; }
    .ent-sidebar-nav {
        flex-direction: row;
        flex: 1;
    }
    .ent-sidebar-footer { margin-top: 0; }
    .ent-topbar-comercio, .ent-topbar-punto { font-size: 16px; }
}

/* ============================================================
   LOGO DEL SIDEBAR (manito + YaYa, en blanco sobre verde) e
   iconos de seccion en blanco. Prevalece por cascada.
   ============================================================ */

.ent-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ent-space-2);
    padding: var(--ent-space-2) 0 var(--ent-space-5);
}

.ent-sidebar-logo-img {
    height: 32px;
    width: auto;
    /* Mismo truco del login: vuelve la manito verde en blanca */
    filter: brightness(0) invert(1);
}

.ent-sidebar-logo-texto {
    font-family: var(--ent-font-titulo);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.02em;
    color: var(--ent-blanco);
}

/* Cuando el sidebar esta colapsado, ocultar la palabra YaYa */
.ent-sidebar-colapsado .ent-sidebar-logo-texto {
    display: none;
}

/* ============================================================
   TIEMPO REAL v2: venta destacada + lista compacta + comprobante.
   ============================================================ */

/* Venta destacada */
.ent-tr-destacada {
    margin-bottom: var(--ent-space-6);
}

.ent-destacada-card {
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-left: 4px solid var(--ent-verde-yaya);
    border-radius: var(--ent-radius-lg);
    padding: var(--ent-space-6);
    box-shadow: var(--ent-shadow-sm);
    transition: box-shadow var(--ent-trans-base);
}

.ent-destacada-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--ent-space-3);
}

.ent-destacada-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--ent-verde-yaya);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ent-destacada-hora {
    font-size: 13px;
    color: var(--ent-gris-500);
}

.ent-destacada-monto {
    font-family: var(--ent-font-titulo);
    font-weight: 700;
    font-size: 40px;
    color: var(--ent-verde-crecimiento);
    line-height: 1.1;
}

.ent-destacada-pagador {
    font-size: 16px;
    color: var(--ent-texto);
    margin-top: var(--ent-space-2);
}

.ent-destacada-auth {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--ent-space-4);
    padding-top: var(--ent-space-4);
    border-top: 1px dashed var(--ent-gris-200);
}

.ent-auth-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ent-gris-500);
}

.ent-auth-numero {
    font-family: var(--ent-font-titulo);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ent-texto);
}

.ent-ver-comprobante {
    margin-top: var(--ent-space-4);
    width: 100%;
    padding: var(--ent-space-3);
    background: var(--ent-verde-yaya);
    color: var(--ent-blanco);
    border: none;
    border-radius: var(--ent-radius-md);
    font-family: var(--ent-font-texto);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ent-trans-fast);
}

.ent-ver-comprobante:hover {
    background: var(--ent-verde-crecimiento);
}

/* Titulo de la lista */
.ent-tr-lista-titulo {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ent-gris-500);
    margin-bottom: var(--ent-space-3);
}

/* Lista compacta: fila con autorizacion, clicable */
.ent-cajero-lista .ent-venta {
    cursor: pointer;
}

.ent-cajero-lista .ent-venta:hover {
    background: var(--ent-gris-50);
}

.ent-venta-auth {
    font-size: 12px;
    color: var(--ent-gris-500);
    letter-spacing: 0.04em;
}

/* Modal comprobante (recibo bancario) */
.ent-comp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 45, 43, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--ent-space-4);
}

.ent-comp-recibo {
    background: var(--ent-blanco);
    border-radius: var(--ent-radius-lg);
    padding: var(--ent-space-6);
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.ent-comp-cargando {
    background: var(--ent-blanco);
    border-radius: var(--ent-radius-lg);
    padding: var(--ent-space-8);
    color: var(--ent-gris-500);
    font-size: 14px;
}

.ent-comp-cab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--ent-space-4);
}

.ent-comp-titulo {
    font-family: var(--ent-font-titulo);
    font-weight: 700;
    font-size: 18px;
    color: var(--ent-verde-crecimiento);
}

.ent-comp-estado {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 999px;
}

.ent-comp-estado-ok {
    background: var(--ent-verde-claro);
    color: var(--ent-verde-crecimiento);
}

.ent-comp-monto {
    font-family: var(--ent-font-titulo);
    font-weight: 700;
    font-size: 34px;
    color: var(--ent-verde-crecimiento);
    text-align: center;
    padding: var(--ent-space-4) 0;
}

.ent-comp-filas {
    display: flex;
    flex-direction: column;
    gap: var(--ent-space-3);
    margin: var(--ent-space-4) 0;
}

.ent-comp-fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--ent-space-4);
    font-size: 14px;
}

.ent-comp-fila span {
    color: var(--ent-gris-500);
    flex-shrink: 0;
}

.ent-comp-fila strong {
    color: var(--ent-texto);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.ent-comp-auth {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    padding: var(--ent-space-4);
    margin-top: var(--ent-space-2);
    background: var(--ent-gris-50);
    border-radius: var(--ent-radius-md);
}

.ent-comp-auth-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ent-gris-500);
}

.ent-comp-auth-numero {
    font-family: var(--ent-font-titulo);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ent-texto);
}

.ent-comp-cerrar {
    margin-top: var(--ent-space-5);
    width: 100%;
    padding: var(--ent-space-3);
    background: var(--ent-verde-crecimiento);
    color: var(--ent-blanco);
    border: none;
    border-radius: var(--ent-radius-md);
    font-family: var(--ent-font-texto);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--ent-trans-fast);
}

.ent-comp-cerrar:hover {
    opacity: 0.9;
}

/* ============================================================
   ICONOS DE SECCION (PNG) en blanco + marca de agua chasquido.
   ============================================================ */

/* Iconos de seccion: mismo truco del logo (blanco sobre verde) */
.ent-nav-img {
    height: 52px;
    width: auto;
    /* Los iconos ya son blancos con fondo transparente: sin filtro. */
    opacity: 0.9;
    transition: opacity var(--ent-trans-fast);
}

.ent-nav-item:hover .ent-nav-img,
.ent-nav-item.activo .ent-nav-img {
    opacity: 1;
}

/* Marca de agua chasquido: abajo-derecha del portal, en angulo, sutil */
.ent-main {
    position: relative;
}

.ent-main::after {
    content: "";
    position: fixed;
    right: -150px;
    bottom: -180px;
    width: 700px;
    height: 700px;
    background-image: url('../assets/enterprise/chasquido-marca-agua.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
    transform: rotate(-45deg);
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}

/* El contenido debe quedar por encima de la marca de agua */
.ent-main .ent-contenido {
    position: relative;
    z-index: 1;
}

/* ============================================================
   TOGGLE del sidebar (dentro del sidebar, flechas dobles).
   ============================================================ */

.ent-portal .ent-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 36px;
    height: 36px;
    margin: 0 0 var(--ent-space-2);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--ent-radius-md);
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--ent-trans-fast), color var(--ent-trans-fast);
}

.ent-portal .ent-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.16);
    color: var(--ent-blanco);
}

/* ============================================================
   ESPACIADO de la seccion (mayor especificidad para ganar al
   reset global "* { margin: 0 }" de design-system.css).
   ============================================================ */

.ent-main .ent-seccion-cab {
    padding-bottom: 40px;
}

.ent-main .ent-cajero-resumen {
    padding-bottom: 32px;
}

/* ============================================================
   Aire entre el campo de contrasena y el boton Entrar del login
   (selector especifico para ganar al reset ".ent-root * {margin:0}").
   ============================================================ */

.ent-login-form .ent-btn-primary {
    margin-top: 28px !important;
}

/* ============================================================
   PAGINACION de la lista de ventas (tiempo real).
   ============================================================ */

.ent-main .ent-tr-paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ent-space-4);
    padding-top: 24px;
}

.ent-pag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 14px;
    color: var(--ent-verde-crecimiento);
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-md);
    cursor: pointer;
    transition: background var(--ent-trans-fast), color var(--ent-trans-fast), border-color var(--ent-trans-fast);
}

.ent-pag-btn:hover:not(:disabled) {
    background: var(--ent-verde-yaya);
    color: var(--ent-blanco);
    border-color: var(--ent-verde-yaya);
}

.ent-pag-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ent-pag-info {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    font-weight: 500;
    color: var(--ent-texto);
    min-width: 160px;
    text-align: center;
}

/* ============================================================
   BUSCADOR del historial.
   ============================================================ */

.ent-main .ent-hist-buscador {
    position: relative;
    margin-bottom: 0;
    padding-bottom: 20px;
}

.ent-hist-buscador-icono {
    position: absolute;
    left: 16px;
    top: 15px;
    color: var(--ent-texto-suave);
    font-size: 14px;
    pointer-events: none;
}

.ent-hist-buscar {
    width: 100%;
    height: 46px;
    padding: 0 16px 0 42px;
    font-family: var(--ent-font-texto);
    font-size: 15px;
    color: var(--ent-texto);
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-md);
    box-shadow: var(--ent-shadow-sm);
    transition: border-color var(--ent-trans-fast), box-shadow var(--ent-trans-fast);
    box-sizing: border-box;
}

.ent-hist-buscar:focus {
    outline: none;
    border-color: var(--ent-verde-yaya);
    box-shadow: 0 0 0 3px rgba(42,160,72,0.12);
}

.ent-hist-buscar::placeholder {
    color: var(--ent-texto-suave);
}

/* ============================================================
   FOOTER del portal (al final del contenido, sobre fondo claro).
   ============================================================ */

.ent-main .ent-footer {
    padding: 18px 40px 22px;
    border-top: 1px solid var(--ent-gris-200);
    margin-top: auto;
}

.ent-footer-top {
    padding-bottom: 10px;
}

.ent-footer-marca {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ent-footer-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.ent-footer-yaya {
    font-family: var(--ent-font-titulo);
    font-weight: 700;
    font-size: 16px;
    color: var(--ent-verde-crecimiento);
    letter-spacing: -0.01em;
}

.ent-footer-div {
    width: 1px;
    height: 16px;
    background: var(--ent-gris-200);
}

.ent-footer-producto {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    font-weight: 500;
    color: var(--ent-texto-suave);
}

.ent-footer-ip {
    font-family: var(--ent-font-texto);
    font-size: 12px;
    line-height: 1.5;
    color: var(--ent-texto-suave);
    padding-bottom: 8px;
}

.ent-footer-ip strong {
    color: var(--ent-texto);
    font-weight: 600;
}

.ent-footer-copy {
    font-family: var(--ent-font-texto);
    font-size: 12px;
    color: var(--ent-texto-suave);
}

.ent-footer-copy strong {
    color: var(--ent-texto);
    font-weight: 600;
}

/* ============================================================
   VISTA ADMIN: resumen del enterprise y desglose por punto.
   Espaciados con padding (reset global anula margin).
   ============================================================ */

/* 4 metricas en fila (en vez de 3 del cajero) */
.ent-main .ent-resumen-admin {
    grid-template-columns: repeat(4, 1fr);
}

.ent-main .ent-adm-desglose-titulo {
    font-family: var(--ent-font-titulo);
    font-weight: 700;
    font-size: 17px;
    color: var(--ent-verde-crecimiento);
    padding-top: 8px;
    padding-bottom: 18px;
}

.ent-main .ent-adm-desglose {
    display: flex;
    flex-direction: column;
    gap: var(--ent-space-3);
}

.ent-adm-punto {
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-lg);
    box-shadow: var(--ent-shadow-sm);
    padding: 18px 20px;
    cursor: pointer;
    transition: border-color var(--ent-trans-fast), box-shadow var(--ent-trans-fast), transform var(--ent-trans-fast);
}

.ent-adm-punto:hover {
    border-color: var(--ent-verde-yaya);
    box-shadow: var(--ent-shadow-md);
    transform: translateY(-1px);
}

.ent-adm-punto-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ent-space-3);
    padding-bottom: 12px;
}

.ent-adm-punto-nombre {
    font-family: var(--ent-font-texto);
    font-size: 15px;
    font-weight: 600;
    color: var(--ent-texto);
}

.ent-adm-punto-total {
    font-family: var(--ent-font-titulo);
    font-size: 18px;
    font-weight: 700;
    color: var(--ent-verde-crecimiento);
}

.ent-adm-barra {
    width: 100%;
    height: 8px;
    background: var(--ent-gris-100);
    border-radius: 999px;
    overflow: hidden;
}

.ent-adm-barra-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ent-verde-yaya), var(--ent-verde-crecimiento));
    border-radius: 999px;
    transition: width var(--ent-trans-base);
}

.ent-adm-punto-meta {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    font-family: var(--ent-font-texto);
    font-size: 13px;
    color: var(--ent-texto-suave);
}

@media (max-width: 900px) {
    .ent-main .ent-resumen-admin {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   VISTA ADMIN: fichas de puntos de venta (seccion Puntos).
   Espaciados con padding (reset global anula margin).
   ============================================================ */

.ent-main .ent-puntos-lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ent-space-4);
}

.ent-punto-card {
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-lg);
    box-shadow: var(--ent-shadow-sm);
    padding: 20px 22px;
    cursor: pointer;
    transition: border-color var(--ent-trans-fast), box-shadow var(--ent-trans-fast), transform var(--ent-trans-fast);
}

.ent-punto-card:hover {
    border-color: var(--ent-verde-yaya);
    box-shadow: var(--ent-shadow-md);
    transform: translateY(-1px);
}

.ent-punto-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ent-space-3);
    padding-bottom: 10px;
}

.ent-punto-nombre {
    font-family: var(--ent-font-titulo);
    font-size: 16px;
    font-weight: 700;
    color: var(--ent-verde-crecimiento);
}

.ent-punto-estado {
    font-family: var(--ent-font-texto);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 4px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.ent-punto-estado.activo {
    color: var(--ent-verde-crecimiento);
    background: var(--ent-verde-claro);
}

.ent-punto-estado.inactivo {
    color: #9a3412;
    background: #ffedd5;
}

.ent-punto-dir {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto);
    padding-bottom: 4px;
}

.ent-punto-dir i, .ent-punto-ubi i {
    color: var(--ent-texto-suave);
    margin-right: 6px;
}

.ent-punto-ubi {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    color: var(--ent-texto-suave);
    padding-bottom: 14px;
}

.ent-punto-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ent-space-3);
    padding-top: 12px;
    border-top: 1px solid var(--ent-gris-100);
}

.ent-punto-qr {
    font-family: var(--ent-font-texto);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ent-punto-qr.ok { color: var(--ent-verde-crecimiento); }
.ent-punto-qr.pend { color: #b45309; }

.ent-punto-ver {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    font-weight: 600;
    color: var(--ent-verde-yaya);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 900px) {
    .ent-main .ent-puntos-lista {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   VISTA ADMIN: detalle de un punto (ventas del punto).
   ============================================================ */

.ent-detalle-titulo-wrap {
    display: flex;
    align-items: center;
    gap: var(--ent-space-3);
}

.ent-volver {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    font-weight: 600;
    color: var(--ent-texto-suave);
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-md);
    padding: 8px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: border-color var(--ent-trans-fast), color var(--ent-trans-fast);
}

.ent-volver:hover {
    color: var(--ent-verde-crecimiento);
    border-color: var(--ent-verde-yaya);
}

.ent-pd-barra-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ent-space-3);
    padding-top: var(--ent-space-4);
    padding-bottom: 12px;
}

.ent-pd-lista-titulo {
    font-family: var(--ent-font-titulo);
    font-size: 15px;
    font-weight: 700;
    color: var(--ent-verde-crecimiento);
}

.ent-btn-csv {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    font-weight: 600;
    color: var(--ent-verde-crecimiento);
    background: var(--ent-verde-claro);
    border: 1px solid transparent;
    border-radius: var(--ent-radius-md);
    padding: 9px 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background var(--ent-trans-fast), border-color var(--ent-trans-fast);
}

.ent-btn-csv:hover {
    background: var(--ent-blanco);
    border-color: var(--ent-verde-yaya);
}

/* ============================================================
   Selector de periodo contable (mes cerrado + rango).
   ============================================================ */

.ent-periodos-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ent-space-3);
    position: relative;
}

.ent-periodo-panel {
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-lg);
    box-shadow: var(--ent-shadow-md);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 420px;
}

.ent-periodo-modo {
    display: flex;
    gap: var(--ent-space-4);
}

.ent-periodo-modo label {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.ent-periodo-mes, .ent-periodo-rango {
    display: flex;
    gap: var(--ent-space-3);
    flex-wrap: wrap;
}

.ent-periodo-rango label {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    color: var(--ent-texto-suave);
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.ent-periodo-panel select,
.ent-periodo-panel input[type="date"] {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto);
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-md);
    padding: 9px 12px;
    cursor: pointer;
}

.ent-periodo-panel select:focus,
.ent-periodo-panel input[type="date"]:focus {
    outline: none;
    border-color: var(--ent-verde-yaya);
}

.ent-periodo-aplicar {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    font-weight: 600;
    color: var(--ent-blanco);
    background: var(--ent-verde-yaya);
    border: none;
    border-radius: var(--ent-radius-md);
    padding: 10px 20px;
    cursor: pointer;
    align-self: flex-start;
    transition: background var(--ent-trans-fast);
}

.ent-periodo-aplicar:hover {
    background: var(--ent-verde-crecimiento);
}

.ent-periodo-etiqueta {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    font-weight: 600;
    color: var(--ent-verde-crecimiento);
    background: var(--ent-verde-claro);
    padding: 6px 14px;
    border-radius: 999px;
}

/* ============================================================
   Seccion Puntos: toolbar (buscar + interruptor) y vista lista.
   ============================================================ */

.ent-puntos-toolbar {
    display: flex;
    align-items: center;
    gap: var(--ent-space-3);
    flex-wrap: wrap;
}

.ent-buscar {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto);
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-md);
    padding: 10px 16px;
    min-width: 260px;
    transition: border-color var(--ent-trans-fast);
}

.ent-buscar:focus {
    outline: none;
    border-color: var(--ent-verde-yaya);
}

.ent-vista-toggle {
    display: inline-flex;
    background: var(--ent-gris-100);
    border-radius: var(--ent-radius-md);
    padding: 3px;
    gap: 3px;
}

.ent-vista-btn {
    font-size: 15px;
    color: var(--ent-texto-suave);
    background: transparent;
    border: none;
    border-radius: calc(var(--ent-radius-md) - 3px);
    padding: 8px 14px;
    cursor: pointer;
    transition: background var(--ent-trans-fast), color var(--ent-trans-fast);
}

.ent-vista-btn.activo {
    color: var(--ent-verde-crecimiento);
    background: var(--ent-blanco);
    box-shadow: var(--ent-shadow-sm);
}

.ent-vista-btn:not(.activo):hover {
    color: var(--ent-verde-crecimiento);
}

/* Tabla de lista */
.ent-puntos-tabla {
    width: 100%;
    border-collapse: collapse;
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-lg);
    overflow: hidden;
}

.ent-puntos-tabla thead th {
    font-family: var(--ent-font-texto);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ent-texto-suave);
    text-align: left;
    padding: 14px 18px;
    background: var(--ent-gris-50, #f8faf9);
    border-bottom: 1px solid var(--ent-gris-200);
}

.ent-puntos-tabla tbody td {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto);
    padding: 14px 18px;
    border-bottom: 1px solid var(--ent-gris-100);
}

.ent-lista-fila {
    cursor: pointer;
    transition: background var(--ent-trans-fast);
}

.ent-lista-fila:hover {
    background: var(--ent-verde-claro);
}

.ent-lista-fila:last-child td {
    border-bottom: none;
}

.ent-lista-nombre {
    font-weight: 600;
    color: var(--ent-verde-crecimiento);
}

.ent-lista-accion {
    text-align: right;
    color: var(--ent-texto-suave);
    width: 40px;
}

/* ============================================================
   Boton Nuevo punto + modal de creacion.
   ============================================================ */

.ent-btn-nuevo {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    font-weight: 600;
    color: var(--ent-blanco);
    background: var(--ent-verde-yaya);
    border: none;
    border-radius: var(--ent-radius-md);
    padding: 10px 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background var(--ent-trans-fast);
}

.ent-btn-nuevo:hover { background: var(--ent-verde-crecimiento); }

.ent-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 45, 43, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.ent-modal {
    background: var(--ent-blanco);
    border-radius: var(--ent-radius-lg);
    box-shadow: var(--ent-shadow-lg, 0 20px 60px rgba(2,45,43,0.25));
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ent-modal-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ent-gris-100);
}

.ent-modal-cab h3 {
    font-family: var(--ent-font-titulo);
    font-size: 18px;
    font-weight: 700;
    color: var(--ent-verde-crecimiento);
}

.ent-modal-cerrar {
    font-size: 18px;
    color: var(--ent-texto-suave);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--ent-radius-md);
    transition: color var(--ent-trans-fast), background var(--ent-trans-fast);
}

.ent-modal-cerrar:hover { color: var(--ent-verde-crecimiento); background: var(--ent-gris-100); }

.ent-modal-cuerpo {
    padding: 22px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ent-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--ent-font-texto);
    font-size: 13px;
    font-weight: 600;
    color: var(--ent-texto);
}

.ent-campo input {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    font-weight: 400;
    color: var(--ent-texto);
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-md);
    padding: 10px 14px;
    transition: border-color var(--ent-trans-fast);
}

.ent-campo input:focus { outline: none; border-color: var(--ent-verde-yaya); }

.ent-campo-fila {
    display: flex;
    gap: 14px;
}

.ent-campo-fila .ent-campo { flex: 1; }

.ent-req { color: #dc2626; }

.ent-modal-error {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--ent-radius-md);
    padding: 10px 14px;
}

.ent-modal-pie {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 24px;
    border-top: 1px solid var(--ent-gris-100);
}

.ent-btn-primario {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    font-weight: 600;
    color: var(--ent-blanco);
    background: var(--ent-verde-yaya);
    border: none;
    border-radius: var(--ent-radius-md);
    padding: 11px 24px;
    cursor: pointer;
    transition: background var(--ent-trans-fast);
}

.ent-btn-primario:hover { background: var(--ent-verde-crecimiento); }
.ent-btn-primario:disabled { opacity: 0.6; cursor: default; }

.ent-btn-secundario {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    font-weight: 600;
    color: var(--ent-texto);
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-md);
    padding: 11px 24px;
    cursor: pointer;
    transition: border-color var(--ent-trans-fast);
}

.ent-btn-secundario:hover { border-color: var(--ent-verde-yaya); }

@media (max-width: 600px) {
    .ent-campo-fila { flex-direction: column; gap: 16px; }
}

/* ============================================================
   Modal crear punto: select, radios, direccion estructurada, geo.
   ============================================================ */

.ent-campo select {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto);
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-md);
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color var(--ent-trans-fast);
}

.ent-campo select:focus { outline: none; border-color: var(--ent-verde-yaya); }

.ent-radio-fila {
    display: flex;
    gap: var(--ent-space-4);
    margin-top: 6px;
}

.ent-radio {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    font-weight: 400;
    color: var(--ent-texto);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.ent-dir-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.ent-dir-fila input {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto);
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-md);
    padding: 10px 12px;
    width: 70px;
    transition: border-color var(--ent-trans-fast);
}

.ent-dir-fila input:focus { outline: none; border-color: var(--ent-verde-yaya); }

.ent-dir-tipovia {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto);
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-md);
    padding: 10px 12px;
    cursor: pointer;
    width: auto;
}

.ent-dir-tipovia:focus { outline: none; border-color: var(--ent-verde-yaya); }

.ent-dir-sep {
    font-family: var(--ent-font-texto);
    font-size: 15px;
    font-weight: 700;
    color: var(--ent-texto-suave);
}

.ent-geo-estado {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    color: var(--ent-texto-suave);
    background: var(--ent-gris-100);
    border-radius: var(--ent-radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ent-geo-estado i { margin-right: 6px; }

.ent-geo-estado.buscando { color: var(--ent-texto); background: #fffbeb; }

.ent-geo-estado.ok {
    color: var(--ent-verde-crecimiento);
    background: var(--ent-verde-claro);
}

.ent-geo-estado.fallo {
    color: #b91c1c;
    background: #fef2f2;
}

.ent-geo-coords {
    font-family: monospace;
    font-size: 12px;
    opacity: 0.85;
}

/* ============================================================
   Activar QR: boton en detalle + modal.
   ============================================================ */

.ent-pd-acciones-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ent-btn-activar-qr {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    font-weight: 600;
    color: var(--ent-blanco);
    background: var(--ent-verde-yaya);
    border: none;
    border-radius: var(--ent-radius-md);
    padding: 9px 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background var(--ent-trans-fast);
}

.ent-btn-activar-qr:hover { background: var(--ent-verde-crecimiento); }

.ent-modal-angosto { max-width: 440px; }

.ent-aq-texto {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto);
    line-height: 1.5;
}

.ent-aq-texto strong { color: var(--ent-verde-crecimiento); }

#ent-aq-serie {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: monospace;
    font-size: 15px;
}

/* ============================================================
   Cajeros: boton en detalle + modal de gestion.
   ============================================================ */

.ent-btn-cajeros {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    font-weight: 600;
    color: var(--ent-verde-crecimiento);
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-md);
    padding: 9px 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: border-color var(--ent-trans-fast), background var(--ent-trans-fast);
}

.ent-btn-cajeros:hover { border-color: var(--ent-verde-yaya); background: var(--ent-verde-claro); }

.ent-cj-sub {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    color: var(--ent-texto-suave);
    line-height: 1.5;
}

.ent-cj-sub strong { color: var(--ent-verde-crecimiento); }

.ent-cj-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ent-cj-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--ent-gris-100);
    border-radius: var(--ent-radius-md);
}

.ent-cj-item-info { display: flex; flex-direction: column; gap: 2px; }

.ent-cj-nombre {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    font-weight: 600;
    color: var(--ent-texto);
}

.ent-cj-email {
    font-family: var(--ent-font-texto);
    font-size: 12px;
    color: var(--ent-texto-suave);
}

.ent-cj-estado {
    font-family: var(--ent-font-texto);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

.ent-cj-estado.ok { color: var(--ent-verde-crecimiento); background: var(--ent-verde-claro); }
.ent-cj-estado.pend { color: #b45309; background: #fef3c7; }

.ent-cajero-vacio {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    color: var(--ent-texto-suave);
    text-align: center;
    padding: 20px;
}

.ent-cj-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    margin-top: 12px;
    background: var(--ent-gris-100);
    border-radius: var(--ent-radius-md);
}

.ent-cj-form-btns {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ent-cj-credencial {
    padding: 16px;
    margin-top: 12px;
    background: var(--ent-verde-claro);
    border-radius: var(--ent-radius-md);
}

.ent-cj-cred-titulo {
    font-family: var(--ent-font-titulo);
    font-size: 15px;
    font-weight: 700;
    color: var(--ent-verde-crecimiento);
    margin-bottom: 6px;
}

.ent-cj-cred-texto, .ent-cj-cred-nota {
    font-family: var(--ent-font-texto);
    font-size: 12px;
    color: var(--ent-texto);
    line-height: 1.4;
}

.ent-cj-cred-nota { margin-top: 8px; opacity: 0.8; }

.ent-cj-cred-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(42, 160, 72, 0.15);
}

.ent-cj-cred-fila span {
    font-family: var(--ent-font-texto);
    font-size: 12px;
    font-weight: 600;
    color: var(--ent-texto-suave);
}

.ent-cj-cred-fila code {
    font-family: monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--ent-verde-crecimiento);
    user-select: all;
}

/* ============================================================
   Modal crear contrasena (primer ingreso).
   ============================================================ */

.ent-pw-texto {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto);
    line-height: 1.5;
}

.ent-pw-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ent-pw-input-wrap input {
    flex: 1;
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto);
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-md);
    padding: 10px 42px 10px 14px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--ent-trans-fast);
}

.ent-pw-input-wrap input:focus { outline: none; border-color: var(--ent-verde-yaya); }

.ent-pw-ojo {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--ent-texto-suave);
    cursor: pointer;
    padding: 6px 8px;
    font-size: 14px;
    transition: color var(--ent-trans-fast);
}

.ent-pw-ojo:hover { color: var(--ent-verde-crecimiento); }

.ent-pw-reqs {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ent-pw-reqs li {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    color: var(--ent-texto-suave);
    display: flex;
    align-items: center;
    gap: 9px;
    transition: color var(--ent-trans-fast);
}

.ent-pw-reqs li i { font-size: 14px; color: var(--ent-gris-200); transition: color var(--ent-trans-fast); }

.ent-pw-reqs li.ok { color: var(--ent-verde-crecimiento); }
.ent-pw-reqs li.ok i { color: var(--ent-verde-yaya); }

/* Boton copiar credenciales del cajero */
.ent-cj-cred-copiar {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    font-weight: 600;
    color: var(--ent-verde-crecimiento);
    background: var(--ent-blanco);
    border: 1px solid var(--ent-verde-yaya);
    border-radius: var(--ent-radius-md);
    padding: 9px 16px;
    margin-top: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background var(--ent-trans-fast), color var(--ent-trans-fast);
}

.ent-cj-cred-copiar:hover { background: var(--ent-verde-yaya); color: var(--ent-blanco); }

/* Modal de contrasena en la pantalla de login: por encima de todo (login usa z-index 10000) */
.ent-modal-overlay-top { z-index: 100000; }

/* Acciones por cajero + estado inactivo */
.ent-cj-item-der {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ent-cj-acciones {
    display: flex;
    gap: 4px;
}

.ent-cj-accion {
    background: transparent;
    border: none;
    color: var(--ent-texto-suave);
    cursor: pointer;
    padding: 7px 9px;
    border-radius: var(--ent-radius-md);
    font-size: 13px;
    transition: color var(--ent-trans-fast), background var(--ent-trans-fast);
}

.ent-cj-accion:hover { color: var(--ent-verde-crecimiento); background: var(--ent-verde-claro); }

.ent-cj-estado.inact { color: #6b7280; background: var(--ent-gris-200); }

.ent-cj-item.inactivo { opacity: 0.6; }

.ent-cj-form-titulo {
    font-family: var(--ent-font-titulo);
    font-size: 15px;
    font-weight: 700;
    color: var(--ent-verde-crecimiento);
}

.ent-cj-form-nota {
    font-family: var(--ent-font-texto);
    font-size: 12px;
    color: var(--ent-texto-suave);
}

/* Mensaje de error dentro del modal de cambiar contrasena propio */
.ent-cp2-error {
    display: none;
    font-family: var(--ent-font-texto);
    font-size: 13px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--ent-radius-md);
    padding: 9px 12px;
    margin-top: 4px;
}

.ent-cp2-error.visible { display: block; }

/* ============================================================
   Topbar derecha: saludo calido + menu Mi cuenta
   ============================================================ */
.ent-topbar-der {
    display: contents;
}

.ent-topbar-saludo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.35;
    text-align: center;
}

.ent-saludo-franja {
    font-family: var(--ent-font-titulo);
    font-weight: 600;
    font-size: 16px;
    color: var(--ent-verde-crecimiento);
    letter-spacing: -0.01em;
}

.ent-saludo-frase {
    font-family: var(--ent-font-titulo);
    font-weight: 400;
    font-size: 13px;
    color: #6b8f7a;
}

.ent-cuenta {
    position: relative;
}

.ent-cuenta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 1px solid var(--ent-gris-200);
    border-radius: 999px;
    padding: 6px 14px 6px 6px;
    cursor: pointer;
    transition: border-color var(--ent-trans-fast), background var(--ent-trans-fast);
}

.ent-cuenta-btn:hover {
    border-color: var(--ent-verde-yaya);
    background: var(--ent-gris-50);
}

.ent-cuenta-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ent-verde-yaya);
    color: var(--ent-blanco);
    font-family: var(--ent-font-titulo);
    font-weight: 600;
    font-size: 19px;
    flex-shrink: 0;
}

.ent-cuenta-chevron {
    font-size: 11px;
    color: var(--ent-texto-suave);
    transition: transform var(--ent-trans-fast);
}

.ent-cuenta-menu {
    position: fixed;
    min-width: 260px;
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-lg);
    box-shadow: 0 20px 60px rgba(2,45,43,0.18);
    padding: 8px;
    display: none;
    z-index: 99999;
}

.ent-cuenta-menu.abierto { display: block; }

.ent-cuenta-cab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 12px 10px;
}

.ent-cuenta-cab-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ent-verde-yaya);
    color: var(--ent-blanco);
    font-family: var(--ent-font-titulo);
    font-weight: 600;
    font-size: 20px;
    flex-shrink: 0;
}

.ent-cuenta-cab-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.ent-cuenta-cab-correo {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    font-weight: 600;
    color: var(--ent-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.ent-cuenta-cab-rol {
    font-family: var(--ent-font-texto);
    font-size: 12px;
    color: var(--ent-verde-crecimiento);
    font-weight: 500;
}

.ent-cuenta-sep {
    height: 1px;
    background: var(--ent-gris-200);
    margin: 2px 4px 6px 4px;
}

.ent-cuenta-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 11px 12px;
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto);
    cursor: pointer;
    text-align: left;
    transition: background var(--ent-trans-fast), color var(--ent-trans-fast);
}

.ent-cuenta-item i { width: 16px; text-align: center; color: var(--ent-texto-suave); }

.ent-cuenta-item:hover { background: var(--ent-verde-claro); color: var(--ent-verde-crecimiento); }
.ent-cuenta-item:hover i { color: var(--ent-verde-yaya); }

.ent-cuenta-salir:hover { background: #fef2f2; color: #b91c1c; }
.ent-cuenta-salir:hover i { color: #b91c1c; }

@media (max-width: 820px) {
    .ent-topbar-saludo { display: none; }
}

/* ============================================================
   Avatares (animalitos)
   ============================================================ */
/* Imagen del avatar dentro de los circulos (boton y cabecera) */
.ent-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 3px;
    box-sizing: border-box;
}

/* Cuando hay imagen, el circulo va blanco para que resalte el animalito */
.ent-cuenta-avatar:has(.ent-avatar-img),
.ent-cuenta-cab-avatar:has(.ent-avatar-img) {
    background: var(--ent-gris-100);
}

/* Cuadricula del modal Elige tu avatar */
.ent-avatar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 4px;
}

.ent-avatar-celda {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ent-gris-100);
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    padding: 8px;
    transition: border-color var(--ent-trans-fast), transform var(--ent-trans-fast), background var(--ent-trans-fast);
}

.ent-avatar-celda:hover {
    transform: translateY(-2px);
    background: var(--ent-verde-claro);
}

.ent-avatar-celda.seleccionado {
    border-color: var(--ent-verde-yaya);
    background: var(--ent-verde-claro);
}

.ent-avatar-celda-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

@media (max-width: 520px) {
    .ent-avatar-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   MFA (verificacion en dos pasos)
   ============================================================ */
.ent-mfa-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
}

.ent-mfa-qr img,
.ent-mfa-qr canvas {
    border-radius: var(--ent-radius-md, 8px);
}

.ent-mfa-secreto-label {
    font-family: var(--ent-font-texto);
    font-size: 13px;
    color: var(--ent-texto-suave);
    margin-bottom: 6px;
}

.ent-mfa-secreto {
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--ent-texto);
    background: var(--ent-gris-100);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-md, 8px);
    padding: 10px 12px;
    text-align: center;
    word-break: break-all;
    user-select: all;
    margin-bottom: 4px;
}

#ent-mfa-codigo {
    letter-spacing: 6px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

/* ============================================================
   Panel YaYa (super-admin)
   ============================================================ */
.ent-main-yaya {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ent-yaya-cab {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ent-space-4);
    margin-bottom: var(--ent-space-6, 24px);
    flex-wrap: wrap;
}

.ent-yaya-titulo {
    font-family: var(--ent-font-titulo);
    font-weight: 600;
    font-size: 24px;
    color: var(--ent-texto);
    margin: 0;
}

.ent-yaya-sub {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto-suave);
    margin: 4px 0 0;
}

.ent-yaya-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.ent-yaya-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--ent-blanco);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-lg, 14px);
    padding: 20px;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--ent-trans-fast), transform var(--ent-trans-fast), box-shadow var(--ent-trans-fast);
}

.ent-yaya-card:hover {
    border-color: var(--ent-verde-yaya);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(2, 45, 43, 0.10);
}

.ent-yaya-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ent-yaya-card-nombre {
    font-family: var(--ent-font-titulo);
    font-weight: 600;
    font-size: 18px;
    color: var(--ent-texto);
    line-height: 1.25;
}

.ent-yaya-card-estado {
    font-family: var(--ent-font-texto);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: 999px;
    flex-shrink: 0;
}

.ent-yaya-card-estado.activo {
    background: var(--ent-verde-claro);
    color: var(--ent-verde-yaya);
}

.ent-yaya-card-estado.inactivo {
    background: var(--ent-gris-200);
    color: var(--ent-texto-suave);
}

.ent-yaya-card-metricas {
    display: flex;
    gap: 16px;
}

.ent-yaya-card-metrica {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto-suave);
}

.ent-yaya-card-metrica strong {
    color: var(--ent-texto);
    font-size: 18px;
    font-weight: 700;
}

.ent-yaya-card-entrar {
    font-family: var(--ent-font-titulo);
    font-size: 14px;
    font-weight: 600;
    color: var(--ent-verde-yaya);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
}

.ent-yaya-cargando,
.ent-yaya-vacio {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: var(--ent-texto-suave);
    font-family: var(--ent-font-texto);
}

/* Banner de contexto YAYA sobre la vista admin */
.ent-yaya-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 9px 16px;
    background: var(--ent-verde-yaya);
    color: var(--ent-blanco);
    font-family: var(--ent-font-texto);
    font-size: 13px;
    flex-wrap: wrap;
}

.ent-yaya-banner-txt strong { font-weight: 700; }

.ent-yaya-banner-volver {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--ent-blanco);
    font-family: var(--ent-font-titulo);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--ent-trans-fast);
}

.ent-yaya-banner-volver:hover {
    background: rgba(255, 255, 255, 0.30);
}

/* Cuando hay banner, el portal baja para no quedar tapado */
body:has(.ent-yaya-banner) .ent-portal {
    padding-top: 38px;
}

/* ============================================================
   Modal crear enterprise (formulario ancho con grupos)
   ============================================================ */
.ent-modal.ent-modal-ancho {
    max-width: 560px;
    width: calc(100% - 32px);
}

.ent-form-grupo-titulo {
    font-family: var(--ent-font-titulo);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ent-verde-yaya);
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ent-gris-200);
}

.ent-form-grupo-titulo:first-of-type {
    margin-top: 6px;
}

.ent-form-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 520px) {
    .ent-form-fila {
        grid-template-columns: 1fr;
    }
}

/* Selects dentro del modal enterprise: coherentes con .ent-campo inputs */
.ent-modal-ancho .ent-campo select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--ent-gris-300, #cbd5e1);
    border-radius: var(--ent-radius-md, 10px);
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto);
    background: var(--ent-blanco);
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%236b7280" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 22px;
    transition: border-color var(--ent-trans-fast);
}

.ent-modal-ancho .ent-campo select:focus {
    border-color: var(--ent-verde-yaya);
}

/* ============================================================
   Crear administrador (boton en cabecera de resumen + credenciales)
   ============================================================ */
.ent-seccion-cab-acciones {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ent-btn-crear-admin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

/* Bloque de exito tras crear el admin */
.ent-ca-exito {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 12px;
}

.ent-ca-exito i {
    font-size: 28px;
    color: var(--ent-verde-crecimiento, #2AA048);
    flex-shrink: 0;
}

.ent-ca-exito p {
    margin: 0;
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto);
}

/* Tarjeta con las credenciales temporales del nuevo admin */
.ent-ca-credenciales {
    background: var(--ent-gris-100, #f1f5f9);
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-md, 10px);
    padding: 14px 16px;
    margin: 4px 0 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ent-ca-cred-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ent-ca-cred-fila span {
    font-family: var(--ent-font-texto);
    font-size: 12px;
    color: var(--ent-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ent-ca-cred-fila strong {
    font-family: var(--ent-font-texto);
    font-size: 14px;
    color: var(--ent-texto);
    word-break: break-all;
    text-align: right;
}

.ent-ca-cred-fila strong.ent-ca-pass {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    color: var(--ent-verde-yaya);
    background: var(--ent-verde-claro);
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: 0.02em;
}

/* ============================================================
   Graficos del resumen (SVG puro)
   ============================================================ */
.ent-graficos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 26px 0 34px;
}
/* El atributo hidden debe ganarle al display:grid, o la seccion no colapsa. */
.ent-graficos[hidden] { display: none; }
.ent-grafico {
    background: var(--ent-blanco, #fff);
    border: 1px solid var(--ent-gris-200, #e5e7eb);
    border-radius: var(--ent-radius-lg, 14px);
    padding: 20px 22px;
    min-width: 0;
}
.ent-grafico-ancho { grid-column: 1 / -1; }
.ent-grafico-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.ent-grafico-titulo {
    font-family: var(--ent-font-titulo, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 15px;
    color: var(--ent-verde-yaya, #022D2B);
    letter-spacing: -0.01em;
}
.ent-grafico-nota {
    font-family: var(--ent-font-texto, 'DM Sans', sans-serif);
    font-size: 12px;
    color: var(--ent-texto-suave, #5c716c);
}
.ent-grafico-lienzo { width: 100%; min-height: 60px; }
/* Altura controlada y pareja para TODOS los graficos SVG (linea, dona, barras
   verticales): evita que unos crezcan mas que otros. Los cuatro al mismo alto. */
.ent-grafico-lienzo .ent-svg { max-height: 200px; }
.ent-grafico-vacio {
    text-align: center;
    padding: 40px 10px;
    color: var(--ent-texto-suave, #5c716c);
    font-family: var(--ent-font-texto, 'DM Sans', sans-serif);
    font-size: 14px;
}

/* Grafico de linea */
.ent-svg { width: 100%; height: auto; display: block; }
.ent-svg-guia { stroke: var(--ent-gris-200, #e9edec); stroke-width: 1; }
.ent-svg-eje {
    fill: var(--ent-texto-suave, #8a9a95);
    font-family: var(--ent-font-texto, 'DM Sans', sans-serif);
    font-size: 11px;
}
.ent-svg-linea {
    fill: none;
    stroke: var(--ent-verde-crecimiento, #2AA048);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.ent-svg-punto { fill: var(--ent-verde-crecimiento, #2AA048); stroke: #fff; stroke-width: 1.5; }

/* Grafico de barras horizontales */
.ent-barh { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.ent-barh-fila { display: grid; grid-template-columns: 100px 1fr 62px; align-items: center; gap: 12px; }
.ent-barh-nombre {
    font-family: var(--ent-font-texto, 'DM Sans', sans-serif);
    font-size: 13px;
    color: var(--ent-texto, #0f2320);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ent-barh-track {
    background: var(--ent-gris-100, #f1f5f4);
    border-radius: 100px;
    height: 12px;
    overflow: hidden;
}
.ent-barh-fill {
    height: 100%;
    border-radius: 100px;
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ent-barh-valor {
    font-family: var(--ent-font-texto, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--ent-verde-yaya, #022D2B);
    text-align: right;
}

/* Grafico de dona */
.ent-dona-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ent-dona-svg { width: 150px; height: 150px; flex-shrink: 0; }
.ent-dona-centro-num {
    font-family: var(--ent-font-titulo, 'Poppins', sans-serif);
    font-weight: 700;
    font-size: 26px;
    fill: var(--ent-verde-yaya, #022D2B);
}
.ent-dona-centro-lbl {
    font-family: var(--ent-font-texto, 'DM Sans', sans-serif);
    font-size: 11px;
    fill: var(--ent-texto-suave, #5c716c);
}
.ent-dona-leyenda { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 140px; }
.ent-dona-leg-item { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 9px; }
.ent-dona-leg-color { width: 12px; height: 12px; border-radius: 3px; }
.ent-dona-leg-nombre {
    font-family: var(--ent-font-texto, 'DM Sans', sans-serif);
    font-size: 13px;
    color: var(--ent-texto, #0f2320);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ent-dona-leg-pct {
    font-family: var(--ent-font-texto, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--ent-verde-yaya, #022D2B);
}

@media (max-width: 820px) {
    .ent-graficos { grid-template-columns: 1fr; }
}

/* Acciones del desglose por punto (buscador + exportar) */
.ent-desg-acciones {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ent-desg-acciones .ent-buscar {
    min-width: 180px;
    max-width: 240px;
}
@media (max-width: 600px) {
    .ent-desg-acciones { width: 100%; }
    .ent-desg-acciones .ent-buscar { flex: 1; max-width: none; }
}

/* ============================================================
   Metricas visuales colapsables (cabecera premium + rejilla 2x2)
   ============================================================ */
.ent-metricas {
    margin: 26px 0 34px;
}
.ent-metricas-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--ent-blanco, #fff);
    border: 1px solid var(--ent-gris-200, #e5e7eb);
    border-radius: var(--ent-radius-lg, 14px);
    padding: 16px 22px;
    cursor: pointer;
    font-family: var(--ent-font-titulo, 'Poppins', sans-serif);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.ent-metricas-toggle:hover {
    border-color: var(--ent-verde-crecimiento, #2AA048);
    background: var(--ent-verde-claro, #D8F4D7);
}
.ent-metricas-tit {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    color: var(--ent-verde-yaya, #022D2B);
    letter-spacing: -0.01em;
}
.ent-metricas-tit i { color: var(--ent-verde-crecimiento, #2AA048); }
.ent-metricas-chevron {
    color: var(--ent-texto-suave, #5c716c);
    transition: transform 0.3s ease;
    font-size: 13px;
}
.ent-metricas-toggle.abierto .ent-metricas-chevron { transform: rotate(180deg); }
.ent-metricas-toggle.abierto {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.ent-metricas-toggle.abierto + .ent-graficos {
    border: 1px solid var(--ent-gris-200, #e5e7eb);
    border-top: none;
    border-bottom-left-radius: var(--ent-radius-lg, 14px);
    border-bottom-right-radius: var(--ent-radius-lg, 14px);
    padding: 18px;
    margin: 0;
}

/* Etiquetas del grafico de barras verticales (ticket promedio por punto) */
.ent-svg-barv-val {
    fill: var(--ent-verde-yaya, #022D2B);
    font-family: var(--ent-font-texto, 'DM Sans', sans-serif);
    font-size: 11px;
    font-weight: 600;
}
.ent-svg-barv-lbl {
    fill: var(--ent-texto-suave, #5c716c);
    font-family: var(--ent-font-texto, 'DM Sans', sans-serif);
    font-size: 11px;
}


/* ---- Asociar comercio existente (modal solo YaYa) ---- */
.ent-asoc-intro {
    margin: 0 0 var(--ent-space-4);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ent-texto-suave);
}

.ent-asoc-resumen {
    margin: var(--ent-space-4) 0 0;
    border: 1px solid var(--ent-gris-200);
    border-radius: var(--ent-radius-sm);
    overflow: hidden;
}

.ent-asoc-fila {
    display: flex;
    justify-content: space-between;
    gap: var(--ent-space-4);
    padding: var(--ent-space-3) var(--ent-space-4);
    font-size: 13px;
    border-bottom: 1px solid var(--ent-gris-200);
}

.ent-asoc-fila:last-child { border-bottom: none; }
.ent-asoc-fila span { color: var(--ent-texto-suave); }

.ent-asoc-fila strong {
    color: var(--ent-texto);
    text-align: right;
    word-break: break-word;
}

.ent-asoc-aviso {
    margin: var(--ent-space-3) 0 0;
    padding: var(--ent-space-3) var(--ent-space-4);
    background: var(--ent-gris-50);
    border: 1px solid var(--ent-gris-200);
    border-left: 3px solid var(--ent-coral);
    border-radius: 0 var(--ent-radius-sm) var(--ent-radius-sm) 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ent-texto);
}

.ent-asoc-aviso code {
    font-size: 12px;
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--ent-verde-crecimiento-06);
}