/* ======================================================================
   Vista Rentabilidad — ciclo de proyecto.

   Archivo NUEVO a propósito: no se toca ninguna hoja existente, que es
   territorio de la persona de diseño. Todo lo de aquí reutiliza las
   variables de :root de app.css — ningún color nuevo — y las clases
   compartidas .data-table / .table-scroll para que la tabla se vea como
   las demás del sistema.
   ====================================================================== */

.rent-cab { margin-bottom: 14px; }
.rent-cab h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--text); }
.rent-cab p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.55; max-width: 720px; }
.rent-cab code {
  background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1px 5px; font-family: var(--font-mono); font-size: 11.5px;
}

/* --- Franja de agregados ---------------------------------------------- */
.rent-agregados {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.rent-agregado {
  flex: 1 1 150px; min-width: 150px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.rent-agregado > span {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
}
.rent-agregado > b { font-size: 19px; font-weight: 800; color: var(--text); line-height: 1.1; }
.rent-agregado > i { font-style: normal; font-size: 11.5px; color: var(--text-muted); }

/* --- Tabla ------------------------------------------------------------ */
.rent-tabla .rent-sub {
  display: block; font-size: 11px; color: var(--text-muted); font-family: var(--font-mono);
}
.rent-tabla .rent-dias { font-weight: 700; white-space: nowrap; }
.rent-tabla .rent-dias i {
  display: block; font-style: normal; font-size: 11px; font-weight: 400; color: #8a5300;
}

/* Encendido vs. en curso: la distinción se hace con las variables que ya
   existen (--success para lo cerrado, --energitel-blue para lo que sigue
   corriendo), sin introducir colores nuevos. */
.rent-estado {
  display: inline-block; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px; padding: 2px 9px; border: 1px solid var(--border);
}
.rent-estado.rent-encendido { color: var(--success); border-color: rgba(31,163,92,.35); background: rgba(31,163,92,.08); }
.rent-estado.rent-en-curso { color: var(--energitel-blue); border-color: rgba(0,113,188,.3); background: rgba(0,113,188,.07); }
.rent-estado.rent-sin-referencia { color: var(--text-muted); background: var(--muted); }

/* Franja a la izquierda de la fila, mismo recurso que usa el panel OR para
   un hito cumplido: se ve el estado sin tener que leer la columna. */
.rent-tabla tr.rent-encendido td:first-child { box-shadow: inset 3px 0 0 var(--success); }
.rent-tabla tr.rent-en-curso td:first-child { box-shadow: inset 3px 0 0 var(--energitel-blue); }
.rent-tabla tr.rent-incoherente { background: rgba(242,201,76,.12); }

/* --- Avisos y estados vacíos ------------------------------------------ */
.rent-aviso {
  border: 1px solid rgba(242,201,76,.5); background: rgba(242,201,76,.12);
  border-radius: var(--r-md); padding: 9px 12px; margin-bottom: 12px;
  font-size: 13px; color: #8a5300; line-height: 1.5;
}
.rent-vacio { font-size: 13.5px; color: var(--text-muted); padding: 18px 0; }

.rent-error {
  border: 1px solid rgba(179,38,30,.3); background: var(--danger-bg);
  border-radius: var(--r-md); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.rent-error b { color: var(--danger); font-size: 14px; }
.rent-error span { font-size: 13px; color: var(--text); }
.rent-error i { font-style: normal; font-size: 12px; color: var(--text-2); }

/* --- Los no medibles: se muestran, plegados ---------------------------- */
.rent-omitidos { margin-top: 16px; }
.rent-omitidos > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text-2);
  padding: 8px 0;
}
.rent-omitidos > summary:hover { color: var(--energitel-blue); }
.rent-omitidos .data-table { margin-top: 8px; }

@media (max-width: 900px) {
  .rent-agregado { flex-basis: 100%; }
}