/* public_satiq/css/comun.css */
/* Las clases que usan VARIAS pantallas. Decidido por Ariel el 14/10/2026: "No se usan estilos
   inline y se usan un CSS comun para las cosas comunes. No quiero repetir codigo".

   DE DONDE SALIO. Ese dia habia 41 atributos `style="..."` repartidos en 7 archivos, y la mayoria
   eran la MISMA declaracion escrita muchas veces: `margin:0` ocho veces, `margin-bottom` de 14,
   16 y 18 px diez veces entre todas, `width:190px` dos veces en el mismo archivo. Eso es el
   duplicado que molesta: no que haya una linea de mas, sino que el dia que haya que cambiar el
   espaciado haya que buscarlo en siete lugares y encontrar seis.

   POR QUE UN ESTILO INLINE ES PEOR QUE FEO, y lo medimos el mismo dia: el logo del ingreso tenia
   el tamanio en un `style` inline, **y un atributo style le gana a cualquier regla de la hoja**,
   asi que la media query del telefono no podia achicarlo. Se dibujaba a 80px mientras el de la
   pantalla de al lado, que usa la clase, bajaba a 46. Un inline no es solo contra la regla: es un
   bloque al que el disenio responsive no llega.

   LO QUE NO VA ACA: lo que usa UNA sola pantalla. Eso va en la hoja de esa pantalla, con su
   nombre, que es la otra mitad de la regla. Esta hoja es para lo comun, no para lo que sobro. */

/* ---- Espaciado ----
   TRES CLASES Y NO OCHO, Y ESO CAMBIA HASTA 2px EN ALGUNOS LUGARES, dicho porque se nota en un
   diff y no en la pantalla: los valores que habia eran 6, 10, 14, 16 y 18 px, o sea cinco formas
   de decir "un respiro". Quedan dos. Mantener los cinco exactos habria sido escribir cinco clases
   casi iguales, que es el mismo problema con otra ropa. */
.sin-margen { margin: 0; }
.espacio-arriba { margin-top: 8px; }
.espacio-abajo { margin-bottom: 16px; }

/* ---- Visibilidad ----
   SIN `!important` A PROPOSITO: el JavaScript de varias pantallas muestra estos bloques poniendo
   `style.display = "block"`, y un estilo inline le gana a una clase. Con `!important` la clase
   ganaria y el bloque no se mostraria nunca. */
.oculto { display: none; }

/* ---- Texto de tabla ---- */
.sin-cortar { white-space: nowrap; }
.que-corte { white-space: normal; }

/* ---- Anchos de columna de las tablas de documentacion ----
   ACA SI VAN LOS VALORES EXACTOS Y NO UNA ESCALA, y la diferencia con el espaciado de arriba es
   real: un respiro de 14 o de 16 px no lo nota nadie, pero el ancho de una columna decide donde
   corta el texto de un encabezado. Redondearlos cambia como se lee una tabla.
   Lo que desaparece igual es el duplicado: `width:190px` estaba escrito dos veces en el mismo
   archivo, y ahora esta una sola vez, aca. */
.col-70 { width: 70px; }
.col-80 { width: 80px; }
.col-90 { width: 90px; }
.col-170 { width: 170px; }
.col-190 { width: 190px; }
.col-250 { width: 250px; }
.col-300 { width: 300px; }

/* ---- Campo angosto ----
   Para un campo que no tiene que ocupar el ancho de la fila, como una fecha suelta. */
.campo-angosto { max-width: 260px; }

/* LA CAJA QUE LLEVA A UN DOCUMENTO EXTERNO. Vivio en oauth.css hasta el 16/10/2026 y se
   mudo aca el mismo dia, al usarla la SEGUNDA pantalla: la de enviar datos, con la planilla
   del EDS. **enviar_datos.php no carga oauth.css**, asi que la caja habria salido sin estilo
   y sin un solo error. Es la regla del proyecto: lo que usan varias pantallas va a comun.css.
   La usan 'Conexion con mi sistema' (guia de la API) y 'Enviar mis datos' (planilla EDS). */
/* LA CAJA DE LA GUIA DE IMPLEMENTACION. 16/10/2026, por usabilidad: Ariel no la encontraba
   cuando era un boton blanco al lado del rojo de "Generar credenciales".
   AZUL Y NO ROJO: el rojo del Programa esta reservado para lo que escribe en la base. Esto
   lleva a leer, asi que tiene el azul del panel y un borde izquierdo grueso, que es lo que la
   separa del parrafo de arriba sin gritar mas que el boton que si guarda. */
.cli-guia { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
            margin:18px 0 22px; padding:14px 18px; background:#f4f8fb; border:1px solid #d8e3ec;
            border-left:4px solid #3c6382; border-radius:6px; }
.cli-guia-txt { display:flex; flex-direction:column; gap:3px; min-width:220px; flex:1 1 320px; }
.cli-guia-txt strong { color:#274b63; font-size:0.95rem; }
.cli-guia-txt span { color:#55606b; font-size:0.86rem; }
.cli-guia-btn { flex:0 0 auto; display:inline-flex; align-items:center; background:#3c6382; color:#fff;
                padding:10px 18px; border-radius:6px; text-decoration:none; font-size:0.9rem;
                font-weight:600; transition:background .15s; }
.cli-guia-btn:hover { background:#274b63; color:#fff; }

/* EN EL TELEFONO LA CAJA SE APILA Y EL BOTON OCUPA EL ANCHO: a 390px, con el boton al lado del
   texto, el texto queda en una columna de dos palabras. */
@media (max-width: 620px) {
  .cli-guia { flex-direction:column; align-items:stretch; }
  .cli-guia-btn { justify-content:center; }
}

/* EL AVISO DE COMO PARTICIPA LA UNIDAD, en la pantalla de envio. Una linea sobria: dice el dato y
   no compite con el formulario, que es a lo que esa persona vino. */
.aviso-via { margin:14px 0 18px; padding:10px 14px; background:#f4f8fb; border-left:4px solid #3c6382;
             border-radius:4px; color:#274b63; font-size:0.9rem; font-weight:600; }