/* v20 · Administración (maquetas diseno/v20/administracion/, dueño 02/10/2026): el menú de arriba, Hoy,
   Certificación, Semana y Caja de todas las obras, el certificado armado por la app y el celular para mirar.
   Solo variables de tokens.css; toques de 44 px como mínimo; en el celular nada se desliza de costado. */

/* --- Menú (ADM.1): el pie de «Más» y las iniciales del celular ------------------------------------------- */
.marco-sup__separador--pie { min-height: 0; padding-top: 0; margin-top: var(--espacio-4); }
.marco-arriba__avatar {
    flex: none; width: var(--tamano-toque); height: var(--tamano-toque); border-radius: var(--radio-etiqueta); background: var(--azul-marca);
    color: var(--blanco); font-size: var(--letra-etiqueta-campo); font-weight: 700; display: flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.marco-arriba__avatar + .marco-arriba__empresa, .marco-arriba__empresa:has(+ .marco-arriba__avatar) { max-width: 84px; }

/* --- ADM.7: en el celular, «Se hace en la computadora» en lugar del botón -------------------------------- */
.se-hace-en-la-computadora {
    margin: 0; display: flex; align-items: center; gap: var(--espacio-8); min-height: var(--tamano-toque); padding: 0 var(--espacio-12);
    border: 1px dashed var(--borde-campo); border-radius: var(--radio-campo); background: var(--fondo-celular); color: var(--secundario);
    font-size: var(--letra-texto); box-sizing: border-box;
}
.se-hace-en-la-computadora b { color: var(--texto); }
.se-hace-en-la-computadora__icono { flex: none; }

/* --- Comunes de las pantallas de Administración ---------------------------------------------------------- */
.adm-rotulo { margin: 0; font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); }
.adm-bajada { margin: 0 0 var(--espacio-16); font-size: var(--letra-texto); color: var(--secundario); }
.adm-enlace { color: var(--celeste-marca); font-weight: 700; text-decoration: none; font-size: var(--letra-texto); }
.adm-enlace:hover { color: var(--azul-marca); text-decoration: underline; }
.adm-solo-mirar { margin: 0 0 var(--espacio-12); padding: var(--espacio-8) var(--espacio-12); border: 1px solid var(--linea); border-radius: var(--radio-campo); background: var(--fondo-celular); font-size: var(--letra-texto); color: var(--secundario); }
@media (max-width: 899px) { .adm-solo-computadora { display: none; } }

/* --- Hoy (ADM.5, maquetas AdmHoy y AdmPrioridades) ------------------------------------------------------- */
.adm-dos-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-12); margin: 0 0 var(--espacio-16); }
.adm-dos-numeros__uno { margin: 0; padding: var(--espacio-12) var(--espacio-16); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--blanco); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-dos-numeros__cifra { font-family: var(--fuente-titulos); font-size: 20px; font-weight: 700; color: var(--azul-marca); overflow-wrap: anywhere; }
.adm-dos-numeros__dato { font-size: var(--letra-texto-chico); color: var(--secundario); }
.adm-planillas { margin-bottom: var(--espacio-16); }
.adm-planillas > .adm-rotulo { margin-bottom: var(--espacio-8); }
.adm-planillas__tarjetas { display: grid; grid-template-columns: 1fr; gap: var(--espacio-12); }
.adm-planilla { border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--blanco); padding: var(--espacio-16) 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.adm-planilla__cifra { margin: 2px 0 0; font-family: var(--fuente-titulos); font-size: 24px; font-weight: 700; color: var(--azul-marca); overflow-wrap: anywhere; }
.adm-planilla__linea { margin: 0; font-size: var(--letra-texto); color: var(--texto); }
.adm-planilla__dato { margin: 0; font-size: var(--letra-texto-chico); color: var(--secundario); }
.adm-planilla .s-boton { align-self: flex-start; margin-top: auto; }
@media (max-width: 899px) {
    .adm-planillas--muchas { display: none; } /* AdmCelular10: con muchas obras, los dos números y la lista */
    .adm-planilla .s-boton { align-self: stretch; }
}
@media (min-width: 900px) {
    .adm-planillas__tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .adm-planilla__cifra { font-size: 30px; }
}

.adm-para-hacer { border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--blanco); margin-bottom: var(--espacio-16); overflow: hidden; }
.adm-para-hacer__cabeza { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--espacio-4) var(--espacio-12); padding: var(--espacio-12) var(--espacio-16); border-bottom: 1px solid var(--separador-fila); }
.adm-para-hacer__titulo { margin: 0; font-family: var(--fuente-titulos); font-size: 15px; font-weight: 700; color: var(--azul-marca); }
.adm-para-hacer__nota { font-size: var(--letra-texto-chico); color: var(--secundario); }
.adm-para-hacer__todo { margin-left: auto; min-height: var(--tamano-toque); display: inline-flex; align-items: center; }
.adm-para-hacer__vacio, .adm-para-hacer__pie { margin: 0; padding: var(--espacio-12) var(--espacio-16); font-size: var(--letra-texto); color: var(--secundario); }
.adm-tareas { list-style: none; margin: 0; padding: 0; }
.adm-tarea { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "etiqueta monto" "textos textos" "accion accion"; gap: 6px var(--espacio-12); padding: var(--espacio-12) var(--espacio-16); border-bottom: 1px solid var(--separador-fila); align-items: center; }
.adm-tarea:last-child { border-bottom: none; }
.adm-tarea__etiqueta { grid-area: etiqueta; }
.adm-tarea__textos { grid-area: textos; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-tarea__que { font-size: var(--letra-texto-destacado); color: var(--texto); overflow-wrap: anywhere; }
.adm-tarea__detalle, .adm-tarea__mas { font-size: var(--letra-texto-chico); color: var(--secundario); overflow-wrap: anywhere; }
.adm-tarea__mas { font-weight: 700; }
.adm-tarea__monto { grid-area: monto; text-align: right; font-weight: 700; font-size: var(--letra-texto-destacado); color: var(--texto); white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
.adm-tarea__estimado { font-size: var(--letra-texto-chico); font-weight: 400; color: var(--secundario); }
.adm-tarea__accion { grid-area: accion; }
.adm-tarea__accion .s-boton { width: 100%; }
@media (min-width: 900px) {
    .adm-tarea { grid-template-columns: 110px minmax(0, 1fr) 190px 180px; grid-template-areas: "etiqueta textos monto accion"; }
    .adm-tarea__accion { justify-self: end; }
    .adm-tarea__accion .s-boton { width: auto; }
}
.adm-bajo { display: flex; align-items: center; gap: var(--espacio-12); min-height: 52px; padding: 0 var(--espacio-16); border-top: 1px solid var(--separador-fila); color: var(--texto); text-decoration: none; font-size: var(--letra-texto); }
.adm-bajo__texto { flex: 1 1 auto; min-width: 0; color: var(--secundario); }
.adm-bajo-obra { border-top: 1px solid var(--separador-fila); }
.adm-bajo-obra__resumen { display: flex; justify-content: space-between; align-items: center; min-height: var(--tamano-toque); padding: 0 var(--espacio-16); cursor: pointer; font-size: var(--letra-texto); list-style: none; }
.adm-bajo-obra__resumen::-webkit-details-marker { display: none; }

/* --- Más › Contratos, condiciones y obras ------------------------------------------------------------------ */
.adm-obras { list-style: none; margin: 0 0 var(--espacio-16); padding: 0; display: flex; flex-direction: column; gap: var(--espacio-12); }
.adm-obra { border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--blanco); padding: var(--espacio-12) var(--espacio-16); }
.adm-obra__nombre { margin: 0 0 var(--espacio-8); display: flex; flex-wrap: wrap; gap: var(--espacio-4) var(--espacio-12); align-items: baseline; font-size: var(--letra-texto-destacado); }
.adm-obra__dato { font-size: var(--letra-texto-chico); color: var(--secundario); }
.adm-obra__enlaces { display: flex; flex-wrap: wrap; gap: var(--espacio-8); }
.adm-obra__enlace { display: inline-flex; align-items: center; min-height: var(--tamano-toque); padding: 0 var(--espacio-12); border: 1px solid var(--borde-campo); border-radius: var(--radio-campo); color: var(--azul-marca); font-weight: 700; font-size: var(--letra-texto); text-decoration: none; box-sizing: border-box; }
.adm-obra__enlace:hover { background: var(--fondo-seleccion); }

/* Revisión ADM.9, R1 (ADM-D5): en el celular, Administración no aprueba, registra, relaciona ni autoriza, también en
   las pantallas de antes: esos formularios quedan en lectura con «Se hace en la computadora» (el servidor además
   responde 403: app/celular_adm.RESTRINGIDAS, la misma lista; cada ruta, sola o con «?…» al final). Los que ya
   traen su aviso no se tocan. */
body.solo-mirar form[method="post" i][action$="/aprobar"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/aprobar?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action$="/devolver"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/devolver?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action$="/enviado"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/enviado?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action$="/aprobacion-cliente"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/aprobacion-cliente?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action$="/respuesta"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/respuesta?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action$="/firmado"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/firmado?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action$="/incluir"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/incluir?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action$="/ctf"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/ctf?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action$="/ctf/leer"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/ctf/leer?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action$="/autorizar-envio"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/autorizar-envio?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action$="/aprobacion"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/aprobacion?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action$="/presentar"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/presentar?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action$="/numero"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/numero?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action$="/reabrir"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/reabrir?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/base-cliente/"][action$="/confirmar"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/base-cliente/"][action*="/confirmar?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/conciliacion/planilla/"][action$="/confirmar"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/conciliacion/planilla/"][action*="/confirmar?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/certificados/"][action*="/pedidos/"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action^="/administracion/por-facturar"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action$="/rechazar"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/rechazar?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/control-interno/"][action$="/ajuste"]:not(:has(.se-hace-en-la-computadora)) > *,
/* v23i · IB.4 (D4): la reinspección, la clasificación, la calibración y los reconocimientos, en la computadora. */
body.solo-mirar form[method="post" i][action$="/reinspeccion"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/reinspeccion?"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action^="/correcciones/categorias/"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action$="/terminar-calibracion"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/reconocimientos/"][action$="/confirmar"]:not(:has(.se-hace-en-la-computadora)) > *,
body.solo-mirar form[method="post" i][action*="/control-interno/"][action*="/ajuste?"]:not(:has(.se-hace-en-la-computadora)) > * { display: none !important; }
body.solo-mirar form[method="post" i][action$="/aprobar"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/aprobar?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action$="/devolver"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/devolver?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action$="/enviado"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/enviado?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action$="/aprobacion-cliente"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/aprobacion-cliente?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action$="/respuesta"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/respuesta?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action$="/firmado"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/firmado?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action$="/incluir"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/incluir?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action$="/ctf"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/ctf?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action$="/ctf/leer"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/ctf/leer?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action$="/autorizar-envio"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/autorizar-envio?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action$="/aprobacion"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/aprobacion?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action$="/presentar"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/presentar?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action$="/numero"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/numero?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action$="/reabrir"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/reabrir?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/base-cliente/"][action$="/confirmar"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/base-cliente/"][action*="/confirmar?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/conciliacion/planilla/"][action$="/confirmar"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/conciliacion/planilla/"][action*="/confirmar?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/certificados/"][action*="/pedidos/"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action^="/administracion/por-facturar"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action$="/rechazar"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/rechazar?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/control-interno/"][action$="/ajuste"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action$="/reinspeccion"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/reinspeccion?"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action^="/correcciones/categorias/"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action$="/terminar-calibracion"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/reconocimientos/"][action$="/confirmar"]:not(:has(.se-hace-en-la-computadora))::before,
body.solo-mirar form[method="post" i][action*="/control-interno/"][action*="/ajuste?"]:not(:has(.se-hace-en-la-computadora))::before {
    content: "🖥  Se hace en la computadora"; display: flex; align-items: center; min-height: var(--tamano-toque); padding: 0 var(--espacio-12);
    border: 1px dashed var(--borde-campo); border-radius: var(--radio-campo); background: var(--fondo-celular); color: var(--secundario);
    font-size: var(--letra-texto); box-sizing: border-box;
}
/* v23c-1 · C1.6 (d019): descuento por medición pendiente, con «Aplicar el descuento». */
.adm-descuento { display: flex; flex-wrap: wrap; gap: var(--espacio-8) var(--espacio-12); align-items: center; padding: var(--espacio-12) var(--espacio-16); border-bottom: 1px solid var(--separador-fila); }
.adm-descuento__texto { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }

/* v23i · IB.5 (D2): en el celular, Dirección solo mira: todo lo que guarda queda en lectura con «Se hace en la
   computadora», salvo el OK y el «no» del urgente, su contraseña y «Salir» (el servidor además responde 403:
   app/celular_adm.PERMITIDAS_DIRECCION, la misma lista). */
body.solo-mirar-direccion form[method="post" i]:not([action="/logout"]):not([action="/cuenta/clave"]):not([data-urgente-ok]):not([data-urgente-no]) > *,
body.solo-mirar-direccion form[hx-post] > * { display: none !important; }
body.solo-mirar-direccion [hx-post]:not(form), body.solo-mirar-direccion [hx-put], body.solo-mirar-direccion [hx-delete] { display: none !important; }
body.solo-mirar-direccion form[method="post" i]:not([action="/logout"]):not([action="/cuenta/clave"]):not([data-urgente-ok]):not([data-urgente-no])::before,
body.solo-mirar-direccion form[hx-post]::before {
    content: "🖥  Se hace en la computadora"; display: flex; align-items: center; min-height: var(--tamano-toque); padding: 0 var(--espacio-12);
    border: 1px dashed var(--borde-campo); border-radius: var(--radio-campo); background: var(--fondo-celular); color: var(--secundario);
    font-size: var(--letra-texto); box-sizing: border-box;
}