/* ==========================================================================
   MEGAR — hoja de estilos base del sistema
   Colores del BRIEF y estilo del diseño aprobado (Main.dc.html).
   Los módulos NO editan este archivo: sus estilos van en static/<app>/<app>.css
   (bloque {% block extra_css %}). Usá siempre las variables de :root.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Colores del BRIEF */
  --primario: #0A62B5;
  --primario-hover: #084A8A;
  --navy: #1C2A44;
  --texto: #111827;
  --texto-2: #374151;
  --texto-secundario: #556070;
  --borde: #D1D5DB;
  --fondo: #F4F6F9;
  --peligro: #B42318;
  --exito: #067647;

  /* Derivados (mismos tonos del diseño aprobado) */
  --blanco: #FFFFFF;
  --primario-suave: #E8F0FA;
  --primario-borde: #B9D1EC;
  --navy-2: #2B3B5E;
  --navy-3: #46557A;
  --borde-suave: #E5E9EF;
  --borde-campo: #C5CDD8;
  --fondo-cabecera: #EEF2F7;
  --fondo-fila: #F8FAFC;
  --fondo-hover: #F2F6FB;
  --fondo-solo-lectura: #EEF1F5;
  --gris-badge: #E3E8EF;
  --gris-badge-texto: #334155;
  --peligro-hover: #912018;
  --peligro-suave: #FEF3F2;
  --peligro-borde: #F1C4C4;
  --exito-hover: #055E39;
  --exito-suave: #ECFDF3;
  --exito-borde: #B7DCC4;
  --aviso: #93370D;
  --aviso-suave: #FFFAEB;
  --aviso-borde: #F5D9A8;
  --info: #0A4F91;
  --info-suave: #EFF6FF;
  --info-borde: #BFD7F2;

  /* Tipografía */
  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --texto-xs: 12px;
  --texto-sm: 13px;
  --texto-base: 14px;
  --texto-md: 16px;
  --texto-lg: 20px;
  --texto-xl: 24px;

  /* Medidas */
  --alto-control: 40px;
  --alto-boton: 40px;
  --radio: 8px;
  --radio-chico: 6px;
  --radio-tarjeta: 10px;
  --ancho-lateral: 240px;
  --alto-barra: 64px;
  --sombra-1: 0 1px 2px rgba(16, 24, 40, .06);
  --sombra-2: 0 4px 12px rgba(16, 24, 40, .12);
  --sombra-3: 0 12px 32px rgba(16, 24, 40, .18);
  --foco: 0 0 0 3px rgba(10, 98, 181, .28);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--texto-base);
  line-height: 1.45;
  color: var(--texto);
  background: var(--fondo);
  font-feature-settings: 'cv11', 'ss01';
}

a { color: var(--primario); text-decoration: none; }
a:hover { color: var(--primario-hover); text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; color: var(--texto); }
p { margin: 0; }

img, svg { display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }

[hidden] { display: none !important; }

.sprite-iconos { position: absolute; width: 0; height: 0; overflow: hidden; }

.icono {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icono--chico { width: 14px; height: 14px; }
.icono--grande { width: 24px; height: 24px; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--blanco); color: var(--primario);
  padding: 8px 12px; border-radius: var(--radio-chico); box-shadow: var(--sombra-2);
}
.saltar:focus { top: 12px; }

.numero, .texto-derecha { text-align: right; }
.numero, .tabular { font-variant-numeric: tabular-nums; }
.texto-centro { text-align: center; }
.texto-secundario { color: var(--texto-secundario); }
.nowrap { white-space: nowrap; }
.pila { display: flex; flex-direction: column; gap: 12px; }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------- 3. Layout ---------- */
.layout {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - var(--alto-barra));
}

.contenido {
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px 28px 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contenido:focus { outline: none; }

/* ---------- 4. Barra superior ---------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: var(--alto-barra);
  background: var(--navy);
  color: var(--blanco);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 8px 20px 8px 24px;
}

.barra__marca { display: flex; align-items: center; gap: 14px; min-width: 0; }

.barra__logo { display: flex; align-items: center; border-radius: var(--radio-chico); }
.barra__logo img { height: 46px; width: auto; }
.barra__logo:hover { text-decoration: none; }

.barra__divisor { width: 1px; height: 28px; background: var(--navy-3); }

.barra__modulo {
  font-size: var(--texto-md);
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

.barra__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }

.barra__boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--blanco);
  font-size: var(--texto-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  text-decoration: none;
}
.barra__boton::-webkit-details-marker { display: none; }
.barra__boton:hover, .barra__boton:focus-visible { background: var(--navy-2); color: var(--blanco); text-decoration: none; }
.barra__boton:focus-visible { outline: 2px solid var(--blanco); outline-offset: -2px; }
.barra__boton.es-activo { background: var(--navy-2); box-shadow: inset 0 -3px 0 #7FB2E5; }
.barra__boton .icono { width: 16px; height: 16px; opacity: .85; }

.barra__etiqueta { opacity: .78; font-weight: 500; }
.barra__empresa {
  display: inline-block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.barra__usuario {
  background: var(--navy-2);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--texto-base);
  font-weight: 500;
  padding-inline: 14px;
}
.barra__usuario:hover { background: #34466E; }
/* Nombres largos (usuarios migrados con el e-mail como nombre): "…", completo en el title. */
.barra__nombre {
  display: inline-block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
/* El nombre arriba del menú del usuario solo se ve en el celular (ahí el botón es solo el ícono). */
.desplegable__panel .barra__usuario-titulo { display: none; text-transform: none; letter-spacing: 0; font-size: var(--texto-sm); }

.barra__menu {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid var(--navy-3);
  border-radius: var(--radio-chico);
  background: transparent; color: var(--blanco);
  cursor: pointer;
}

/* ---------- 5. Desplegables (details/summary) ---------- */
.desplegable { position: relative; }
.desplegable > summary { list-style: none; }
.desplegable[open] > summary { background: var(--navy-2); }
.desplegable[open] > summary .icono-chevron { transform: rotate(180deg); }

.desplegable__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 280px;
  max-width: min(420px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 6px;
  background: var(--blanco);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-3);
}
.desplegable--derecha .desplegable__panel { left: auto; right: 0; }

.desplegable__titulo {
  padding: 8px 10px 6px;
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-secundario);
}

.desplegable__opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--texto);
  font-size: var(--texto-base);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.desplegable__opcion:hover, .desplegable__opcion:focus-visible {
  background: var(--fondo-hover);
  color: var(--texto);
  text-decoration: none;
  outline: none;
}
.desplegable__opcion.es-actual { background: var(--primario-suave); color: var(--primario); font-weight: 600; }
.desplegable__opcion .icono { color: var(--texto-secundario); }
.desplegable__opcion.es-actual .icono { color: var(--primario); }
.desplegable__textos { display: flex; flex-direction: column; min-width: 0; }
.desplegable__detalle { font-size: var(--texto-xs); color: var(--texto-secundario); font-weight: 400; white-space: nowrap; }
.desplegable__vacio { padding: 10px; color: var(--texto-secundario); }
.desplegable__check { margin-left: auto; }

/* ---------- 6. Barra lateral ---------- */
.lateral {
  flex: 0 0 var(--ancho-lateral);
  width: var(--ancho-lateral);
  background: var(--blanco);
  border-right: 1px solid var(--borde-suave);
}
.lateral__interior {
  position: sticky;
  /* --alto-barra-real lo pone megar.js con el alto medido de la barra superior: si la barra ocupa
     dos renglones (ventanas de 1024 a 1280 px), la barra lateral no queda tapada al bajar. */
  top: var(--alto-barra-real, var(--alto-barra));
  max-height: calc(100vh - var(--alto-barra-real, var(--alto-barra)));
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 14px 10px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.menu, .menu__sub { list-style: none; margin: 0; padding: 0; }
.menu { display: flex; flex-direction: column; gap: 1px; }

.menu__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: var(--radio-chico);
  color: var(--texto);
  font-size: var(--texto-base);
  text-decoration: none;
}
.menu__enlace:hover { background: var(--fondo-hover); color: var(--texto); text-decoration: none; }
.menu__enlace.es-activo { background: var(--primario-suave); color: var(--primario); font-weight: 600; }
.menu__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu__separador { height: 1px; margin: 7px 12px; background: var(--borde-suave); }

.menu__grupo-boton {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--texto);
  font-size: var(--texto-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-align: left;
  cursor: pointer;
}
.menu__grupo-boton:hover { background: var(--fondo-hover); }
.menu__grupo-boton .menu__campana { color: var(--peligro); }
.menu__grupo-boton .menu__chevron { margin-left: auto; color: var(--texto-secundario); transition: transform .15s; }
.menu__grupo-boton[aria-expanded="true"] .menu__chevron { transform: rotate(180deg); }
.menu__grupo-boton[aria-expanded="true"] .menu__grupo-total { display: none; }
.menu__sub { display: flex; flex-direction: column; gap: 1px; padding-left: 14px; margin: 2px 0 4px 12px; border-left: 2px solid var(--borde-suave); }
.menu__sub .menu__enlace { padding-left: 10px; }

.lateral__bloque {
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lateral__subtitulo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-secundario);
}
.lateral__subtitulo .icono { width: 15px; height: 15px; color: var(--peligro); }
.lateral__alertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lateral__alerta { font-size: var(--texto-sm); line-height: 1.35; padding-left: 10px; border-left: 3px solid var(--aviso-borde); color: var(--texto-2); }
.lateral__alerta--peligro { border-left-color: var(--peligro); }
.lateral__alerta--info { border-left-color: var(--primario); }

.dolar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  color: var(--texto);
  text-decoration: none;
  background: var(--fondo-fila);
}
.dolar:hover { border-color: var(--primario-borde); background: var(--primario-suave); color: var(--texto); text-decoration: none; }
.dolar__titulo { font-size: var(--texto-xs); font-weight: 600; color: var(--texto-secundario); }
.dolar__valor { font-size: var(--texto-lg); font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dolar__valor--vacio { font-size: var(--texto-base); font-weight: 500; color: var(--texto-secundario); }
.dolar__nota { font-size: var(--texto-xs); color: var(--texto-secundario); }

.lateral-velo { display: none; }

/* ---------- 7. Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  font-size: var(--texto-xs);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.badge--gris { background: var(--gris-badge); color: var(--gris-badge-texto); }
.badge--rojo { background: var(--peligro); color: var(--blanco); }
.badge--azul { background: var(--primario-suave); color: var(--primario); }
.badge--verde { background: var(--exito-suave); color: var(--exito); }
.badge--ambar { background: var(--aviso-suave); color: var(--aviso); }

/* ---------- 8. Encabezado de página ---------- */
.pagina__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
}
.pagina__titulos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--texto-sm); color: var(--texto-secundario); }
.migas a { color: var(--texto-secundario); }
.migas a:hover { color: var(--primario); }
.migas__sep { color: #8B97A8; }
.pagina__titulo { font-size: var(--texto-xl); font-weight: 700; letter-spacing: .01em; color: var(--navy); overflow-wrap: break-word; }
.pagina__subtitulo { font-size: var(--texto-base); color: var(--texto-secundario); }
.pagina__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.pagina__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.pagina__pie-derecha { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.pagina__nota { font-size: var(--texto-sm); color: var(--texto-secundario); }

/* ---------- 9. Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--alto-boton);
  padding: 0 18px;
  border: 1px solid var(--primario);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--primario);
  font-size: var(--texto-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
.boton:hover { background: var(--primario-suave); color: var(--primario-hover); border-color: var(--primario-hover); text-decoration: none; }
.boton:focus-visible { outline: none; box-shadow: var(--foco); }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.boton .icono { width: 16px; height: 16px; }

.boton--primario { background: var(--primario); color: var(--blanco); }
.boton--primario:hover { background: var(--primario-hover); color: var(--blanco); }

.boton--secundario { border-color: var(--borde-campo); color: var(--texto-2); }
.boton--secundario:hover { background: var(--fondo-hover); border-color: #9AA6B6; color: var(--texto); }

.boton--peligro { border-color: var(--peligro-borde); color: var(--peligro); }
.boton--peligro:hover { background: var(--peligro-suave); border-color: var(--peligro); color: var(--peligro-hover); }
.boton--peligro-lleno { background: var(--peligro); border-color: var(--peligro); color: var(--blanco); }
.boton--peligro-lleno:hover { background: var(--peligro-hover); color: var(--blanco); }

.boton--exito { border-color: var(--exito-borde); color: var(--exito); }
.boton--exito:hover { background: var(--exito-suave); border-color: var(--exito); color: var(--exito-hover); }

.boton--fantasma { border-color: transparent; background: transparent; color: var(--texto-2); }
.boton--fantasma:hover { background: var(--fondo-hover); border-color: transparent; color: var(--texto); }

.boton--icono { width: var(--alto-boton); padding: 0; }
.boton--chico { min-height: 32px; padding: 0 12px; font-size: var(--texto-xs); }
.boton--chico.boton--icono { width: 32px; }

/* Acciones por fila de la grilla */
.accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--primario);
  cursor: pointer;
}
.accion:hover { border-color: var(--primario-borde); background: var(--primario-suave); color: var(--primario-hover); text-decoration: none; }
.accion .icono { width: 16px; height: 16px; }
.accion--peligro { color: var(--peligro); border-color: var(--peligro-borde); }
.accion--peligro:hover { background: var(--peligro-suave); border-color: var(--peligro); color: var(--peligro-hover); }
.accion--exito { color: var(--exito); border-color: var(--exito-borde); }
.accion--exito:hover { background: var(--exito-suave); border-color: var(--exito); color: var(--exito-hover); }
.acciones { display: flex; justify-content: flex-end; gap: 4px; }
.acciones form { display: contents; }

/* Botón flotante (FAB), abajo a la derecha como en Siammo */
.fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--primario);
  color: var(--blanco);
  box-shadow: var(--sombra-3);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .12s, transform .12s;
}
.fab:hover { background: var(--primario-hover); color: var(--blanco); text-decoration: none; transform: translateY(-1px); }
.fab:focus-visible { outline: none; box-shadow: var(--sombra-3), 0 0 0 4px rgba(10, 98, 181, .35); }
.fab .icono { width: 26px; height: 26px; stroke-width: 2.4; }
.fab--peligro { background: var(--peligro); }

/* Speed-dial: varios accesos en el FAB (Compras: Nueva compra / Nuevo pago) */
.fab-grupo { position: fixed; right: 28px; bottom: 28px; z-index: 25; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; }
.fab-grupo .fab { position: static; }
.fab-grupo__opciones { display: none; flex-direction: column; align-items: flex-end; gap: 8px; }
.fab-grupo:hover .fab-grupo__opciones, .fab-grupo:focus-within .fab-grupo__opciones, .fab-grupo.esta-abierto .fab-grupo__opciones { display: flex; }
.fab-grupo__opcion {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 14px 0 10px;
  border-radius: 20px; background: var(--blanco); color: var(--texto);
  box-shadow: var(--sombra-2); font-weight: 600; font-size: var(--texto-sm); text-decoration: none;
}
.fab-grupo__opcion:hover { background: var(--primario-suave); color: var(--primario); text-decoration: none; }
.fab-grupo__opcion .icono { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--primario); color: var(--blanco); }
.fab-grupo__opcion--rojo .icono { background: var(--peligro); }

/* ---------- 10. Tarjetas ---------- */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  min-width: 0;
}
.tarjeta__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--borde-suave);
  background: var(--fondo-fila);
  border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
}
.tarjeta__titulo {
  font-size: var(--texto-sm);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--navy);
}
.tarjeta__cuerpo { padding: 18px 20px 20px; }
.tarjeta__ayuda { font-size: var(--texto-xs); color: var(--texto-secundario); margin-top: 2px; }

/* ---------- 11. Formularios ---------- */
.form-tarjetas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1200px) {
  .form-tarjetas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.campos {
  display: grid;
  grid-template-columns: repeat(var(--columnas, 2), minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 0;
  align-items: start;
  margin-bottom: -14px; /* compensa el espacio de abajo de la última fila */
}
/* Cada campo ocupa dos filas de la grilla (rótulo / control) con subgrid: si un rótulo
   ocupa dos renglones, los controles de esa fila igual quedan alineados. */
.campo {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  grid-column: span var(--ancho, 1);
  min-width: 0;
}
.campo__control { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-bottom: 14px; }
.campo--casilla .campo__control { justify-content: center; }
.campo--casilla .casilla { min-height: var(--alto-control); }

.campo__etiqueta {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2px 4px;
  align-self: end;
  padding-bottom: 6px;
  font-size: var(--texto-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--texto-2);
}
.campo__requerido { color: var(--peligro); font-weight: 700; }
.campo__abm { display: inline-flex; color: var(--exito); margin-left: 2px; border-radius: 4px; }
.campo__abm:hover { color: var(--exito-hover); }
.campo__abm .icono { width: 16px; height: 16px; }
.campo__ayuda { font-size: var(--texto-xs); color: var(--texto-secundario); }
.campo__error { font-size: var(--texto-xs); font-weight: 600; color: var(--peligro); }

/* :where() deja la especificidad baja para que :disabled, :focus y los errores ganen. */
.control,
.campo :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), select, textarea),
.filtros :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select) {
  width: 100%;
  min-height: var(--alto-control);
  padding: 0 12px;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--texto);
  font-size: var(--texto-base);
  transition: border-color .12s, box-shadow .12s;
}
.campo textarea { min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.campo select, .filtros select, select.control {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23556070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.campo select[multiple] { min-height: 120px; padding: 6px; background-image: none; }

.control:hover,
.campo input:hover:not(:disabled):not([readonly]), .campo select:hover:not(:disabled), .campo textarea:hover:not(:disabled) { border-color: #9AA6B6; }
.control:focus,
.campo input:focus, .campo select:focus, .campo textarea:focus,
.filtros input:focus, .filtros select:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: var(--foco);
}
.campo input:disabled, .campo select:disabled, .campo textarea:disabled,
.campo input[readonly], .campo textarea[readonly] {
  background-color: var(--fondo-solo-lectura);
  border-color: var(--borde);
  color: var(--texto-2);
  cursor: default;
}
.campo input::placeholder, .campo textarea::placeholder, .filtros input::placeholder { color: #6B7685; }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--peligro); }
.campo--error input:focus, .campo--error select:focus, .campo--error textarea:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .2); }

input[data-numero], .control--numero { text-align: right; font-variant-numeric: tabular-nums; }
input[data-fecha] { font-variant-numeric: tabular-nums; }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="color"] { padding: 4px !important; max-width: 120px; cursor: pointer; }
.campo input[type="file"] { font-size: var(--texto-sm); color: var(--texto-2); min-height: var(--alto-control); }
.campo input[type="file"]::file-selector-button {
  margin-right: 10px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--texto-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.campo input[type="file"]::file-selector-button:hover { background: var(--fondo-hover); }

.casilla {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--alto-control);
  font-size: var(--texto-base);
  color: var(--texto);
  cursor: pointer;
}
.casilla input { width: 18px; height: 18px; margin: 0; accent-color: var(--primario); flex: none; cursor: pointer; }
.opciones-lista { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.opciones-lista ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.opciones-lista label { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }

.form-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.form-pie__derecha { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.form-en-linea { display: inline-flex; margin: 0; }

@media (max-width: 720px) {
  .campos { grid-template-columns: minmax(0, 1fr); }
  .campo { grid-column: auto; }
}

/* Combo con búsqueda (select2 de Siammo) */
.combo { position: relative; }
.combo__control { position: relative; }
.campo .combo__texto { padding-right: 40px; }
.combo__limpiar {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--texto-secundario);
  cursor: pointer;
}
.combo__limpiar:hover { background: var(--fondo-hover); color: var(--peligro); }
.combo__limpiar .icono { width: 16px; height: 16px; }
.combo__lista {
  position: absolute;
  z-index: 35;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
}
.combo__opcion { padding: 8px 10px; border-radius: var(--radio-chico); cursor: pointer; }
.combo__opcion:hover, .combo__opcion[aria-selected="true"] { background: var(--primario-suave); color: var(--primario); }
.combo__nota { padding: 8px 10px; font-size: var(--texto-sm); color: var(--texto-secundario); }

/* ---------- 12. Solapas ---------- */
.solapas { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.solapas__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  padding: 0 8px;
  border-bottom: 1px solid var(--borde);
  background: var(--fondo-fila);
  border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
}
.solapa {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 14px 10px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--texto-secundario);
  font-size: var(--texto-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: -1px;
}
.solapa:hover { color: var(--texto); }
.solapa[aria-selected="true"] { color: var(--primario); border-bottom-color: var(--primario); }
.solapa:focus-visible { outline: none; box-shadow: inset var(--foco); border-radius: var(--radio-chico) var(--radio-chico) 0 0; }
.solapa__error { width: 8px; height: 8px; border-radius: 50%; background: var(--peligro); }
.solapas__panel { padding: 20px; }

/* ---------- 13. Filtros y buscador ---------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
  padding: 16px 20px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
}
.filtros .campo { flex: 1 1 200px; max-width: 360px; }
.filtros .campo__control, .login__form .campo__control { padding-bottom: 0; }
.filtros .campo--casilla { flex: 0 0 auto; }
.filtros__buscar { flex: 2 1 280px; max-width: 520px; }
.buscador { display: flex; gap: 8px; }
.buscador input { flex: 1; min-width: 0; }
.buscador .boton { flex: none; }
/* "Patrón a buscar" primero y la lupa al final, después de los combos (ListaView.buscar_primero). */
.filtros__lupa { flex: none; }

/* ---------- 14. Grilla (como bootstrap-table de Siammo) ---------- */
.grilla {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
}
/* position: relative contiene a los rótulos ocultos (.visualmente-oculto, absolutos) de las
   columnas que quedan fuera de la pantalla: sin esto, en el celular la página se corre de costado. */
.grilla__desplazable { overflow-x: auto; position: relative; }
.grilla table, .tabla { width: 100%; border-collapse: collapse; font-size: var(--texto-base); }
.tabla th, .grilla th {
  background: var(--fondo-cabecera);
  color: var(--texto-2);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: .03em;
  text-align: left;
  padding: 0 12px;
  height: 42px;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
  vertical-align: middle;
}
.tabla td, .grilla td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde-suave);
  vertical-align: middle;
  color: var(--texto);
}
.tabla tbody tr:last-child td, .grilla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td, .grilla tbody tr:hover td { background: var(--fondo-hover); }
.tabla th:first-child, .tabla td:first-child, .grilla th:first-child, .grilla td:first-child { padding-left: 20px; }
.tabla th:last-child, .tabla td:last-child, .grilla th:last-child, .grilla td:last-child { padding-right: 20px; }
.tabla .numero, .grilla .numero, .tabla th.numero, .grilla th.numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .centro, .grilla .centro { text-align: center; }
.tabla td.acciones-celda, .grilla td.acciones-celda { padding-top: 4px; padding-bottom: 4px; width: 1%; white-space: nowrap; }

.orden {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  height: 42px;
}
.orden:hover { color: var(--primario); text-decoration: none; }
.orden .icono { width: 14px; height: 14px; opacity: .45; }
.orden.es-activo { color: var(--primario); }
.orden.es-activo .icono { opacity: 1; }
th.numero .orden { flex-direction: row-reverse; }

.grilla__vacio { padding: 28px 20px; text-align: center; color: var(--texto-secundario); }

/* Filas de grupo, subtotales y totales de los listados */
.fila-grupo td { background: var(--fondo-cabecera); font-weight: 700; color: var(--texto-2); }
.fila-subtotal td { background: var(--fondo-fila); font-weight: 600; }
.fila-total td { background: var(--exito-suave); color: var(--exito); font-weight: 700; border-top: 1px solid var(--exito-borde); }

.grilla__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 20px;
  border-top: 1px solid var(--borde-suave);
  background: var(--fondo-fila);
  font-size: var(--texto-sm);
  color: var(--texto-2);
}
.grilla__info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
/* Con botón flotante en la pantalla, la paginación termina antes del FAB (si no, el FAB
   tapa "»" cuando la grilla llega al pie de la ventana). */
@media screen and (min-width: 641px) {
  body:has(.fab, .fab-grupo) .grilla__pie { padding-right: 84px; }
}
.grilla__cantidad { display: inline-flex; align-items: center; gap: 8px; }
.grilla__cantidad select {
  min-height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-chico);
  background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23556070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
  appearance: none;
  font-size: var(--texto-sm);
  cursor: pointer;
}

/* ---------- 15. Paginación ---------- */
.paginacion { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.paginacion__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--texto-2);
  font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.paginacion__enlace:hover { border-color: var(--primario-borde); color: var(--primario); background: var(--primario-suave); text-decoration: none; }
.paginacion__enlace.es-actual { background: var(--primario); border-color: var(--primario); color: var(--blanco); font-weight: 600; }
.paginacion__enlace.es-inactivo { color: #9AA6B6; background: transparent; pointer-events: none; }
.paginacion__enlace .icono { width: 14px; height: 14px; }
.paginacion__puntos { padding: 0 4px; color: var(--texto-secundario); }

/* ---------- 16. Mensajes y avisos ---------- */
.mensajes { display: flex; flex-direction: column; gap: 8px; }
.aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--info-borde);
  border-left-width: 4px;
  border-radius: var(--radio);
  background: var(--info-suave);
  color: var(--info);
  font-size: var(--texto-base);
}
.aviso .icono { margin-top: 1px; }
.aviso__texto { flex: 1; min-width: 0; color: var(--texto); }
.aviso__texto strong { color: inherit; }
.aviso__cerrar {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: -4px -6px -4px 0;
  border: 0; border-radius: var(--radio-chico); background: transparent; color: inherit; cursor: pointer;
}
.aviso__cerrar:hover { background: rgba(0, 0, 0, .06); }
.aviso__cerrar .icono { width: 16px; height: 16px; margin: 0; }
.aviso--exito { border-color: var(--exito-borde); background: var(--exito-suave); color: var(--exito); }
.aviso--error { border-color: var(--peligro-borde); background: var(--peligro-suave); color: var(--peligro); }
.aviso--aviso { border-color: var(--aviso-borde); background: var(--aviso-suave); color: var(--aviso); }
.aviso--exito { border-left-color: var(--exito); }
.aviso--error { border-left-color: var(--peligro); }
.aviso--aviso { border-left-color: #DC6803; }
.aviso--info { border-left-color: var(--primario); }
.aviso ul { margin: 4px 0 0; padding-left: 18px; }

/* ---------- 17. Diálogos (modales) ---------- */
.dialogo {
  width: min(480px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--blanco);
  color: var(--texto);
  box-shadow: var(--sombra-3);
}
.dialogo--ancho { width: min(860px, calc(100vw - 32px)); }
.dialogo::backdrop { background: rgba(17, 24, 39, .45); }
.dialogo__encabezado { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--borde-suave); }
.dialogo__titulo { font-size: var(--texto-md); font-weight: 700; }
.dialogo__cuerpo { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dialogo__texto { font-size: var(--texto-md); line-height: 1.5; }
.dialogo__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--borde-suave); background: var(--fondo-fila); border-radius: 0 0 12px 12px; }
.dialogo__icono { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--peligro-suave); color: var(--peligro); }
.dialogo__fila { flex-direction: row; align-items: flex-start; gap: 14px; }
.dialogo__textos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* ---------- 18. Inicio de cada módulo ---------- */
.inicio { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.inicio__tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; }
.inicio__boton {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  /* Alto de un título en dos renglones ("ESTADÍSTICAS DE COMPRAS" a 1280 px): así las
     tarjetas de una fila terminan a la misma altura. */
  min-height: 94px;
  padding: 18px 18px;
  border: 0;
  background: transparent;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}
.inicio__boton:hover { background: var(--fondo-fila); }
.inicio__boton:focus-visible { outline: none; box-shadow: inset var(--foco); }
.inicio__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 12px; flex: none;
  background: var(--primario-suave); color: var(--primario);
}
.inicio__icono .icono { width: 28px; height: 28px; stroke-width: 1.8; }
.inicio__titulo { flex: 1; font-size: var(--texto-sm); font-weight: 700; letter-spacing: .05em; }
.inicio__cantidad { display: block; margin-top: 2px; font-size: var(--texto-xs); font-weight: 500; letter-spacing: 0; color: var(--texto-secundario); }
.inicio__chevron { color: var(--texto-secundario); transition: transform .15s; }
.inicio__boton[aria-expanded="true"] .inicio__chevron { transform: rotate(180deg); }
.inicio__boton[aria-expanded="true"] .inicio__icono { background: var(--primario); color: var(--blanco); }
.inicio__lista { list-style: none; margin: 0; padding: 6px 10px 12px; border-top: 1px solid var(--borde-suave); }
.inicio__enlace {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radio-chico);
  color: var(--texto);
  font-size: var(--texto-base);
  text-decoration: none;
}
.inicio__enlace:hover { background: var(--primario-suave); color: var(--primario); text-decoration: none; }

/* ---------- 19. En construcción ---------- */
.en-construccion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 24px;
  text-align: center;
  background: var(--blanco);
  border: 1px dashed var(--borde-campo);
  border-radius: var(--radio-tarjeta);
}
.en-construccion__icono { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--aviso-suave); color: var(--aviso); }
.en-construccion__titulo { font-size: var(--texto-lg); font-weight: 700; color: var(--navy); }
.en-construccion__texto { max-width: 520px; color: var(--texto-2); }
.en-construccion__tecnico { font-size: var(--texto-xs); color: var(--texto-secundario); }
.en-construccion__tecnico code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--fondo); padding: 2px 6px; border-radius: 4px; }

/* ---------- 20. Login ---------- */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--fondo);
}
.login__banda { background: var(--navy); height: 8px; }
.login__centro { display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.login__tarjeta {
  width: min(400px, 100%);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 14px;
  box-shadow: var(--sombra-2);
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.login__logo { align-self: center; height: 96px; width: auto; }
.login__titulo { text-align: center; font-size: var(--texto-lg); font-weight: 700; color: var(--navy); }
.login__subtitulo { text-align: center; font-size: var(--texto-sm); color: var(--texto-secundario); margin-top: 4px; }
.login__form { display: flex; flex-direction: column; gap: 14px; }
.login__form .boton { width: 100%; min-height: 44px; margin-top: 6px; }
/* "¿Olvidó su contraseña?" y "Volver al ingreso": link chico centrado debajo del botón. */
.login__enlace {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--texto-sm);
  font-weight: 500;
}
.login__enlace .icono { width: 16px; height: 16px; }
.login__pie { padding: 16px; text-align: center; font-size: var(--texto-xs); color: var(--texto-secundario); }

/* ---------- 21. Impresión de pantallas y documentos A4 ---------- */
.solo-impresion { display: none; }

.documento { max-width: 210mm; margin: 0 auto; background: var(--blanco); color: #000; }
.documento__barra { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 0; }

@page { size: A4; margin: 12mm; }

@media print {
  :root { --fondo: #FFFFFF; }
  body { background: #FFFFFF; color: #000; font-size: 11pt; }
  .barra, .lateral, .lateral-velo, .fab, .fab-grupo, .filtros, .form-pie, .pagina__pie, .pagina__acciones,
  .grilla__pie .grilla__cantidad, .paginacion, .acciones, .acciones-celda, .no-imprimir, .saltar,
  .mensajes, .aviso__cerrar, .documento__barra, .migas { display: none !important; }
  .solo-impresion { display: block !important; }
  .layout { display: block; min-height: 0; }
  .contenido { padding: 0; gap: 10px; }
  .pagina__titulo { font-size: 15pt; color: #000; }
  .grilla, .tarjeta, .solapas { border-color: #999; border-radius: 0; box-shadow: none; }
  .grilla__desplazable { overflow: visible; }
  .orden .icono { display: none; }
  .orden, .orden.es-activo { color: #000; }
  .tabla th, .grilla th { background: #EEE !important; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tabla tbody tr:hover td, .grilla tbody tr:hover td { background: transparent; }
  tr, .tarjeta { break-inside: avoid; }
  thead { display: table-header-group; }
  a { color: #000; text-decoration: none; }
  .documento { max-width: none; margin: 0; }
}

/* ---------- 22. Pantallas chicas ---------- */
.solo-celular { display: none; }
@media (max-width: 575.98px) {
  .solo-celular { display: block; }
}

@media (max-width: 1023.98px) {
  .barra { padding: 8px 12px; }
  .barra__menu { display: inline-flex; }
  .barra__logo img { height: 40px; }
  .lateral {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    height: 100vh;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: var(--sombra-3);
  }
  .lateral__interior { position: static; max-height: none; height: 100%; }
  body.lateral-abierto .lateral { transform: none; }
  body.lateral-abierto .lateral-velo { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(17, 24, 39, .4); }
  .contenido { padding: 18px 16px 96px; }
  .fab, .fab-grupo { right: 16px; bottom: 16px; }
}

/* De 1024 a 1280 px la barra lateral está fija a la izquierda: la barra superior se achica un poco
   para entrar en un renglón (si igual no entra, megar.js corre la barra lateral). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .barra { padding-inline: 16px; column-gap: 12px; }
  .barra__nav { gap: 2px; }
  .barra__boton { padding-inline: 9px; letter-spacing: .02em; }
  .barra__usuario { padding-inline: 10px; }
  .barra__empresa { max-width: 210px; }
  .barra__nombre { max-width: 150px; }
}

@media (max-width: 640px) {
  .grilla td { white-space: nowrap; }
  /* Celular: la barra no queda fija al bajar y ocupa tres renglones: logo, módulo y usuario (solo
     el ícono); EMPRESA ▾; MÓDULO ▾ · ESTADÍSTICAS · CONFIGURACIÓN. */
  .barra { position: static; justify-content: flex-start; gap: 6px 4px; padding: 8px 10px; }
  .barra__nav { display: contents; }
  .barra__marca { order: 0; flex: 1 1 auto; gap: 10px; }
  .barra__logo img { height: 36px; }
  .barra__nav > .desplegable--derecha { order: 1; }
  .barra__nav > :first-child { order: 2; flex: 1 1 100%; }
  .barra__nav > * { order: 3; }
  .barra__boton { padding-inline: 8px; letter-spacing: .02em; }
  .barra__usuario { padding-inline: 10px; }
  .barra__nombre { display: none; }
  .desplegable__panel .barra__usuario-titulo { display: block; }
  .barra__empresa { max-width: calc(100vw - 150px); }
  .pagina__titulo { font-size: var(--texto-lg); }
  .tarjeta__cuerpo, .solapas__panel { padding: 16px; }
}
@media (max-width: 374.98px) {
  .barra__boton { padding-inline: 6px; font-size: var(--texto-xs); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}