/* ======================================================================
   Responsive profesional total - Inmobiliaria / LConsulting Group
   Corrige dashboard, portafolio, webs internas, tablas, formularios y modales.
   Prioridad: mobile real, botones visibles, menu oscuro con letras blancas,
   sin blur y sin espacios grandes.
   ====================================================================== */
:root{
  --rpt-dark:#071426;
  --rpt-dark-2:#0a2346;
  --rpt-blue:#2563eb;
  --rpt-blue-2:#1d4ed8;
  --rpt-gold:#e6b958;
  --rpt-white:#ffffff;
  --rpt-text:#0f172a;
  --rpt-muted:#64748b;
  --rpt-line:rgba(15,23,42,.10);
  --rpt-shadow:0 22px 70px rgba(2,6,23,.20);
}
*{box-sizing:border-box;}
html,body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;}
body{min-width:0;}
img,svg,video,canvas,iframe{max-width:100%;}
a,button,input,select,textarea{font:inherit;}
a,button{ -webkit-tap-highlight-color: transparent; }
button{cursor:pointer;}

/* Sin blur en menus/overlays: evita pantalla borrosa */
.header,.topbar,header,.glass,.modal-overlay,.overlay,.sidebar,.panel,.cardx,.kpi{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.overlay,.modal-overlay{background:rgba(2,6,23,.48) !important;}

/* Robustece contenido y evita overflow */
.app,.main,.content,.panel,.card,.cardx,.kpi,.section,.seccion,.row,.container,.contenedor,.module-wrap,.iframe-wrap,.frame-wrap{min-width:0;}
input:not([type="checkbox"]):not([type="radio"]),select,textarea,.form-control,.form-select{max-width:100%;}
.table-responsive,.table-wrap,.overflow-auto{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{max-width:100%;}
th,td{overflow-wrap:anywhere;}

/* DASHBOARD: sidebar oscuro y legible siempre */
.sidebar, aside.sidebar{
  background:linear-gradient(180deg,var(--rpt-dark),var(--rpt-dark-2)) !important;
  color:#fff !important;
}
.sidebar a,.sidebar .nav-item,.sidebar .nav-link,.sidebar .menu a,
.sidebar i,.sidebar span,.sidebar .label,.sidebar .section-title,.sidebar .small{
  color:#fff !important;
}
.sidebar .nav-item,.sidebar .nav-link,.sidebar .menu a{
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.07) !important;
}
.sidebar .nav-item:hover,.sidebar .nav-link:hover,.sidebar .menu a:hover,
.sidebar .nav-item.active,.sidebar .nav-link.active,.sidebar .menu a.active{
  background:rgba(37,99,235,.32) !important;
  border-color:rgba(37,99,235,.42) !important;
  color:#fff !important;
}
.sidebar .nav-item.active::before{background:var(--rpt-gold) !important;}

/* DASHBOARD desktop: mantiene todo ordenado */
.topbar{min-width:0;}
.topbar .brandbox{min-width:0;}
.topbar .brandbox .title{min-width:0;}
.topbar .brandbox .title b,
.topbar .brandbox .title span{overflow-wrap:anywhere;}
.top-actions{min-width:0;}
.top-actions .btn-top,.top-actions a,.top-actions button{
  white-space:nowrap;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.section-frame,iframe{width:100%;}

/* Landing / portafolio: sin espacios grandes */
.hero-panel{min-height:auto !important;}
.hero{padding-top:18px !important;}
.hero-main{min-width:0;}
.hero-main h1,.panel-header h2,.feature-header h2,.cta-main h2,.market-header h2{overflow-wrap:anywhere;}
.card-sector,.feature-card,.smart-card,.base-card{min-width:0;}

/* Boton hamburguesa inyectado para portafolio */
.mobile-nav-toggle{
  display:none;
  appearance:none;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:#0f172a;
  min-height:42px;
  min-width:42px;
  width:42px;
  height:42px;
  border-radius:12px;
  align-items:center;
  justify-content:center;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(15,23,42,.08);
  flex:0 0 auto;
}
.mobile-nav-toggle span{display:block;width:18px;height:2px;background:currentColor;position:relative;border-radius:999px;}
.mobile-nav-toggle span:before,.mobile-nav-toggle span:after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:999px;}
.mobile-nav-toggle span:before{top:-6px;}.mobile-nav-toggle span:after{top:6px;}
.mobile-nav-toggle.is-open span{background:transparent;}
.mobile-nav-toggle.is-open span:before{top:0;transform:rotate(45deg);}
.mobile-nav-toggle.is-open span:after{top:0;transform:rotate(-45deg);}

/* Menu mobile para webs internas tipo Tailwind */
.mobile-web-menu{
  display:none;
  padding:10px 0 12px;
  border-top:1px solid rgba(15,23,42,.08);
}
.mobile-web-menu.is-open{display:grid;gap:8px;}
.mobile-web-menu a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  color:#0f172a !important;
  border:1px solid rgba(15,23,42,.10);
  font-weight:800;
  text-decoration:none;
}

/* Tablet */
@media (max-width: 1100px){
  .kpi{grid-column:span 4;}
  .dash-row{grid-template-columns:1fr !important;}
  .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .feature-grid,.smart-grid,.base-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

/* Dashboard mobile */
@media (max-width: 992px){
  body{overflow-x:hidden !important;}
  .topbar{
    height:auto !important;
    min-height:64px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:10px !important;
    padding:10px 12px !important;
    position:sticky !important;
    top:0 !important;
    z-index:1000 !important;
    background:linear-gradient(135deg,#071426,#0a2346) !important;
    color:#fff !important;
    box-shadow:0 12px 28px rgba(2,6,23,.18) !important;
  }
  .brandbox{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }
  .brandbox img{
    width:42px !important;
    height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
    object-fit:cover !important;
    flex:0 0 auto !important;
  }
  .brandbox .title{min-width:0 !important;flex:1 1 auto !important;}
  .brandbox .title b{
    color:#fff !important;
    font-size:14px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:100% !important;
  }
  .brandbox .title span{
    color:rgba(255,255,255,.78) !important;
    font-size:11px !important;
    line-height:1.25 !important;
    display:block !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:100% !important;
  }
  .top-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
    align-items:stretch !important;
  }
  .top-actions .btn-top,
  .top-actions a,
  .top-actions button,
  #btnSidebar,
  #btnCambiarContrasena{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    min-width:0 !important;
    min-height:40px !important;
    height:auto !important;
    justify-content:center !important;
    align-items:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    border-radius:12px !important;
    font-size:12px !important;
    font-weight:900 !important;
    padding:8px 9px !important;
    color:#fff !important;
  }
  #btnSidebar,
  .top-actions .sidebar-toggle{
    background:var(--rpt-blue) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    color:#fff !important;
    grid-column:1 !important;
  }
  #btnCambiarContrasena,
  .top-actions .primary{
    background:var(--rpt-blue) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    color:#fff !important;
    grid-column:2 !important;
  }
  .top-actions a[href*="logout"]{
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.20) !important;
    color:#fff !important;
    grid-column:3 !important;
  }
  .app{
    display:block !important;
    width:100% !important;
    min-height:calc(100dvh - 110px) !important;
    padding:12px !important;
    background:#f5f8fc !important;
  }
  .sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:min(84vw,300px) !important;
    max-width:300px !important;
    height:100dvh !important;
    z-index:1100 !important;
    transform:translateX(-110%) !important;
    transition:transform .22s ease !important;
    border-radius:0 18px 18px 0 !important;
    box-shadow:var(--rpt-shadow) !important;
    overflow-y:auto !important;
    padding:18px 14px !important;
  }
  .sidebar.show,.sidebar.open{
    left:0 !important;
    transform:translateX(0) !important;
  }
  .main{
    width:100% !important;
    padding:0 !important;
    overflow:visible !important;
  }
  .page-title{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:8px !important;
    margin-bottom:12px !important;
  }
  .page-title h2{font-size:18px !important;}
  .badge-soft{width:100% !important;justify-content:center !important;white-space:normal !important;}
  .kpi{grid-column:span 6 !important;}
  .section-frame{height:calc(100dvh - 178px) !important;min-height:560px !important;border-radius:16px !important;}
  footer{padding:12px !important;font-size:12px !important;}
}

/* Landing / portafolio mobile */
@media (max-width: 820px){
  .contenedor{padding-left:14px !important;padding-right:14px !important;}
  .header{position:sticky !important;top:0 !important;background:#fff !important;border-bottom:1px solid rgba(15,23,42,.08) !important;}
  .header-inner{
    min-height:auto !important;
    padding:10px 0 !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    flex-wrap:wrap !important;
  }
  .brand-link{width:auto !important;min-width:0 !important;flex:1 1 auto !important;}
  .brand{min-width:0 !important;}
  .brand-logo-wrap,.brand-icon{width:44px !important;height:44px !important;border-radius:14px !important;}
  .brand-texto{font-size:20px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:62vw !important;}
  .mobile-nav-toggle{display:inline-flex !important;}
  .header .nav{
    order:3 !important;
    width:100% !important;
    display:none !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:8px 0 2px !important;
  }
  .header .nav.is-open{display:grid !important;}
  .header .nav a,.header .nav .nav-link,.header .nav .btn-principal{
    width:100% !important;
    min-height:42px !important;
    justify-content:center !important;
    text-align:center !important;
    padding:10px 12px !important;
    white-space:normal !important;
    line-height:1.15 !important;
  }
  .hero{padding:10px 0 16px !important;}
  .hero-panel{border-radius:22px !important;min-height:auto !important;}
  .hero-main{padding:22px 18px !important;}
  .pill{margin-bottom:14px !important;min-height:34px !important;padding:7px 12px !important;font-size:10px !important;max-width:100%;white-space:normal !important;}
  .hero-main h1{font-size:clamp(31px,9vw,38px) !important;line-height:1.04 !important;letter-spacing:-1.1px !important;margin-bottom:16px !important;}
  .hero-subtitulo,.hero-contexto{font-size:15px !important;line-height:1.55 !important;margin-bottom:14px !important;}
  .hero-botones{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;width:100% !important;}
  .btn-principal,.btn-secundario,.btn-demo{width:100% !important;min-width:0 !important;min-height:46px !important;font-size:14px !important;padding:12px 16px !important;}
  .panel,.feature-panel,.smart-panel,.cta-panel,.market-panel{border-radius:22px !important;margin-top:16px !important;}
  .panel-header,.cards-wrap,.feature-header,.feature-grid,.smart-grid,.cta-main,.cta-side,.market-header,.base-grid{padding:18px !important;}
  .panel-header h2,.feature-header h2,.cta-main h2,.market-header h2{font-size:clamp(28px,8vw,34px) !important;line-height:1.07 !important;letter-spacing:-.8px !important;}
  .cards-grid,.feature-grid,.smart-grid,.base-grid{grid-template-columns:1fr !important;gap:14px !important;}
  .card-body,.smart-body{padding:18px !important;}
  .card-sector h3,.feature-card h3,.smart-body h3,.base-card h3{font-size:22px !important;min-height:auto !important;}
  .cta-grid,.market-header{grid-template-columns:1fr !important;}
  .modal,.modal-overlay{padding:10px !important;align-items:center !important;}
  .modal-box,.modal-contenido{width:100% !important;max-width:100% !important;height:auto !important;max-height:calc(100dvh - 20px) !important;border-radius:18px !important;}
  .modal-header{padding:14px !important;}
  .modal-frame-wrap,.modal-iframe{height:72dvh !important;}
  .contacto-fijo{right:14px !important;bottom:18px !important;width:52px !important;height:52px !important;}
}

/* Webs internas y Tailwind pages */
@media (max-width: 768px){
  nav.fixed{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:#fff !important;}
  .hero-gradient{min-height:auto !important;padding-top:96px !important;padding-bottom:56px !important;}
  header.min-h-screen{min-height:auto !important;}
  h1{overflow-wrap:anywhere;}
  .grid{min-width:0;}
}

/* Tablas como tarjetas en celular */
@media (max-width: 760px){
  .kpi{grid-column:span 12 !important;}
  .row{--bs-gutter-x:0 !important;margin-left:0 !important;margin-right:0 !important;}
  .row > *{padding-left:0 !important;padding-right:0 !important;}
  table.rpt-responsive-table{border:0 !important;background:transparent !important;box-shadow:none !important;}
  table.rpt-responsive-table thead{display:none !important;}
  table.rpt-responsive-table tbody,table.rpt-responsive-table tr,table.rpt-responsive-table td{display:block !important;width:100% !important;}
  table.rpt-responsive-table tr{
    margin:0 0 12px !important;
    border:1px solid rgba(15,23,42,.10) !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:0 8px 22px rgba(15,23,42,.06) !important;
    overflow:hidden !important;
  }
  table.rpt-responsive-table td{
    display:grid !important;
    grid-template-columns:minmax(110px,38%) minmax(0,1fr) !important;
    gap:10px !important;
    align-items:start !important;
    padding:10px 12px !important;
    border:0 !important;
    border-bottom:1px solid rgba(15,23,42,.07) !important;
    text-align:left !important;
    min-height:40px !important;
  }
  table.rpt-responsive-table td:last-child{border-bottom:0 !important;}
  table.rpt-responsive-table td::before{
    content:attr(data-label);
    color:#64748b;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
    overflow-wrap:anywhere;
  }
  table.rpt-responsive-table td:empty::after{content:"-";color:#94a3b8;}
}

@media (max-width: 520px){
  .topbar{padding:10px 12px !important;}
  .top-actions{grid-template-columns:42px minmax(0,1fr) minmax(0,1fr) !important;gap:7px !important;}
  .top-actions .btn-top,.top-actions a,.top-actions button{
    min-height:40px !important;
    font-size:11px !important;
    padding:8px 6px !important;
    gap:5px !important;
  }
  #btnSidebar{font-size:0 !important;gap:0 !important;}
  #btnSidebar i{font-size:16px !important;margin:0 !important;}
  .main{padding:0 !important;}
  .section-frame{height:calc(100dvh - 190px) !important;min-height:500px !important;}
  .cardx .cardx-head,.cardx .cardx-body{padding:12px !important;}
  .list-clean li{flex-direction:column !important;gap:4px !important;}
  .text-end{text-align:left !important;}
}

@media (max-width: 380px){
  #btnCambiarContrasena,
  .top-actions a[href*="logout"]{font-size:0 !important;gap:0 !important;}
  #btnCambiarContrasena i,
  .top-actions a[href*="logout"] i{font-size:16px !important;margin:0 !important;}
}