/* ============================================================
Sistema 5S — Europastry Sarral
Hoja de estilos única, propia, sin dependencias externas
(sin Bootstrap, sin CDN). Cubre tipografía, tokens de color,
modo claro/oscuro y todos los componentes de la aplicación.
============================================================ */
/* ---------- Tipografía autoalojada ---------- */
@font-face{
font-family: 'Manrope';
src: url('../fonts/manrope-400.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
font-family: 'Manrope';
src: url('../fonts/manrope-500.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
font-family: 'Manrope';
src: url('../fonts/manrope-600.woff2') format('woff2');
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face{
font-family: 'Manrope';
src: url('../fonts/manrope-700.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
font-family: 'Manrope';
src: url('../fonts/manrope-800.woff2') format('woff2');
font-weight: 800; font-style: normal; font-display: swap;
}
/* ---------- Tokens — modo claro ----------
Paleta "harina y horno": neutros cálidos de panadería con un único
acento (bronce tostado) en vez del marrón/dorado saturado anterior.
La barra de navegación pasa a un antracita neutro — el marrón vivo
era lo que se leía como "poco profesional". */
:root{
--font-base: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
--5s-ink: #262220;
--5s-ink-soft: #5c5347;
--5s-muted: #847a6a;
--5s-paper: #f4f2ec;
--5s-surface: #ffffff;
--5s-surface-2: #eae6da;
--5s-line: #ddd6c6;
--5s-accent: #9c7a3d;
--5s-accent-dark: #74591f;
--5s-accent-soft: #efe6d0;
--5s-accent-ink: #241c0c;
--5s-brand: #3f6b52;
--5s-brand-dark: #2c4f3c;
--5s-brand-soft: #e2ebe3;
--5s-good: #2f7d52;
--5s-good-soft: #e2f0e6;
--5s-warn: #b5650f;
--5s-warn-soft: #fbeada;
--5s-crit: #b3261e;
--5s-crit-soft: #fbe9e7;
--5s-info: #2e5266;
--5s-info-soft: #dfe9ee;
--radius-sm: .5rem;
--radius: .7rem;
--radius-lg: 1rem;
--shadow-sm: 0 1px 2px rgba(35,32,27,.06), 0 1px 1px rgba(35,32,27,.04);
--shadow-lg: 0 20px 45px -20px rgba(35,32,27,.28);
}
/* ---------- Tokens — modo oscuro ----------
[data-theme="dark"] se aplica en desde el botón de tema
(ver footer.php). Sin ese atributo, se sigue el tema del sistema
solo si el usuario nunca ha elegido uno explícitamente (ver JS). */
[data-theme="dark"]{
--5s-ink: #efe9db;
--5s-ink-soft: #d2c6b1;
--5s-muted: #a89c83;
--5s-paper: #18140f;
--5s-surface: #221e19;
--5s-surface-2: #2b261e;
--5s-line: #3e372a;
--5s-accent: #c39552;
--5s-accent-dark: #d9b271;
--5s-accent-soft: #332918;
--5s-accent-ink: #1c1408;
--5s-brand: #6ca382;
--5s-brand-dark: #8fbba3;
--5s-brand-soft: #1e2b23;
--5s-good: #74c092;
--5s-good-soft: #1c2e22;
--5s-warn: #e08a3f;
--5s-warn-soft: #332411;
--5s-crit: #ff8a80;
--5s-crit-soft: #3a2220;
--5s-info: #8fb8cf;
--5s-info-soft: #1f2f38;
--shadow-lg: 0 20px 45px -18px rgba(0,0,0,.55);
}
/* ---------- Reset base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
/* Sin esto, el ancho disponible cambia según si la página necesita o no
barra de scroll vertical (~15px que a veces "come" el contenido y a
veces no) — eso es lo que se notaba como un pequeño salto lateral al
cambiar de una sección corta a una larga o viceversa. Reservando
siempre ese hueco, haya o no scroll, el ancho es constante en todas
las páginas. overflow-y:scroll es el resguardo para el puñado de
navegadores que aún no soportan scrollbar-gutter. */
html{
-webkit-text-size-adjust: 100%;
scrollbar-gutter: stable;
overflow-y: scroll;
}
body{
margin: 0;
font-family: var(--font-base);
background: var(--5s-paper);
color: var(--5s-ink);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6{
font-family: var(--font-base);
font-weight: 700;
letter-spacing: -.01em;
color: var(--5s-ink);
margin: 0 0 .5rem;
}
p{ margin: 0 0 1rem; }
a{ color: var(--5s-accent-dark); text-decoration: none; }
a:hover{ color: var(--5s-ink); }
img{ max-width: 100%; }
hr{ border: none; border-top: 1px solid var(--5s-line); margin: 1rem 0; }
::selection{ background: var(--5s-accent-soft); }
/* ---------- Iconos SVG en línea ---------- */
.icon{
width: 1.1em; height: 1.1em;
display: inline-block;
vertical-align: -0.18em;
flex-shrink: 0;
}
/* ---------- Rejilla y layout ---------- */
/* Rejilla de 12 columnas (equivalente ligero al grid de Bootstrap) */
.row{display:flex;flex-wrap:wrap;margin-left:-12px;margin-right:-12px;}
.row > [class*="col"]{padding-left:12px;padding-right:12px;box-sizing:border-box;}
/* El ancho va aparte y con menor especificidad (un solo selector de atributo,
sin ".row >") a propósito: así las clases de punto de corte de abajo
(.col-md-3, .col-lg-2, etc.), que también tienen especificidad de una sola
clase, ganan por orden de aparición en vez de perder siempre frente a esta
regla base. Antes ".row > [class*="col"]" tenía especificidad doble y
anulaba TODOS los "col-md-N" y "col-lg-N" del sitio, dejando los
formularios y la barra lateral de mensajes en una sola columna incluso
en escritorio. */
[class^="col-"], [class*=" col-"]{width:100%;}
.row.g-3{row-gap:1rem;}
.container, .container-fluid{width:100%;padding-left:12px;padding-right:12px;margin-left:auto;margin-right:auto;box-sizing:border-box;}
.container{max-width:1140px;}
.col-1{width:8.3333%;}
.col-2{width:16.6667%;}
.col-3{width:25.0%;}
.col-4{width:33.3333%;}
.col-5{width:41.6667%;}
.col-6{width:50.0%;}
.col-7{width:58.3333%;}
.col-8{width:66.6667%;}
.col-9{width:75.0%;}
.col-10{width:83.3333%;}
.col-11{width:91.6667%;}
.col-12{width:100.0%;}
@media (min-width: 768px){
.col-md-1{width:8.3333%;}
.col-md-2{width:16.6667%;}
.col-md-3{width:25.0%;}
.col-md-4{width:33.3333%;}
.col-md-5{width:41.6667%;}
.col-md-6{width:50.0%;}
.col-md-7{width:58.3333%;}
.col-md-8{width:66.6667%;}
.col-md-9{width:75.0%;}
.col-md-10{width:83.3333%;}
.col-md-11{width:91.6667%;}
.col-md-12{width:100.0%;}
}
@media (min-width: 992px){
.col-lg-1{width:8.3333%;}
.col-lg-2{width:16.6667%;}
.col-lg-3{width:25.0%;}
.col-lg-4{width:33.3333%;}
.col-lg-5{width:41.6667%;}
.col-lg-6{width:50.0%;}
.col-lg-7{width:58.3333%;}
.col-lg-8{width:66.6667%;}
.col-lg-9{width:75.0%;}
.col-lg-10{width:83.3333%;}
.col-lg-11{width:91.6667%;}
.col-lg-12{width:100.0%;}
}
/* ---------- Utilidades ---------- */
.d-flex{ display: flex; }
.d-grid{ display: grid; }
/* !important es necesario: sin él, ".form-text{ display:block }" (más
abajo en la hoja) empataba en especificidad y ganaba por orden de
aparición, así que cosas como el aviso "Las contraseñas no coinciden"
(que lleva ambas clases) se veían siempre, aunque tuvieran d-none. */
.d-none{ display: none !important; }
.d-inline-block{ display: inline-block; }
.flex-column{ flex-direction: column; }
.flex-wrap{ flex-wrap: wrap; }
.justify-content-between{ justify-content: space-between; }
.justify-content-center{ justify-content: center; }
.justify-content-end{ justify-content: flex-end; }
.align-items-center{ align-items: center; }
.align-items-start{ align-items: flex-start; }
.align-items-end{ align-items: flex-end; }
.align-middle{ vertical-align: middle; }
.gap-2{ gap: .5rem; }
.gap-3{ gap: 1rem; }
.w-100{ width: 100%; }
.h-100{ height: 100%; }
.mx-auto{ margin-left: auto; margin-right: auto; }
.mb-0{ margin-bottom: 0; } .mb-1{ margin-bottom: .25rem; } .mb-2{ margin-bottom: .5rem; }
.mb-3{ margin-bottom: 1rem; } .mb-4{ margin-bottom: 1.5rem; } .mb-5{ margin-bottom: 3rem; }
.mt-1{ margin-top: .25rem; } .mt-2{ margin-top: .5rem; } .mt-3{ margin-top: 1rem; } .mt-4{ margin-top: 1.5rem; }
.my-3{ margin-top: 1rem; margin-bottom: 1rem; }
.me-1{ margin-right: .25rem; } .me-2{ margin-right: .5rem; } .me-3{ margin-right: 1rem; }
.ms-1{ margin-left: .25rem; } .ms-2{ margin-left: .5rem; } .ms-3{ margin-left: 1rem; }
.p-3{ padding: 1rem; } .p-4{ padding: 1.5rem; }
.py-2{ padding-top: .5rem; padding-bottom: .5rem; } .py-5{ padding-top: 3rem; padding-bottom: 3rem; }
.pb-4{ padding-bottom: 1.5rem; }
@media (min-width: 992px){ .mb-lg-0{ margin-bottom: 0; } .mt-lg-0{ margin-top: 0; } }
@media (min-width: 768px){ .mb-md-0{ margin-bottom: 0; } }
.fw-bold{ font-weight: 700; } .fw-semibold{ font-weight: 600; } .fw-normal{ font-weight: 400; }
.fs-5{ font-size: 1.15rem; } .fs-6{ font-size: 1rem; }
.small{ font-size: .84rem; }
.lead{ font-size: 1.1rem; color: var(--5s-ink-soft); }
.text-center{ text-align: center; }
.text-uppercase{ text-transform: uppercase; letter-spacing: .03em; }
.text-muted{ color: var(--5s-muted) !important; }
.text-danger{ color: var(--5s-crit) !important; }
.text-warning{ color: var(--5s-warn) !important; }
.text-primary{ color: var(--5s-accent-dark) !important; }
.text-secondary{ color: var(--5s-ink-soft) !important; }
.text-dark, .text-5s-dark{ color: var(--5s-ink) !important; }
.text-white{ color: #fff !important; }
.border{ border: 1px solid var(--5s-line) !important; }
.border-0{ border: 0 !important; }
.border-end{ border-right: 1px solid var(--5s-line) !important; }
.border-danger{ border-color: var(--5s-crit) !important; }
.rounded{ border-radius: var(--radius) !important; }
.shadow-sm{ box-shadow: var(--shadow-sm) !important; }
.shadow-lg{ box-shadow: var(--shadow-lg) !important; }
.bg-light{ background: var(--5s-surface-2) !important; }
.bg-primary{ background: var(--5s-accent) !important; color: var(--5s-accent-ink) !important; }
.bg-secondary{ background: var(--5s-ink-soft) !important; color: #fff !important; }
.bg-success{ background: var(--5s-good) !important; color: #fff !important; }
.bg-danger{ background: var(--5s-crit) !important; color: #fff !important; }
.bg-warning{ background: var(--5s-warn) !important; color: #fff !important; }
.bg-warning-subtle{ background: var(--5s-warn-soft) !important; color: var(--5s-warn) !important; }
.bg-transparent{ background: transparent !important; }
/* bg-info y bg-dark: quedaron sin definir (herencia de cuando la app usaba
Bootstrap) y varias vistas ya las usaban dando por hecho que existían —
el resultado era una insignia o una barra de progreso sin ningún color,
casi invisible sobre el fondo de la tarjeta. */
.bg-info{ background: var(--5s-info) !important; color: #fff !important; }
.bg-dark{ background: var(--5s-ink) !important; color: #fff !important; }
.img-fluid{ max-width: 100%; height: auto; display: block; }
.list-unstyled{ list-style: none; margin: 0; padding: 0; }
/* Contenedor máximo de página (sustituye a los style inline max-width).
Antes vivía siempre dentro de ".container" (main.php), que ya limitaba
a 1140px — por mucho que este declarara 1440px, un hijo nunca puede ser
más ancho que su padre ya limitado, así que nunca se llegaba a usar.
Ahora main.php ya no envuelve en ".container", así que el padding
lateral (antes heredado del padre) se pone aquí directamente, para que
".page-shell" sea autosuficiente pase lo que pase por fuera. */
.page-shell{
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
}
.main-content{
padding-top: 28px;
padding-bottom: 32px;
}
html, body{ background: var(--5s-paper); }
/* ---------- Barra de navegación ----------
Antes era un marrón casi negro fijo (#211d18) que NO cambiaba en modo
claro: por eso la barra siempre se veía "en modo oscuro" aunque el
resto de la página estuviera en modo claro. Ahora sigue el tema igual
que cualquier otra superficie (var(--5s-surface): blanco en claro,
antracita cálido en oscuro) y el dorado se reserva para la marca, el
enlace activo y los botones principales — ya no tiñe todo el texto. */
/* Aviso fijo mientras Admin Master ve la app "como" una empresa concreta
(impersonación desde el panel interno de la plataforma) — para que
nunca se confunda con su sesión normal de "ve todas las empresas".
Va ANTES de .navbar-5s en el DOM; como esta última es sticky (no
fixed), no hace falta ningún ajuste de padding para que encajen. */
.impersonando-bar{
background: var(--5s-warn);
color: #fff;
font-size: .85rem;
font-weight: 600;
padding: .5rem 1rem;
display: flex; align-items: center; justify-content: center; gap: .6rem;
text-align: center;
}
.impersonando-bar a{
color: #fff; text-decoration: underline; font-weight: 700;
}
.impersonando-bar a:hover{ color: #fff; opacity: .85; }
.navbar-5s{
position: sticky; top: 0; z-index: 1030;
background: var(--5s-surface);
border-bottom: 1px solid var(--5s-line);
padding: .65rem 0;
}
.navbar-5s .container, .navbar-5s .container-fluid{
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
/* Antes esto tenía flex-wrap:wrap con un max-width ajustado a ojo
(1650px, luego 1900px) para que la marca + los 8 enlaces + tema +
usuario + cerrar sesión cupieran en un renglón. El problema de fondo
no era el ancho del tope sino depender de wrap en absoluto: en
cuanto la fuente real del navegador del usuario medía unos pocos px
más ancha que en las pruebas (fuente de sistema distinta según
SO/navegador), el contenido dejaba de caber y el wrap partía la
barra en dos líneas — "5S Europastry" arriba, el menú entero debajo,
sin alinear. Subir el tope una y otra vez solo desplazaba el punto
de rotura. flex-wrap: nowrap aquí lo elimina de raíz: la marca y el
menú SIEMPRE quedan en la misma fila; si algún día no cupiera del
todo, .navbar-collapse hace scroll horizontal por su cuenta (ver
abajo) en vez de romper la fila. */
flex-wrap: nowrap;
/* Mismo tope que .page-shell (1600px) — antes eran anchos distintos
(este llegaba a 1900px) y en monitores muy anchos el logo/menú de
arriba quedaba desalineado respecto al contenido de la página,
centrado más estrecho justo debajo. */
max-width: 1600px;
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
}
.navbar-5s .navbar-brand{
color: var(--5s-ink);
font-weight: 800;
font-size: 1.25rem;
display: flex; align-items: center; gap: 10px;
flex-shrink: 0; /* el logo nunca se comprime ni se envuelve; si algo cede espacio, es el menú */
}
.navbar-5s .brand-mark{
width: 30px; height: 30px;
border-radius: 8px;
background: var(--5s-accent);
color: var(--5s-accent-ink);
display: flex; align-items: center; justify-content: center;
font-size: .92rem; font-weight: 800;
flex-shrink: 0;
}
.navbar-toggler{
display: none;
background: transparent;
border: 1px solid var(--5s-line);
border-radius: var(--radius-sm);
color: var(--5s-ink-soft);
padding: .4rem .6rem;
cursor: pointer;
flex-shrink: 0;
}
.navbar-toggler .icon{ width: 1.3em; height: 1.3em; }
/* flex-wrap:nowrap + min-width:0 (el mínimo automático de un hijo flex
es su tamaño de contenido, que aquí puede superar el hueco disponible)
+ overflow-x:auto: si algún día la marca + los enlaces + las acciones
de la derecha no caben del todo, ESTA franja se desliza horizontalmente
en vez de que el navegador reparta la marca y el menú en dos líneas —
la barra siempre se ve como una sola fila alineada. */
.navbar-collapse{
display: flex; align-items: center; flex-wrap: nowrap; gap: .35rem .6rem;
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
scrollbar-width: thin;
}
.navbar-nav{
display: flex; flex-wrap: nowrap; flex-shrink: 0; align-items: center; gap: .1rem;
list-style: none; margin: 0; padding: 0;
}
.nav-item{ display: flex; flex-shrink: 0; }
.nav-link{
display: inline-flex; align-items: center; gap: 6px;
color: var(--5s-ink-soft);
font-weight: 600; font-size: .89rem;
border-radius: var(--radius-sm);
padding: .5rem .65rem;
transition: background .15s, color .15s;
white-space: nowrap;
}
.nav-link:hover{ color: var(--5s-ink); background: var(--5s-surface-2); }
.nav-link.active{ color: var(--5s-accent-ink); background: var(--5s-accent); }
.navbar-text{ color: var(--5s-ink-soft); }
.user-chip{
color: var(--5s-ink);
font-size: .84rem; line-height: 1.2;
display: flex; flex-direction: column;
text-decoration: none;
border: 1px solid var(--5s-line);
border-radius: var(--radius-sm);
padding: .3rem .6rem;
transition: background-color .15s, border-color .15s;
}
/* Antes solo cambiaba el fondo un poco al pasar el ratón: sin borde
visible en reposo, parecía texto suelto en vez de un control con el
que se puede interactuar (a diferencia de "Cerrar sesión", que sí es
un botón con borde). Con un borde tenue siempre visible que se marca
en dorado al pasar el ratón, se lee igual de "clicable" que el resto
de botones de la barra. */
.user-chip:hover{ background: var(--5s-surface-2); border-color: var(--5s-accent); color: var(--5s-ink); }
.user-chip small{ color: var(--5s-muted); }
/* ---------- Mi perfil ---------- */
.profile-avatar, .profile-avatar-placeholder{
width: 140px; height: 140px; border-radius: 50%;
margin-left: auto; margin-right: auto;
object-fit: cover;
}
.profile-avatar{ border: 3px solid var(--5s-line); background: var(--5s-surface-2); }
.profile-avatar-placeholder{
display: flex; align-items: center; justify-content: center;
background: var(--5s-accent-soft); color: var(--5s-accent-ink);
border: 3px solid var(--5s-line);
}
.profile-avatar-placeholder .icon{ width: 64px; height: 64px; }
.btn-outline-5s{
border: 1px solid var(--5s-line);
color: var(--5s-ink);
background: transparent;
border-radius: var(--radius-sm);
padding: .45rem .85rem;
font-size: .88rem; font-weight: 600;
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer;
}
.btn-outline-5s:hover{ border-color: var(--5s-accent); color: var(--5s-accent); background: var(--5s-surface-2); }
/* ---------- Menú desplegable del navbar (Operativa / Gestión) ----------
Ligero y sin depender de Bootstrap JS (igual que el resto del navbar):
.dropdown-toggle abre/cierra .dropdown-menu añadiendo/quitando "show"
en el padre, gestionado desde footer.php. */
.dropdown{ position: relative; }
.dropdown-toggle{ cursor: pointer; }
.icon-chevron{ width: .75em; height: .75em; transition: transform .15s; }
.dropdown.show .icon-chevron{ transform: rotate(180deg); }
/* position:fixed a propósito, NO absolute: .navbar-collapse necesita
overflow-x:auto para el scroll horizontal de emergencia (ver más abajo),
y por cómo funciona overflow en CSS, en cuanto un eje deja de ser
"visible" el otro pasa a comportarse como "auto" también — eso recortaba
este menú (que necesita salirse hacia abajo) dentro de la franja de la
barra, aunque nunca se viera un scrollbar ahí. position:fixed no forma
parte de esa caja recortada (su "contenedor" es la ventana, no
.navbar-collapse), así que escapa del recorte. Como contrapartida, top/
left ya no se pueden fijar por CSS (dependen de dónde esté el botón que
lo abre) — los calcula el JS de footer.php al abrirlo. */
.dropdown-menu{
display: none;
position: fixed;
margin-top: 6px;
min-width: 210px;
background: var(--5s-surface);
border: 1px solid var(--5s-line);
border-radius: var(--radius-sm);
box-shadow: 0 10px 28px rgba(20,16,8,.16);
padding: .4rem;
z-index: 1050;
list-style: none;
}
.dropdown.show .dropdown-menu{ display: block; }
.dropdown-item{
display: flex; align-items: center;
padding: .55rem .65rem;
border-radius: var(--radius-sm);
color: var(--5s-ink-soft);
font-weight: 600; font-size: .89rem;
white-space: nowrap;
text-decoration: none;
}
.dropdown-item:hover{ background: var(--5s-surface-2); color: var(--5s-ink); }
.dropdown-item.active{ color: var(--5s-accent-ink); background: var(--5s-accent); }
/* ---------- Campanita de notificaciones ---------- */
.notif-bell .btn{ position: relative; }
.notif-badge{
position: absolute;
top: -6px; right: -6px;
min-width: 18px; height: 18px;
padding: 0 4px;
border-radius: 999px;
font-size: .66rem; font-weight: 800;
display: flex; align-items: center; justify-content: center;
line-height: 1;
border: 2px solid var(--5s-surface);
}
.notif-dropdown{ width: 340px; max-width: calc(100vw - 20px); padding: 0; overflow: hidden; }
.notif-header{
display: flex; align-items: center; justify-content: space-between;
padding: .7rem .9rem;
border-bottom: 1px solid var(--5s-line);
font-size: .85rem;
}
.notif-marcar-todas{ color: var(--5s-accent); font-weight: 600; font-size: .78rem; text-decoration: none; white-space: nowrap; }
.notif-marcar-todas:hover{ text-decoration: underline; }
.notif-vacio{
padding: 1.5rem 1rem;
text-align: center;
color: var(--5s-muted);
font-size: .85rem;
white-space: normal;
}
.notif-item{
display: grid;
grid-template-columns: auto 1fr;
column-gap: .6rem;
row-gap: .1rem;
padding: .65rem .9rem;
border-radius: 0;
white-space: normal;
border-bottom: 1px solid var(--5s-line);
}
.notif-item:last-child{ border-bottom: none; }
.notif-item-icon{
grid-row: 1 / 3;
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--5s-surface-2);
color: var(--5s-accent);
flex-shrink: 0;
}
.notif-item-icon .icon{ width: 16px; height: 16px; }
.notif-item-texto{ font-size: .83rem; font-weight: 600; color: var(--5s-ink-soft); line-height: 1.3; }
.notif-item-fecha{ font-size: .72rem; color: var(--5s-muted); }
/* Sin leer: texto en el color normal de la app (más "presente" que el gris
apagado de .dropdown-item) y un punto de color a la izquierda del todo,
mismo lenguaje visual que .badge-estado.pendiente. */
.notif-item--no-leida .notif-item-texto{ color: var(--5s-ink); }
.notif-item--no-leida{ position: relative; }
.notif-item--no-leida::before{
content: "";
position: absolute; left: 4px; top: 50%;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--5s-crit);
transform: translateY(-50%);
}
/* El menú necesita bastante ancho para caber en una sola fila (marca +
8 enlaces + tema + usuario + cerrar sesión: ronda los 1550px de ancho
real, y varía algo según la fuente de cada sistema/navegador). Por
debajo de este punto de corte se cambia al desplegable móvil, donde
cada cosa se apila a ancho completo; por encima, .navbar-collapse va
en línea junto a la marca (ver reglas base arriba) y, si por lo que
sea no cupiera del todo, desliza en horizontal en vez de romper la
fila — ya no depende de ajustar este punto de corte al milímetro. */
@media (max-width: 1699.98px){
/* Bug real (no solo "se ve feo"): en escritorio .container-fluid es
flex-wrap:nowrap a propósito (ver comentario arriba) para que la
marca y el menú NUNCA se partan en dos líneas torpemente. Pero aquí
abajo, con el menú colapsado, ese mismo nowrap obligaba a
.navbar-collapse (marca+toggler+colapsable en una sola fila flex) a
colocarse a la DERECHA del logo en vez de debajo: al ser mucho más
alto que el logo, y con align-items:center heredado, el logo y el
botón quedaban centrados verticalmente a mitad del menú desplegado
— el típico "menú movil descolocado", con el logo flotando en medio
de las opciones en vez de arriba del todo. Con flex-wrap:wrap aquí,
.navbar-collapse (que sigue midiendo width:100%) ya no cabe en la
primera línea junto a marca+toggler y salta a su propia línea
completa debajo, que es el patrón estándar de menú hamburguesa. */
.navbar-5s .container-fluid{ flex-wrap: wrap; }
.navbar-toggler{ display: inline-flex; align-items: center; justify-content: center; }
.navbar-collapse{
display: none;
width: 100%;
flex-direction: column;
align-items: stretch;
overflow-x: visible; /* el scroll horizontal es solo para el modo fila única de escritorio */
background: var(--5s-surface);
border-top: 1px solid var(--5s-line);
margin-top: .65rem;
padding-top: .5rem;
}
.navbar-collapse.show{ display: flex; }
.navbar-nav{ flex-direction: column; flex-wrap: wrap; align-items: stretch; gap: 2px; }
.nav-link{ padding: .7rem .5rem; }
/* En el menú móvil apilado, el desplegable se despliega en línea (empuja
el resto del menú hacia abajo) en vez de flotar encima como en
escritorio — encaja mejor con el resto de opciones apiladas.
Para que "en línea" signifique DEBAJO del enlace "Operativa"/"Gestión"
y no AL LADO, .nav-item (el , que sigue siendo flex-direction:row
de base) también tiene que pasar a columna aquí: si no, el
colocaba el y el