y no corresponde. El servidor igual les responde 403, pero una lista que se queda en «Cargando…» para siempre parece un sistema roto, no uno que los protege. */ .modo-prestador main { display: none; } /* ── Segundo factor ─────────────────────────────────────────────────────── */ /* El código se tipea mirando el teléfono y sin mirar el teclado: grande, con los dígitos separados y en fuente de ancho fijo, para poder contarlos de un vistazo. */ .codigo-2fa { font: 600 26px/1.2 Consolas, 'Courier New', monospace; letter-spacing: 8px; text-align: center; padding: 14px 12px; } .codigo-2fa::placeholder { letter-spacing: 8px; color: var(--texto-tenue); } /* El QR sobre blanco SIEMPRE, en los dos temas: los lectores esperan módulos oscuros sobre fondo claro, y en tema oscuro un QR invertido no se lee. */ .qr { background: #fff; padding: 14px; border-radius: var(--r); width: 210px; height: 210px; flex: none; } .qr svg { width: 100%; height: 100%; display: block; } .paso-2fa { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .paso-2fa .texto { flex: 1; min-width: 260px; } /* El secreto para tipear a mano, cuando la cámara no colabora. */ .secreto-2fa { font: 600 15px/1.7 Consolas, 'Courier New', monospace; letter-spacing: 2px; background: var(--panel-alto); border: 1px dashed var(--oro-texto); border-radius: var(--r); padding: 12px 14px; color: var(--oro-texto); word-break: break-all; user-select: all; } /* Los códigos de recuperación: se leen para copiarlos a un papel. */ .recuperacion { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; font: 600 15px/1.6 Consolas, 'Courier New', monospace; letter-spacing: 1px; background: var(--panel-alto); border: 1px solid var(--borde); border-radius: var(--r); padding: 14px 16px; color: var(--oro-texto); user-select: all; } /* ── Campo con sugerencias ─────────────────────────────────────────────────── Reemplaza al del navegador. El nativo no se puede pintar: es un control del sistema operativo, así que aparece blanco sobre el tema oscuro, con otra tipografía y otro tamaño. Funciona, pero se ve como una ventana de otro programa metida en el medio. Éste es el mismo campo de siempre —se puede tipear cualquier cosa, la lista sólo sugiere— con el desplegable dibujado por nosotros. */ .sugerido { position: relative; } /* La flecha. Es un botón de verdad y no un adorno: abre la lista al tocarla, que es lo que la gente intenta hacer cuando ve una flecha. */ .sugerido .flecha { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 34px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 0 8px 8px 0; color: var(--texto-tenue); cursor: pointer; font-size: 10px; padding: 0; } .sugerido .flecha:hover { color: var(--texto); background: var(--hover); } .sugerido input { padding-right: 38px; } /* Cuelga del y se mide contra la ventana: dentro de un modal con scroll, un desplegable posicionado en el campo queda recortado por ese borde. */ .opciones-sugeridas { position: fixed; z-index: 70; background: var(--panel-alto); border: 1px solid var(--borde); border-radius: var(--r); box-shadow: 0 14px 40px var(--sombra); overflow-y: auto; padding: 5px; /* el alto lo pone `ubicar()`, según el espacio que haya */ } .opciones-sugeridas button { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 7px; color: var(--texto); padding: 9px 11px; cursor: pointer; font: inherit; font-size: 13.5px; } /* `.marcada` es la que se mueve con las flechas del teclado. Se pinta igual que el hover para que no haya dos «seleccionados» distintos a la vez. */ .opciones-sugeridas button:hover, .opciones-sugeridas button.marcada { background: var(--hover); } .opciones-sugeridas button.marcada { outline: none; } .opciones-sugeridas .vacio-sugerido { padding: 10px 11px; color: var(--texto-tenue); font-size: 12.5px; } /* Lo que coincide con lo tipeado, resaltado: muestra POR QUÉ está en la lista. */ .opciones-sugeridas mark { background: var(--oro-tenue); color: var(--oro-texto); border-radius: 3px; padding: 0 1px; } /* ── Los campos que se guardan en mayúscula ────────────────────────────────── Se ven en mayúscula MIENTRAS se escriben. Sin esto, uno tipea «clinica alcorta», guarda, y el sistema muestra otra cosa: parece que el dato se cambió solo. `text-transform` es sólo visual —el valor real lo normaliza el servidor, ver src/texto.js— pero es lo que hace que lo que se ve y lo que se guarda coincidan. El correo y las observaciones NO están acá, a propósito: el correo puede distinguir mayúsculas y las observaciones son texto para leer. */ #form-prestador input[name="razon_social"], #form-prestador input[name="nombre_fantasia"], #form-prestador input[name="domicilio"], #form-prestador input[name="localidad"], #form-prestador input[name="provincia"], .fila-contacto input[data-c="nombre"], .fila-contacto input[data-c="sector"] { text-transform: uppercase; } /* El texto de ejemplo, no: en mayúscula parecería un dato ya cargado. */ #form-prestador input::placeholder, .fila-contacto input::placeholder { text-transform: none; } /* ── Contratos: las tres sub-solapas ─────────────────────────────────────── Más chicas que las del legajo y con la línea abajo, para que se lean como un nivel de adentro y no como otro menú del mismo peso. */ .sub-solapas { /* `overflow-y: hidden` no sobra: con `overflow-x: auto` solo, el eje Y pasa a `auto` por la especificacion, y el `margin-bottom: -1px` de los botones le desborda un pelo — aparecia una barra de scroll vertical de la nada. */ display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--borde); margin-bottom: 14px; } .sub-solapas button { white-space: nowrap; padding: 9px 14px; border: 0; background: none; color: var(--texto-suave); font: inherit; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .sub-solapas button:hover { color: var(--texto); } .sub-solapas button.activa { color: var(--oro-texto); border-bottom-color: var(--oro-texto); font-weight: 600; } /* ── El año, que abre y cierra ────────────────────────────────────────────── La raya que sigue al número hace el trabajo de separar sin meter una caja más: adentro del grupo ya hay cajas, y anidar una dentro de otra confunde. */ .anio-grupo { margin-bottom: 4px; } /* Un botón y no un título con un clic encima: así se llega con Tab, se abre con Enter, y el lector de pantalla dice si está abierto o cerrado. */ .anio-titulo { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 2px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--oro-texto); letter-spacing: .4px; text-align: left; } .anio-titulo:focus-visible { outline: none; border-radius: 6px; box-shadow: 0 0 0 3px var(--oro-tenue); } .anio-titulo .raya { flex: 1; height: 1px; background: var(--borde); } .anio-titulo .flecha { display: inline-block; width: 10px; font-size: 11px; transition: transform .12s ease; } .anio-grupo.abierto .anio-titulo .flecha { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .anio-titulo .flecha { transition: none; } } /* Cerrado NO se desmonta, se esconde: abrir y cerrar tiene que ser instantáneo y sin pedirle nada al servidor. */ .anio-cuerpo { display: none; padding-bottom: 10px; } .anio-grupo.abierto .anio-cuerpo { display: block; } .filtro-anio { flex-wrap: wrap; align-items: center; gap: 6px; } /* De qué tipo es cada ficha. Sin esto, un acuerdo negociado y un papel que la Cámara reparte a todos se ven igual, y no son lo mismo: uno se edita acá y el otro cambia para los cuarenta prestadores que lo tienen. */ .etiqueta-ficha { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--panel-alto); border: 1px solid var(--borde); color: var(--texto-tenue); font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; vertical-align: middle; } .etiqueta-ficha.camara { background: var(--oro-tenue); border-color: var(--oro-texto); color: var(--oro-texto); } .caja.publicado { border-left: 3px solid var(--oro-texto); } /* ── Publicar a varios: la lista de destinatarios ────────────────────────── Con altura fija y scroll propio: con ochenta prestadores, sin esto el botón «Publicar» queda abajo de todo y hay que scrollear la ventana entera para llegar. */ .destinatarios { margin-top: 18px; border-top: 1px solid var(--borde); padding-top: 14px; } .marca-todos { padding: 7px 10px; margin-bottom: 6px; text-align: left; border-radius: 6px; background: var(--panel-alto); } .lista-destinatarios { max-height: 240px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 6px; } .destinatario { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--borde); border-radius: 0; } /* En este sistema `.crecer` sólo crece adentro de `.barra` y de `.novedad`. Sin esta línea la localidad queda pegada al nombre en vez de irse al margen, y con nombres de distinto largo la columna deja de leerse como columna. */ .destinatario .crecer { flex: 1; min-width: 0; } .destinatario:last-child { border-bottom: 0; } .destinatario:hover { background: var(--panel-alto); } /* ── Lo ya publicado, adentro de la ventana de publicar ──────────────────── Va arriba del formulario y con su propio scroll: con treinta documentos, sin el tope, el formulario de publicar —que es lo que más se usa— quedaría abajo de todo y habría que scrollear la ventana entera para llegar. */ .publicados-ya { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--borde); } .lista-publicados { max-height: 280px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 6px; } /* El encabezado de cada solapa adentro de la lista. Pegajoso: con doce documentos, al scrollear se pierde de vista en cuál de los tres grupos se está mirando, y las filas de una solapa y de otra se ven iguales. */ .grupo-publicado-tit { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 9px; padding: 7px 11px; background: var(--panel-alto); border-bottom: 1px solid var(--borde); font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--oro-texto); } .grupo-publicado-tit .raya { flex: 1; height: 1px; background: var(--borde); } .grupo-publicado:last-child .publicado-fila:last-child { border-bottom: 0; } .publicado-fila { display: flex; align-items: center; gap: 10px; padding: 9px 11px; font-size: 13px; border-bottom: 1px solid var(--borde); } .publicado-fila:last-child { border-bottom: 0; } .publicado-fila:hover { background: var(--panel-alto); } .publicado-fila .crecer { flex: 1; min-width: 0; } /* ── Comunicaciones: la bandeja y el hilo ────────────────────────────────── La bandeja es una lista de filas clicables, no una tabla: cada línea es un lugar al que se entra, y una tabla con una sola columna útil sería un marco alrededor de nada. */ .lista-conversaciones { padding: 0; } .conversacion { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; cursor: pointer; border-bottom: 1px solid var(--borde); } .conversacion:last-child { border-bottom: 0; } .conversacion:hover { background: var(--panel-alto); } .conversacion .crecer { flex: 1; min-width: 0; } .conversacion-tit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Lo que falta leer se marca con la barra de la izquierda y con el peso del texto, no sólo con la pastilla: un número chico al costado se pierde en una lista de treinta. */ .conversacion.sin-leer { border-left: 3px solid var(--oro-texto); } .conversacion.sin-leer .conversacion-ultimo { color: var(--texto); font-weight: 600; } .conversacion-ultimo { font-size: 12.5px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* El hilo. Lo propio a la derecha y en oro tenue, lo del otro a la izquierda: es la convención de cualquier chat y se lee sin tener que buscar el nombre. */ .hilo { display: flex; flex-direction: column; gap: 12px; } .burbuja { max-width: 78%; padding: 10px 13px; border-radius: 12px; border: 1px solid var(--borde); background: var(--panel-alto); } .burbuja.mia { align-self: flex-end; background: var(--oro-tenue); border-color: var(--oro-texto); } .burbuja.suya { align-self: flex-start; } .burbuja-quien { font-size: 11px; font-weight: 700; letter-spacing: .3px; margin-bottom: 5px; } /* `pre-wrap`: el texto lo escribió una persona y los renglones que puso son parte de lo que quiso decir. Sin esto, una lista de tres puntos llega como un párrafo corrido. */ .burbuja-texto { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .burbuja-archivo { margin-top: 8px; font-size: 12.5px; } /* El cuadro de escribir va en el pie del modal: en una conversación larga, un botón de enviar que se va con el scroll obliga a bajar hasta el final para contestar. */ .pie.escribir { flex-direction: column; align-items: stretch; gap: 8px; } .linea-escribir { display: flex; gap: 10px; align-items: flex-end; } .linea-escribir textarea { flex: 1; resize: vertical; min-height: 44px; } .acciones-escribir { display: flex; gap: 8px; align-items: center; } .acciones-escribir .btn.fina { font-size: 15px; line-height: 1; padding: 10px 12px; }