/* v20 · Administración: adm_certificado (diseno/v20/administracion/AdmCertDet). Solo variables de tokens.css.
   Computadora: los ítems a la izquierda y «Antes de aprobar» a la derecha (340 px). Celular (< 768 px): una
   columna; la tabla pasa a tarjetas (s-tabla) y nada se desliza de costado. */
.adm-cert { display: flex; flex-direction: column; gap: var(--espacio-16); min-width: 0; }
.adm-cert .s-encabezado { margin-bottom: 0; }
.adm-cert__bajada { margin: 0; color: var(--secundario); font-size: var(--letra-texto); }
.adm-cert__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.adm-cert__tarjeta {
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
    padding: var(--espacio-12) 20px; min-width: 0; display: flex; flex-direction: column; gap: 10px;
}
.adm-cert__titulo {
    margin: 0; font-family: var(--fuente-titulos); color: var(--azul-marca);
    font-size: var(--letra-texto-destacado); font-weight: 600;
}
.adm-cert__item { white-space: nowrap; }
.adm-cert__contrato { display: block; color: var(--terciario); font-size: var(--letra-texto-chico); white-space: normal; }
.adm-cert__origen { text-align: right; }
.adm-cert__origen .s-estado { white-space: nowrap; }
.adm-cert__mas { margin: 0; font-size: var(--letra-texto); }
.adm-cert__mas a { display: inline-flex; align-items: center; min-height: var(--tamano-toque); font-weight: 700; }

.adm-cert__controles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.adm-cert__controles li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--letra-texto); line-height: 1.45; }
.adm-cert__marca {
    flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px;
    border-radius: 6px; font-size: var(--letra-texto-chico); font-weight: 700;
}
.adm-cert__marca--bien { background: var(--fondo-seleccion); color: var(--azul-marca); }
.adm-cert__marca--mirar { background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); color: var(--aviso-texto); }

.adm-cert__cuentas { margin: 0; border-top: 1px solid var(--separador-fila); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.adm-cert__cuentas div { display: flex; justify-content: space-between; gap: var(--espacio-12); font-size: var(--letra-texto); }
.adm-cert__cuentas dt, .adm-cert__cuentas dd { margin: 0; }
.adm-cert__cuentas dd { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-cert__descuento { color: var(--secundario); }
.adm-cert__cobrar { font-size: var(--letra-texto-destacado); font-weight: 700; }
.adm-cert__cobrar dd { color: var(--azul-marca); }
.adm-cert__aprobar { display: flex; flex-direction: column; gap: var(--espacio-8); }
.adm-cert__antes .s-boton { width: 100%; justify-content: center; }

.adm-cert__pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: paso; }
.adm-cert__pasos li { counter-increment: paso; position: relative; padding-left: 36px; display: flex; flex-direction: column; gap: 2px; font-size: var(--letra-texto); }
.adm-cert__pasos li::before {
    content: counter(paso); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: var(--radio-etiqueta);
    background: var(--azul-marca); color: var(--blanco); font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.adm-cert__pasos span { color: var(--secundario); font-size: var(--letra-texto-chico); line-height: 1.4; }

@media (max-width: 1100px) {
    .adm-cert__cuerpo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
    .adm-cert__tarjeta { padding: var(--espacio-12); }
    .adm-cert__pasos { grid-template-columns: minmax(0, 1fr); }
    .adm-cert .s-tabla td.adm-cert__descripcion { text-align: right; }
    .adm-cert__origen .s-estado { white-space: normal; }
}