/* v20 · Administración: adm_ciclo (diseno/v20/administracion/). Solo variables de tokens.css. */

/* ADM.6 · «Certificación»: el ciclo por obra (maqueta AdmCert). En la computadora, una tabla: la obra, los 8 pasos
   como columnas y el botón de lo que sigue. Debajo de 768 px, tarjetas: la obra, «Paso N de 8 · …» con una barrita
   de 8 tramos y lo que sigue (en el celular de Administración, «Se hace en la computadora»). Nada se desliza de
   costado; toques de 44 px. */
.adm-ciclo__bajada { margin: 0 0 var(--espacio-16); color: var(--secundario); font-size: var(--letra-texto); }
.adm-ciclo__numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espacio-16); margin-bottom: var(--espacio-12); }
.adm-ciclo__numero { min-width: 0; }
a.adm-ciclo__numero:not([href]) { cursor: default; }
.adm-ciclo__numero .s-tarjeta-numero__numero { overflow-wrap: anywhere; }
.adm-ciclo__dato { margin: 0 0 var(--espacio-24); color: var(--terciario); font-size: var(--letra-texto-chico); }

.adm-ciclo__tabla {
    border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--blanco); padding: var(--espacio-16) var(--espacio-24);
}
.adm-ciclo__cabeza, .adm-ciclo__fila {
    display: grid; grid-template-columns: minmax(150px, 1.6fr) minmax(0, 7fr) minmax(170px, 1.4fr); gap: var(--espacio-12); align-items: center;
}
.adm-ciclo__cabeza { grid-template-columns: minmax(150px, 1.6fr) repeat(7, minmax(0, 1fr)) minmax(170px, 1.4fr); padding-bottom: var(--espacio-8);
    border-bottom: 1px solid var(--separador-fila); }
.adm-ciclo__rotulo {
    margin: 0; font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo);
    color: var(--secundario);
}
.adm-ciclo__paso-nombre { margin: 0; text-align: center; font-size: var(--letra-texto-chico); font-weight: 700; color: var(--secundario); }
.adm-ciclo__fila { padding: var(--espacio-16) 0; border-bottom: 1px solid var(--separador-fila); }
.adm-ciclo__fila:last-child { border-bottom: 0; }
.adm-ciclo__obra { min-width: 0; }
.adm-ciclo__obra-nombre {
    display: inline-flex; align-items: center; min-height: var(--tamano-toque); font-weight: 700; color: var(--texto); text-decoration: none;
    font-size: var(--letra-texto-destacado);
}
.adm-ciclo__obra-nombre:hover { color: var(--azul-marca); text-decoration: underline; }
.adm-ciclo__cert { margin: 0; color: var(--secundario); font-size: var(--letra-texto-chico); overflow-wrap: anywhere; }

.adm-ciclo__pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--espacio-8); }
.adm-ciclo__celda {
    height: 34px; border-radius: var(--radio-campo); display: flex; align-items: center; justify-content: center; font-weight: 700;
    background: var(--fondo-resumen); color: var(--secundario);
}
.adm-ciclo__celda--hecho { background: var(--fondo-seleccion); color: var(--azul-marca); }
.adm-ciclo__celda--fuera { background: var(--fondo-resumen); color: var(--terciario); }
.adm-ciclo__celda--actual { background: var(--azul-marca); color: var(--blanco); }
.adm-ciclo__celda--falta { background: var(--fondo-celular); border: 1px solid var(--separador-fila); }
.adm-ciclo__oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.adm-ciclo__en-que-paso { display: none; }

.adm-ciclo__sigue { display: flex; flex-direction: column; align-items: flex-end; gap: var(--espacio-4); min-width: 0; text-align: right; }
.adm-ciclo__sigue .s-boton { white-space: nowrap; }
.adm-ciclo__quien { margin: 0; font-size: var(--letra-texto-chico); color: var(--secundario); }
.adm-ciclo__quien b { color: var(--texto); }
.adm-ciclo__cuando { margin: 0; font-size: var(--letra-texto-chico); color: var(--secundario); }

@media (max-width: 1100px) {
    .adm-ciclo__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Celular: tarjetas con la barrita de 8 tramos. */
@media (max-width: 899px) {
    .adm-ciclo__numeros { grid-template-columns: minmax(0, 1fr); gap: var(--espacio-8); }
    .adm-ciclo__tabla { padding: var(--espacio-4) var(--espacio-16); }
    .adm-ciclo__cabeza { display: none; }
    .adm-ciclo__fila { grid-template-columns: minmax(0, 1fr); gap: var(--espacio-8); }
    .adm-ciclo__pasos { gap: 3px; }
    .adm-ciclo__celda { height: 8px; border-radius: 4px; border: 0; }
    .adm-ciclo__celda--falta { background: var(--pista-barra); }
    .adm-ciclo__marca { display: none; }
    .adm-ciclo__en-que-paso { display: block; margin: 0; font-weight: 700; color: var(--texto); font-size: var(--letra-texto); }
    .adm-ciclo__sigue { align-items: stretch; text-align: left; }
    .adm-ciclo__sigue .s-boton { white-space: normal; }
}