/**
 * Estilos propios de "Seguimiento Pagos Solares" + del botón "Soporte
 * Técnico" en la sidebar. Reutiliza las variables/clases de app.css
 * (colores, table.data-table) — no las redefine.
 */

/*
 * (Aquí vivían los estilos de .sidebar-external-link, el botón "Soporte
 * Técnico" del menú lateral. Se eliminaron al reestructurar el menú: ese
 * botón ahora es un ítem más de .eg-side__nav y hereda su apariencia de
 * app.css, así que estas reglas apuntaban a clases inexistentes.)
 */

/*
 * Bloque sticky propio de Facturación: toolbar ("+ Nuevo proyecto" de ESTA
 * vista, no el botón azul de Gerencia en la barra superior de la app) +
 * barra de filtros, juntos — quedan fijos arriba al hacer scroll para no
 * tener que subir hasta el tope con muchos proyectos. `top: var(--head-h)`
 * es el alto de la barra superior blanca (.eg-head, app.css). Fondo sólido
 * (var(--bg), el mismo del body) para que el
 * contenido de abajo no se transparente en el hueco entre el botón y la
 * barra de filtros mientras hace scroll por debajo. Solo dentro de
 * #view-pagos-solares: no afecta Dashboard/Kanban/OR.
 *
 * Espacio arriba/abajo del botón simétrico (14px, igual al margin-bottom
 * del toolbar) en ambos estados (normal y sticky): `.eg-body` (app.css,
 * compartida) trae 14px de padding-top que de otro modo se sumarían SOLO al
 * espacio de arriba antes de hacer scroll (al quedar sticky ese padding ya
 * no cuenta, por eso antes se veía más grande arriba que abajo, y además
 * cambiaba de tamaño al hacer scroll). Se anula con un margin-top negativo
 * exactamente igual en la vista, y el propio bloque sticky aporta el mismo
 * 14px como padding-top — así el hueco de arriba es 14px SIEMPRE, se haya
 * hecho scroll o no.
 */
#view-pagos-solares.view { margin-top: -14px; }
#view-pagos-solares .pagos-barra-sticky {
  position: sticky; top: var(--head-h); z-index: 40;
  background: var(--bg); padding-top: 14px;
}
.pagos-toolbar { margin-bottom: 14px; display: flex; justify-content: flex-end; }
#view-pagos-solares .pagos-filtros-bar input[type="text"] {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 8px 10px; font-size: 13px; background: #fff; color: var(--text); min-width: 200px;
}

/*
 * Encabezado de columnas de cada tabla de proyecto, también sticky —
 * justo debajo del bloque sticky (toolbar + filtros). La altura real se mide
 * en JS (PagosSolares._medirAlturaFiltros) y se guarda en esta var CSS
 * escopeada a la vista; 150px es solo el valor de respaldo antes de medir.
 */
#view-pagos-solares { --pagos-filtros-alto: 150px; }
#view-pagos-solares table.pagos-table thead th {
  position: sticky;
  top: calc(var(--head-h) + var(--pagos-filtros-alto));
  background: #fff;
  z-index: 20;
}

/*
 * Sin overflow:hidden (a propósito): cualquier ancestro con overflow != visible
 * se convierte en el contenedor de referencia de un position:sticky
 * descendiente en vez de la ventana — rompía el thead sticky de la tabla
 * (aparecía mal ubicado) y además recortaba filas de momento 3+ que ese
 * cálculo roto dejaba fuera de su medición. El redondeado ahora se logra
 * solo en las esquinas superiores del encabezado del proyecto, no recortando
 * el contenido — las esquinas inferiores de la tabla quedan a escuadra
 * (imperceptible dentro del borde ya redondeado del grupo).
 */
.pagos-proyecto-grupo {
  margin-bottom: 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: border-color .15s, box-shadow .15s;
}
.pagos-proyecto-grupo:hover { border-color: rgba(0,104,212,.24); box-shadow: 0 4px 14px rgba(16,32,80,.06); }

/*
 * Antes era una ristra de "Etiqueta: valor" en una sola línea envolvente:
 * todo con el mismo peso, sin jerarquía, y había que leerla entera para
 * encontrar un dato. Ahora se separa en dos bloques — a la izquierda quién
 * es el proyecto, a la derecha sus cifras — que es como se consulta.
 */
.pagos-proyecto-header {
  padding: 14px 16px; background: var(--muted); border-bottom: 1px solid var(--border);
  border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg);
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center;
}
.pagos-proyecto-identidad { min-width: 0; margin-right: auto; }
.pagos-proyecto-nombre { font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.pagos-proyecto-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pagos-proyecto-id {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--azul-medium);
  background: var(--info-bg); border-radius: 999px; padding: 3px 9px;
}
.pagos-proyecto-cliente { font-size: 12.5px; color: var(--text-2); }

/* Cifras del contrato: número grande, etiqueta pequeña debajo — mismo patrón
   que los KPI del Dashboard, para que se lean igual en toda la app. */
.pagos-cifras { display: flex; flex-wrap: wrap; gap: 10px; }
.pagos-cifra {
  display: flex; flex-direction: column; gap: 2px; min-width: 96px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 12px;
}
.pagos-cifra-valor { font-size: 16px; font-weight: 800; color: var(--navy); line-height: 1.15; }
.pagos-cifra-label { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }

.pagos-proyecto-acciones { display: flex; align-items: center; gap: 8px; }
.pagos-toggle {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--r-md);
  border: 1px solid var(--border); background: #fff; color: var(--text-2);
  font-size: 12px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .18s;
}
.pagos-toggle:hover { background: var(--muted); color: var(--text); }
/* Plegado: la tabla se oculta y la flecha apunta a la derecha. Se usa
   display:none y no max-height porque la tabla lleva un thead sticky y
   cualquier recorte intermedio lo descoloca. */
.pagos-grupo-plegado .pagos-toggle { transform: rotate(-90deg); }
.pagos-grupo-plegado table.pagos-table { display: none; }
/* Plegado se queda la franja de avance: es el resumen del proyecto, justo lo
   que interesa ver cuando los hitos están ocultos. */
.pagos-grupo-plegado .pagos-avance { border-bottom: none; border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* Color por métrica: el mismo dato lleva siempre el mismo color en todos los
   proyectos, así se localiza por color sin leer la etiqueta. */
.pagos-cifra[data-campo="capacidadKwp"] { border-left: 3px solid var(--azul-dodger); }
.pagos-cifra[data-campo="valorTotalContrato"] { border-left: 3px solid var(--verde-ok); }
.pagos-cifra[data-campo="fechaInicioContrato"] { border-left: 3px solid var(--violeta); }
.pagos-cifra[data-campo="diasVigenciaPlazo"] { border-left: 3px solid var(--naranja); }

/*
 * Franja de avance: cada tramo es un hito, su ancho es el % contractual y su
 * color el estado que la fila ya muestra. No calcula nada nuevo — es la misma
 * tabla, leída de un vistazo. El hueco final (si los % no suman 100) queda en
 * gris de fondo, que es justamente lo que aún no está repartido.
 */
.pagos-avance { padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--border); }
.pagos-avance-barra { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--muted); }
.pagos-seg { display: block; height: 100%; transition: filter .15s; animation: pagosSegGrow .6s cubic-bezier(.22,.61,.36,1) backwards; }
.pagos-seg + .pagos-seg { box-shadow: inset 1px 0 0 rgba(255,255,255,.65); }
.pagos-seg:hover { filter: brightness(1.12); }
@keyframes pagosSegGrow { from { width: 0 !important; } }
.pagos-seg-verde { background: var(--verde-ok); }
.pagos-seg-azul { background: var(--azul-medium); }
.pagos-seg-naranja { background: var(--naranja); }
.pagos-seg-rojo { background: #C1483C; }
.pagos-seg-gris { background: #C9D2E3; }

/* Leyenda: qué es cada color y cuánto del contrato tiene asignado. */
.pagos-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 9px; }
.pagos-leyenda-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.pagos-leyenda-item b { font-weight: 800; color: var(--navy); font-family: var(--font-mono); }
.pagos-punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.pagos-punto-verde { background: var(--verde-ok); }
.pagos-punto-azul { background: var(--azul-medium); }
.pagos-punto-naranja { background: var(--naranja); }
.pagos-punto-rojo { background: #C1483C; }
.pagos-punto-gris { background: #C9D2E3; }
.pagos-punto-vacio { background: var(--muted); border: 1px solid var(--border-strong); }

/* Lo facturado, lo que falta y el total, cada uno con su rótulo: antes iba
   todo en una frase corrida y había que leerla entera para saber cuánto
   queda por facturar, que es el dato que se consulta. */
.pagos-avance-pie { display: flex; align-items: flex-end; gap: 10px 26px; flex-wrap: wrap; margin-top: 11px; }
.pagos-avance-cifra { display: flex; flex-direction: column; gap: 2px; }
.pagos-avance-rotulo { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.pagos-avance-cifra b { font-size: 16px; font-weight: 800; color: var(--navy); }
.pagos-avance-cifra b.pagos-avance-hecho { color: var(--verde-profundo); }
.pagos-avance-cifra b.pagos-avance-falta { color: var(--warn); }
.pagos-avance-pct { margin-left: auto; font-size: 18px; font-weight: 800; color: var(--navy); font-family: var(--font-mono); }

/* Modal de crear proyecto/agregar hito: más ancho que el .modal base (400px) por tener varios campos. */
.modal.pagos-modal-ancho { width: min(560px, 92vw); }

table.pagos-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
/*
 * Los encabezados envuelven en vez de ir en una sola línea. Era la causa
 * principal del desplazamiento lateral: un título como "Fecha Fin Contrato
 * (Vigencia)" con nowrap fijaba el ancho mínimo de toda su columna. Partido
 * en dos líneas ocupa la mitad, y el contenido de las celdas no cambia.
 */
table.pagos-table th {
  text-align: left; background: var(--muted); color: var(--text-2);
  font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 10.5px;
  padding: 8px 7px; border-bottom: 1px solid var(--border);
  white-space: normal; line-height: 1.3; vertical-align: bottom;
}
table.pagos-table td { padding: 5px 7px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
table.pagos-table tbody tr { transition: background .12s; }
table.pagos-table tbody tr:hover td { background: rgba(0,104,212,.035); }
table.pagos-table tbody tr:last-child td { border-bottom: none; }

table.pagos-table td.pagos-celda-editable input { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 8px; font-size: 12.5px; font-family: inherit; background: #fff; color: var(--text); }
/*
 * Ancho mínimo por tipo de dato, aprovechando el data-tipo que el input ya
 * trae. Antes todos pedían 90px por igual: el porcentaje sobraba y las
 * fechas se quedaban cortas. Cada uno pide justo lo que necesita para verse
 * completo, que es lo que permite que la tabla quepa sin recortar nada.
 */
table.pagos-table input[data-tipo="fecha"] { min-width: 108px; }
table.pagos-table input[data-tipo="porcentaje"] { min-width: 56px; }
table.pagos-table input[data-tipo="numero"], table.pagos-table input[data-tipo="moneda"] { min-width: 84px; }
table.pagos-table input[data-tipo="texto"] { min-width: 104px; }
table.pagos-table td.pagos-celda-editable input:focus { outline: 1px solid var(--azul-medium); border-color: var(--azul-medium); }

/* Columnas derivadas: fondo tenue para distinguir "esto lo calcula el
   sistema" de "esto lo escribes tú". Se quita la cursiva — con las pastillas
   de estado dentro se leía descuidado. */
table.pagos-table td.pagos-celda-calculada { color: var(--text-2); background: #FAFBFD; }

.pagos-fila-cambiada td { background: var(--warn-bg); }

.pagos-btn-guardar { background: var(--azul-medium); color: #fff; border: none; border-radius: var(--r-md); padding: 6px 11px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s, filter .15s; }
.pagos-btn-guardar:disabled { background: #EDF0F6; color: var(--text-3); cursor: default; }
.pagos-btn-guardar:hover:not(:disabled) { filter: brightness(1.08); }