/* ipro — desnudo pero cuidado.
   Pico da la base; aquí solo jerarquía, un acento y legibilidad. */

:root {
  --pico-font-size: 100%;
  --ipro-acento: #1c5d4c;
  --ipro-borde: #d8d8d3;
}

.barra {
  border-bottom: 2px solid var(--ipro-acento);
  padding-block: .6rem;
  margin-bottom: 1.5rem;
}

.barra nav { padding-block: 0; }
.barra .marca { text-decoration: none; }
.barra .marca small { color: var(--pico-muted-color); }

h1 { letter-spacing: -.02em; }
h1, h2 { margin-bottom: .4rem; }

/* tablas largas sin romper el layout en móvil */
.tabla-scroll { overflow-x: auto; }
.tabla-scroll table { margin-bottom: 0; }
.tabla-scroll th, .tabla-scroll td { white-space: nowrap; }
/* el título del proyecto sí puede partirse: es lo que más se lee */
.tabla-scroll td:nth-child(2) { white-space: normal; min-width: 12rem; }

/* foco visible para teclado, sin cambiar el aspecto normal */
:focus-visible { outline: 3px solid var(--ipro-acento); outline-offset: 2px; }

.etiqueta {
  display: inline-block;
  padding: .1rem .5rem;
  border: 1px solid var(--ipro-borde);
  border-radius: 999px;
  font-size: .78rem;
  white-space: nowrap;
}

.etiqueta-pendiente { border-style: dashed; color: var(--pico-muted-color); }

.estado-dimensionado, .estado-aprobado, .estado-en_operacion { border-color: var(--ipro-acento); }
.estado-pausado, .estado-cerrado { color: var(--pico-muted-color); }

.etapa-publicada, .etapa-validada { border-color: var(--ipro-acento); }
.etapa-rechazada { color: var(--pico-muted-color); text-decoration: line-through; }

.aviso {
  border-left: 4px solid var(--ipro-acento);
  padding: .6rem .9rem;
  background: #f4f7f5;
}

.aviso-error { border-left-color: #a12b2b; background: #fbf2f2; }

.rejilla {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.datos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem 1.2rem;
}

.datos dt { color: var(--pico-muted-color); }
.datos dd { margin: 0; }

.resultado { border: 2px solid var(--ipro-acento); }
.resultado .grande { font-size: 1.25rem; font-weight: 600; }

.vacio { text-align: center; color: var(--pico-muted-color); }

.nota { color: var(--pico-muted-color); }

details > summary { cursor: pointer; font-weight: 600; }
details.alta, details.dimensionar { margin-block: 1.5rem; }

.pie { padding-block: 2rem; color: var(--pico-muted-color); border-top: 1px solid var(--ipro-borde); }

/* camino de etapas de una propuesta */
.camino {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.camino li {
  padding: .25rem .7rem;
  border: 1px solid var(--ipro-borde);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--pico-muted-color);
}

.camino li.hecho { border-color: var(--ipro-acento); color: var(--ipro-acento); }
.camino li.actual { border-width: 2px; border-color: var(--ipro-acento); color: var(--ipro-acento); font-weight: 600; }

.que-pasa { margin: .25rem 0 .5rem; }

/* campos cómodos en móvil: 16px evita el zoom automático de iOS */
input, select, textarea, button { font-size: 1rem; }

/* Preguntas de archivo del cuestionario: solo aplican si el proyecto procesa
   ('c') o guarda ('d') archivos. El :has() se ancla al <form> (ancestor común de
   los checkboxes y de los bloques); sin soporte de :has() no se aplica nada y
   los bloques quedan visibles, lo que también es válido: se contesta de más. */
form:not(:has(input[name="forma_trabajo[]"][value="c"]:checked)) .bloque-lotes,
form:not(:has(input[name="forma_trabajo[]"][value="c"]:checked,
    input[name="forma_trabajo[]"][value="d"]:checked)) .bloque-archivos {
  display: none;
}