/* ============================================================
   INFORMES — CSS FINAL (alineado al look de tu sistema)
   - Filtros prolijos (sin botones gigantes)
   - Cards ok
   - Modal REAL: overlay fijo, centrado, con scroll interno
============================================================ */

.page{padding:18px 0 28px;}

.head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin:10px 0 14px;
}

.h-left h1{margin:0;font-size:28px;letter-spacing:-.02em;}
.h-right{display:flex;gap:10px;flex-wrap:wrap;}

.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  margin:12px 0;
}

/* =========================
   Inputs — skin consistente
========================= */

input, select, textarea{font:inherit;color:var(--text);}

.f input, .f select,
.field input, .field select, .field textarea{
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}

textarea{resize:vertical; min-height:96px;}

.f input:focus, .f select:focus,
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:rgba(245,158,11,.55);
  box-shadow:0 0 0 4px rgba(245,158,11,.14);
}

.f input::placeholder,
.field input::placeholder,
.field textarea::placeholder{
  color:rgba(71,85,105,.65);
}

/* =========================
   Filters — layout PRO
========================= */

.filters{
  display:grid;
  grid-template-columns: 1.2fr .7fr .7fr .9fr auto;
  gap:12px;
  align-items:end;
}

.f{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.f label{font-size:12px;}

.f.kpis{
  grid-column: 1 / -1;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:2px;
}

.chips{display:flex;flex-wrap:wrap;gap:8px;}

.chip{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:7px 10px;
  font-size:13px;
}

.actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.actions .btn{
  width:auto;          /* <- evita botones full width */
  white-space:nowrap;
}

/* En desktop, export va a la derecha */
.f.export{
  grid-column: 1 / -1;
  display:flex;
  justify-content:flex-end;
}

/* =========================
   Lista / Cards
========================= */

.table-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.list{display:flex;flex-direction:column;gap:10px;}

.card{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:12px;
  display:grid;
  gap:10px;
}

.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.card-title{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.badge{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.02);
}

.badge.ok{background:rgba(0,150,70,.08);border-color:rgba(0,150,70,.18);}
.badge.warn{background:rgba(255,170,0,.10);border-color:rgba(255,170,0,.25);}
.badge.neu{background:rgba(60,80,120,.08);border-color:rgba(60,80,120,.18);}

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:4px;
}

.meta .k{font-size:12px;color:var(--muted);}
.meta .v{font-weight:700;}
.meta-item{display:flex;gap:6px;align-items:baseline;}

.card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.btn.mini{
  padding:8px 10px;
  font-size:13px;
  border-radius:12px;
}

.preview{
  border-top:1px dashed var(--line);
  padding-top:10px;
}

.preview p{margin:0;color:var(--muted);line-height:1.35;}

.empty{padding:18px;text-align:center;}
.empty-title{font-weight:800;font-size:16px;margin-bottom:4px;}

/* =========================
   MODAL — OVERRIDE FUERTE
   (para que sea modal real, no bloque en body)
========================= */

.modal{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

/* tu JS agrega .open */
.modal.open{display:flex !important;}

/* además, por accesibilidad */
.modal[aria-hidden="true"]{display:none !important;}
.modal[aria-hidden="false"]{display:flex !important;}

.modal .overlay{
  position:absolute !important;
  inset:0 !important;
  background:rgba(15,23,42,.45) !important;
}

.modal .dialog{
  position:relative !important;
  width:min(980px, calc(100vw - 36px)) !important;
  max-height:calc(100vh - 36px) !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  box-shadow:0 18px 55px rgba(0,0,0,.22) !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}

/* Header */
.modal .m-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
}

.modal .m-title{font-weight:900;}
.modal .m-sub{margin-top:2px;}

#btnCerrar{
  width:40px;
  height:40px;
  padding:0;
  border-radius:12px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Body scroll interno */
.modal .m-body{
  padding:14px;
  overflow:auto;
}

/* Footer */
.modal .m-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-top:1px solid var(--line);
}

.modal .m-foot .right,
.modal .m-foot .left{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Form grid */
.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}

.field{min-width:0;display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12px;}
.field.span2{grid-column: span 2;}

.divider{
  margin-top:6px;
  padding-top:10px;
  border-top:1px solid var(--line);
}

.section-title{font-weight:900;}
.section-sub{margin-top:-2px;}
.hint{font-size:12px;color:var(--muted);}

/* =========================
   Responsive
========================= */

@media (max-width: 980px){
  .filters{
    grid-template-columns: 1fr 1fr;
  }
  .f.export{justify-content:flex-start;}
}

@media (max-width: 680px){
  .head{flex-direction:column;align-items:flex-start;}
  .h-right{width:100%;}
  .h-right .btn{flex:1;}
  .filters{grid-template-columns: 1fr;}
  .f.kpis{
    flex-direction:column;
    align-items:flex-start;
  }
  .actions{justify-content:flex-start;}
  .grid{grid-template-columns: 1fr;}
  .field.span2{grid-column: span 1;}

  .modal{padding:12px;}
  .modal .dialog{
    width:calc(100vw - 24px) !important;
    max-height:calc(100vh - 24px) !important;
    border-radius:16px !important;
  }
}
/* =========================
   LAYOUT — contención + aire
   (evita full-bleed pegado al borde)
========================= */

.page{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 16px 28px; /* <- gutters laterales */
}

/* Paneles que “respiran” igual que el resto del sistema */
.panel{
  margin-left: 0;
  margin-right: 0;
}

/* Si el body o algún wrapper está raro, esto ayuda */
body{
  background: var(--bg);
}

/* Mobile: un poco más de aire aún */
@media (max-width: 680px){
  .page{ padding-left: 12px; padding-right: 12px; }
}