/* satiq-fhir/public_satiq/css/barra.css El estilo de la barra de navegacion, en un solo lugar, igual que su HTML en vistas/_barra.php. DE DONDE SALIO, el 03/10/2026: estaba en form.css, y centros.css le pisaba el color para el panel. O sea que centros.css NO ANDABA SOLO: una pantalla que cargara centros.css y no form.css se quedaba sin barra con estilo, y eso no daba ningun error, solo se veia mal. Y .btn-nav y .btn-salir eran DOS REGLAS IDENTICAS declaradas en dos lugares de form.css, a 120 lineas una de la otra. Aca van juntas: si cambia el boton, cambia una vez. */ .topbar { background:linear-gradient(135deg,#dd4442 0%,#C22E2B 100%); color:#fff; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 2px 6px rgba(0,0,0,0.15); } /* El azul marca "estas en el panel de terapias", no es decoracion: el administrador trabaja sobre datos de TODAS las unidades y conviene que la pantalla se lo diga. */ .topbar-panel { background:linear-gradient(135deg,#3c6382 0%,#274b63 100%); } .topbar-left { display:flex; align-items:baseline; gap:12px; } .topbar-logo { display:flex; align-items:center; } .topbar-logo img { height:38px; width:auto; background:#fff; border-radius:50%; padding:4px; } .topbar-sub { font-size:0.9rem; opacity:0.9; } .topbar-right { display:flex; align-items:center; gap:16px; } .centro-nombre { font-size:0.9rem; font-weight:600; max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .btn-nav { color:#fff; background:rgba(255,255,255,0.18); padding:6px 14px; border-radius:6px; text-decoration:none; font-size:0.85rem; transition:background 0.2s; } .btn-nav:hover { background:rgba(255,255,255,0.30); } /* CERRAR SESION ES MAS CHICO QUE EL RESTO, Y ES A PROPOSITO. Ariel, 16/10/2026, mirando la pantalla de una unidad: *"con el boton de cerrar sesion, muy grande"*. El argumento es de jerarquia y no de gusto: salir es lo que MENOS se viene a hacer a esta pantalla, y hasta hoy pesaba lo mismo que navegar. Queda legible y tocable --11px de padding lateral y 0.78rem-- pero deja de competir con lo que la unidad vino a resolver. */ .btn-salir { color:rgba(255,255,255,0.92); background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.28); padding:4px 11px; border-radius:5px; text-decoration:none; font-size:0.78rem; line-height:1.5; transition:background 0.2s; } .btn-salir:hover { background:rgba(255,255,255,0.24); color:#fff; } /* EN EL TELEFONO LA BARRA ENVUELVE. Con siete enlaces de administrador en una sola linea el nombre de la unidad se come el ancho y los botones se salen de la pantalla. DESDE EL 16/10/2026 el administrador ya no tiene esos siete enlaces --estan en el menu-- pero la regla se queda: la unidad sigue con botones sueltos y es la que los necesita. */ @media (max-width: 720px) { .topbar { padding:10px 14px; } .topbar-right { flex-wrap:wrap; justify-content:flex-end; row-gap:8px; gap:8px; } .centro-nombre { max-width:100%; } } /* ======================================================================================== EL MENU DEL PANEL DE ADMINISTRADOR. 16/10/2026 ======================================================================================== Ariel: "todo los demas en un menu haburgues ordenado por tipo de accion en lugar de muchos botones arriba para el panel de admin", y el nombre de usuario a la derecha junto a Cerrar sesion, como en HQ. EL BOTON LLEVA SU CONTADOR y no es adorno: adentro del menu estan "Altas por revisar" y "Cambios por aprobar", que son colas de trabajo. Este archivo ya tenia escrito que un numero al lado del enlace es lo unico que hace que alguien entre; si el menu lo tapa, la cola crece en silencio. El del boton es la SUMA de las dos. */ .btn-menu { position:relative; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.18); color:#fff; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; transition:background .2s; } .btn-menu:hover { background:rgba(255,255,255,0.30); } .btn-menu-rayas { display:inline-flex; flex-direction:column; justify-content:center; gap:4px; width:18px; } .btn-menu-rayas span { display:block; height:2px; background:#fff; border-radius:2px; } .menu-cuenta { margin-left:0; } /* EL FONDO ES LO QUE HACE QUE SE CIERRE TOCANDO AFUERA, asi que cubre la pantalla entera. */ .menu-fondo { position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:40; } .menu-panel { position:fixed; top:0; right:0; width:290px; max-width:86vw; height:100%; background:#fff; z-index:41; box-shadow:-4px 0 18px rgba(0,0,0,0.22); overflow-y:auto; padding-bottom:24px; } .menu-cabe { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:linear-gradient(135deg,#3c6382 0%,#274b63 100%); color:#fff; } .menu-titulo { font-size:0.95rem; font-weight:600; } .menu-cerrar { background:none; border:none; color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; padding:0 4px; } .menu-grupo { padding:10px 0 4px; border-bottom:1px solid #eef2f5; } .menu-grupo:last-child { border-bottom:none; } .menu-grupo-tit { margin:0 0 4px; padding:0 16px; font-size:0.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8793a0; } .menu-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 16px; color:#274b63; text-decoration:none; font-size:0.9rem; } .menu-item:hover { background:#eef2f5; } /* La pantalla donde ya estamos: se ve, no se puede tocar y lo dice. */ .menu-item-aqui { color:#8793a0; cursor:default; } .menu-aqui-txt { font-size:0.72rem; text-transform:uppercase; letter-spacing:.06em; } /* Con el menu abierto el fondo no se desplaza: si no, se scrollea la pagina de atras. */ body.con-menu { overflow:hidden; } /* EL GRUPO "SESION" ES EL ULTIMO Y SE SEPARA DEL RESTO. No es navegacion: son dos acciones que te sacan del sistema, y una de ellas alcanza a OTROS dispositivos. Separarlo es lo que evita que "Cerrar todas mis sesiones" se toque creyendo que lleva a una pantalla. */ .menu-grupo:last-child { margin-top:6px; border-top:2px solid #eef2f5; background:#fbfcfd; } .menu-grupo:last-child .menu-item { color:#8B1A1A; } .menu-grupo:last-child .menu-item:hover { background:#fdf0f0; } /* EN EL TELEFONO EL PANEL OCUPA CASI TODO EL ANCHO y los items son mas altos: a 390px un item de 10px de alto con el dedo es el que se toca equivocado. 44px es el minimo tocable. */ @media (max-width: 620px) { .menu-panel { width:88vw; max-width:none; } .menu-item { padding:13px 16px; min-height:44px; } .menu-cabe { padding:16px; } .btn-menu { padding:9px 12px; } } /* EL MOBILIARIO DE LAS GRILLAS: el control de páginas y los encabezados que ordenan. Va acá porque barra.css la carga TODA pantalla, igual que la barra de navegación. UNA SOLA DEFINICIÓN, Y ESO ES EL PUNTO. Hasta el 03/10/2026 `.pag-flecha` estaba declarada DOS veces, en centros.css gris y en listado.css roja con borde: en una pantalla que cargara las dos ganaba la última y nadie sabía cuál. Ariel: "no duplicar, uno solo para todo". El HTML lo dibuja Satiq\Grilla, también uno solo. */ .centros-barra { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .paginado-arriba { display:flex; align-items:center; gap:4px; color:#55606b; font-size:0.85rem; white-space:nowrap; } .pag-rango { margin-right:6px; font-variant-numeric:tabular-nums; } .pag-flecha { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:4px; text-decoration:none; color:#3c6382; font-size:1.2rem; line-height:1; } .pag-flecha:hover { background:#eef2f5; } .pag-off { color:#c6ccd2; cursor:default; } /* LOS ENCABEZADOS QUE ORDENAN. La flecha dice por cuál columna se ordena y para qué lado: es lo único que distingue "ordenado por esto" de "así vino". */ .tabla thead th a, .tabla-episodios thead th a { color:inherit; text-decoration:none; display:inline-block; } .tabla thead th a:hover, .tabla-episodios thead th a:hover { text-decoration:underline; } .tabla thead th a.orden-activo, .tabla-episodios thead th a.orden-activo { font-weight:700; color:#274b63; } /* EL PAR DE BOTONES QUE CIERRA TODA PANTALLA QUE SE GUARDA: Guardar y Volver. Va acá, en el archivo que cargan todas, por lo mismo que las grillas: el día que cambie, cambia una vez. El HTML lo dibuja Satiq\Formulario. EL VOLVER ES UN ENLACE Y NO UN BOTÓN, y por eso necesita que lo igualen a mano en altura y en línea de base: así el navegador lo abre en otra pestaña con el clic del medio y muestra a dónde lleva antes de tocarlo, cosa que un