/* ======================================================================
   Responsive profesional total - CRM / LConsulting Group
   Mobile-first fixes: botones visibles, menu oscuro con letras blancas,
   sin blur, sin espacios grandes, tablas en tarjetas.
   ====================================================================== */
:root{
  --rp-dark:#0b1220;
  --rp-dark-2:#111b2e;
  --rp-white:#ffffff;
  --rp-text:#0f172a;
  --rp-muted:#64748b;
  --rp-blue:#2563eb;
  --rp-blue-2:#1d4ed8;
  --rp-line:rgba(15,23,42,.10);
  --rp-shadow:0 22px 70px rgba(2,6,23,.18);
}
*{box-sizing:border-box;}
html,body{max-width:100%;overflow-x:hidden;}
body{min-width:0;-webkit-text-size-adjust:100%;}
img,svg,video,canvas,iframe{max-width:100%;}
a,button,input,select,textarea{font:inherit;}
button,.btn,a{ -webkit-tap-highlight-color:transparent; }

/* Evita blur general en menus y overlays */
.header,.topbar,header,.modal-overlay,.overlay,.glass-dark,.crm-login-card,.card,.module-wrap,.panel{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.overlay,.modal-overlay{background:rgba(2,6,23,.48) !important;}

/* DASHBOARD CRM / SaaS: header mobile con botones siempre visibles */
.topbar, header{
  min-width:0;
}
.topbar .actions,
.top-actions{
  min-width:0;
}
.topbar .actions .btn,
.top-actions .btn,
header .btn{
  white-space:nowrap;
  text-align:center;
  align-items:center;
  justify-content:center;
}

/* Menu lateral siempre oscuro y legible */
.sidebar,
aside.sidebar{
  background:linear-gradient(180deg,var(--rp-dark),var(--rp-dark-2)) !important;
  color:#fff !important;
}
.sidebar .brand strong,
.sidebar .brand span,
.sidebar .title strong,
.sidebar .title span,
.sidebar .section-title,
.sidebar .nav-section,
.sidebar .sidebar-title,
.sidebar .menu a,
.sidebar .menu a i,
.sidebar .menu a .label,
.sidebar .nav a,
.sidebar .nav a i,
.sidebar .nav a span,
.sidebar .nav-link,
.sidebar .nav-link i,
.sidebar .nav-link span{
  color:#fff !important;
}
.sidebar .section-title,
.sidebar .nav-section,
.sidebar .brand span,
.sidebar .title span{opacity:.78;}
.sidebar .nav a,
.sidebar .nav-link,
.sidebar .menu a{
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.07) !important;
}
.sidebar .nav a:hover,
.sidebar .nav-link:hover,
.sidebar .menu a:hover,
.sidebar .nav a.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;
}

/* Iframes y contenido */
.module-wrap,.iframe-wrap,.frame-wrap{min-width:0;}
.module-iframe, iframe{max-width:100%;}
.content,.main,.panel,.card,.section,.seccion{min-width:0;}

/* Tablas robustas desktop */
.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;word-break:normal;}

/* Formularios y acciones */
input:not([type="checkbox"]):not([type="radio"]),select,textarea,.form-control,.form-select{max-width:100%;}
form,.filters,.filter-bar,.acciones,.actions,.top-actions,.form-actions,.btn-row{min-width:0;}

/* Landing / portafolio: sin espacios grandes */
.header{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.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{overflow-wrap:anywhere;}

/* Boton hamburguesa inyectado para portafolios y webs */
.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;
  border-radius:12px;
  align-items:center;
  justify-content:center;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}
.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);}

/* ======================= Tablet ======================= */
@media (max-width: 1100px){
  .kpi{grid-column:span 4;}
  .kpi-grid{gap:12px;}
  .dash-row{grid-template-columns:1fr !important;}
}

/* ======================= Mobile dashboard ======================= */
@media (max-width: 992px){
  body{overflow-x:hidden !important;}
  .app{width:100%;min-width:0;}

  /* CRM dashboard con topbar blanca: conserva los botones visibles */
  .topbar{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    padding:10px 12px !important;
    position:sticky !important;
    top:0 !important;
    z-index:1000 !important;
    background:#fff !important;
    color:var(--rp-text) !important;
    border-bottom:1px solid rgba(15,23,42,.10) !important;
    box-shadow:0 8px 22px rgba(15,23,42,.08) !important;
  }
  .topbar .left{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }
  .topbar .headline{min-width:0;}
  .topbar .headline .h,
  .topbar .headline .s{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  .topbar .actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto !important;
    gap:8px !important;
  }
  .topbar .actions .btn,
  .topbar .actions button,
  .topbar .actions a,
  .topbar .hamburger{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    min-width:0 !important;
    min-height:40px !important;
    border-radius:12px !important;
    font-size:12px !important;
    font-weight:900 !important;
    padding:8px 9px !important;
  }
  .topbar .actions .btn-soft,
  .topbar .actions .btn:not(.btn-dark):not(.btn-primary):not(.primary){
    color:#0f172a !important;
    background:#fff !important;
    border:1px solid rgba(15,23,42,.14) !important;
  }
  .topbar .actions .btn-dark,
  .topbar .actions a[href*="logout"]{
    color:#fff !important;
    background:#0f172a !important;
    border-color:#0f172a !important;
  }
  .topbar .hamburger{
    color:#fff !important;
    background:#2563eb !important;
    border:1px solid #2563eb !important;
  }

  /* Dashboards con header oscuro */
  body > header,
  .hotel-saas-ui .topbar{
    color:#fff !important;
    background:linear-gradient(90deg,var(--rp-dark),var(--rp-dark-2)) !important;
  }
  body > header .brand-title .t1,
  body > header .brand-title .t2,
  body > header .brand-left,
  body > header .top-actions .btn,
  body > header a,
  .hotel-saas-ui .topbar .titles .h1,
  .hotel-saas-ui .topbar .titles .sub{
    color:#fff !important;
  }
  body > header .top-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto !important;
    gap:8px !important;
  }
  body > header .top-actions .btn,
  body > header .top-actions button,
  body > header .top-actions a{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    min-width:0 !important;
    min-height:40px !important;
    font-size:12px !important;
    padding:8px 9px !important;
    color:#fff !important;
  }
  body > header .top-actions .btn.primary,
  body > header .top-actions #btnMenuMobile,
  body > header .top-actions #btnMenu,
  body > header .top-actions .btn.icon{
    background:rgba(37,99,235,.95) !important;
    border-color:rgba(255,255,255,.16) !important;
  }
  body > header .top-actions a[href*="logout"]{
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.20) !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(--rp-shadow) !important;
    overflow-y:auto !important;
  }
  .sidebar.show,
  .sidebar.open{
    left:0 !important;
    transform:translateX(0) !important;
  }
  .overlay.show{display:block !important;}
  .content{padding:14px !important;}
  .module-iframe{height:calc(100dvh - 170px) !important;min-height:560px !important;}
  .iframe-wrap{height:calc(100dvh - 150px) !important;min-height:560px !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;flex:0 0 auto !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;}
}

/* ======================= Tablas como tarjetas ======================= */
@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.crm-responsive-table,
  table.responsive-table{
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  table.crm-responsive-table thead,
  table.responsive-table thead{display:none !important;}
  table.crm-responsive-table tbody,
  table.crm-responsive-table tr,
  table.crm-responsive-table td,
  table.responsive-table tbody,
  table.responsive-table tr,
  table.responsive-table td{display:block !important;width:100% !important;}
  table.crm-responsive-table tr,
  table.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.crm-responsive-table td,
  table.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.crm-responsive-table td:last-child,
  table.responsive-table td:last-child{border-bottom:0 !important;}
  table.crm-responsive-table td::before,
  table.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.crm-responsive-table td:empty::after,
  table.responsive-table td:empty::after{content:"-";color:#94a3b8;}
}

@media (max-width: 520px){
  .topbar .headline .h{font-size:14px !important;}
  .topbar .headline .s{font-size:11px !important;}
  .topbar .actions{grid-template-columns:1fr 1fr 44px !important;}
  .topbar .actions .btn{font-size:11px !important;padding:8px 7px !important;}
  body > header{padding:10px 12px !important;align-items:stretch !important;flex-direction:column !important;gap:10px !important;}
  body > header .brand-left{min-width:0 !important;width:100% !important;}
  body > header .brand-title .t1{font-size:13px !important;}
  body > header .brand-title .t2{font-size:11px !important;}
  body > header .top-actions{grid-template-columns:1fr 1fr 42px 42px !important;}
  body > header .top-actions .btn{font-size:11px !important;padding:8px 7px !important;}
  .module-iframe,.iframe-wrap{height:calc(100dvh - 190px) !important;min-height:500px !important;}
  .content{padding:12px !important;}
  .card-body{padding:16px !important;}
}

@media (max-width: 380px){
  .topbar .actions .btn{font-size:0 !important;gap:0 !important;}
  .topbar .actions .btn i{font-size:15px !important;margin:0 !important;}
  body > header .top-actions .btn{font-size:0 !important;gap:0 !important;}
  body > header .top-actions .btn i{font-size:15px !important;margin:0 !important;}
}