/* =========================================================
   gestion.css
   Módulo Gestión & Presupuesto
   EVA & ÁLVARO 2027
========================================================= */

.nv-page{
  max-width:1100px;
  margin:0 auto;
  padding:18px;
}

/* ---------------- Top bar ---------------- */

.nv-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.nv-topbar-title{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.nv-topbar-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* ---------------- Headings ---------------- */

.nv-h1{
  font-weight:900;
  font-size:18px;
}

.nv-h2{
  font-weight:900;
  font-size:15px;
}

.nv-h3{
  font-weight:900;
  font-size:13px;
  margin-top:4px;
}

/* ---------------- Messages ---------------- */

.nv-msg{
  margin:8px 0 12px;
}

/* ---------------- Sections ---------------- */

.nv-section{
  padding:16px;
  border-radius:16px;
  margin-bottom:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.10);
}

.nv-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

/* ---------------- Badge ---------------- */

.nv-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  white-space:nowrap;
}

/* ---------------- Layout ---------------- */

.nv-divider{
  height:1px;
  background:rgba(255,255,255,0.12);
  margin:14px 0;
}

.nv-grid{
  display:grid;
  gap:10px;
  margin-top:12px;
}

.nv-grid-2{
  grid-template-columns:1fr auto;
  align-items:end;
}

.nv-grid-4{
  grid-template-columns:1.4fr .7fr 1fr auto;
  align-items:end;
}

@media (max-width:900px){
  .nv-grid-2{
    grid-template-columns:1fr;
  }

  .nv-grid-4{
    grid-template-columns:1fr 1fr;
  }
}

/* ---------------- Fields ---------------- */

.nv-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.nv-field-btn{
  display:flex;
  justify-content:flex-end;
}

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

/* ---------------- Inputs ---------------- */

.nv-input{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.12);
  color:inherit;
  outline:none;
}

.nv-input:focus{
  border-color:rgba(255,255,255,0.25);
  box-shadow:0 0 0 3px rgba(255,255,255,0.06);
}

/* ---------------- Checkbox ---------------- */

.nv-check{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
}

/* ---------------- Lists ---------------- */

.nv-details{
  margin-top:12px;
}

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

/* ---------------- Cards ---------------- */

.nv-cards{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

@media (max-width:820px){
  .nv-cards{
    grid-template-columns:1fr;
  }
}

.nv-card{
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
}

.nv-card-title{
  font-weight:900;
  margin-bottom:4px;
}

.nv-card-sub{
  opacity:.85;
  font-size:12px;
  margin-bottom:6px;
}
/* /css/gestion.css — ajustes específicos de /novios/gestion.html */

.nv-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 900px){
  .nv-grid{ grid-template-columns: 1fr 1fr; }
}

.nv-box{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(20,40,20,.12);
  border-radius: 16px;
  padding: 14px;
}

.nv-box-title{
  font-weight: 950;
}
/* /css/gestion.css — extra para Gestión (se apoya en privado.css) */

.nvh{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin: 18px 0 14px;
}

.nvh-title{
  font-weight: 950;
  font-size: 18px;
  letter-spacing: -.2px;
}

.g-hero{ padding:16px; }
.g-hero-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.g-hero-title{
  font-weight: 950;
  font-size: 14px;
}

.g-grid2{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

@media (min-width: 900px){
  .g-grid2{ grid-template-columns: 1fr 1fr; }
}

.g-card{
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(20,40,20,.10);
  border-radius: 16px;
  padding: 14px;
}

.g-card-title{
  font-weight: 950;
  margin-bottom: 6px;
}

.g-form{
  display:grid;
  gap:10px;
  margin-top:10px;
}

.g-check{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
  font-size: 13px;
}

.g-tabs{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.g-tab{
  border: 1px solid rgba(20,40,20,.12);
  background: rgba(255,255,255,.55);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 950;
  cursor:pointer;
}

.g-tab.is-on{
  background: linear-gradient(135deg, rgba(241,199,200,.85), rgba(216,163,169,.85));
}

.g-panel{
  padding: 16px;
  display:none;
}

.g-panel.is-on{ display:block; }

.g-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.g-panel-title{
  font-weight: 950;
  font-size: 16px;
}

.g-form-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 900px){
  .g-form-grid{ grid-template-columns: 1fr 1fr 1fr; }
}

.g-list{ display:grid; gap:10px; }

.g-item{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(20,40,20,.10);
  border-radius: 16px;
  padding: 12px;
}

.g-item-title{ font-weight: 950; margin-bottom: 4px; }

.g-item-sub{
  font-size: 12.5px;
  color: rgba(29,43,31,.70);
}

.g-item-actions{
  margin-top: 10px;
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}
.g-grid-2{
  display:grid;
  gap:16px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .g-grid-2{ grid-template-columns: 1.15fr .85fr; }
}

.rep-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.rep-actions.stack{ flex-direction:column; align-items:flex-start; }

.rep-summary{
  margin-top:10px;
  display:grid;
  gap:10px;
  grid-template-columns: 1fr 1fr;
}
.rep-kpi{
  border-radius:16px;
  padding:12px 14px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(184,110,136,.18); /* oro-rosa suave */
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.rep-kpi .v{ font-weight:900; font-size:18px; }
.rep-kpi .l{ font-size:12px; opacity:.75; margin-top:4px; }

/* ====== Estilos impresión PDF ====== */
@media print{
  body{ background:#fff !important; }
  .nav, .nv-topbar, #logoutBtn, .g-tabs, .btn{ display:none !important; }
  .print-only{ display:block !important; }
  .card{ box-shadow:none !important; border:1px solid #ddd !important; }
}
/* ===== Informes (premium) ===== */
.rep-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
@media (min-width: 920px){
  .rep-grid{ grid-template-columns: 420px 1fr; gap:18px; }
}

.rep-card{
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 44px rgba(0,0,0,.07);
}

.rep-card-title{
  font-weight: 900;
  margin-bottom: 10px;
}

.rep-form label{ display:block; margin-bottom:6px; }
.rep-form select, .rep-form input{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.82);
  outline: none;
}

.rep-row{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  margin-top: 10px;
}
@media(min-width: 520px){
  .rep-row{ grid-template-columns: 1fr 1fr; }
}

.rep-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
}

.rep-summary{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.68);
  margin-bottom: 12px;
}

.rep-kpi{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media(min-width: 720px){
  .rep-kpi{ grid-template-columns: 1fr 1fr 1fr; }
}
.rep-kpi-item{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
}
.rep-kpi-label{ font-size:12px; opacity:.68; }
.rep-kpi-value{ font-weight: 900; margin-top:4px; }

.rep-table-wrap{
  overflow:auto;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.64);
}

.rep-table{
  width:100%;
  border-collapse: collapse;
  min-width: 640px;
}
.rep-table th, .rep-table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  text-align:left;
  font-size: 13px;
}
.rep-table th{
  font-weight: 900;
  background: rgba(255,255,255,.78);
  position: sticky;
  top: 0;
}
/* =========================
   FIX: Informes preview no desborda
   ========================= */

/* El grid permite encoger columnas (clave: min-width:0) */
.rep-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 860px){
  .rep-grid{ grid-template-columns: 0.95fr 1.05fr; }
}

/* Los cards no deben desbordar */
.rep-card{
  min-width: 0;           /* CLAVE: permite encoger */
  overflow: hidden;       /* CLAVE: recorta lo que intente salir */
}

/* Contenedor de preview */
.rep-summary{
  max-width: 100%;
  overflow: hidden;
}

/* Si usas una tabla, que haga scroll dentro, no fuera */
.rep-table-wrap{
  max-width: 100%;
  overflow: auto;         /* scroll interno */
  -webkit-overflow-scrolling: touch;
}

/* Tabla: nunca más ancha que el contenedor */
.rep-table{
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;     /* evita que una columna “reviente” */
}
.rep-table th,
.rep-table td{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Las tarjetas mini del resumen (si están en grid/flex) */
.rep-summary .rep-kpis,
.rep-summary .kpis,
.rep-summary .rep-kpi-grid{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0,1fr) = no desborda */
}

@media (max-width: 520px){
  .rep-summary .rep-kpis,
  .rep-summary .kpis,
  .rep-summary .rep-kpi-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Por si algún texto largo intenta romper */
.rep-summary *{
  max-width: 100%;
  word-break: break-word;
}
/* =========================
   Informes: vista previa a ancho completo (no apelmazada)
   ========================= */

/* El panel derecho debe permitir que el contenido se estire */
.rep-preview,
.rep-preview-inner,
.rep-preview-card,
#repPreview,
#repPreviewBox{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Si tu preview está dentro de repSummary */
#repSummary,
.rep-summary{
  width: 100%;
  max-width: 100%;
}

/* La “tarjeta” donde van los KPIs (si existe) */
.rep-summary .rep-card,
.rep-summary .rep-box,
.rep-summary .rep-preview-card,
.rep-summary .rep-preview{
  width: 100%;
  max-width: 100%;
}

/* Grid de KPIs: ocupa todo y se auto-adapta */
.rep-summary .rep-kpis,
.rep-summary .kpis,
.rep-summary .rep-kpi-grid{
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items: stretch;
}

/* Cada KPI se estira y no se queda estrecho */
.rep-summary .rep-kpi,
.rep-summary .kpi{
  min-width: 0;
  width: 100%;
}

/* Mejor lectura: títulos no partir letras, parten por palabras */
.rep-summary .rep-kpi .lbl,
.rep-summary .kpi .lbl,
.rep-summary .rep-kpi small,
.rep-summary .kpi small{
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* El nombre de proyecto (lo que te sale “Eva&Alv…” partido) */
.rep-summary .rep-kpi .big,
.rep-summary .kpi .big,
.rep-summary .rep-project,
.rep-summary .project-name{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* =========================
   INFORMES – VISTA PREVIA FULL WIDTH (tu HTML real)
   ========================= */

/* La grid principal de informes debe permitir encoger sin overflow */
.rep-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 980px){
  .rep-grid{ grid-template-columns: 420px 1fr; }
}

/* Cada columna debe poder encoger (clave para evitar desbordes) */
.rep-grid > .rep-card{
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* evita que algo se salga */
}

/* La “vista previa” (repSummary) ocupa todo el ancho sí o sí */
#repSummary.rep-summary{
  width: 100%;
  max-width: 100%;
  min-width: 0;

  /* 👉 aquí está el cambio importante: convierte los bloques en una rejilla */
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: stretch;
}

/* Cada bloque que se pinte dentro del summary se ve como KPI-card */
#repSummary.rep-summary > *{
  width: 100%;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 12px 12px;
}

/* Títulos/labels: no cortar letras, cortar por palabras */
#repSummary.rep-summary *{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Si tu resumen mete “mini tarjetas” dentro (grid interno),
   forzamos a que ocupen todo el ancho también */
#repSummary.rep-summary .rep-kpis,
#repSummary.rep-summary .kpis,
#repSummary.rep-summary .kpi-grid,
#repSummary.rep-summary .rep-grid,
#repSummary.rep-summary .grid{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid !important;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Y si hay elementos internos tipo “kpi” los estiramos */
#repSummary.rep-summary .rep-kpi,
#repSummary.rep-summary .kpi,
#repSummary.rep-summary .stat{
  width: 100%;
  min-width: 0;
}

/* Proyecto (texto largo) – evitar que se parta fatal en vertical */
#repSummary.rep-summary b,
#repSummary.rep-summary strong{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* La tabla de debajo: que no rompa el layout (scroll horizontal si hace falta) */
.rep-table-wrap{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rep-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 680px; /* para que en móvil haga scroll y no se rompa */
}
/* ===========================
   INFORMES + UI PREMIUM
   Añadir al FINAL de gestion.css
   =========================== */

/* Tabs estilo “pills” premium */
.g-tabs{
  gap:10px;
  flex-wrap: wrap;
}
.g-tab{
  border-radius: 999px;
  border: 1px solid rgba(184,110,136,.22);
  background: rgba(255,255,255,.58);
  color: rgba(88,38,55,.95);
  padding: 10px 14px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.g-tab:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.06);
}
.g-tab.is-on{
  background:
    linear-gradient(180deg, rgba(255,245,248,.96), rgba(232,184,198,.72));
  border-color: rgba(184,110,136,.35);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

/* Inputs premium */
input, select{
  border-radius: 14px;
  border: 1px solid rgba(184,110,136,.22);
  background: rgba(255,255,255,.70);
}
input:focus, select:focus{
  outline: none;
  border-color: rgba(184,110,136,.55);
  box-shadow: 0 0 0 4px rgba(232,184,198,.28);
}

/* Layout informes */
.rep-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
@media(min-width: 980px){
  .rep-grid{ grid-template-columns: 420px 1fr; }
}

.rep-card{
  border-radius: 22px;
  border: 1px solid rgba(184,110,136,.22);
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
  padding:16px;
  overflow:hidden;
  position: relative;
}

.rep-card-title{
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 10px;
  color: rgba(88,38,55,.96);
}

/* KPIs ocupando ancho completo y bien “aireados” */
.rep-summary{ width:100%; max-width:100%; }
.rep-kpi{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
@media(min-width: 620px){
  .rep-kpi{ grid-template-columns: 1fr 1fr; }
}
.rep-kpi-item{
  border-radius: 16px;
  border: 1px solid rgba(184,110,136,.18);
  background: rgba(255,255,255,.62);
  padding: 10px 12px;
}
.rep-kpi-label{ font-size: 12px; color: rgba(44,22,30,.62); }
.rep-kpi-value{ font-weight: 900; color: rgba(44,22,30,.92); margin-top: 2px; }

/* Tabla vista previa: nada de desbordes y ocupa todo */
.rep-table-wrap{
  width:100%;
  max-width:100%;
  overflow:auto;
  border-radius: 18px;
  border: 1px solid rgba(184,110,136,.18);
  background: rgba(255,255,255,.55);
  margin-top: 12px;
}

.rep-table{
  width:100%;
  min-width: 760px; /* fuerza scroll en móvil, evita apelmazado */
  border-collapse: separate;
  border-spacing: 0;
}
.rep-table th, .rep-table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(184,110,136,.14);
  vertical-align: top;
  white-space: nowrap;
}
.rep-table td:last-child{ white-space: normal; } /* notas/descripcion sí puede romper */
.rep-table thead th{
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, rgba(255,245,248,.96), rgba(255,255,255,.75));
  z-index: 1;
  font-weight: 900;
  color: rgba(88,38,55,.95);
}

/* Botonera informes */
.rep-actions{
  display:flex;
  flex-wrap: wrap;
  gap:10px;
  margin-top: 12px;
}

/* PRINT: PDF bonito (solo informe) */
@media print{
  body{ background:#fff !important; }
  .nvh, .g-tabs, #reloadBtn, #logoutBtn, a.btn.ghost{ display:none !important; }
  .g-panel{ display:none !important; }
  #tab-informes{ display:block !important; }
  .rep-card{ box-shadow:none !important; border:1px solid #ddd !important; }
  .rep-table{ min-width: 0 !important; }
}
.rep-inv-card{
  border:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.7);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.04);
}
.rep-inv-top{display:flex;gap:10px;align-items:center;}
.rep-inv-emoji{font-size:22px;line-height:1;}
.rep-inv-label{font-weight:700;}
.rep-inv-count{font-size:28px;font-weight:800;margin-top:10px;}
/* ===========================
   ALERTAS (premium)
   =========================== */
.g-alerts{
  display:grid;
  gap:10px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .g-alerts{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.g-alert{
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 44px rgba(0,0,0,.06);
  min-width: 0;
}

.g-alert-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.g-alert-title{
  font-weight: 950;
  color: rgba(88,38,55,.95);
}

.g-alert-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  border: 1px solid rgba(184,110,136,.20);
  background: rgba(255,245,248,.92);
}

.g-alert-body{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(44,22,30,.72);
  overflow-wrap: anywhere;
}

.g-alert-actions{
  margin-top: 10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* estados */
.g-alert.ok{ border-color: rgba(50,160,90,.20); }
.g-alert.warn{ border-color: rgba(220,160,60,.25); }
.g-alert.bad{ border-color: rgba(220,80,80,.25); }

.g-alert.ok .g-alert-pill{ background: rgba(235,255,242,.95); border-color: rgba(50,160,90,.22); }
.g-alert.warn .g-alert-pill{ background: rgba(255,250,234,.95); border-color: rgba(220,160,60,.28); }
.g-alert.bad .g-alert-pill{ background: rgba(255,238,238,.95); border-color: rgba(220,80,80,.28); }