/* ============================================================================
   estilos.css — Seguimiento de proyecto · Consorcio CPNT
   Paleta tomada del logo: azul #062f87 y verde #46b548.
   Criterio: composición cuadrada, reglas finas, sin sombras ni degradados.
============================================================================ */

:root{
  --azul:      #062f87;
  --azul-osc:  #04205e;
  --verde:     #46b548;
  --verde-osc: #35913a;

  --tinta:     #11161f;
  --texto:     #39414f;
  --tenue:     #6b7383;
  --linea:     #e1e5ee;
  --linea-fte: #c9cfdd;
  --panel:     #f6f7fa;
  --blanco:    #ffffff;

  --ancho: 1160px;
  --paso:  8px;

  --serif-no: 'Montserrat', 'Segoe UI Semibold', 'Segoe UI', Tahoma, sans-serif;
  --sans:     'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  color:var(--texto);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--serif-no); color:var(--tinta); margin:0; font-weight:700; }

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  padding-left:24px;
  padding-right:24px;
}

.etiqueta{
  display:block;
  font-family:var(--serif-no);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tenue);
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.cabecera{
  position:sticky;
  top:0;
  z-index:30;
  border-bottom:1px solid var(--linea);
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px);
  transition:box-shadow .3s ease;
}
.cabecera--fija{ box-shadow:0 10px 24px -20px rgba(17,22,31,.55); }
.cabecera__fila{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:18px;
  padding-bottom:18px;
  transition:padding .3s ease;
}
.cabecera--fija .cabecera__fila{ padding-top:11px; padding-bottom:11px; }
.cabecera__logo{ height:46px; width:auto; display:block; transition:height .3s ease; }
.cabecera--fija .cabecera__logo{ height:36px; }
.cabecera__meta{ text-align:right; line-height:1.4; }
.cabecera__proceso{
  display:block;
  font-family:var(--serif-no);
  font-size:14px;
  font-weight:700;
  color:var(--azul);
  letter-spacing:.02em;
}
.cabecera__cliente{ display:block; font-size:12.5px; color:var(--tenue); }
.cabecera__derecha{ display:flex; align-items:center; gap:22px; }
.cabecera__sesion{
  display:flex;
  align-items:center;
  gap:14px;
  padding-left:22px;
  border-left:1px solid var(--linea);
}
.cabecera__usuario{
  font-family:var(--serif-no);
  font-size:12px;
  font-weight:600;
  color:var(--tinta);
  white-space:nowrap;
}
.cabecera__salir{ padding:8px 14px; }

/* ── Portada ──────────────────────────────────────────────────────────────
   Fondo blanco con el timbrado animado. La barra de avance va segmentada por
   hito y los datos clave en tarjetas. */
.resumen{
  position:relative;
  overflow:hidden;
  background:var(--blanco);
  border-bottom:1px solid var(--linea);
  padding:56px 0 52px;
}
.resumen .contenedor{ position:relative; z-index:1; }

.trama{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:linear-gradient(to right, transparent 8%, rgba(0,0,0,.35) 42%, #000 78%);
          mask-image:linear-gradient(to right, transparent 8%, rgba(0,0,0,.35) 42%, #000 78%);
  will-change:transform;
}
.trama__capa{
  position:absolute;
  inset:-18% -8%;
  background:url("assets/trama.svg") repeat;
  background-size:300px 300px;
}
.trama__capa--base{
  opacity:.5;
  animation:deriva 52s linear infinite;
}
.trama__capa--luz{
  opacity:0;
  animation:deriva 52s linear infinite, barrido 13s linear infinite;
}
@supports ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .trama__capa--luz{
    opacity:1;
    -webkit-mask-image:linear-gradient(45deg, transparent 44%, #000 50%, transparent 56%);
            mask-image:linear-gradient(45deg, transparent 44%, #000 50%, transparent 56%);
    -webkit-mask-size:260% 260%;  mask-size:260% 260%;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  }
}
/* Un paso completo de la cadena: el mosaico vuelve a coincidir consigo mismo. */
@keyframes deriva{
  from{ background-position:0 0; }
  to  { background-position:100px -100px; }
}
@keyframes barrido{
  0%       { -webkit-mask-position:-35% 135%; mask-position:-35% 135%; }
  55%, 100%{ -webkit-mask-position:135% -35%; mask-position:135% -35%; }
}

.resumen__encabezado{ max-width:780px; margin-bottom:46px; }
.resumen__encabezado .etiqueta{ margin-bottom:12px; }
.titulo{
  font-size:32px;
  line-height:1.18;
  letter-spacing:-.015em;
}
.subtitulo{
  margin:12px 0 0;
  font-size:15px;
  color:var(--tenue);
}

.resumen__cuerpo{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:60px;
  align-items:end;
}

.avance{ min-width:0; }
.avance__cifra{ margin-bottom:38px; }
.avance__numero{
  font-family:var(--serif-no);
  font-weight:800;
  font-size:104px;
  line-height:.9;
  letter-spacing:-.045em;
  color:var(--azul);
  font-variant-numeric:tabular-nums;
  margin-top:8px;
}
.avance__numero i{
  font-style:normal;
  font-size:34px;
  font-weight:700;
  margin-left:8px;
  color:var(--verde);
  vertical-align:.42em;
}

/* Barra segmentada: un tramo por hito, ancho proporcional a su peso; dentro
   de cada tramo se pinta en verde lo cumplido de su checklist. */
.barra__pista{ position:relative; height:12px; }
.barra__segmentos{ display:flex; gap:3px; height:100%; }
.barra__segmento{
  position:relative;
  height:100%;
  overflow:hidden;
  background:#e4e8f0;
  transform:scaleX(0);
  transform-origin:left center;
  animation:tramo .7s cubic-bezier(.22,.7,.2,1) forwards;
  animation-delay:var(--d, 0ms);
  transition:background .25s;
}
@keyframes tramo{ to{ transform:scaleX(1); } }
.barra__segmento:hover{ background:#d3d9e6; }
.barra__segmento i{
  display:block;
  height:100%;
  width:0;
  background:var(--verde);
  transition:width .9s cubic-bezier(.22,.7,.2,1);
}
.barra__marca{                      /* dónde está el avance ahora mismo */
  position:absolute;
  top:-8px; bottom:-8px;
  width:2px;
  margin-left:-1px;
  background:var(--azul);
  opacity:0;
  animation:marca-entra .5s ease-out .75s forwards;
  transition:left 1.1s cubic-bezier(.22,.7,.2,1);
}
@keyframes marca-entra{ to{ opacity:1; } }
.barra__marca::after{
  content:"";
  position:absolute;
  inset:-3px -4px;
  border:1px solid var(--azul);
  opacity:0;
  animation:latido 3.2s ease-out 1.3s infinite;
}

/* Columna derecha de la portada: cifras y el botón del informe */
.resumen__lado{ display:flex; flex-direction:column; gap:10px; min-width:0; }
/* (doble clase: la regla base .btn va más abajo en la hoja) */
.btn.btn--pdf{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:16px 18px;
  font-size:11px;
  color:#fff;
  background:var(--azul);
  border-color:var(--azul);
}
.btn.btn--pdf svg{ width:16px; height:16px; }
.btn.btn--pdf::before{ background:var(--verde-osc); }
.btn.btn--pdf:hover{ border-color:var(--verde-osc); }
.btn--pdf-etapa{ margin-left:auto; align-self:flex-end; }
.btn--ocupado{ cursor:progress; opacity:.75; }
.btn--ocupado svg{ animation:bajando 1s ease-in-out infinite; }
@keyframes bajando{ 0%,100%{ transform:translateY(-1px); } 50%{ transform:translateY(2px); } }

/* Tarjetas de datos */
.datos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:0;
}
.datos__celda{
  background:var(--blanco);
  border:1px solid var(--linea-fte);
  padding:18px 20px 16px;
  transition:border-color .25s, transform .25s;
}
.datos__celda:hover{ border-color:var(--azul); }
.datos dt{
  font-family:var(--serif-no);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tenue);
}
.datos dd{
  margin:7px 0 0;
  font-family:var(--serif-no);
  font-size:19px;
  font-weight:600;
  color:var(--tinta);
  font-variant-numeric:tabular-nums;
}

/* ── Secciones ────────────────────────────────────────────────────────────── */
.seccion{ padding:44px 0; }
.seccion--gris{ background:var(--panel); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }

.seccion__titulo{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-bottom:14px;
  margin-bottom:26px;
  border-bottom:1px solid var(--linea-fte);
}
.seccion__titulo h2{ font-size:16px; letter-spacing:.02em; }

.leyenda{ margin:0; font-size:12px; color:var(--tenue); }
.punto{
  display:inline-block;
  width:9px; height:9px;
  margin:0 6px 0 16px;
  vertical-align:-1px;
  border:1px solid var(--linea-fte);
}
.leyenda .punto:first-child{ margin-left:0; }
.punto--completado{ background:var(--verde); border-color:var(--verde-osc); }
.punto--proceso{ background:var(--azul); border-color:var(--azul-osc); }
.punto--pendiente{ background:var(--blanco); }

/* ── Línea de tiempo ──────────────────────────────────────────────────────── */
.linea{
  display:flex;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:thin;
}
.nodo{
  flex:1 0 110px;
  min-width:110px;
  border:0;
  background:none;
  padding:0 6px;
  font:inherit;
  text-align:center;
  cursor:pointer;
  color:inherit;
  opacity:0;
  transform:translateY(8px);
  animation:aparece .5s cubic-bezier(.22,.7,.2,1) forwards;
  animation-delay:var(--d, 0ms);
}
@keyframes aparece{ to{ opacity:1; transform:none; } }

.nodo__hito{
  display:block;
  font-family:var(--serif-no);
  font-size:10px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--tenue);
  margin-bottom:10px;
}
.nodo__via{ display:block; position:relative; height:16px; }
.nodo__via::before{                    /* riel: se dibuja de izquierda a derecha */
  content:"";
  position:absolute;
  top:50%; left:0; right:0;
  height:1px;
  background:var(--linea-fte);
  transform:translateY(-50%) scaleX(0);
  transform-origin:left center;
  animation:riel .55s cubic-bezier(.22,.7,.2,1) forwards;
  animation-delay:calc(var(--d, 0ms) + 140ms);
  transition:background .3s;
}
@keyframes riel{ to{ transform:translateY(-50%) scaleX(1); } }
.nodo:first-child .nodo__via::before{ left:50%; }
.nodo:last-child  .nodo__via::before{ right:50%; }
.nodo--completado .nodo__via::before{ background:var(--verde); }
.nodo__marca{
  position:absolute;
  top:50%; left:50%;
  width:14px; height:14px;
  transform:translate(-50%,-50%);
  background:var(--blanco);
  border:1.5px solid var(--linea-fte);
  transition:background .3s, border-color .3s, transform .3s cubic-bezier(.3,1.4,.5,1);
}
.nodo--actual .nodo__marca::after{     /* latido sobre el hito en curso */
  content:"";
  position:absolute;
  inset:-5px;
  border:1.5px solid var(--azul);
  opacity:0;
  animation:latido 2.6s ease-out infinite;
}
@keyframes latido{
  0%       { transform:scale(.75); opacity:.5; }
  70%, 100%{ transform:scale(1.55); opacity:0; }
}
.nodo--salto .nodo__marca{ animation:salto .55s cubic-bezier(.3,1.5,.5,1); }
@keyframes salto{
  0%  { transform:translate(-50%,-50%) scale(1); }
  45% { transform:translate(-50%,-50%) scale(1.5); }
  100%{ transform:translate(-50%,-50%) scale(1); }
}
.nodo__cuerpo{ display:block; padding-top:12px; }
.nodo__codigo{
  display:block;
  font-family:var(--serif-no);
  font-size:12.5px;
  font-weight:700;
  color:var(--tinta);
}
.nodo__pct{
  display:block;
  font-family:var(--serif-no);
  font-size:11px;
  font-weight:700;
  color:var(--tenue);
  margin-top:5px;
  font-variant-numeric:tabular-nums;
}

.nodo--completado .nodo__marca{ background:var(--verde); border-color:var(--verde-osc); }
.nodo--completado .nodo__pct{ color:var(--verde-osc); }
.nodo--proceso .nodo__marca{ background:var(--azul); border-color:var(--azul-osc); }
.nodo--proceso .nodo__pct{ color:var(--azul); }
.nodo--proceso .nodo__codigo{ color:var(--azul); }
.nodo:hover .nodo__marca{ border-color:var(--azul); transform:translate(-50%,-50%) scale(1.25); }
.nodo:focus-visible{ outline:2px solid var(--azul); outline-offset:3px; }


/* ── Ficha de etapa: expediente ───────────────────────────────────────────
   Una sola columna. Cada fila lleva el rótulo a la izquierda y el contenido
   a la derecha, separadas por líneas finas: nada de cajas dentro de cajas. */
.etapa__interior{ padding:0 22px 8px 90px; }
.ficha{ border-top:1px solid var(--linea); }
.fila{
  display:grid;
  grid-template-columns:172px minmax(0,1fr);
  gap:8px 32px;
  padding:20px 0;
  border-bottom:1px solid var(--linea);
  transition:background .2s;
}
.fila:last-child{ border-bottom:0; }
.fila__rotulo span{
  display:block;
  font-family:var(--serif-no);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tinta);
  padding-top:2px;
}
.fila__rotulo small{
  display:block;
  margin-top:5px;
  font-size:11.5px;
  line-height:1.4;
  color:var(--tenue);
}
.fila__rotulo b{ font-weight:600; color:var(--texto); }
.fila__cuerpo{ min-width:0; }
.fila__cuerpo--estado{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:14px 32px;
}

/* Estado: control segmentado */
.estados{ display:inline-flex; border:1px solid var(--linea-fte); }
.estado-btn{
  padding:0 18px;
  height:38px;
  font-family:var(--serif-no);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tenue);
  background:var(--blanco);
  border:0;
  border-right:1px solid var(--linea-fte);
  cursor:pointer;
  transition:background .2s, color .2s;
}
.estado-btn:last-child{ border-right:0; }
.estado-btn:hover{ color:var(--azul); background:#f7f9fd; }
.estado-btn:focus-visible{ outline:2px solid var(--azul); outline-offset:-2px; }
.estado-btn--activo.estado-btn--pendiente{ background:var(--panel); color:var(--tinta); }
.estado-btn--activo.estado-btn--proceso{ background:var(--azul); color:#fff; }
.estado-btn--activo.estado-btn--completado{ background:var(--verde); color:#fff; }

/* Fechas en una línea */
.fechas{ display:flex; gap:10px; flex-wrap:wrap; }
.fecha{ display:flex; flex-direction:column; gap:5px; }
.fecha span{
  font-family:var(--serif-no);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tenue);
}
.fecha input{
  height:38px;
  width:148px;
  padding:0 10px;
  font-family:var(--sans);
  font-size:13px;
  color:var(--texto);
  background:var(--blanco);
  border:1px solid var(--linea-fte);
  border-radius:0;
  transition:border-color .15s;
}
.fecha input:focus{ outline:0; border-color:var(--azul); }

/* Nota (opcional, al pie de evidencias) */
.evid__nota{
  margin-top:16px;
  padding-top:14px;
  border-top:1px dashed var(--linea);
}
.evid__nota label{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:6px;
  font-family:var(--serif-no);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tenue);
}
.evid__nota label small{ font-family:var(--sans); font-size:11px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--tenue); }
.evid__nota label .guardado{ margin-left:auto; font-size:10px; }
.evid__nota textarea,
.fila--nota textarea{
  width:100%;
  min-height:72px;
  padding:9px 11px;
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.5;
  color:var(--texto);
  background:var(--blanco);
  border:1px solid var(--linea-fte);
  border-radius:0;
  resize:vertical;
  transition:border-color .15s;
}
.evid__nota textarea:focus,
.fila--nota textarea:focus{ outline:0; border-color:var(--azul); }
.evid__nota textarea{ min-height:48px; font-size:13px; }
.guardado{ color:var(--verde-osc) !important; opacity:0; transition:opacity .3s; }
.guardado--visible{ opacity:1; }

/* Evidencias */
.evid__acc{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.evid__vacio,.evid__pista{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:12.5px;
  color:var(--tenue);
}
.evid__vacio{ padding:13px 16px; border:1px dashed var(--linea-fte); }
.evid__pista{ margin-top:10px; font-size:12px; }
.evid__vacio svg,.evid__pista svg,.doc__ico svg,.btn svg,.foto__acc svg,.visor__sin svg{
  width:16px; height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto;
}
.fila--soltar{ background:#f3f6fd; }
.fila--soltar .evid__vacio{ border-color:var(--azul); color:var(--azul); }

.btn--primario{ background:var(--azul); border-color:var(--azul); color:#fff; }
.btn--primario::before{ background:var(--azul-osc); }
.btn--subir{ display:inline-flex; align-items:center; gap:8px; }
.btn--subir input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.btn--mini{ display:inline-flex; align-items:center; gap:6px; padding:7px 11px; font-size:10px; }
.btn--icono{ padding:7px 8px; }
.btn--icono svg{ width:14px; height:14px; }

.fotos{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));
  gap:10px;
  margin-bottom:10px;
}
.foto{ margin:0; border:1px solid var(--linea); background:var(--blanco); }
.foto__ver{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  padding:0;
  border:0;
  background:var(--panel);
  cursor:zoom-in;
  overflow:hidden;
}
.foto__ver img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s cubic-bezier(.22,.7,.2,1); }
.foto__ver:hover img{ transform:scale(1.04); }
.foto__pie{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:6px 6px 6px 9px;
  font-size:11px;
  color:var(--tenue);
  border-top:1px solid var(--linea);
}
.foto__pie > span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.foto__acc{ display:flex; gap:2px; flex:0 0 auto; }
.foto__acc button{
  width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:0; background:none;
  color:var(--tenue); cursor:pointer;
  transition:color .2s;
}
.foto__acc button:hover{ color:var(--azul); }
.foto__acc button.peligro:hover{ color:#a4342c; }
.foto__acc svg{ width:13px; height:13px; }

.docs{ display:grid; gap:8px; }
.doc{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--linea);
  background:var(--blanco);
  padding:9px 12px 9px 9px;
  transition:border-color .2s;
}
.doc:hover{ border-color:var(--linea-fte); }
.doc__principal{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  flex:1 1 auto;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.doc__ico{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:44px; height:44px;
  flex:0 0 auto;
  background:var(--panel);
  color:var(--azul);
}
.doc__ico svg{ width:18px; height:18px; }
.doc__ico em{ font-style:normal; font-family:var(--serif-no); font-size:8.5px; font-weight:700; letter-spacing:.08em; }
.doc--pdf .doc__ico{ color:#a4342c; }
.doc--excel .doc__ico{ color:var(--verde-osc); }
.doc--zip .doc__ico,.doc--plano .doc__ico{ color:var(--texto); }
.doc__texto{ min-width:0; }
.doc__texto strong{
  display:block;
  font-family:var(--serif-no);
  font-size:13px;
  font-weight:600;
  color:var(--tinta);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.doc__meta{ display:block; font-size:11.5px; color:var(--tenue); margin-top:2px; }
.doc__meta i{ font-style:normal; color:var(--texto); }
.doc__acc{ display:flex; gap:6px; flex:0 0 auto; }

/* Tareas, cada una con sus evidencias */
.fila--tareas .lista{ margin:0; border-top:0; }
.fila--tareas .lista li:last-child{ border-bottom:0; }
.tarea-fila{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
.tarea-fila .tarea{ padding:9px 2px; }
.tarea--sin-caja{ grid-template-columns:minmax(0,1fr); cursor:default; }
.tarea--sin-caja .tarea__texto{ color:var(--tenue); font-style:italic; }
.tarea__clip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:28px;
  padding:0 10px;
  font-family:var(--serif-no);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tenue);
  background:var(--blanco);
  border:1px solid var(--linea);
  cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.tarea__clip svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tarea__clip:hover{ color:var(--azul); border-color:var(--azul); }
.tarea-item--con .tarea__clip{ color:var(--azul); border-color:var(--linea-fte); }
.tarea-item--abierta .tarea__clip{ background:var(--azul); border-color:var(--azul-osc); color:#fff; }
.tarea-item--soltar{ background:#f3f6fd; }
.tarea__evid{
  margin:2px 0 12px 32px;
  padding:14px 16px 12px;
  border:1px solid var(--linea);
  border-left:3px solid var(--azul);
  background:var(--panel);
}
.tarea__evid .evid__acc{ margin-bottom:10px; }
.tarea__evid .fotos{ grid-template-columns:repeat(auto-fill, minmax(116px, 1fr)); }
.tarea__evid .evid__vacio{ background:var(--blanco); }
.tarea__evid .doc{ background:var(--blanco); }


/* Solo lectura (rol lector en la nube): los controles se ven, no se tocan */
.solo-lectura .estado-btn:disabled,.solo-lectura .fecha input:disabled,
.solo-lectura .fila--nota textarea:disabled,.solo-lectura .tarea input:disabled{ cursor:default; opacity:.75; }
.solo-lectura .tarea{ cursor:default; }

/* ── Visor ────────────────────────────────────────────────────────────── */
.visor{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(17,22,31,.72);
  animation:aparece .2s ease forwards;
}
.con-visor{ overflow:hidden; }
.visor__marco{
  width:min(1100px, 100%);
  max-height:100%;
  display:flex;
  flex-direction:column;
  background:var(--blanco);
  border:1px solid var(--linea-fte);
}
.visor__cab{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px 12px 18px;
  border-bottom:1px solid var(--linea);
}
.visor__titulo{ min-width:0; }
.visor__titulo strong{
  display:block;
  font-family:var(--serif-no);
  font-size:13.5px;
  font-weight:600;
  color:var(--tinta);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.visor__titulo span{ display:block; font-size:11.5px; color:var(--tenue); margin-top:2px; }
.visor__cuerpo{
  min-height:200px;
  max-height:calc(100vh - 120px);
  overflow:auto;
  background:var(--panel);
  display:flex;
  align-items:center;
  justify-content:center;
}
.visor__cuerpo img{ max-width:100%; max-height:calc(100vh - 120px); display:block; }
.visor__cuerpo iframe{ width:100%; height:calc(100vh - 120px); border:0; background:#fff; }
.visor__sin{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:48px 24px; text-align:center; color:var(--tenue); font-size:13px;
}
.visor__sin svg{ width:28px; height:28px; }
.visor__sin strong{ font-family:var(--serif-no); color:var(--tinta); font-weight:600; }
.visor__sin p{ margin:0 0 6px; max-width:420px; }

/* ── Diálogo (contraseña) ─────────────────────────────────────────────── */
.dialogo{
  position:fixed;
  inset:0;
  z-index:65;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  background:rgba(17,22,31,.6);
  animation:aparece .2s ease forwards;
}
.dialogo__marco{
  width:min(420px, 100%);
  background:var(--blanco);
  border:1px solid var(--linea-fte);
  padding:30px 30px 26px;
}
.dialogo__marco h3{ font-size:18px; margin-bottom:8px; }
.dialogo__texto{ margin:0 0 20px; font-size:13.5px; color:var(--tenue); line-height:1.5; }
.dialogo__marco .campo{ margin-bottom:14px; }
.dialogo__marco .campo input{ height:42px; font-size:14px; }
.dialogo__error{ margin:-4px 0 12px; font-size:12.5px; color:#a4342c; }
.dialogo__acciones{ justify-content:flex-end; margin-top:6px; }

/* ── Aviso ────────────────────────────────────────────────────────────── */
.aviso{
  position:fixed;
  right:20px; bottom:20px;
  z-index:70;
  max-width:min(420px, calc(100vw - 40px));
  padding:11px 16px;
  background:var(--tinta);
  color:#fff;
  font-size:13px;
  border-left:3px solid var(--verde);
  animation:aparece .25s cubic-bezier(.22,.7,.2,1) forwards;
}
.aviso--error{ border-left-color:#d9534f; }

/* ── Etapas ───────────────────────────────────────────────────────────────── */
.etapas{ border:1px solid var(--linea-fte); background:var(--blanco); }
.etapa + .etapa{ border-top:1px solid var(--linea); }

.etapa__cabeza{
  position:relative;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto 18px;
  align-items:center;
  gap:18px;
  width:100%;
  padding:18px 20px;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.etapa__cabeza:hover{ background:#fbfcfe; }
.etapa__barra{
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--linea);
}
.etapa__barra i{
  display:block;
  height:100%;
  width:0;
  background:var(--azul);
  transition:width .6s cubic-bezier(.22,.7,.2,1), background .3s;
}
.etapa--completado .etapa__barra i{ background:var(--verde); }
.etapa--pendiente  .etapa__barra{ background:transparent; }
.etapa{ position:relative; transition:background .25s; }
.etapa::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--azul);
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .3s cubic-bezier(.22,.7,.2,1);
}
.etapa--activa::before{ transform:scaleY(1); }
.etapa--logro .etapa__cabeza::after{      /* barrido verde al completar la etapa */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, rgba(70,181,72,.16) 45%, transparent 100%);
  transform:translateX(-100%);
  animation:logro 1s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes logro{ to{ transform:translateX(100%); } }
.etapa__cabeza:focus-visible{ outline:2px solid var(--azul); outline-offset:-2px; }

.etapa__num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  border:1px solid var(--linea-fte);
  font-family:var(--serif-no);
  font-size:14px;
  font-weight:700;
  color:var(--tenue);
}
.etapa--completado .etapa__num{ background:var(--verde); border-color:var(--verde-osc); color:#fff; }
.etapa--proceso   .etapa__num{ background:var(--azul);  border-color:var(--azul-osc);  color:#fff; }

.etapa__texto{ min-width:0; }
.etapa__codigo{
  display:block;
  font-family:var(--serif-no);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tenue);
}
.etapa__nombre{
  display:block;
  font-family:var(--serif-no);
  font-size:15px;
  font-weight:600;
  color:var(--tinta);
  line-height:1.35;
  margin-top:2px;
}
.etapa__sub{
  display:block;
  font-size:12.5px;
  color:var(--tenue);
  margin-top:3px;
  font-variant-numeric:tabular-nums;
}

.etapa__estado{ display:flex; align-items:center; gap:16px; }
.etapa__pct{
  font-family:var(--serif-no);
  font-size:15px;
  font-weight:700;
  color:var(--tinta);
  font-variant-numeric:tabular-nums;
  min-width:44px;
  text-align:right;
}
.insignia{
  display:inline-block;
  padding:4px 10px;
  border:1px solid var(--linea-fte);
  font-family:var(--serif-no);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tenue);
  white-space:nowrap;
}
.insignia--completado{ background:var(--verde); border-color:var(--verde-osc); color:#fff; }
.insignia--proceso{ background:var(--azul); border-color:var(--azul-osc); color:#fff; }

.flecha{
  width:9px; height:9px;
  border-right:1.5px solid var(--tenue);
  border-bottom:1.5px solid var(--tenue);
  transform:rotate(45deg);
  transition:transform .25s;
  justify-self:end;
  margin-bottom:4px;
}
.etapa--abierta .flecha{ transform:rotate(225deg); margin-bottom:-2px; }

.etapa__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .3s cubic-bezier(.22,.7,.2,1);
}
.etapa--abierta .etapa__panel{ grid-template-rows:1fr; }
.etapa__panel > div{ overflow:hidden; }

/* Checklist */
.lista{ list-style:none; margin:0 0 4px; padding:0; border-top:1px solid var(--linea); }
.lista li{ border-bottom:1px solid var(--linea); }
.tarea{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:9px 2px;
  cursor:pointer;
}
.tarea input{
  appearance:none; -webkit-appearance:none;
  margin:0;
  width:16px; height:16px;
  border:1.5px solid var(--linea-fte);
  background:var(--blanco);
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.tarea input:checked{ background:var(--verde); border-color:var(--verde-osc); }
.tarea input:checked::after{
  content:"";
  display:block;
  width:4px; height:8px;
  margin:1px auto 0;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(42deg);
  animation:palomita .24s cubic-bezier(.3,1.5,.5,1);
}
@keyframes palomita{
  from{ transform:rotate(42deg) scale(.2); opacity:0; }
  to  { transform:rotate(42deg) scale(1);  opacity:1; }
}
.tarea input:focus-visible{ outline:2px solid var(--azul); outline-offset:2px; }
.tarea__texto{ font-size:14px; color:var(--texto); }
.tarea input:checked ~ .tarea__texto{ color:var(--tenue); }

/* Campos */
.campos{
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  gap:20px;
  margin-top:20px;
}
.campo label{
  display:block;
  font-family:var(--serif-no);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tenue);
  margin-bottom:6px;
}
.campo textarea,
.campo input{
  width:100%;
  font-family:var(--sans);
  font-size:13.5px;
  color:var(--texto);
  background:var(--blanco);
  border:1px solid var(--linea-fte);
  padding:9px 11px;
  border-radius:0;
  transition:border-color .15s;
}
.campo textarea{ min-height:76px; resize:vertical; }
.campo textarea:focus,
.campo input:focus{ outline:0; border-color:var(--azul); }

/* ── Botones y control ────────────────────────────────────────────────────── */
.acciones{ display:flex; gap:8px; flex-wrap:wrap; }
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  font-family:var(--serif-no);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--azul);
  background:var(--blanco);
  border:1px solid var(--linea-fte);
  padding:9px 15px;
  cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--azul);
  transform:scaleY(0);
  transform-origin:bottom center;
  transition:transform .28s cubic-bezier(.22,.7,.2,1);
}
.btn:hover{ color:#fff; border-color:var(--azul); }
.btn:hover::before{ transform:scaleY(1); }
.btn--sutil::before{ background:#a4342c; }
.btn:focus-visible{ outline:2px solid var(--azul); outline-offset:2px; }
.btn--sutil{ color:var(--tenue); }
.btn--sutil:hover{ color:#fff; border-color:#a4342c; }

.control{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
  border:1px solid var(--linea);
  background:var(--panel);
  padding:20px 22px;
}
.control__estado{ margin:0; font-size:13px; color:var(--texto); }
.control__estado strong{ color:var(--tinta); font-variant-numeric:tabular-nums; }
.control__ayuda{ font-size:12px; color:var(--tenue); }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.pie{ border-top:1px solid var(--linea); padding:22px 0 30px; }
.pie__fila{
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--tenue);
}
.pie__fila span:first-child{ font-family:var(--serif-no); font-weight:600; color:var(--texto); }

/* ── Entradas y aparición al desplazar ───────────────────────────────────── */
.entra{
  opacity:0;
  transform:translateY(14px);
  animation:entra .7s cubic-bezier(.22,.7,.2,1) forwards;
  animation-delay:var(--d, 0ms);
}
@keyframes entra{ to{ opacity:1; transform:none; } }

.revelar{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,.7,.2,1), transform .6s cubic-bezier(.22,.7,.2,1);
  transition-delay:var(--d, 0ms);
}
.revelar--visible{ opacity:1; transform:none; }

/* ── Adaptación a pantallas estrechas ─────────────────────────────────────── */
@media (max-width:900px){
  .resumen__cuerpo{ grid-template-columns:1fr; gap:38px; }
  .resumen{ padding:48px 0 44px; }
  .avance__numero{ font-size:92px; }
  .cabecera__sesion .cabecera__usuario{ display:none; }
  .trama__capa{ background-size:240px 240px; }
  .trama__capa--base{ opacity:.34; }
  @keyframes deriva{ from{ background-position:0 0; } to{ background-position:80px -80px; } }
  .etapa__interior{ padding-left:20px; }
  .fila{ grid-template-columns:1fr; gap:10px; padding:16px 0; }
  .fila__rotulo small{ margin-top:2px; }
}
@media (max-width:620px){
  .contenedor{ padding-left:16px; padding-right:16px; }
  .cabecera__fila{ gap:14px; }
  .cabecera__logo{ height:36px; }
  .titulo{ font-size:25px; }
  .avance__numero{ font-size:72px; }
  .datos{ gap:8px; }
  .datos__celda{ padding:14px 14px 12px; }
  .datos dd{ font-size:17px; }
  .cabecera__derecha{ gap:12px; }
  .cabecera__sesion{ padding-left:12px; }
  .etapa__cabeza{ grid-template-columns:40px minmax(0,1fr) 14px; gap:12px; padding:14px 16px; }
  .etapa__num{ width:30px; height:30px; font-size:13px; grid-column:1; grid-row:1; align-self:start; }
  .etapa__texto{ grid-column:2; grid-row:1; }
  .flecha{ grid-column:3; grid-row:1; align-self:start; margin:8px 0 0; }
  .etapa--abierta .flecha{ margin-top:4px; }
  .etapa__estado{ grid-column:2 / -1; grid-row:2; justify-content:flex-start; margin-top:10px; }
  .etapa__interior{ padding:0 12px 6px; }
  .estados{ display:flex; }
  .estado-btn{ flex:1; padding:0 6px; }
  .fecha{ flex:1 1 100%; }
  .fecha input{ width:100%; }
  .doc{ flex-wrap:wrap; }
  .doc__acc{ width:100%; justify-content:flex-end; }
  .visor{ padding:0; }
  .visor__marco{ height:100%; border:0; }
  .tarea{ grid-template-columns:18px minmax(0,1fr); }
  .tarea__clip span{ display:none; }
  .tarea__clip{ padding:0 7px; }
  .tarea__evid{ margin-left:0; padding:12px; }
  .campos{ grid-template-columns:1fr; }
  .trama{
    -webkit-mask-image:linear-gradient(to bottom, transparent 4%, rgba(0,0,0,.3) 40%, #000 100%);
            mask-image:linear-gradient(to bottom, transparent 4%, rgba(0,0,0,.3) 40%, #000 100%);
  }
  .trama__capa--base{ opacity:.26; }
  .trama__capa--luz{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .nodo,.entra{ opacity:1; transform:none; }
  .revelar{ opacity:1; transform:none; }
  .trama__capa--luz{ display:none; }
}

/* ── Impresión ────────────────────────────────────────────────────────────── */
@media print{
  body{ font-size:11pt; }
  .acciones,.control,.flecha,.trama,.visor,.aviso,.btn--pdf,.btn--pdf-etapa,.evid__acc,.evid__pista,.evid__vacio,.doc__acc,.foto__acc{ display:none !important; }
  .cabecera{ position:static; background:none; box-shadow:none; }
  .seccion,.resumen{ padding:18px 0; }
  .seccion--gris{ background:none; }
  .entra,.revelar,.nodo{ opacity:1 !important; transform:none !important; animation:none !important; }
  .nodo__via::before{ transform:translateY(-50%) !important; animation:none !important; }
  .barra__segmento{ transform:none !important; animation:none !important; background:#e8eaf1 !important; }
  .cabecera__sesion{ display:none; }
  .etapa__panel{ grid-template-rows:1fr !important; }
  .etapas,.etapa{ break-inside:avoid; }
}