/* ==========================================================================
   Aldecort · Detalle de una obra y sus diálogos (ObraDetalleDialog, HitosObra,
   FilaHito, CompletarHitoDialog, DocumentosObra, ObraFormDialog)
   Prefijo obra- (singular). Se carga detrás de css/obras.css: reutiliza los
   chips (.obras-chip y las clases de estado obra-*), las pestañas, el pie y el
   seguimiento de css/crm.css (.crm-pestanas, .footer-form, .crm-seg-*).

   1. Diálogo y cabecera
   2. Hitos: grupos por etapa y filas
   3. Documentos
   4. Mini-diálogos (Completar, Reabrir) y lista de archivos
   5. Formulario de obra
   ========================================================================== */

/* ── 1. Diálogo y cabecera ──────────────────────────────────────────────── */
/* Más ancho que el de oportunidades (880 px en línea) y con el mismo alto fijo de .crm-dialogo: la cabecera y las pestañas
   quedan quietas y el panel de la pestaña se desplaza. */
.obra-cabecera {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem;
  flex: 0 0 auto; margin-bottom: 1rem;
}
.obra-cabecera-datos { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; flex: 1 1 22rem; }
.obra-cabecera-linea {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; margin: 0;
  font-size: 0.875rem; color: var(--color-foreground);
}
.obra-cabecera-linea > i { color: var(--color-muted-foreground); }
.obra-etapa { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; }
.obra-progreso-texto { font-size: 0.8125rem; color: var(--color-muted-foreground); font-variant-numeric: tabular-nums; }
.obra-cabecera-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.obra-cabecera-acciones .btn > i { margin-right: 0.375rem; }
/* El motivo por el que no se puede pasar a Ejecución, en tinta (no solo color: lleva candado). */
.obra-paso-motivo {
  display: flex; align-items: baseline; gap: 0.375rem; flex: 1 1 100%; margin: 0;
  font-size: 0.8125rem; color: var(--color-foreground);
}

/* ── 2. Hitos: grupos por etapa y filas ─────────────────────────────────── */
.obra-hitos { display: flex; flex-direction: column; gap: 1rem; }
/* Resumen «Causa la alerta: …»: fondo neutro, borde izquierdo en el rojo de vencida y la campana (no solo color). */
.obra-causa {
  display: flex; align-items: baseline; gap: 0.5rem; margin: 0; padding: 0.625rem 0.75rem;
  background: var(--color-muted); border-left: 4px solid var(--obra-vencida); border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 500; overflow-wrap: anywhere;
}
.obra-grupo { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-card); }
.obra-grupo-titulo {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.625rem 0.75rem; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.obra-grupo-titulo:focus-visible { outline: 2px solid var(--crm-brand-500); outline-offset: -2px; }
.obra-grupo-contador { font-weight: 500; color: var(--color-muted-foreground); font-variant-numeric: tabular-nums; }
.obra-grupo-vacio { margin: 0; padding: 0 0.75rem 0.75rem; font-size: 0.8125rem; color: var(--color-muted-foreground); }
.obra-hitos-lista { margin: 0; padding: 0; list-style: none; }

/* Una fila por hito, separadas por una raya. La que causa la alerta lleva la raya izquierda roja y su texto «Causa la
   alerta» con campana. */
.obra-hito { padding: 0.75rem; border-top: 1px solid var(--color-border); }
.obra-hito--alerta { box-shadow: inset 4px 0 0 var(--obra-vencida); }
.obra-hito-cabecera { display: flex; align-items: flex-start; gap: 0.625rem; }
.obra-hito-check { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; }
.obra-hito-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; min-width: 0; }
.obra-hito-nombre { margin: 0; font-weight: 600; }
.obra-hito-causa { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--obra-vencida); }
.obra-hito-cuerpo { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.375rem 0 0 1.75rem; min-width: 0; }
.obra-hito-datos { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; font-size: 0.8125rem; color: var(--color-muted-foreground); }
.obra-hito-datos i { margin-right: 0.25rem; }
.obra-hito-cumplido { margin: 0; font-size: 0.8125rem; color: var(--color-foreground); }
.obra-hito-bloqueo { display: flex; align-items: baseline; gap: 0.375rem; margin: 0; font-size: 0.8125rem; color: var(--color-foreground); }
.obra-hito-acciones { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem; }
.obra-hito-acciones .btn > i { margin-right: 0.375rem; }
.obra-hito-obs .crm-etiqueta,
.obra-hito-fecha .crm-etiqueta { display: block; margin-bottom: 0.25rem; }
.obra-hito-obs .obra-hito-acciones { justify-content: flex-end; margin-top: 0.375rem; }
.obra-hito-obs-texto { margin: 0; font-size: 0.875rem; white-space: pre-line; }

/* ── 3. Documentos ──────────────────────────────────────────────────────── */
.obra-docs { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.obra-doc {
  display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.375rem 0.5rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-card);
}
.obra-doc-icono { flex: 0 0 auto; color: var(--color-muted-foreground); }
.obra-doc-texto { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.obra-doc-nombre { font-size: 0.875rem; font-weight: 500; }
.obra-doc-meta { font-size: 0.75rem; color: var(--color-muted-foreground); font-variant-numeric: tabular-nums; }
.btn.obra-doc-boton { flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0; }
.obra-doc-eliminar { color: var(--color-destructive); }

.obra-documentacion { display: flex; flex-direction: column; gap: 1.25rem; }
.obra-docs-etapa { display: flex; flex-direction: column; gap: 0.5rem; }
.obra-docs-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.obra-docs-titulo { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.obra-documentacion .obra-grupo-vacio { padding: 0; }

/* ── 4. Mini-diálogos y lista de archivos ───────────────────────────────── */
.obra-mini { display: flex; flex-direction: column; gap: 1rem; }
.obra-mini-hito { margin: 0; font-weight: 600; }
.obra-mini-campo { display: flex; flex-direction: column; gap: 0.25rem; }
.obra-mini-campo .crm-form-ayuda { margin: 0; }
/* Botón que envuelve el InputFile oculto: al pulsarlo se abre el selector del navegador. Con el foco en el input, el anillo
   se ve en el botón. */
.obra-mini-elegir { align-self: flex-start; position: relative; }
.obra-mini-elegir > i { margin-right: 0.375rem; }
.obra-mini-elegir:focus-within { box-shadow: var(--focus-ring); }
.obra-mini-error {
  display: flex; align-items: baseline; gap: 0.5rem; margin: 0; padding: 0.5rem 0.75rem;
  border-left: 4px solid var(--color-destructive); background: var(--color-muted); border-radius: var(--radius-sm);
  font-size: 0.875rem; overflow-wrap: anywhere;
}
.obra-mini .footer-form { margin-top: 0; }

/* Un archivo por fila: icono y texto de su estado (no solo color). */
.obra-archivos { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.obra-archivo {
  display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.8125rem;
}
.obra-archivo-nombre { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.obra-archivo-estado { flex: 0 1 auto; min-width: 0; color: var(--color-muted-foreground); overflow-wrap: anywhere; text-align: right; }
.obra-archivo--guardado > i { color: var(--obra-completa); }
.obra-archivo--error > i,
.obra-archivo--error .obra-archivo-estado { color: var(--obra-vencida); }
.obra-archivo--subiendo > i { color: var(--obra-curso); }

/* ── 5. Formulario de obra ──────────────────────────────────────────────── */
.obra-form-hitos { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.obra-form-hitos .crm-etiqueta { margin: 0 0 0.375rem; }
.obra-form-hitos-lista { margin: 0; padding-left: 1.25rem; font-size: 0.875rem; }
.obra-form .footer-form { margin-top: 1.25rem; }

@media (max-width: 575.98px) {
  .obra-hito-cuerpo { margin-left: 0; }
}