/* LuJuBO Family 2.0 · Build 035 · Etapa 3
   Componentes institucionales responsive. No altera paletas particulares. */

:root{
  --lj-component-gap:clamp(.75rem,1.45vw,1.25rem);
  --lj-component-pad:clamp(.9rem,1.8vw,1.35rem);
  --lj-component-radius:clamp(14px,1.6vw,20px);
  --lj-border-soft:rgba(148,163,184,.28);
  --lj-surface-soft:rgba(15,23,42,.52);
  --lj-shadow-soft:0 12px 32px rgba(2,6,23,.2);
}

/* Tarjetas y paneles */
body.lujubo-layout :where(.card,.panel,.module-card,.menu-card,.stat-card,.dashboard-card,.quick-card,.alert-card,.widget,.box){
  min-width:0;max-width:100%;overflow-wrap:anywhere;
}
body.lujubo-layout :where(.cards-grid,.dashboard-grid,.stats-grid,.modules-grid,.quick-grid,.menu-grid,.widgets-grid,.panel-grid){
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:var(--lj-component-gap);
}
body.lujubo-layout :where(.card-body,.panel-body,.module-card,.menu-card,.stat-card,.dashboard-card,.quick-card,.alert-card,.widget,.box){
  padding:var(--lj-component-pad);
}
body.lujubo-layout :where(.card-title,.panel-title,.module-title,.stat-title){
  line-height:1.2;text-wrap:balance;
}
body.lujubo-layout :where(.card-text,.panel-text,.module-description,.stat-label){
  line-height:1.55;
}

/* Botones y grupos de acciones */
body.lujubo-layout :where(.actions,.card-actions,.form-actions,.toolbar,.button-group,.btn-group-responsive,.filters-actions){
  display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;min-width:0;
}
body.lujubo-layout :where(.btn,.sec-btn,.action-btn,.btn-pill,.btn-home,.hero-home){
  max-width:100%;display:inline-flex;align-items:center;gap:.45rem;white-space:normal;text-align:center;
}
body.lujubo-layout :where(.btn-group,.input-group){max-width:100%;min-width:0}
body.lujubo-layout :where(.btn-group)>.btn{min-width:0}

/* Formularios */
body.lujubo-layout :where(form,.form-section,.fieldset,.filters,.filter-panel){min-width:0;max-width:100%}
body.lujubo-layout :where(.form-grid,.fields-grid,.filters-grid,.form-row-grid){
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--lj-component-gap);
}
body.lujubo-layout :where(.form-control,.form-select,input,select,textarea){
  width:100%;min-width:0;max-width:100%;
}
body.lujubo-layout :where(label,.form-label){line-height:1.35}
body.lujubo-layout textarea{min-height:110px}
body.lujubo-layout fieldset{min-width:0}

/* Tablas */
.lj-table-scroll{
  width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;border-radius:var(--lj-component-radius);
  scrollbar-width:thin;position:relative;
}
.lj-table-scroll:focus-visible{outline:3px solid rgba(56,189,248,.32);outline-offset:3px}
body.lujubo-layout table{width:100%;min-width:max-content;margin-bottom:0}
body.lujubo-layout table :where(th,td){vertical-align:middle;overflow-wrap:normal}
body.lujubo-layout table th{white-space:nowrap}
body.lujubo-layout :where(.table-responsive,.table-wrap,.table-container,.sec-table-wrap){position:relative}

/* Alertas, badges y estados */
body.lujubo-layout :where(.alert,.notice,.message,.status-card){
  max-width:100%;overflow-wrap:anywhere;border-radius:var(--lj-component-radius);
}
body.lujubo-layout :where(.badge,.chip,.pill,.status-badge){
  max-width:100%;white-space:normal;line-height:1.25;text-align:center;
}

/* Modales */
body.lujubo-layout .modal-dialog{width:auto;max-width:min(94vw,var(--bs-modal-width,760px));margin:clamp(.5rem,2vh,1.75rem) auto}
body.lujubo-layout .modal-content{max-height:calc(100dvh - 1rem);overflow:hidden}
body.lujubo-layout .modal-body{overflow:auto;overscroll-behavior:contain}
body.lujubo-layout .modal-footer{display:flex;flex-wrap:wrap;gap:.6rem}

/* Medios y gráficas */
body.lujubo-layout :where(.chart-container,.chart-wrap,.canvas-wrap,.graph-wrap,.media-wrap){
  width:100%;min-width:0;max-width:100%;overflow:hidden;
}
body.lujubo-layout :where(canvas,svg,img,video,iframe){max-width:100%}

@media (max-width:991.98px){
  body.lujubo-layout :where(.form-grid,.fields-grid,.filters-grid,.form-row-grid)>*{
    grid-column:span 6!important;
  }
  body.lujubo-layout :where(.cards-grid,.dashboard-grid,.stats-grid,.modules-grid,.quick-grid,.menu-grid,.widgets-grid,.panel-grid){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:767.98px){
  body.lujubo-layout :where(.form-grid,.fields-grid,.filters-grid,.form-row-grid)>*{
    grid-column:1/-1!important;
  }
  body.lujubo-layout :where(.cards-grid,.dashboard-grid,.stats-grid,.modules-grid,.quick-grid,.menu-grid,.widgets-grid,.panel-grid){
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.lujubo-layout :where(.toolbar,.filters-actions){align-items:stretch}
  body.lujubo-layout :where(.toolbar,.filters-actions) :where(.form-control,.form-select,input,select){flex:1 1 100%}
  body.lujubo-layout .modal-dialog{max-width:calc(100vw - 16px);margin:8px auto}
  body.lujubo-layout .modal-content{max-height:calc(100dvh - 16px);border-radius:16px}
  body.lujubo-layout .modal-footer>:where(.btn,button,a){flex:1 1 160px}
}

@media (max-width:575.98px){
  body.lujubo-layout :where(.actions,.card-actions,.form-actions,.toolbar,.button-group,.btn-group-responsive,.filters-actions){
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%;
  }
  body.lujubo-layout :where(.actions,.card-actions,.form-actions,.toolbar,.button-group,.btn-group-responsive,.filters-actions)>*{
    width:100%!important;max-width:100%!important;
  }
  body.lujubo-layout :where(.btn,.sec-btn,.action-btn,.btn-pill,.btn-home,.hero-home):not(.btn-logout):not(.sec-btn-logout){
    justify-content:center;
  }
  body.lujubo-layout .modal-footer{display:grid;grid-template-columns:1fr}
  body.lujubo-layout .modal-footer>*{width:100%;margin:0!important}
  body.lujubo-layout table{font-size:.9rem}
}