/* HIDROPLAN · capa responsive global 2026-09-14
   Se activa automaticamente segun el ancho disponible. */
*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;max-width:100%;margin:0;overflow-x:clip}
#app,main,#view,section,.card,.card-h,.card-b,.grid,.row{min-width:0;max-width:100%}
img,picture,video,canvas,iframe,object,embed,svg{max-width:100%}
img,video{height:auto}
input,select,textarea,button{max-width:100%}
textarea{overflow-wrap:anywhere}
.head,.card-h,.card-b,.modal-h,.modal-b,.modal-f{max-width:100%}
.head>*{min-width:0}
.head h2,.head p,.card-h h3,.hint{overflow-wrap:anywhere}
.actions,.hp-actions,.report-actions,.ai-tools,.ai2-actions,.pv-actions{max-width:100%;flex-wrap:wrap}
.tbl-wrap{display:block;width:100%;max-width:100%;overflow-x:hidden!important}
.tbl-wrap table,table{width:100%!important;max-width:100%!important;min-width:0!important;table-layout:fixed}
th,td{min-width:0!important;white-space:normal!important;overflow-wrap:anywhere;word-break:normal}
.tabs{display:flex;flex-wrap:wrap!important;overflow-x:hidden!important}
.tab{flex:1 1 150px;white-space:normal;text-align:center}
.hp-manage-path{overflow-x:hidden!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr))!important}
.hp-path-step{min-width:0!important}
.modal{max-width:min(94vw,820px)}
.modal-b{overflow-x:hidden;overflow-y:auto}
.ai-preview,.ai2-preview,.pe-preview,.hpch-quick{overflow-x:hidden!important}
.hpch-quick{flex-wrap:wrap!important}
@media (max-width:820px){
  .mobile-top-title .mobile-logo-box{height:34px;min-height:34px!important}
  .mobile-brand-logo{display:block!important;width:auto!important;height:34px!important;max-width:min(44vw,150px)!important;object-fit:contain;object-position:left center;filter:drop-shadow(0 2px 7px rgba(0,0,0,.22))}
}

/* Laptop compacta */
@media (min-width:821px) and (max-width:1180px){
  :root{--hp-sidebar-width:210px}
  #app{grid-template-columns:var(--hp-sidebar-width) minmax(0,1fr)!important}
  aside{width:var(--hp-sidebar-width)!important}
  main{padding:22px 20px 64px!important}
  .brand{padding:18px 15px 15px}
  .navitem{padding:8px;font-size:12.5px}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-ob-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Tablet y celular: navegación superior y contenido fluido */
@media (max-width:820px){
  #app{display:block!important;width:100%!important}
  #app>aside{width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important}
  main{width:100%!important;margin:0!important;padding-inline:max(16px,env(safe-area-inset-left))!important}
  .g2,.g3,.g4,.ai-shell,.ai2-shell,.pe-shell,.pe-compare,.hp-ob-hero{grid-template-columns:1fr!important}
  .pe-panel,.ai-panel,.ai2-panel{position:static!important}
  .modal{width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important}
  .ovl{padding:12px!important}
  .head>div:last-child{width:100%;display:flex;gap:8px;flex-wrap:wrap}
  .head>div:last-child>*{flex:1 1 190px;min-width:0!important}
}

/* Celulares, incluida la medida objetivo 430 x 932 */
@media (max-width:600px){
  main{padding:14px 12px calc(68px + env(safe-area-inset-bottom))!important}
  .head{margin-bottom:15px!important}
  .head>div:last-child{display:grid!important;grid-template-columns:1fr!important}
  .head>div:last-child>*{width:100%!important;margin:0!important}
  .card-h{display:grid!important;grid-template-columns:minmax(0,1fr)!important;padding:12px!important}
  .card-h>*{min-width:0!important;max-width:100%!important}
  .card-b{padding:12px!important}
  .row,.row.c2,.row.c3,.grid,.g2,.g3,.g4,.hp-filterbar,.hp-ob-filters,.hp-contract-summary,.hp-guide,.hp-flux-kpis{grid-template-columns:minmax(0,1fr)!important}
  .btn{white-space:normal;overflow-wrap:anywhere}
  .modal-h{padding:12px!important}
  .modal-b{padding:12px!important}
  .modal-f{display:grid!important;grid-template-columns:1fr!important;padding:10px 12px!important}
  .modal-f .btn{width:100%!important;margin:0!important}
  .tbl-wrap{border-radius:8px;overflow:hidden!important}
  .tabs{max-width:100%;margin-inline:0!important;padding-inline:0!important;gap:5px;border-bottom:0}
  .tab{flex:1 1 calc(50% - 5px);border:1px solid var(--line);border-radius:7px;padding:8px!important}
  .hp-ob-split,.hp-ob-money,.hp-debt-money,.hp-project-debt .money{grid-template-columns:1fr!important}
  .hp-ob-money>*{grid-column:auto!important}
  .hp-flow-person-head,.hp-flux-card-head,.hp-flux-card-foot,.hp-debt-card-foot{align-items:stretch!important}
  .hp-flow-person-actions,.hp-flux-card-actions,.hp-ob-card-foot .actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important;margin-left:0!important}
  .hp-flow-person-actions .btn,.hp-flux-card-actions .btn,.hp-ob-card-foot .actions .btn{width:100%!important}
}

@media (max-width:430px){
  main{padding-inline:max(12px,env(safe-area-inset-left))!important}
  .head h2{font-size:clamp(20px,6vw,23px)!important}
  .head p{font-size:12px!important}
  .btn{width:100%;justify-content:center}
  .iconbtn{width:auto}
  .card,.modal{border-radius:9px}
  .kpi{padding:12px!important}
  .hp-project-picker,.hp-flow-add-grid,.hp-user-grid-v36,.hp-ob-grid,.hp-project-debt-grid{grid-template-columns:minmax(0,1fr)!important}
  .hp-flow-add-choice,.hp-project-choice{width:100%;min-width:0}
  .pe-preview object{height:46vh!important;min-height:280px!important}
  .mobile-brand-logo{height:31px!important;max-width:132px!important}
}

/* Todas las tablas pasan a tarjetas verticales: cero desplazamiento lateral. */
@media (max-width:820px){
  table.hp-responsive-table{display:block!important;width:100%!important}
  table.hp-responsive-table thead{display:none!important}
  table.hp-responsive-table tbody{display:grid!important;grid-template-columns:minmax(0,1fr);gap:10px;width:100%;padding:0!important}
  table.hp-responsive-table tr{display:block!important;width:100%;min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--surface);overflow:hidden;box-shadow:0 3px 12px rgba(11,34,57,.04)}
  table.hp-responsive-table td{display:grid!important;grid-template-columns:minmax(96px,34%) minmax(0,1fr);gap:9px;width:100%!important;padding:8px 10px!important;border-bottom:1px solid var(--line-soft)!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere}
  table.hp-responsive-table td::before{content:attr(data-label);font-size:9px;line-height:1.35;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
  table.hp-responsive-table td:last-child{border-bottom:0!important}
  table.hp-responsive-table td.hp-full-cell,table.hp-responsive-table td[colspan]{display:block!important;text-align:center!important;padding:20px 12px!important}
  table.hp-responsive-table td.hp-full-cell::before,table.hp-responsive-table td[colspan]::before{display:none!important}
  table.hp-responsive-table td.act{display:block!important;background:#f8fafb;text-align:left!important}
  table.hp-responsive-table td.act::before{display:none!important}
  table.hp-responsive-table td.act .btn{width:100%!important;margin:3px 0!important}
  table.hp-responsive-table tfoot{display:block!important}
  table.hp-responsive-table tfoot tr{margin-top:10px}
  table.hp-responsive-table tfoot td{display:block!important;width:100%!important;text-align:left!important}
}

@media (max-width:520px){
  table.hp-responsive-table td{grid-template-columns:1fr!important;gap:3px}
  .tabs{display:grid!important;grid-template-columns:1fr!important}
  .tab{width:100%!important}
}

@media (max-width:360px){
  main{padding-inline:10px!important}
  .modal{width:calc(100vw - 16px)!important}
  .ovl{padding:8px!important}
}

@media (max-height:520px) and (orientation:landscape){
  .modal{max-height:calc(100dvh - 12px)!important}
  .ovl{padding:6px!important}
  main{padding-top:10px!important}
}

@media print{
  html,body{overflow:visible!important}
  main{padding:0!important}
  .tbl-wrap{overflow:visible!important}
  .tbl-wrap::after{display:none!important}
}