@import url("./encprev-premium-darkblue.css?v=20260812");

/* =========================================================
   ENCPREV - Responsive móvil unificado v30
   Archivo central. No toca lógica del sistema.
========================================================= */

:root{
  --enc-mobile-blue:#082b63;
  --enc-mobile-blue-2:#155eef;
  --enc-mobile-bg:#f4f7fb;
  --enc-mobile-border:#e5eaf2;
  --enc-mobile-muted:#64748b;
}

/* Nunca debe quedar el fondo rojo temporal de pruebas */
body{background:var(--gray-bg, var(--enc-mobile-bg)) !important;}

/* Corrección general de overflow */
html,body{max-width:100%;overflow-x:hidden;}
img,svg,video{max-width:100%;height:auto;}

@media (max-width: 900px){

  html, body{
    width:100%;
    overflow-x:hidden !important;
    -webkit-text-size-adjust:100%;
  }

  body{
    background:#f4f7fb !important;
  }

  .app-shell,
  .dashboard-shell,
  .page-shell,
  .main-shell{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* Topbar compacta y usable */
  .topbar,
  .app-topbar{
    position:sticky !important;
    top:0 !important;
    z-index:1000 !important;
    height:auto !important;
    min-height:0 !important;
    padding:10px 12px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    border-radius:0 0 18px 18px !important;
    box-shadow:0 8px 22px rgba(6,31,73,.18) !important;
  }

  .brand,
  .app-brand{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    margin:0 !important;
    min-width:0 !important;
  }

  .brand-logo,
  .app-brand-logo{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:13px !important;
  }

  .brand h1,
  .app-brand h1{
    margin:0 !important;
    font-size:20px !important;
    line-height:1.05 !important;
    letter-spacing:-.4px !important;
    white-space:nowrap !important;
  }

  .brand span,
  .app-brand span{
    font-size:11px !important;
    margin-top:2px !important;
    line-height:1.1 !important;
  }

  /* Navegación superior como chips con scroll horizontal */
  .topnav,
  .top-nav{
    width:100% !important;
    display:flex !important;
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:2px 2px 4px !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
  }

  .topnav::-webkit-scrollbar,
  .top-nav::-webkit-scrollbar{display:none !important;}

  .topnav a,
  .top-nav a{
    flex:0 0 auto !important;
    min-height:38px !important;
    padding:9px 12px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.13) !important;
    border:1px solid rgba(255,255,255,.20) !important;
    font-size:12.5px !important;
    white-space:nowrap !important;
    text-decoration:none !important;
    line-height:1 !important;
  }

  .topnav svg,
  .top-nav svg{
    width:16px !important;
    height:16px !important;
  }

  .top-nav-separator,
  .topnav-separator{display:none !important;}

  /* Rail/sidebar oculto en móvil */
  .main-with-rail,
  .layout-with-sidebar,
  .content-with-sidebar{
    display:block !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .icon-rail,
  .sidebar,
  .side-nav,
  .left-sidebar,
  aside.sidebar{
    display:none !important;
  }

  /* Contenido */
  .app-content,
  .content,
  .main-content,
  main,
  .page-content{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:14px 12px 24px !important;
    margin:0 !important;
  }

  .content-inner,
  .container,
  .wrap{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    min-width:0 !important;
  }

  /* Tarjetas compactas */
  .section-card,
  .card,
  .card-modern,
  .panel,
  .hero-panel,
  .admin-panel,
  .form-panel,
  .document-card,
  .people-card,
  .company-card{
    border-radius:18px !important;
    padding:16px !important;
    box-shadow:0 8px 22px rgba(15,23,42,.07) !important;
  }

  .section-card + .section-card,
  .card + .card,
  .panel + .panel{
    margin-top:12px !important;
  }

  .section-header,
  .page-header,
  .module-header,
  .document-header{
    display:block !important;
    margin-bottom:14px !important;
  }

  .section-title h2,
  .section-title h3,
  .page-title,
  .hero-panel h2,
  h1{
    font-size:23px !important;
    line-height:1.15 !important;
    letter-spacing:-.5px !important;
  }

  h2{font-size:21px !important;line-height:1.2 !important;}
  h3{font-size:18px !important;line-height:1.25 !important;}

  p,li,label,input,select,textarea,td,th{
    font-size:13px !important;
  }

  .section-title p,
  .hero-panel p,
  .muted{
    font-size:13px !important;
    line-height:1.45 !important;
  }

  /* Grillas a una columna */
  .dashboard-hero-grid,
  .hero-grid,
  .kpi-row,
  .summary-grid,
  .company-grid,
  .module-grid,
  .items-grid,
  .documents-grid,
  .people-grid,
  .form-grid,
  .filter-grid,
  .admin-actions-grid,
  .compliance-stats,
  .quick-grid,
  .stats-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  /* Carrusel horizontal cuando hay módulos */
  .modules-strip{
    display:flex !important;
    grid-template-columns:none !important;
    gap:12px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch;
    padding:2px 12px 14px !important;
    margin-left:-12px !important;
    margin-right:-12px !important;
    scrollbar-width:none !important;
  }

  .modules-strip::-webkit-scrollbar{display:none !important;}

  .modules-strip .module-tile,
  .modules-strip .module-card{
    flex:0 0 84% !important;
    max-width:320px !important;
    scroll-snap-align:start !important;
  }

  .module-tile,
  .module-card,
  .company-card,
  .summary-card,
  .kpi-card,
  .kpi-box{
    min-width:0 !important;
  }

  .quick-action{
    grid-template-columns:46px 1fr !important;
    gap:12px !important;
    padding:13px !important;
  }

  .hero-illustration,
  .kpi-mini-icon,
  .kpi-corner{
    display:none !important;
  }

  .btn-primary,
  .btn-secondary,
  button,
  input[type="submit"],
  input[type="button"]{
    width:100%;
    justify-content:center !important;
    min-height:42px !important;
    border-radius:12px !important;
  }

  .link-action{
    display:inline-flex !important;
    margin-top:8px !important;
    white-space:normal !important;
  }

  input,select,textarea{
    min-height:42px !important;
  }

  /* Tablas con scroll horizontal, sin romper la pantalla */
  table{min-width:720px;}

  .table-responsive,
  .table-wrap,
  .documents-table,
  .data-table,
  .list-table{
    width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .section-card table,
  .card table,
  .panel table{
    display:block !important;
    width:100% !important;
    overflow-x:auto !important;
    white-space:nowrap !important;
    -webkit-overflow-scrolling:touch;
  }

  .empty{
    padding:16px !important;
    border-radius:16px !important;
  }
}

@media (max-width: 520px){

  .topbar,
  .app-topbar{
    padding:9px 10px !important;
  }

  .brand-logo,
  .app-brand-logo{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }

  .brand h1,
  .app-brand h1{
    font-size:18px !important;
  }

  .brand span,
  .app-brand span{
    display:none !important;
  }

  .topnav a,
  .top-nav a{
    font-size:12px !important;
    padding:8px 10px !important;
  }

  .app-content,
  .content,
  .main-content,
  main,
  .page-content{
    padding:12px 10px 22px !important;
  }

  .section-card,
  .card,
  .card-modern,
  .panel,
  .hero-panel,
  .admin-panel,
  .form-panel,
  .document-card,
  .people-card,
  .company-card{
    padding:14px !important;
    border-radius:16px !important;
  }

  .modules-strip .module-tile,
  .modules-strip .module-card{
    flex-basis:88% !important;
  }
}

/* =========================================================
   ENCPREV - Ajuste móvil v31
   Objetivo: reducir scrolling y recuperar opciones del sidebar
   como navegación inferior horizontal en móvil.
========================================================= */

@media (max-width: 900px){
  :root{
    --enc-mobile-bottom-nav: 82px;
  }

  body{
    padding-bottom: calc(var(--enc-mobile-bottom-nav) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* La barra superior deja de comerse tanto alto en celular */
  .topbar,
  .app-topbar{
    min-height:58px !important;
    padding:8px 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    border-radius:0 0 14px 14px !important;
  }

  .brand,
  .app-brand{
    width:auto !important;
    justify-content:flex-start !important;
    gap:8px !important;
    flex:1 1 auto !important;
    overflow:hidden !important;
  }

  .brand-logo,
  .app-brand-logo{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    border-radius:11px !important;
  }

  .brand h1,
  .app-brand h1{
    font-size:17px !important;
    line-height:1 !important;
    max-width:160px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .brand span,
  .app-brand span{
    display:none !important;
  }

  /* En móvil se dejan visibles solo acciones superiores críticas */
  .topnav,
  .top-nav{
    width:auto !important;
    max-width:48vw !important;
    flex:0 0 auto !important;
    justify-content:flex-end !important;
    gap:6px !important;
    overflow-x:auto !important;
    padding:0 !important;
  }

  .topnav a,
  .top-nav a{
    min-height:32px !important;
    padding:7px 9px !important;
    font-size:11.5px !important;
    gap:5px !important;
  }

  .topnav svg,
  .top-nav svg,
  .topnav .svg-icon,
  .top-nav .svg-icon{
    width:14px !important;
    height:14px !important;
  }

  /* Recupera el sidebar en móvil como barra inferior desplazable */
  .layout,
  .main-with-rail,
  .layout-with-sidebar,
  .content-with-sidebar{
    display:block !important;
    grid-template-columns:1fr !important;
    min-height:auto !important;
  }

  .rail,
  .icon-rail,
  .sidebar,
  .side-nav,
  .left-sidebar,
  aside.sidebar{
    display:flex !important;
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    top:auto !important;
    z-index:1200 !important;
    width:auto !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    margin:0 !important;
    padding:7px 8px !important;
    border-radius:22px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(213,224,239,.95) !important;
    box-shadow:0 18px 42px rgba(15,23,42,.22) !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .rail::-webkit-scrollbar,
  .icon-rail::-webkit-scrollbar,
  .sidebar::-webkit-scrollbar,
  .side-nav::-webkit-scrollbar,
  .left-sidebar::-webkit-scrollbar{display:none !important;}

  .rail > div,
  .icon-rail > div,
  .sidebar > div,
  .side-nav > div,
  .left-sidebar > div{
    display:flex !important;
    min-width:max-content !important;
  }

  .rail-menu,
  .icon-rail .rail-menu,
  .side-nav .rail-menu{
    display:flex !important;
    gap:8px !important;
    align-items:center !important;
    min-width:max-content !important;
  }

  .rail-link,
  .icon-rail .rail-link,
  .side-nav .rail-link,
  .sidebar .rail-link{
    flex:0 0 60px !important;
    width:60px !important;
    min-width:60px !important;
    height:50px !important;
    min-height:50px !important;
    border-radius:16px !important;
    padding:6px 5px !important;
    gap:3px !important;
    font-size:18px !important;
    transform:none !important;
  }

  .rail-link .svg-icon,
  .rail-link svg{
    width:19px !important;
    height:19px !important;
  }

  .rail-text,
  .rail-link span:not(.badge):not(.pill){
    display:block !important;
    max-width:54px !important;
    font-size:8.8px !important;
    line-height:1.05 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .rail-footer,
  .rail-profile,
  .rail-help{
    display:none !important;
  }

  /* Compactación general para reducir scroll vertical */
  .content,
  .app-content,
  .main-content,
  main,
  .page-content{
    padding:10px 10px 16px !important;
    overflow-x:hidden !important;
  }

  .inner,
  .content-inner,
  .container,
  .wrap{
    zoom:1 !important;
  }

  .hero-card,
  .hero-panel,
  .section-card,
  .card,
  .card-modern,
  .panel,
  .admin-panel,
  .form-panel,
  .document-card,
  .people-card,
  .company-card,
  .quick-card,
  .compliance-card,
  .modules-card,
  .kpi-card{
    padding:12px !important;
    border-radius:16px !important;
    margin-bottom:10px !important;
  }

  .hero-card,
  .hero-panel{
    min-height:auto !important;
    display:block !important;
  }

  .hero-icon,
  .hero-illustration{
    display:none !important;
  }

  .hero-card h2,
  .hero-panel h2,
  .page-title,
  .section-title h2,
  h1{
    font-size:20px !important;
    line-height:1.12 !important;
    margin-bottom:6px !important;
  }

  h2{font-size:18px !important;}
  h3{font-size:16px !important;}

  .hero-card p,
  .hero-panel p,
  .section-title p,
  .page-header p,
  .muted{
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .top-grid,
  .hero-grid,
  .dashboard-hero-grid,
  .compliance-layout,
  .modules-layout,
  .quick-actions,
  .quick-grid,
  .kpi-row,
  .summary-grid,
  .company-grid,
  .module-grid,
  .items-grid,
  .documents-grid,
  .people-grid,
  .form-grid,
  .filter-grid,
  .admin-actions-grid,
  .stats-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-bottom:10px !important;
  }

  .quick-action,
  .company-card,
  .module-tile,
  .module-card,
  .summary-card,
  .kpi-card,
  .kpi-box{
    min-height:0 !important;
    padding:11px !important;
  }

  .quick-action{
    grid-template-columns:38px 1fr !important;
    gap:9px !important;
  }

  .quick-icon{
    width:36px !important;
    height:36px !important;
  }

  .quick-arrow{display:none !important;}

  .quick-action h4,
  .company-card h3,
  .module-card h3,
  .module-tile h3{
    font-size:14px !important;
    margin-bottom:3px !important;
  }

  .quick-action p,
  .company-card p,
  .module-card p,
  .module-tile p{
    font-size:11.5px !important;
    line-height:1.3 !important;
  }

  .section-card + .section-card,
  .card + .card,
  .panel + .panel{
    margin-top:10px !important;
  }
}

@media (max-width: 520px){
  .topnav,
  .top-nav{max-width:44vw !important;}

  .topnav a,
  .top-nav a{
    font-size:0 !important;
    width:34px !important;
    min-width:34px !important;
    height:32px !important;
    padding:0 !important;
    justify-content:center !important;
  }

  .topnav a .svg-icon,
  .top-nav a .svg-icon,
  .topnav a svg,
  .top-nav a svg{
    width:16px !important;
    height:16px !important;
  }

  .rail,
  .icon-rail,
  .sidebar,
  .side-nav,
  .left-sidebar,
  aside.sidebar{
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
    height:62px !important;
    min-height:62px !important;
    max-height:62px !important;
    border-radius:20px !important;
  }

  .rail-link,
  .icon-rail .rail-link,
  .side-nav .rail-link,
  .sidebar .rail-link{
    flex-basis:58px !important;
    width:58px !important;
    min-width:58px !important;
  }
}


/* =========================================================
   ENCPREV - Ajuste móvil v32
   - Precio visual en CLP
   - Cumplimiento centrado
   - KPIs en carrusel horizontal
   - Empresas como lista compacta con scroll interno
   - Módulos de empresa en grilla pequeña
========================================================= */

@media (max-width: 900px){
  /* Cumplimiento general centrado en dashboard y empresa */
  .global-card,
  .compliance-main{
    text-align:center !important;
    justify-items:center !important;
    align-items:center !important;
  }

  .global-card{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  .global-card > div,
  .compliance-main > div{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .global-circle,
  .compliance-circle{
    margin:0 auto 6px !important;
  }

  /* KPI móvil: carrusel horizontal, no grilla vertical infinita */
  .kpi-row,
  .summary-grid,
  .compliance-stats{
    display:flex !important;
    grid-template-columns:none !important;
    gap:10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x proximity !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    padding:2px 10px 10px !important;
    margin-left:-10px !important;
    margin-right:-10px !important;
  }

  .kpi-row::-webkit-scrollbar,
  .summary-grid::-webkit-scrollbar,
  .compliance-stats::-webkit-scrollbar{display:none !important;}

  .kpi-row .kpi-card,
  .summary-grid .summary-card,
  .compliance-stats .compliance-stat{
    flex:0 0 148px !important;
    width:148px !important;
    min-width:148px !important;
    min-height:92px !important;
    scroll-snap-align:start !important;
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
  }

  .kpi-card .kpi-icon{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
  }

  .kpi-number{
    font-size:22px !important;
    line-height:1 !important;
  }

  .kpi-label{
    font-size:11px !important;
    line-height:1.15 !important;
  }

  /* Suscripción: no ocupar primera vista móvil de empresa */
  .subscription-mini{
    display:none !important;
  }

  /* Empresas: acceso compacto, soporta carteras grandes sin alargar toda la página */
  .companies-card .company-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    max-height:410px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-right:2px !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .companies-card .company-card{
    padding:10px 11px !important;
    border-radius:15px !important;
    margin:0 !important;
  }

  .companies-card .company-top{
    display:grid !important;
    grid-template-columns:34px 1fr 48px !important;
    gap:9px !important;
    align-items:center !important;
  }

  .companies-card .company-avatar,
  .companies-card .company-logo-card{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    border-radius:11px !important;
    font-size:12px !important;
  }

  .companies-card .company-card h4{
    font-size:13.5px !important;
    margin:0 0 2px !important;
    line-height:1.15 !important;
  }

  .companies-card .company-card small{
    display:block !important;
    font-size:10.5px !important;
    line-height:1.15 !important;
    max-height:24px !important;
    overflow:hidden !important;
  }

  .companies-card .mini-circle{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    font-size:12px !important;
  }

  .companies-card .company-status{
    margin:7px 0 0 !important;
    font-size:10.5px !important;
    padding:5px 8px !important;
    border-radius:999px !important;
    display:inline-flex !important;
  }

  .companies-card .company-metrics{
    display:none !important;
  }

  /* Módulos dentro de empresa: grilla pequeña de 2 columnas */
  .modules-card .module-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:9px !important;
  }

  .modules-card .module-card,
  .modules-card .module-tile{
    padding:10px !important;
    border-radius:15px !important;
    min-height:118px !important;
  }

  .modules-card .module-top{
    display:block !important;
  }

  .modules-card .module-icon{
    width:34px !important;
    height:34px !important;
    margin-bottom:7px !important;
  }

  .modules-card .module-card h4,
  .modules-card .module-tile h4,
  .modules-card .module-card h3,
  .modules-card .module-tile h3{
    font-size:12.5px !important;
    line-height:1.15 !important;
    margin:0 !important;
  }

  .modules-card .module-card p,
  .modules-card .module-tile p{
    display:none !important;
  }

  .modules-card .module-progress-row{
    margin-top:8px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:6px !important;
  }

  .modules-card .module-compliance-circle{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    font-size:11px !important;
  }

  .modules-card .module-state{
    font-size:9.5px !important;
    line-height:1.05 !important;
    max-width:72px !important;
  }

  .modules-card .module-metrics{
    display:none !important;
  }
}

@media (max-width: 420px){
  .modules-card .module-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  .modules-card .module-card,
  .modules-card .module-tile{
    min-height:112px !important;
    padding:9px !important;
  }

  .kpi-row .kpi-card,
  .summary-grid .summary-card,
  .compliance-stats .compliance-stat{
    flex-basis:138px !important;
    width:138px !important;
    min-width:138px !important;
  }
}

/* =========================================================
   ENCPREV - Ajuste móvil v33
   - Header del sistema solo con logo
   - Mejor contraste para logo transparente
   - Etiquetas/pills más legibles
   - Más carruseles horizontales para reducir scrolling
   - Consistencia móvil transversal
========================================================= */

/* Header interno: solo logo, sin texto ENCPREV */
.topbar .brand > div:not(.brand-logo),
.app-topbar .app-brand > div:not(.app-brand-logo),
.public-top .public-brand > div:not(.public-logo){
  display:none !important;
}

.topbar .brand,
.app-topbar .app-brand,
.public-top .public-brand{
  width:auto !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  margin:0 !important;
}

.brand-logo,
.app-brand-logo,
.public-logo{
  background-color:#ffffff !important;
  background-image:url('/encprev-premium/assets/img/logo-encprev-oficial.png') !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:86% auto !important;
  border:1px solid rgba(190,211,235,.95) !important;
  box-shadow:0 10px 24px rgba(8,43,99,.16) !important;
  overflow:hidden !important;
}

.brand-logo .svg-icon,
.app-brand-logo .svg-icon,
.public-logo .svg-icon{
  opacity:0 !important;
  visibility:hidden !important;
}

.brand-logo img,
.app-brand-logo img,
.public-logo img,
.encprev-brandmark{
  width:88% !important;
  height:88% !important;
  object-fit:contain !important;
  display:block !important;
}

@media (max-width: 900px){
  .topbar,
  .app-topbar,
  .public-top{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    padding:10px 12px !important;
    border-radius:0 0 18px 18px !important;
  }

  .brand-logo,
  .app-brand-logo,
  .public-logo{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    border-radius:16px !important;
    background-size:88% auto !important;
  }

  .topnav,
  .top-nav,
  .public-nav{
    flex:1 1 auto !important;
    width:auto !important;
    max-width:calc(100vw - 82px) !important;
    justify-content:flex-start !important;
    padding:2px 0 4px !important;
  }

  /* Etiquetas más limpias y legibles */
  .pill,
  .badge,
  .estado-ok,
  .estado-warning,
  .estado-danger,
  .estado-info,
  .company-status,
  .module-state,
  .mini,
  .tag,
  .label-chip{
    font-size:11px !important;
    line-height:1.15 !important;
    letter-spacing:.01em !important;
    padding:6px 9px !important;
    border-radius:999px !important;
    white-space:normal !important;
  }

  .mini,
  small,
  .company-card small{
    font-size:11.5px !important;
    line-height:1.25 !important;
  }

  /* Más interfaces móviles como carrusel: métricas, accesos, tarjetas de gestión */
  .grid.grid-3,
  .grid.grid-4,
  .quick-actions,
  .quick-grid,
  .admin-actions-grid,
  .stats-grid,
  .metrics-grid,
  .top-grid{
    display:flex !important;
    grid-template-columns:none !important;
    gap:10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x proximity !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    padding:2px 10px 12px !important;
    margin-left:-10px !important;
    margin-right:-10px !important;
  }

  .grid.grid-3::-webkit-scrollbar,
  .grid.grid-4::-webkit-scrollbar,
  .quick-actions::-webkit-scrollbar,
  .quick-grid::-webkit-scrollbar,
  .admin-actions-grid::-webkit-scrollbar,
  .stats-grid::-webkit-scrollbar,
  .metrics-grid::-webkit-scrollbar,
  .top-grid::-webkit-scrollbar{display:none !important;}

  .grid.grid-3 > *,
  .grid.grid-4 > *,
  .quick-actions > *,
  .quick-grid > *,
  .admin-actions-grid > *,
  .stats-grid > *,
  .metrics-grid > *,
  .top-grid > *{
    flex:0 0 154px !important;
    width:154px !important;
    min-width:154px !important;
    scroll-snap-align:start !important;
  }

  .metric{
    min-height:96px !important;
    padding:13px !important;
    border-radius:17px !important;
  }

  .metric strong{
    font-size:22px !important;
    line-height:1.05 !important;
  }

  .metric span{
    font-size:10.5px !important;
    line-height:1.15 !important;
  }

  /* Formularios y tablas: más respiración en celular */
  .form-grid,
  .filter-grid{
    gap:10px !important;
  }

  .section-title{
    gap:8px !important;
    margin-bottom:12px !important;
  }

  .section-title h3,
  .section-title h2{
    margin-bottom:4px !important;
  }

  /* Listados grandes compactos */
  .table-wrap{
    border-radius:16px !important;
    max-width:100% !important;
  }

  th,td{
    padding:10px 11px !important;
  }

  /* Evita que botones largos estiren tarjetas pequeñas */
  .card .actions,
  .feature .actions,
  .section-title .actions{
    display:flex !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    scrollbar-width:none !important;
  }

  .card .actions::-webkit-scrollbar,
  .feature .actions::-webkit-scrollbar,
  .section-title .actions::-webkit-scrollbar{display:none !important;}

  .card .actions .btn,
  .feature .actions .btn,
  .section-title .actions .btn{
    width:auto !important;
    min-width:max-content !important;
    flex:0 0 auto !important;
    padding:0 13px !important;
  }
}

@media (max-width: 420px){
  .grid.grid-3 > *,
  .grid.grid-4 > *,
  .quick-actions > *,
  .quick-grid > *,
  .admin-actions-grid > *,
  .stats-grid > *,
  .metrics-grid > *,
  .top-grid > *{
    flex-basis:142px !important;
    width:142px !important;
    min-width:142px !important;
  }

  .brand-logo,
  .app-brand-logo,
  .public-logo{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
  }

  .topnav,
  .top-nav,
  .public-nav{
    max-width:calc(100vw - 74px) !important;
  }
}


/* =========================================================
   ENCPREV - Ajuste visual v34
   - Aplica el fondo gráfico institucional dentro del sistema
   - Evita que app-shell pinte un bloque gris que tape las formas
   - Mantiene tarjetas blancas y navegación con contraste
========================================================= */
:root{
  --enc-bg-svg-system: url('/encprev-premium/assets/img/brand-background.svg');
}

html, body{
  min-height:100%;
}

body{
  background:#f7fbff !important;
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:var(--enc-bg-svg-system) center top / cover no-repeat;
  opacity:.72;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(247,251,255,.76) 68%,rgba(247,251,255,.92));
}

.app-shell,
.dashboard-shell,
.page-shell,
.main-shell,
.main-with-rail,
.layout-with-sidebar,
.content-with-sidebar,
.content,
.app-content,
.main-content,
.page-content,
main{
  background:transparent !important;
}

.app-shell,
.public-wrap,
.login-card,
.login-box,
.topbar,
.app-topbar,
.icon-rail,
.sidebar,
.side-nav,
.left-sidebar,
.content,
.app-content,
.main-content,
.page-content,
main{
  position:relative;
  z-index:1;
}

.section-card,
.card,
.card-modern,
.panel,
.hero-panel,
.hero-card,
.admin-panel,
.form-panel,
.document-card,
.people-card,
.company-card,
.quick-card,
.compliance-card,
.modules-card,
.kpi-card,
.global-card{
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(8px);
}

@media (max-width:900px){
  body::before{
    background-size:auto 118%;
    background-position:center top;
    opacity:.78;
  }
  body::after{
    background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(247,251,255,.82) 62%,rgba(247,251,255,.96));
  }
}

/* =========================================================
   ENCPREV - V35 sidebar unificado y navegación móvil
   Objetivo: mismo lenguaje visual en rail/sidebar/topbar, logo único y navegación móvil consistente.
========================================================= */

:root{
  --encprev-rail-width: 104px;
  --encprev-blue-deep: #061f49;
  --encprev-blue: #155eef;
  --encprev-blue-2: #0b3b82;
  --encprev-border: #e5eaf2;
  --encprev-soft: rgba(255,255,255,.94);
}

/* Header interno: solo logo, sin texto ENCPREV en la barra superior */
.topbar .brand,
.app-topbar .app-brand{
  min-width:auto !important;
  gap:0 !important;
}

.topbar .brand > div:not(.brand-logo),
.app-topbar .app-brand > div:not(.app-brand-logo){
  display:none !important;
}

.brand-logo,
.app-brand-logo{
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(255,255,255,.92) !important;
  box-shadow:0 10px 28px rgba(2,8,23,.18) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

.brand-logo .svg-icon,
.app-brand-logo .svg-icon{
  display:none !important;
}

.encprev-brandmark{
  width:88% !important;
  height:88% !important;
  object-fit:contain !important;
  display:block !important;
}

/* Rail lateral escritorio: misma apariencia base */
.rail,
.icon-rail,
.sidebar,
.side-nav,
.left-sidebar,
aside.sidebar{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,249,255,.96)) !important;
  border:1px solid var(--encprev-border) !important;
  box-shadow:0 18px 38px rgba(15,23,42,.08) !important;
}

.rail,
.side-nav,
.left-sidebar,
aside.sidebar{
  border-radius:28px !important;
}

.rail-menu,
.side-nav .rail-menu,
.sidebar .rail-menu{
  gap:10px !important;
}

.rail-link,
.sidebar .rail-link,
.side-nav .rail-link,
.left-sidebar .rail-link,
.icon-rail .rail-link{
  min-height:70px !important;
  min-width:68px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid #e6edf7 !important;
  color:var(--encprev-blue-deep) !important;
  box-shadow:none !important;
  text-decoration:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:9px 7px !important;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.rail-link:hover,
.rail-link.active,
.sidebar .rail-link:hover,
.sidebar .rail-link.active,
.side-nav .rail-link:hover,
.side-nav .rail-link.active,
.left-sidebar .rail-link:hover,
.left-sidebar .rail-link.active,
.icon-rail .rail-link:hover,
.icon-rail .rail-link.active{
  background:linear-gradient(135deg,var(--encprev-blue),var(--encprev-blue-2)) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 12px 24px rgba(21,94,239,.24) !important;
  transform:translateY(-1px) !important;
}

.rail-link .svg-icon,
.sidebar .rail-link .svg-icon,
.side-nav .rail-link .svg-icon,
.left-sidebar .rail-link .svg-icon{
  width:23px !important;
  height:23px !important;
  flex:0 0 auto !important;
}

.rail-text,
.rail-link span.rail-text,
.sidebar .rail-text,
.side-nav .rail-text{
  display:block !important;
  max-width:76px !important;
  font-size:10px !important;
  line-height:1.08 !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  text-align:center !important;
  white-space:normal !important;
  word-break:normal !important;
}

.rail-profile{
  border-radius:20px !important;
  background:#fff !important;
  border:1px solid #e6edf7 !important;
  box-shadow:0 8px 20px rgba(15,23,42,.045) !important;
}

.rail-help{
  border-radius:18px !important;
  min-height:46px !important;
}

/* Topbar secundario de páginas admin antiguas: mismo tratamiento visual */
.topbar{
  background:linear-gradient(90deg,#061f49 0%,#082b63 55%,#0b3b82 100%) !important;
  box-shadow:0 8px 24px rgba(6,31,73,.22) !important;
}

.topnav a,
.topbar a,
.top-nav a{
  border-radius:12px !important;
}

/* Móvil: barra inferior horizontal con opciones visibles y etiquetas legibles */
@media (max-width:900px){
  body{
    padding-bottom:92px !important;
  }

  .topbar,
  .app-topbar{
    height:66px !important;
    min-height:66px !important;
    padding:9px 12px !important;
    position:sticky !important;
    top:0 !important;
    z-index:1000 !important;
  }

  .brand-logo,
  .app-brand-logo{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    border-radius:15px !important;
  }

  .topnav,
  .top-nav{
    gap:6px !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
    max-width:calc(100vw - 74px) !important;
    justify-content:flex-end !important;
  }

  .topnav::-webkit-scrollbar,
  .top-nav::-webkit-scrollbar{display:none !important;}

  .topnav a,
  .top-nav a{
    min-height:36px !important;
    padding:7px 9px !important;
    font-size:11px !important;
    white-space:nowrap !important;
    background:rgba(255,255,255,.08) !important;
  }

  .topnav-separator,
  .top-nav-separator{display:none !important;}

  .layout,
  .main-with-rail,
  .layout-with-sidebar,
  .content-with-sidebar{
    display:block !important;
    grid-template-columns:1fr !important;
  }

  .rail,
  .icon-rail,
  .sidebar,
  .side-nav,
  .left-sidebar,
  aside.sidebar{
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    top:auto !important;
    width:auto !important;
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    margin:0 !important;
    padding:8px !important;
    border-radius:24px !important;
    z-index:1200 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    backdrop-filter:blur(14px) !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .rail::-webkit-scrollbar,
  .icon-rail::-webkit-scrollbar,
  .sidebar::-webkit-scrollbar,
  .side-nav::-webkit-scrollbar,
  .left-sidebar::-webkit-scrollbar{display:none !important;}

  .rail > div,
  .icon-rail > div,
  .sidebar > div,
  .side-nav > div,
  .left-sidebar > div,
  aside.sidebar > div{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex:0 0 auto !important;
    width:auto !important;
  }

  .rail-menu,
  .side-nav .rail-menu,
  .sidebar .rail-menu,
  .icon-rail .rail-menu{
    display:flex !important;
    grid-template-columns:none !important;
    align-items:center !important;
    gap:8px !important;
    width:auto !important;
  }

  .rail-link,
  .sidebar .rail-link,
  .side-nav .rail-link,
  .left-sidebar .rail-link,
  .icon-rail .rail-link{
    flex:0 0 74px !important;
    width:74px !important;
    min-width:74px !important;
    max-width:74px !important;
    min-height:56px !important;
    height:56px !important;
    border-radius:18px !important;
    padding:6px 5px !important;
    gap:4px !important;
  }

  .rail-link .svg-icon,
  .sidebar .rail-link .svg-icon,
  .side-nav .rail-link .svg-icon,
  .left-sidebar .rail-link .svg-icon{
    width:20px !important;
    height:20px !important;
  }

  .rail-text,
  .rail-link span.rail-text,
  .sidebar .rail-text,
  .side-nav .rail-text{
    display:block !important;
    max-width:66px !important;
    font-size:9.2px !important;
    line-height:1.04 !important;
    letter-spacing:-.01em !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .rail-footer,
  .rail-profile,
  .rail-help{
    display:none !important;
  }

  .app-content,
  .content,
  .main-content,
  main,
  .page-content{
    padding-bottom:105px !important;
  }

  /* Carruseles más consistentes en vistas móviles */
  .kpi-row,
  .summary-grid,
  .stats-grid,
  .metrics-grid,
  .quick-actions,
  .module-grid,
  .modules-grid,
  .companies-grid,
  .empresa-grid,
  .cards-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:12px !important;
    scroll-snap-type:x proximity !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .kpi-row::-webkit-scrollbar,
  .summary-grid::-webkit-scrollbar,
  .stats-grid::-webkit-scrollbar,
  .metrics-grid::-webkit-scrollbar,
  .quick-actions::-webkit-scrollbar,
  .module-grid::-webkit-scrollbar,
  .modules-grid::-webkit-scrollbar,
  .companies-grid::-webkit-scrollbar,
  .empresa-grid::-webkit-scrollbar,
  .cards-grid::-webkit-scrollbar{display:none !important;}

  .kpi-row > *,
  .summary-grid > *,
  .stats-grid > *,
  .metrics-grid > *,
  .quick-actions > *,
  .companies-grid > *,
  .empresa-grid > *,
  .cards-grid > *{
    flex:0 0 78% !important;
    scroll-snap-align:start !important;
  }

  .module-grid > *,
  .modules-grid > *{
    flex:0 0 calc(50% - 8px) !important;
    min-width:142px !important;
    scroll-snap-align:start !important;
  }

  .pill,
  .badge,
  .status-pill,
  .estado,
  .tag,
  .chip{
    font-size:11px !important;
    line-height:1.1 !important;
    padding:7px 10px !important;
    border-radius:999px !important;
    min-height:28px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    white-space:nowrap !important;
  }
}


/* =========================================================
   ENCPREV - Mejora móvil auditoría general
   Reduce scroll horizontal, mejora formularios, tarjetas y navegación.
========================================================= */
@media (max-width: 900px) {
  body {
    background:
      url("../img/brand-background.svg") center top / cover no-repeat fixed,
      linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%) !important;
  }

  .topbar,
  .app-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  .brand {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .brand-logo,
  .app-brand-logo,
  .public-logo {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 14px !important;
  }

  .brand h1 {
    font-size: 17px !important;
    line-height: 1.05 !important;
  }

  .brand span {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .topnav {
    width: 100% !important;
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 2px !important;
    scrollbar-width: none;
  }

  .topnav::-webkit-scrollbar { display:none; }

  .topnav a {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.12) !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .topnav-separator {
    display: none !important;
  }

  .layout,
  .layout-system,
  .dashboard-layout {
    display: block !important;
    padding: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .content,
  .main-content,
  .page-content,
  .dashboard-content {
    width: 100% !important;
    padding: 10px !important;
    overflow-x: hidden !important;
  }

  .inner {
    width: 100% !important;
    max-width: 100% !important;
    zoom: 1 !important;
  }

  .hero-grid,
  .quick-actions,
  .kpi-row,
  .modules-grid,
  .items-grid,
  .documents-grid,
  .people-grid,
  .stats-grid,
  .cards-grid,
  .company-grid,
  .doc-grid,
  .other-grid,
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .hero-card,
  .quick-card,
  .kpi-card,
  .item-card,
  .document-card,
  .section-card,
  .upload-card,
  .surface-card,
  .module-card,
  .person-card,
  .stat-card {
    border-radius: 18px !important;
    padding: 16px !important;
    min-width: 0 !important;
  }

  .hero-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 0 !important;
  }

  .hero-icon,
  .person-photo {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
  }

  .item-actions,
  .file-actions,
  .document-actions,
  .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .btn-primary,
  .btn-secondary,
  .btn-action,
  .btn-delete,
  .btn-submit,
  button[type="submit"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .movement-table-wrap,
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .photo-uploader {
    max-width: 100% !important;
  }

  .sticky-submit {
    position: static !important;
    display: block !important;
  }
}


/* =========================================================
   V45.2 · Corrección etiquetas duplicadas navegación móvil
   El sidebar moderno ya incluye .rail-text. La capa visual
   heredada generaba además una segunda etiqueta desde title.
   ========================================================= */
@media (max-width: 860px) {
  .rail-link[title]::after,
  .sidebar a[title]::after,
  .left-sidebar a[title]::after,
  aside.sidebar a[title]::after,
  .side-nav a[title]::after,
  .icon-rail a[title]::after {
    content: none !important;
    display: none !important;
  }

  .rail-link .rail-text,
  .rail-link[title] .rail-text,
  .sidebar .rail-text,
  .side-nav .rail-text,
  .left-sidebar .rail-text,
  .icon-rail .rail-text {
    display: block !important;
  }
}


/* =========================================================
   V45.3 · Corrección topbar móvil compacta
   Evita el encabezado alto con logo centrado y botones abajo.
   Mantiene solo el isotipo en móvil y alinea acciones a la derecha.
   ========================================================= */
@media (max-width: 900px) {
  .topbar,
  .app-topbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 66px !important;
    padding: 10px 12px !important;
    border-bottom-left-radius: 28px !important;
    border-bottom-right-radius: 28px !important;
  }

  .topbar .brand,
  .app-topbar .app-brand {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    gap: 0 !important;
    justify-content: flex-start !important;
  }

  .topbar .brand > div:not(.brand-logo),
  .app-topbar .app-brand > div:not(.app-brand-logo) {
    display: none !important;
  }

  .topbar .brand-logo,
  .app-topbar .app-brand-logo {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
  }

  .topbar .topnav,
  .app-topbar .top-nav {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    gap: 8px !important;
    justify-content: flex-end !important;
  }
}

@media (max-width: 520px) {
  .topbar .topnav,
  .app-topbar .top-nav {
    max-width: none !important;
  }

  .topbar .topnav a,
  .app-topbar .top-nav a {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}