/* ==========================================================
   Responsive profesional global - Ecommerce
   Objetivo: mobile first real sin blur, sin textos partidos,
   sin desbordes y con tablas legibles en celular.
   ========================================================== */

:root{
  --lc-mobile-gap:16px;
  --lc-radius:22px;
  --lc-border:#e5e7eb;
  --lc-text:#0f172a;
  --lc-muted:#64748b;
  --lc-primary:#2563eb;
  --lc-shadow:0 18px 50px rgba(15,23,42,.12);
}

*{box-sizing:border-box;}
html{width:100%;max-width:100%;overflow-x:hidden;}
body{width:100%;max-width:100%;overflow-x:hidden!important;-webkit-text-size-adjust:100%;}
img,video,svg,canvas,iframe{max-width:100%;}
img{height:auto;}
a,button,input,select,textarea{touch-action:manipulation;}
button,a,input,select,textarea{font:inherit;}

/* Evita el efecto borroso al abrir menues o modales */
.header,.topbar,.navbar,.nav,.nav-links,.modal,.modal-overlay,.sidebar-overlay,.lc-menu-panel{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body.lc-menu-open,
body.lc-menu-open *{
  text-rendering:geometricPrecision;
}

/* Helpers generales */
.wrap,.contenedor,.container,.main,.workspace,.panel,.card,.kpi,.kpi-card,.bar,.notice,.login-shell{
  max-width:100%;
}
input,select,textarea{
  max-width:100%;
}
textarea{resize:vertical;}
form{max-width:100%;}

/* Boton hamburguesa reutilizable */
.lc-mobile-menu-btn,
.mobile-toggle{
  appearance:none;
  border:1px solid rgba(15,23,42,.10)!important;
  background:#ffffff!important;
  color:var(--lc-text)!important;
  min-width:50px;
  min-height:50px;
  padding:0 15px!important;
  border-radius:16px!important;
  display:none;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-weight:900!important;
  line-height:1!important;
  box-shadow:0 10px 28px rgba(15,23,42,.08)!important;
  cursor:pointer;
  white-space:nowrap;
  z-index:1200;
}
.lc-mobile-menu-btn span,
.mobile-toggle span{font-size:14px;}
.lc-mobile-menu-btn .lc-bars,
.mobile-toggle i{font-size:20px;line-height:1;}
.lc-mobile-menu-btn[aria-expanded="true"] .lc-bars::before{content:"×";font-size:26px;line-height:1;}
.lc-mobile-menu-btn[aria-expanded="true"] .lc-bars{font-size:0;}

/* Dashboard / sistema interno */
.app{max-width:100vw;}
.topbar{background:#ffffff!important;box-shadow:0 14px 34px rgba(15,23,42,.08)!important;}
.sidebar{overflow:auto;scrollbar-width:thin;}
.sidebar .brand strong,
.sidebar .brand span,
.user-card .name,
.user-card .meta,
.nav a,
.side-btn{word-break:normal!important;overflow-wrap:normal!important;white-space:normal;}
.nav a,.side-btn{min-width:0;}
iframe{max-width:100%;}

.sidebar-overlay{
  position:fixed;
  inset:0;
  z-index:19;
  background:rgba(15,23,42,.46);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.sidebar-overlay.show{opacity:1;pointer-events:auto;}

/* Tablas responsive con labels */
.table-scroll,.tabla-scroll,.responsive-table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
table{max-width:100%;}
td,th{vertical-align:middle;}
td{word-break:break-word;overflow-wrap:anywhere;}

/* Login */
.login-shell{width:min(1460px,100%)!important;}
.input-shell,input,select,textarea{width:100%;}

/* Portafolio / landing principal */
.header{background:#ffffff!important;box-shadow:0 8px 24px rgba(15,23,42,.05);}
.header .contenedor{position:relative;}
.brand,.brand-link{min-width:0;}
.brand-texto{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pill{max-width:100%;white-space:normal;text-align:left;}
.hero-panel{min-height:0!important;}
.hero-main h1,.panel-header h2,.market-header h2,.cta-main h2{overflow-wrap:break-word;}
.hero-subtitulo,.hero-contexto,.panel-header p,.market-header p,.cta-main p{overflow-wrap:break-word;}
.cards-grid,.base-grid,.smart-grid,.feature-grid,.cta-grid,.market-header{max-width:100%;}
.card-sector,.base-card,.smart-card,.feature-card{min-width:0;}
.btn-principal,.btn-secundario,.btn-demo,.btn-preview,.btn-smart,.btn-module,.modal-link,.modal-close{white-space:normal;text-align:center;}
.contacto-fijo{z-index:9000!important;}

/* Webs internas con navbar */
.navbar{background:#ffffff!important;}
.navbar .logo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-links a{white-space:nowrap;}
.hero h1,.section-title{overflow-wrap:break-word;}
.hero p,.section-subtitle{overflow-wrap:break-word;}

/* Modales */
.modal,.modal-overlay{max-width:100vw;}
.modal-content,.modal-box,.modal-contenido{max-width:calc(100vw - 24px)!important;}
.modal iframe,.modal-iframe,.modal-frame{width:100%!important;}
.modal-header,.modal-actions{min-width:0;}
.modal-header h3{overflow-wrap:break-word;}

@media (max-width:1200px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .grid-two,.cta-grid,.market-header{grid-template-columns:1fr!important;}
  .cards-grid,.base-grid,.feature-grid,.smart-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

@media (max-width:900px){
  body{overflow:auto!important;}

  /* Dashboard */
  .app{
    display:block!important;
    min-height:100dvh!important;
    padding:10px!important;
  }
  .main{min-height:auto!important;width:100%!important;}
  .topbar{
    border-radius:20px!important;
    padding:12px!important;
    align-items:flex-start!important;
    gap:12px!important;
    flex-direction:column!important;
  }
  .topbar > div:first-child{
    width:100%;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:10px 12px;
    align-items:center;
  }
  .topbar h1{
    font-size:clamp(19px,5.4vw,24px)!important;
    line-height:1.12!important;
    margin:0!important;
    letter-spacing:-.04em!important;
  }
  .topbar p{
    grid-column:1 / -1;
    font-size:13px!important;
    line-height:1.45!important;
    margin:0!important;
  }
  .status{width:100%!important;justify-content:flex-start!important;gap:8px!important;}
  .saas-badge{font-size:11px!important;padding:7px 9px!important;max-width:100%;}
  .mobile-toggle{display:inline-flex!important;}
  .sidebar{
    display:flex!important;
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(86vw,320px)!important;
    min-height:100dvh!important;
    height:100dvh!important;
    border-radius:0 24px 24px 0!important;
    padding:18px!important;
    z-index:30!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    box-shadow:24px 0 60px rgba(15,23,42,.26)!important;
  }
  .sidebar.show{transform:translateX(0)!important;}
  body.lc-sidebar-open{overflow:hidden!important;}
  .workspace{min-height:auto!important;height:auto!important;margin-top:12px!important;}
  .section{height:auto!important;min-height:auto!important;}
  .overview{height:auto!important;overflow:visible!important;padding-right:0!important;}
  .kpi-grid,.grid-two{grid-template-columns:1fr!important;gap:12px!important;}
  .kpi-card{min-height:auto!important;padding:16px!important;border-radius:20px!important;}
  .kpi-card .value{font-size:clamp(24px,8vw,34px)!important;}
  .panel{border-radius:20px!important;padding:16px!important;}
  .process-row{align-items:flex-start!important;flex-direction:column!important;}
  iframe{
    height:calc(100dvh - 128px)!important;
    min-height:620px!important;
    border-radius:20px!important;
  }

  /* Header portafolio */
  .header-inner{
    min-height:68px!important;
    padding:10px 0!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
  }
  .header .lc-mobile-menu-btn{display:inline-flex!important;flex:0 0 auto;}
  .brand-link{width:auto!important;max-width:calc(100% - 66px);}
  .brand{gap:10px!important;min-width:0;}
  .brand-logo-wrap,.brand-icon{
    width:48px!important;
    height:48px!important;
    border-radius:15px!important;
    flex:0 0 auto;
  }
  .brand-texto{font-size:clamp(18px,6vw,24px)!important;letter-spacing:-.04em!important;}
  .header .nav{
    position:absolute!important;
    top:calc(100% + 8px)!important;
    left:0!important;
    right:0!important;
    z-index:1100!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    width:100%!important;
    max-height:min(72dvh,520px)!important;
    overflow:auto!important;
    padding:12px!important;
    border:1px solid rgba(15,23,42,.10)!important;
    border-radius:22px!important;
    background:#ffffff!important;
    box-shadow:var(--lc-shadow)!important;
    opacity:0;
    pointer-events:none;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  .header .nav.is-open{
    opacity:1;
    pointer-events:auto;
    visibility:visible;
    transform:translateY(0);
  }
  .header .nav a,
  .header .nav .nav-link,
  .header .nav .btn-principal{
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    justify-content:flex-start!important;
    text-align:left!important;
    padding:12px 14px!important;
    border-radius:15px!important;
    white-space:normal!important;
  }

  /* Navbar webs internas */
  .navbar{
    padding:12px 16px!important;
    min-height:66px!important;
    gap:12px!important;
  }
  .navbar .lc-mobile-menu-btn{display:inline-flex!important;}
  .navbar .logo{font-size:clamp(1.15rem,6vw,1.5rem)!important;max-width:calc(100vw - 92px);}
  .navbar .nav-links{
    position:absolute!important;
    top:calc(100% + 8px)!important;
    left:12px!important;
    right:12px!important;
    z-index:1100!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    width:auto!important;
    max-height:min(72dvh,520px)!important;
    overflow:auto!important;
    padding:12px!important;
    border:1px solid rgba(15,23,42,.10)!important;
    border-radius:20px!important;
    background:#ffffff!important;
    box-shadow:var(--lc-shadow)!important;
    opacity:0;
    pointer-events:none;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  .navbar .nav-links.is-open{
    opacity:1;
    pointer-events:auto;
    visibility:visible;
    transform:translateY(0);
  }
  .navbar .nav-links li{list-style:none;width:100%;}
  .navbar .nav-links a{
    display:flex!important;
    width:100%!important;
    min-height:46px!important;
    align-items:center!important;
    padding:10px 12px!important;
    border-radius:14px!important;
    background:#f8fafc!important;
    white-space:normal!important;
  }

  /* Landing/portafolio compacto */
  .contenedor{padding-left:16px!important;padding-right:16px!important;}
  .hero{padding:10px 0 18px!important;}
  .hero-panel{border-radius:24px!important;}
  .hero-main{padding:28px 22px!important;}
  .hero-main h1{
    font-size:clamp(34px,10.5vw,48px)!important;
    line-height:1.03!important;
    letter-spacing:-.055em!important;
    margin-bottom:18px!important;
  }
  .hero-subtitulo,.hero-contexto{font-size:16px!important;line-height:1.62!important;margin-bottom:18px!important;}
  .hero-botones{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:10px!important;}
  .btn-principal,.btn-secundario,.btn-demo{width:100%!important;min-width:0!important;min-height:50px!important;padding:13px 16px!important;}
  .panel,.market-panel,.cta-panel{border-radius:24px!important;}
  .panel-header,.cards-wrap,.market-header,.base-grid,.smart-grid,.feature-grid,.cta-main,.cta-side{padding:22px!important;}
  .panel-header h2,.market-header h2,.cta-main h2{font-size:clamp(28px,8.5vw,38px)!important;line-height:1.06!important;letter-spacing:-.05em!important;}
  .panel-header p,.market-header p,.cta-main p{font-size:16px!important;line-height:1.6!important;}
  .cards-grid,.base-grid,.smart-grid,.feature-grid{grid-template-columns:1fr!important;gap:14px!important;}
  .card-body,.base-card,.smart-body,.feature-card{padding:18px!important;}
  .card-sector h3,.base-card h3,.smart-body h3,.feature-card h3{font-size:22px!important;min-height:auto!important;}
  .card-footer{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;gap:10px!important;}
  .btn-preview,.btn-smart,.btn-module{width:100%!important;min-height:48px!important;}
  .smart-top{min-height:110px!important;padding:18px!important;}
  .smart-body{min-height:auto!important;}
  .market-note{padding:18px!important;border-radius:20px!important;}
  .cta-grid{grid-template-columns:1fr!important;}

  /* Webs internas */
  .navbar ~ .hero,
  body.lc-web-page .hero{
    height:auto!important;
    min-height:auto!important;
    padding:96px 16px 56px!important;
  }
  .navbar ~ .hero .hero-content,
  body.lc-web-page .hero-content{padding:0!important;max-width:100%!important;}
  .navbar ~ .hero h1,
  body.lc-web-page .hero h1{font-size:clamp(2.15rem,11vw,3.2rem)!important;line-height:1.05!important;}
  .navbar ~ .hero p,
  body.lc-web-page .hero p{font-size:1rem!important;line-height:1.65!important;}
  .navbar ~ .hero .hero-buttons,
  body.lc-web-page .hero-buttons{display:grid!important;grid-template-columns:1fr!important;width:100%;gap:12px!important;}
  .navbar ~ .hero .hero-buttons .btn,
  body.lc-web-page .hero-buttons .btn{width:100%;text-align:center;}
  body.lc-web-page .features,
  body.lc-web-page .rooms-section,
  body.lc-web-page .about,
  body.lc-web-page .contact,
  body.lc-web-page .services,
  body.lc-web-page .portfolio,
  body.lc-web-page .testimonials,
  body.lc-web-page .pricing,
  body.lc-web-page .footer,
  body.lc-web-page section{
    padding-left:16px!important;
    padding-right:16px!important;
  }
  body.lc-web-page .section-title{font-size:clamp(2rem,9vw,2.7rem)!important;line-height:1.08!important;}
  body.lc-web-page .features-grid,
  body.lc-web-page .rooms-grid,
  body.lc-web-page .grid,
  body.lc-web-page .cards,
  body.lc-web-page .services-grid,
  body.lc-web-page .portfolio-grid,
  body.lc-web-page .pricing-grid{
    grid-template-columns:1fr!important;
  }

  .contacto-fijo{
    width:54px!important;
    height:54px!important;
    right:14px!important;
    bottom:18px!important;
  }
  .icono-contacto{width:25px!important;height:25px!important;}
}

@media (max-width:760px){
  .wrap{padding:0!important;}
  .topbar:not(.header .topbar){
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
  }
  .title h1,h1,h2{overflow-wrap:break-word;}
  .actions,.bar{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
  }
  .actions .btn,.bar .btn,.bar input,.bar select,.bar button{width:100%!important;min-width:0!important;}
  .kpis{grid-template-columns:1fr!important;}

  table.lc-responsive-table,
  table.lc-responsive-table thead,
  table.lc-responsive-table tbody,
  table.lc-responsive-table th,
  table.lc-responsive-table td,
  table.lc-responsive-table tr{
    display:block!important;
    width:100%!important;
  }
  table.lc-responsive-table{
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
    overflow:visible!important;
  }
  table.lc-responsive-table thead{display:none!important;}
  table.lc-responsive-table tbody{background:transparent!important;}
  table.lc-responsive-table tr{
    margin:0 0 12px!important;
    padding:12px!important;
    border:1px solid var(--lc-border)!important;
    border-radius:18px!important;
    background:#ffffff!important;
    box-shadow:0 10px 28px rgba(15,23,42,.06)!important;
    overflow:hidden!important;
  }
  table.lc-responsive-table td{
    border:0!important;
    border-bottom:1px solid #eef2f7!important;
    padding:10px 0!important;
    display:grid!important;
    grid-template-columns:minmax(96px,38%) minmax(0,1fr)!important;
    gap:10px!important;
    align-items:start!important;
    text-align:left!important;
    min-height:0!important;
  }
  table.lc-responsive-table td:last-child{border-bottom:0!important;padding-bottom:0!important;}
  table.lc-responsive-table td::before{
    content:attr(data-label);
    color:var(--lc-muted);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.05em;
    line-height:1.35;
  }
  table.lc-responsive-table td[data-label=""]::before{display:none;}
  table.lc-responsive-table td[data-label=""]{grid-template-columns:1fr!important;}
  table.lc-responsive-table td img{max-width:120px!important;border-radius:12px;}
  table.lc-responsive-table td .btn,
  table.lc-responsive-table td button,
  table.lc-responsive-table td a:not(.plain-link){
    width:100%;
    margin:2px 0;
    justify-content:center;
    text-align:center;
  }

  .modal,.modal-overlay{
    padding:10px!important;
    align-items:center!important;
  }
  .modal-content,.modal-box,.modal-contenido{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    height:auto!important;
    max-height:calc(100dvh - 20px)!important;
    margin:0 auto!important;
    border-radius:20px!important;
  }
  .modal-header{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    align-items:start!important;
    padding:14px!important;
  }
  .modal-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important;}
  .modal-frame-wrap,.modal-iframe{
    height:calc(100dvh - 120px)!important;
    min-height:420px!important;
  }
}

@media (max-width:560px){
  .app{padding:8px!important;}
  .topbar{border-radius:18px!important;}
  .topbar > div:first-child{grid-template-columns:auto minmax(0,1fr);}
  .mobile-toggle{min-width:48px!important;min-height:48px!important;padding:0 13px!important;}
  .mobile-toggle{font-size:0!important;}
  .mobile-toggle i{font-size:20px!important;}
  .sidebar{width:min(90vw,310px)!important;padding:16px!important;}
  .sidebar .brand{margin-bottom:16px!important;}
  .sidebar .brand img{width:44px!important;height:44px!important;border-radius:14px!important;}
  .user-card{padding:14px!important;border-radius:18px!important;}
  .nav a{padding:12px!important;border-radius:14px!important;}
  .sidebar-footer{gap:8px!important;}
  .side-btn{padding:12px!important;border-radius:14px!important;}
  iframe{height:calc(100dvh - 120px)!important;min-height:560px!important;}

  .contenedor{padding-left:12px!important;padding-right:12px!important;}
  .header-inner{min-height:64px!important;}
  .brand-logo-wrap,.brand-icon{width:44px!important;height:44px!important;border-radius:14px!important;}
  .brand-texto{font-size:20px!important;}
  .lc-mobile-menu-btn{min-width:48px!important;min-height:48px!important;padding:0 13px!important;}
  .lc-mobile-menu-btn span:not(.lc-bars){display:none;}
  .hero-main{padding:24px 18px!important;}
  .hero-main h1{font-size:clamp(31px,11.6vw,40px)!important;}
  .pill{font-size:11px!important;min-height:36px!important;padding:8px 12px!important;}
  .panel-header,.cards-wrap,.market-header,.base-grid,.smart-grid,.feature-grid,.cta-main,.cta-side{padding:18px!important;}
  .panel,.market-panel,.cta-panel,.hero-panel{border-radius:22px!important;}
  .contacto-fijo{width:50px!important;height:50px!important;right:12px!important;bottom:14px!important;}

  .login-shell{border-radius:24px!important;}
  .visual-panel{min-height:auto!important;padding:22px!important;}
  .login-panel{padding:24px 18px!important;}
  .module-row,.credential-card{grid-template-columns:1fr!important;}
}