/* ============================================
   NSE DIRECTORIO PÚBLICO - ESTILOS
   Versión: 3.7 (final - Noto Sans + sin banda lateral + azul oscuro)
   ============================================ */

:root{
    /* Colores base */
    --nse-primary: #1e3a8a; /* Azul más oscuro (antes #0056b3) */
    --nse-text: #212529;
    --nse-muted: #6c757d;
    --nse-border: #e5e7eb;
    --nse-bg-soft: #f8fafc;

    /* Colores por tipo de acreditación - SIN BANDA LATERAL, solo fondo */
    --nse-expositor:  #FF4757;
    --nse-visitante:  #2D5BFF;
    --nse-invitado:   #9B51E0;
    --nse-autoridad:  #6B7280;
    --nse-vip:        #0EA5E9;
    --nse-prensa:     #10B981;
}

/* ============================================
   FUENTE CORPORATIVA: NOTO SANS
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap');

.nse-directorio,
.nse-titulo,
.nse-vacio,
.nse-card-expositor,
.nse-card-visitor,
.nse-card-header h2,
.nse-card-header h3,
.nse-miniweb-link,
.nse-badge,
.nse-type-badge,
.nse-datos,
.nse-dato,
.nse-label,
.nse-phone,
.nse-email {
    font-family: 'Noto Sans', system-ui, -apple-system, sans-serif !important;
}

/* ============================================
   DIRECTORIO GENERAL
   ============================================ */

.nse-directorio {
    margin: 30px 0;
    width: 100%;
    max-width: calc(100vw - 40px); /* Un poco menos del borde de pantalla */
    margin-left: auto;
    margin-right: auto;
}

.nse-titulo {
    font-weight: 700;
    font-size: 28px;
    color: var(--nse-primary);
    margin: 0 0 20px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.nse-titulo small {
    font-size: 14px;
    color: var(--nse-muted);
    font-weight: 500;
}

.nse-vacio {
    margin: 0;
    padding: 16px 18px;
    border-radius: 8px;
    background: var(--nse-bg-soft);
    border: 1px dashed var(--nse-border);
    color: var(--nse-muted);
    font-size: 14px;
    font-weight: 500;
}

/* ============================================
   GRIDS
   ============================================ */

.nse-grid-expositores,
.nse-grid-visitantes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    width: 100%;
}

/* ============================================
   TARJETAS - SIN BANDA LATERAL, CON FONDO DE COLOR
   ============================================ */

.nse-card-expositor,
.nse-card-visitor {
    position: relative;
    background: #fff;
    border-radius: 8px !important;
    border: 1px solid var(--nse-border);
    padding: 18px 20px; /* Un poco más de padding lateral */
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* FONDO DE COLOR SUTIL - SIN BANDA LATERAL */
.nse-card-expositor::before,
.nse-card-visitor::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.04; /* Más sutil que antes (0.06) */
    pointer-events: none;
    z-index: 0;
}

/* ELIMINADA LA BANDA LATERAL - solo queda el borde normal */
.nse-card-expositor,
.nse-card-visitor {
    border: 1px solid var(--nse-border); /* Borde normal en todos los lados */
}

/* ============================================
   BADGE DE TIPO DE ACREDITACIÓN
   ============================================ */

.nse-type-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(0,0,0,0.08); /* Fondo más sutil */
    color: currentColor;
    vertical-align: middle;
    opacity: 0.9;
    font-family: 'Noto Sans', sans-serif;
}

/* ============================================
   COLORES POR TIPO - SOLO FONDO SUTIL, SIN BANDA
   ============================================ */

/* VISITANTE DIRECTO (Azul #2D5BFF - solo fondo) */
.nse-card-visitor.nse-type-visitante_directo::before,
.nse-card-visitor[data-type="visitante_directo"]::before,
.nse-card-visitor.nse-type-visitante::before {
    background: #2D5BFF !important;
}
.nse-card-visitor.nse-type-visitante_directo .nse-type-badge,
.nse-card-visitor[data-type="visitante_directo"] .nse-type-badge,
.nse-card-visitor.nse-type-visitante .nse-type-badge {
    background: rgba(45, 91, 255, 0.08) !important;
    color: #2D5BFF !important;
}

/* VISITANTE (Azul #2D5BFF - solo fondo) */
.nse-card-visitor.nse-type-visitante::before,
.nse-card-visitor[data-type="visitante"]::before {
    background: #2D5BFF !important;
}
.nse-card-visitor.nse-type-visitante .nse-type-badge,
.nse-card-visitor[data-type="visitante"] .nse-type-badge {
    background: rgba(45, 91, 255, 0.08) !important;
    color: #2D5BFF !important;
}

/* EXPOSITOR (Rojo #FF4757 - solo fondo) */
.nse-card-expositor--expositor::before,
.nse-card-visitor.nse-type-expositor::before,
.nse-card-visitor[data-type="expositor"]::before {
    background: #FF4757 !important;
}
.nse-card-visitor.nse-type-expositor .nse-type-badge,
.nse-card-visitor[data-type="expositor"] .nse-type-badge {
    background: rgba(255, 71, 87, 0.08) !important;
    color: #FF4757 !important;
}

/* INVITADO (Morado #9B51E0 - solo fondo) */
.nse-card-visitor.nse-type-invitado::before,
.nse-card-visitor[data-type="invitado"]::before {
    background: #9B51E0 !important;
}
.nse-card-visitor.nse-type-invitado .nse-type-badge,
.nse-card-visitor[data-type="invitado"] .nse-type-badge {
    background: rgba(155, 81, 224, 0.08) !important;
    color: #9B51E0 !important;
}

/* AUTORIDAD (Gris #6B7280 - solo fondo) */
.nse-card-visitor.nse-type-autoridad::before,
.nse-card-visitor[data-type="autoridad"]::before {
    background: #6B7280 !important;
}
.nse-card-visitor.nse-type-autoridad .nse-type-badge,
.nse-card-visitor[data-type="autoridad"] .nse-type-badge {
    background: rgba(107, 114, 128, 0.08) !important;
    color: #6B7280 !important;
}

/* VIP (Azul claro #0EA5E9 - solo fondo) */
.nse-card-visitor.nse-type-vip::before,
.nse-card-visitor[data-type="vip"]::before {
    background: #0EA5E9 !important;
}
.nse-card-visitor.nse-type-vip .nse-type-badge,
.nse-card-visitor[data-type="vip"] .nse-type-badge {
    background: rgba(14, 165, 233, 0.08) !important;
    color: #0EA5E9 !important;
}

/* PRENSA (Verde #10B981 - solo fondo) */
.nse-card-visitor.nse-type-prensa::before,
.nse-card-visitor[data-type="prensa"]::before {
    background: #10B981 !important;
}
.nse-card-visitor.nse-type-prensa .nse-type-badge,
.nse-card-visitor[data-type="prensa"] .nse-type-badge {
    background: rgba(16, 185, 129, 0.08) !important;
    color: #10B981 !important;
}

/* ASISTENTE (Gris #6c757d - solo fondo) */
.nse-card-visitor.nse-type-asistente::before,
.nse-card-visitor[data-type="asistente"]::before {
    background: #6c757d !important;
}
.nse-card-visitor.nse-type-asistente .nse-type-badge,
.nse-card-visitor[data-type="asistente"] .nse-type-badge {
    background: rgba(108, 117, 125, 0.08) !important;
    color: #6c757d !important;
}

/* ============================================
   CABECERA TARJETA
   ============================================ */

.nse-card-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    z-index: 1;
}

.nse-card-header h2,
.nse-card-header h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--nse-text);
}

/* MINIWEB LINK - AZUL MÁS OSCURO (como badge stand) */
.nse-miniweb-link {
    color: #1e3a8a !important; /* Azul oscuro corporativo */
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    font-weight: 600;
}
.nse-miniweb-link:hover {
    text-decoration-style: solid;
    color: #1e40af !important; /* Un poco más oscuro al hover */
}

/* ============================================
   BADGES UNIFICADOS
   ============================================ */

.nse-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    margin-left: 6px;
    line-height: 1;
    height: 22px;
    vertical-align: middle;
    font-family: 'Noto Sans', sans-serif;
}

/* BADGE PRESENTE/AUSENTE */
.nse-badge.presente {
    background: #16a34a;
    color: #ffffff;
}

.nse-badge.ausente {
    background: #ef4444;
    color: #ffffff;
}

/* BADGE STAND - AZUL OSCURO CORPORATIVO */
.nse-badge.nse-badge-stand {
    background: #1e3a8a; /* Azul oscuro */
    color: #ffffff;
}

/* ============================================
   DATOS
   ============================================ */

.nse-datos {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nse-dato {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: var(--nse-text);
}

.nse-label {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--nse-muted);
    min-width: 90px;
}

/* ENLACES */

.nse-phone,
.nse-email {
    color: var(--nse-primary); /* Ahora usa el azul oscuro */
    text-decoration: none;
    word-break: break-word;
    font-weight: 500;
}

.nse-phone:hover,
.nse-email:hover {
    text-decoration: underline;
}

/* ============================================
   RESPONSIVE - SIN BANDA LATERAL EN MÓVIL
   ============================================ */

@media (max-width: 768px) {

    .nse-directorio {
        margin: 20px 0;
        max-width: calc(100vw - 30px); /* Menos espacio en móvil */
    }

    .nse-titulo {
        font-size: 22px;
        margin-bottom: 14px;
    }

    .nse-grid-expositores,
    .nse-grid-visitantes {
        display: block;
        width: 100%;
    }

    .nse-card-expositor,
    .nse-card-visitor {
        box-shadow: none;
        margin-bottom: 12px;
        border-radius: 8px !important;
        padding: 14px 16px;
        width: 100%;
        /* SIN BANDA LATERAL EN MÓVIL TAMPOCO */
        border: 1px solid var(--nse-border);
    }

    .nse-card-header {
        flex-direction: row;
        align-items: center;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    .nse-card-header h2,
    .nse-card-header h3 {
        font-size: 16px;
    }

    .nse-badge {
        font-size: 10px;
        padding: 4px 10px;
        margin-left: 4px;
        height: 20px;
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .nse-datos {
        gap: 4px;
    }

    .nse-dato {
        font-size: 13px;
    }
    
    /* RESPONSIVE PARA BADGE DE TIPO */
    .nse-type-badge {
        font-size: 9px;
        padding: 2px 6px;
        margin-left: 5px;
        line-height: 1.2;
        display: inline-flex;
        align-items: center;
    }
    
    .nse-card-header h3 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;
    }
    
    /* FIX ESPECÍFICO PARA SAFARI/iPhone */
    @supports (-webkit-touch-callout: none) {
        .nse-badge {
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            display: -webkit-inline-flex !important;
            display: inline-flex !important;
        }
        
        .nse-type-badge {
            display: -webkit-inline-flex;
            display: inline-flex;
            -webkit-align-items: center;
            align-items: center;
        }
    }
}

@media (max-width: 480px) {

    .nse-directorio {
        max-width: calc(100vw - 20px); /* Aún menos espacio */
    }

    .nse-card-expositor,
    .nse-card-visitor {
        padding: 12px 14px;
        border-radius: 8px !important;
        /* SIN BANDA LATERAL */
        border: 1px solid var(--nse-border);
    }

    .nse-titulo {
        font-size: 20px;
    }

    .nse-label {
        min-width: 80px;
        font-size: 11px;
    }
    
    .nse-badge {
        font-size: 9px;
        padding: 3px 8px;
        height: 18px;
    }
    
    /* iPhone específico - badges más ajustados */
    @media (max-width: 380px) {
        .nse-badge {
            font-size: 8px;
            padding: 2px 6px;
            height: 16px;
        }
        
        .nse-type-badge {
            font-size: 8px;
            padding: 1px 4px;
        }
    }
}

/* ============================================
   FALLBACK CSS INLINE (también actualizado)
   ============================================ */

<style>
/* CSS INLINE DE EMERGENCIA - SIN BANDA LATERAL, SOLO FONDO */
.nse-card-visitor[data-type="expositor"]::before,
.nse-card-visitor[data-type="visitante_directo"]::before,
.nse-card-visitor[data-type="visitante"]::before {
    background: #2D5BFF !important;
    opacity: 0.04 !important;
}
.nse-card-visitor[data-type="expositor"] .nse-type-badge,
.nse-card-visitor[data-type="visitante_directo"] .nse-type-badge,
.nse-card-visitor[data-type="visitante"] .nse-type-badge {
    background: rgba(45, 91, 255, 0.08) !important;
    color: #2D5BFF !important;
}

.nse-card-visitor[data-type="invitado"]::before {
    background: #9B51E0 !important;
    opacity: 0.04 !important;
}
.nse-card-visitor[data-type="invitado"] .nse-type-badge {
    background: rgba(155, 81, 224, 0.08) !important;
    color: #9B51E0 !important;
}

.nse-card-visitor[data-type="expositor"]::before {
    background: #FF4757 !important;
    opacity: 0.04 !important;
}
.nse-card-visitor[data-type="expositor"] .nse-type-badge {
    background: rgba(255, 71, 87, 0.08) !important;
    color: #FF4757 !important;
}

/* Enlaces en azul oscuro */
.nse-miniweb-link {
    color: #1e3a8a !important;
    font-weight: 600;
}
</style>