/* ipro · componentes: ficha, pestañas, etapas, checklist y barra.
   Se partió de estilo.css (base + estructura) para respetar el tope de 300 líneas
   por archivo. El orden de carga importa: este va después de estilo.css. */

/* === ficha: datos en dos columnas; los largos se rompen antes de desbordar === */
dl.datos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .7rem 1.25rem;
  align-items: baseline;
}
dl.datos dt {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
}
dl.datos dd { margin: 0; overflow-wrap: anywhere; }
blockquote.objetivo {
  margin-inline: 0;
  padding: .75rem 1rem;
  border-left: 4px solid var(--ipro-acento);
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

/* tablas largas sin romper el layout en móvil */
.tabla-scroll { overflow-x: auto; }
.tabla-scroll table { margin-bottom: 0; }

/* === pestañas de la ficha (punto 10): radios ocultos + :checked, sin JS ===
   Sin soporte completo de radios ocultos queda la primera pestaña; no hay
   contenido inaccesible porque las tres secciones viven en el mismo tamaño. */
.tabs { position: relative; margin-block: 1rem; }
.tabs > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  border-bottom: 2px solid var(--ipro-acento);
  margin-block: 0 1.25rem;
  padding: .25rem 0 0;
}
.pestanas label {
  cursor: pointer;
  margin: 0;
  padding: .45rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-bottom: none;
  border-radius: .55rem .55rem 0 0;
  color: var(--bs-secondary-color);
  font-weight: 500;
  background-color: var(--bs-body-bg);
  transition: color .1s ease-in-out;
}
.pestanas label:hover { color: var(--bs-body-color); }
.panel { display: none; padding-block: .25rem 1rem; }
#tab-generales:checked ~ .panel-generales,
#tab-dimensionado:checked ~ .panel-dimensionado,
#tab-mejoras:checked ~ .panel-mejoras { display: block; }

#tab-generales:checked ~ .pestanas label[for="tab-generales"],
#tab-dimensionado:checked ~ .pestanas label[for="tab-dimensionado"],
#tab-mejoras:checked ~ .pestanas label[for="tab-mejoras"] {
  color: var(--ipro-acento);
  border-color: var(--ipro-acento);
  font-weight: 600;
}
/* foco visible para quien navega con teclado: el radio recibe el foco, la
   pestaña lo muestra */
#tab-generales:focus-visible ~ .pestanas label[for="tab-generales"],
#tab-dimensionado:focus-visible ~ .pestanas label[for="tab-dimensionado"],
#tab-mejoras:focus-visible ~ .pestanas label[for="tab-mejoras"] {
  outline: 2px solid var(--ipro-acento);
  outline-offset: -2px;
}

/* === bloques condicionales del cuestionario: solo si aplican ===
   El :has() se ancla al <form> (ancestro común); sin soporte no se aplica
   nada y los bloques quedan visibles: contestar de más es aceptable. */
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;
}
form:not(:has(input[name="fuente_codigo"][value="git"]:checked)) .bloque-git,
form:not(:has(input[name="fuente_codigo"][value="zip_rar"]:checked)) .bloque-zip {
  display: none;
}

/* === camino de etapas de una mejora === */
.camino {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  padding: 0;
  margin-block: 1rem;
}
.camino li {
  border: 1px solid var(--bs-border-color);
  border-radius: 50rem;
  padding: .3rem .85rem;
  font-size: .85rem;
  color: var(--bs-secondary-color);
  background-color: var(--bs-tertiary-bg);
}
.camino li.hecho { border-color: var(--ipro-acento); color: var(--ipro-acento); }
.camino li.actual {
  border: 2px solid var(--ipro-acento);
  color: var(--ipro-acento);
  font-weight: 600;
  background-color: var(--bs-body-bg);
}

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

/* resultados y vacíos con aire propio */
.resultado, .vacio {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--ipro-radio);
  margin-block: var(--ipro-aire-medio);
}
.resultado { background-color: var(--bs-body-bg); box-shadow: var(--ipro-sombra); }
.vacio { color: var(--bs-secondary-color); text-align: center; }
.grande { font-size: 1.15rem; font-weight: 600; }
.nota, .nota small { color: var(--bs-secondary-color); }

/* === botón de marca (Bootstrap btn con el acento del sitio) === */
.btn-ipro {
  --bs-btn-bg: #1c5d4c;
  --bs-btn-border-color: #1c5d4c;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #164a3d;
  --bs-btn-hover-border-color: #164a3d;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #123c32;
  --bs-btn-active-border-color: #123c32;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #1c5d4c;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-border-color: #1c5d4c;
}

/* === checklist de componentes del alta: una fila por concepto, radios en línea === */
.opcion {
  display: grid;
  gap: .2rem;
  padding-block: .6rem;
  border-top: 1px solid var(--bs-border-color);
}
.opcion:first-child { border-top: 0; }
.opcion-nombre { font-size: .9rem; font-weight: 500; color: var(--bs-body-color); }
.opcion-valores { display: flex; flex-wrap: wrap; gap: .1rem 1rem; }
.opcion-valores label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  font-weight: 400;
  color: var(--bs-body-color);
}
@media (min-width: 768px) {
  .opcion { grid-template-columns: 1fr auto; align-items: center; gap: 1rem; }
}

/* los formularios largos viven en <details>: el summary manda como botón */
details.alta > summary {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .45rem 1rem;
  border: 1px solid var(--ipro-acento);
  border-radius: var(--bs-border-radius);
  color: var(--ipro-acento);
  font-weight: 500;
  cursor: pointer;
}
details.alta > summary:hover { background-color: rgba(28, 93, 76, .07); }
/* El cuestionario interno se pliega igual que el alta: mismo botón, misma área táctil. */
details.dimensionar > summary {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .45rem 1rem;
  border: 1px solid var(--ipro-acento);
  border-radius: var(--bs-border-radius);
  color: var(--ipro-acento);
  font-weight: 500;
  cursor: pointer;
}
details.dimensionar > summary:hover { background-color: rgba(28, 93, 76, .07); }

/* === barra: iconos SVG en línea + nombre que no desborda ===
   Los iconos van como SVG en el HTML (self-hosted, sin CDN ni fuente de iconos);
   el texto se oculta solo en móvil, por eso cada enlace lleva aria-label. */
.navbar-nav .nav-link { display: inline-flex; align-items: center; }
/* La sección activa se marca con una regla inferior, no solo con color: en móvil
   el texto está oculto y el icono solo no distingue dónde estás. */
.navbar-nav .nav-link.active {
  color: var(--bs-emphasis-color);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--ipro-acento);
}
/* El icono también se tiñe del acento: en móvil la etiqueta está oculta y sin
   esto la sección activa se distinguiría solo por la regla de 2px. */
.navbar-nav .nav-link.active .nav-icono { color: var(--ipro-acento); }
/* El halo de foco de Bootstrap viaja por box-shadow y la regla de arriba lo
   pisaba justo en el enlace activo (que es donde más se tabula): se recompone
   con outline, que no compite con el box-shadow de la sección. */
.navbar-nav .nav-link.active:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}
.nav-icono { flex: 0 0 auto; }
.nav-etiqueta { margin-left: .4rem; }
/* El tope del nombre iba como atributo style en el HTML y la CSP lo bloqueaba
   (style-src 'self' sin unsafe-inline): aquí sí aplica. */
.nav-usuario { max-width: 16rem; }

/* tablero de la portada: barras <progress> y autores destacados. Las barras
   usan <progress> justo para no necesitar atributos style (bloqueados por CSP). */
.tablero { display: grid; gap: var(--ipro-aire-medio); grid-template-columns: 1fr; }
@media (min-width: 768px) { .tablero { grid-template-columns: 1fr 1fr; } }

.barras, .autores { list-style: none; padding: 0; margin: 0; display: grid; }
.barras { gap: .75rem; }
.barras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .15rem .5rem; }
.barra-titulo { color: var(--bs-emphasis-color); text-transform: capitalize; }
.barra-num, .autor-num { color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }

.barras progress {
  grid-column: 1 / -1;
  appearance: none; -webkit-appearance: none;
  width: 100%; height: .45rem;
  border: 0; border-radius: 999px;
  background-color: var(--bs-tertiary-bg);
  overflow: hidden;
}
.barras progress::-webkit-progress-bar { background-color: var(--bs-tertiary-bg); border-radius: 999px; }
.barras progress::-webkit-progress-value { background-color: var(--bs-primary); border-radius: 999px; }
.barras progress::-moz-progress-bar { background-color: var(--bs-primary); border-radius: 999px; }

.autores { gap: .4rem; }
.autores li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.autor-inicial {
  display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  font-size: .8rem; font-weight: 600; text-transform: uppercase;
}
.autor-nombre { overflow-wrap: anywhere; }

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