/* === MNF · Sistema de diseño ===============================================
 *
 * Un solo archivo para todas las pantallas. Las referencias que pidió el
 * usuario son moradas; la identidad de MNF es AZUL MARINO Y DORADO, y eso es lo
 * que manda: se toma de las referencias la estructura —fondo oscuro, tarjetas
 * de vidrio, titulares con degradado, halos suaves— y se pinta con los colores
 * del logo.
 *
 * Todo color vive acá arriba. Ningún archivo de pantalla escribe un color a
 * mano: si mañana cambia el dorado, cambia en una línea.
 */

/* --- 1 · fichas ----------------------------------------------------------- */
:root {
  /* Azules del logo. El 950 no estaba en la paleta vieja: hacía falta un fondo
     más profundo que el 900 para que las tarjetas de vidrio tengan contra qué
     levantarse. Con todo al mismo tono, nada flota. */
  --navy-950: #060b16;
  --navy-900: #0a1628;
  --navy-800: #0f1d35;
  --navy-700: #16294a;
  --navy-600: #1d3560;
  --navy-500: #274680;

  /* Dorado del logo. */
  --gold:       #d4a017;
  --gold-light: #e9c057;
  --gold-deep:  #b8860b;

  /* Texto. Blanco puro sobre azul oscuro vibra y cansa; el titular usa un
     blanco levemente frío y el cuerpo baja a un gris azulado. */
  --tinta:      #f2f6fc;
  --tinta-2:    #b9c6da;
  --tinta-3:    #7d8ca6;

  /* Estados. Se mantienen los de las pantallas viejas para no reeducar a nadie. */
  --ok:    #34d399;
  --ok-bg: rgba(52, 211, 153, .12);
  --err:   #f87171;
  --err-bg: rgba(248, 113, 113, .12);
  --avisa: #fbbf24;

  /* Vidrio: el borde es dorado con muy poca opacidad, no gris. Es lo que hace
     que las tarjetas se sientan de la marca y no de una plantilla cualquiera. */
  --vidrio:       rgba(22, 41, 74, .45);
  --vidrio-alto:  rgba(29, 53, 96, .55);
  --borde:        rgba(212, 160, 23, .14);
  --borde-fuerte: rgba(212, 160, 23, .30);
  --borde-frio:   rgba(185, 198, 218, .10);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --sombra:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --sombra-alta: 0 2px 4px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.42);

  --paso: 200ms cubic-bezier(.4, 0, .2, 1);

  --ancho: 1180px;

  --display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --texto: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* --- 2 · base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta-2);
  background: var(--navy-950);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--tinta);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

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

/* Nadie debe perder de vista dónde está el foco al navegar con teclado. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: rgba(212, 160, 23, .28); color: var(--tinta); }

/* --- 3 · el fondo --------------------------------------------------------- */
/* Dos halos y una retícula. La retícula se desvanece hacia abajo con una
   máscara: si llega entera al pie, compite con el contenido. */
.mnf-fondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(680px 420px at 12% -6%,  rgba(39, 70, 128, .40), transparent 70%),
    radial-gradient(520px 340px at 92% 2%,   rgba(212, 160, 23, .10), transparent 68%),
    radial-gradient(760px 520px at 50% 108%, rgba(22, 41, 74,  .55), transparent 72%);
}

.mnf-fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(185, 198, 218, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 198, 218, .045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
}

/* --- 4 · estructura ------------------------------------------------------- */
.mnf-ancho {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

.mnf-seccion { padding: 92px 0; }
.mnf-seccion--corta { padding: 56px 0; }

/* --- 5 · barra superior --------------------------------------------------- */
.mnf-barra {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 0;
  /* Sin backdrop-filter (11 oct 2026): Chrome dibuja apagado todo lo que se
     sale de un elemento con desenfoque de fondo, y los desplegables, el
     submenú y la etiqueta de Salir se salen de la barra. Más opaca, compensa. */
  background: rgba(6, 11, 22, .92);
  border-bottom: 1px solid transparent;
  transition: border-color var(--paso), background var(--paso);
}
.mnf-barra.pegada {
  border-bottom-color: var(--borde-frio);
  background: rgba(6, 11, 22, .96);
}

.mnf-barra__fila {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* La barra usa MAS ancho que el contenido.
   El contenido se lee mejor limitado a 1180, pero la barra lleva marca, siete
   opciones con icono y el bloque de quien-sos: con 1180 la suma se pasaba y
   "Salir" quedaba fuera de la pantalla. Se le da su propio maximo y usa el
   espacio que el contenido no necesita. */
.mnf-barra .mnf-ancho { max-width: 1400px; }

/* Y donde ya no alcanza, se van los iconos antes que el texto.
   Un icono sin palabra obliga a adivinar; una palabra sin icono se entiende
   igual. Siguen estando en los desplegables y en el cajon del telefono. */
/* El repliegue va por etapas, sacando primero lo que menos se necesita.

   1) El subtitulo del logo es decorativo: la marca se reconoce sin el, y son
      unos 70px que la barra necesita para que "Salir" no quede afuera.
   2) Recien despues se van los iconos. Un icono sin palabra obliga a
      adivinar; una palabra sin icono se entiende igual. Siguen estando en los
      desplegables y en el cajon del telefono. */
/* Los umbrales se corrieron el 11 de septiembre, al pasar el grupo "DTE" a
   llamarse "Operaciones MNF": el menu crecio unos 90px de golpe y con los
   valores viejos la barra se salia de la pantalla a 1400, comiendose el boton
   de Salir. Medido en el navegador: sin la etapa 2 la barra necesita 1474px, y
   sin la etapa 1 unos 1545. Cada umbral tiene margen sobre eso. */
@media (max-width: 1440px) {
  .mnf-marca__nota { display: none; }
  .mnf-barra__fila { gap: 16px; }
}
@media (max-width: 1320px) {
  /* Solo el PRIMER nivel: '.mnf-nav a' tambien alcanza a los enlaces de
     adentro del desplegable, donde el icono es lo que ordena la lista y hay
     sitio de sobra. El '>' es lo que separa una cosa de la otra. */
  .mnf-nav > a .mnf-icono, .mnf-grupo__b .mnf-icono { display: none; }
  .mnf-nav > a { gap: 0; padding: 7px 12px; }
  .mnf-grupo__b { gap: 4px; padding: 7px 10px 7px 12px; }
}

/* El logo viene en JPG con fondo blanco, así que se le da una tarjeta clara
   propia. Recortarlo a la fuerza sobre el azul lo deja con un halo sucio.
   Con un PNG o SVG transparente esta ficha se puede quitar. */
.mnf-marca { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.mnf-marca__logo {
  height: 38px;
  width: auto;
  background: #fff;
  border-radius: var(--r-sm);
  padding: 4px 7px;
  box-shadow: 0 0 0 1px var(--borde);
}
.mnf-marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.mnf-marca__nombre {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
  letter-spacing: .01em;
}
.mnf-marca__nota {
  font-size: 10px;
  color: var(--tinta-3);
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Nav en píldora, como las referencias. */
.mnf-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0 auto;
  padding: 5px;
  background: var(--vidrio);
  border: 1px solid var(--borde-frio);
  border-radius: 999px;
}
.mnf-nav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--tinta-2);
  transition: color var(--paso), background var(--paso);
  white-space: nowrap;
}
/* El icono acompaña, no compite: mas fino que el texto y en dorado apagado.
   Al mismo grosor y color que la palabra, la barra se vuelve ruido. */
.mnf-nav a .mnf-icono, .mnf-grupo__b .mnf-icono {
  width: 16px; height: 16px;
  stroke-width: 1.4;
  color: var(--gold);
  opacity: .85;
}
.mnf-nav a.activo .mnf-icono, .mnf-grupo__b.activo .mnf-icono {
  color: currentColor; opacity: 1;
}
.mnf-nav a:hover { color: var(--tinta); background: rgba(185, 198, 218, .06); }
.mnf-nav a.activo {
  color: var(--navy-950);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  font-weight: 600;
}

.mnf-barra__fin { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* --- 6 · botones ---------------------------------------------------------- */
/* `hidden` le gana a cualquier clase que fije `display`.
 *
 * La regla del navegador para `[hidden]` es de la hoja del propio navegador, y
 * cualquier clase nuestra —`.mnf-btn` pone `display: inline-flex`— la pisa. El
 * síntoma: un botón con el atributo `hidden` puesto se seguía viendo, y el
 * código que lo escondía parecía no hacer nada. */
[hidden] { display: none !important; }

.mnf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--texto);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--paso), box-shadow var(--paso),
              background var(--paso), border-color var(--paso), opacity var(--paso);
  white-space: nowrap;
}
.mnf-btn:active { transform: translateY(1px); }
.mnf-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.mnf-btn--oro {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #24190a;
  box-shadow: 0 6px 20px rgba(212, 160, 23, .22);
}
.mnf-btn--oro:hover:not([disabled]) {
  box-shadow: 0 10px 30px rgba(212, 160, 23, .34);
  transform: translateY(-1px);
}

.mnf-btn--linea {
  background: var(--vidrio);
  border-color: var(--borde-fuerte);
  color: var(--tinta);
}
.mnf-btn--linea:hover:not([disabled]) {
  background: var(--vidrio-alto);
  border-color: var(--gold);
}

.mnf-btn--llano { background: transparent; color: var(--tinta-2); padding: 11px 14px; }
.mnf-btn--llano:hover:not([disabled]) { color: var(--tinta); }

.mnf-btn--peligro {
  background: transparent;
  border-color: rgba(248, 113, 113, .38);
  color: var(--err);
}
.mnf-btn--peligro:hover:not([disabled]) { background: var(--err-bg); }

.mnf-btn--chico { padding: 7px 14px; font-size: 13px; }

/* --- 7 · tipografía de titulares ------------------------------------------ */
.mnf-ojillo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.mnf-ojillo::before {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.mnf-titular {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  letter-spacing: -.03em;
  line-height: 1.06;
}
.mnf-titular--chico { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }

/* El degradado del titular. En las referencias es la segunda mitad de la frase
   la que se tiñe; acá igual, con el dorado del logo. */
.mnf-brillo {
  background: linear-gradient(100deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mnf-bajada {
  font-size: 16px;
  color: var(--tinta-2);
  max-width: 62ch;
  margin: 20px 0 0;
}

.mnf-centro { text-align: center; }
.mnf-centro .mnf-bajada { margin-left: auto; margin-right: auto; }
.mnf-centro .mnf-ojillo::before { display: none; }

/* --- 8 · tarjetas --------------------------------------------------------- */
.mnf-tarjeta {
  position: relative;
  background: var(--vidrio);
  border: 1px solid var(--borde-frio);
  border-radius: var(--r-lg);
  padding: 26px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--paso), border-color var(--paso), box-shadow var(--paso);
}
.mnf-tarjeta--viva:hover {
  transform: translateY(-3px);
  border-color: var(--borde-fuerte);
  box-shadow: var(--sombra-alta);
}

/* La esquina recortada de las referencias. Es lo que le da carácter a la
   tarjeta sin agregarle nada encima. */
.mnf-tarjeta--muesca {
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 46px;
}

.mnf-rejilla { display: grid; gap: 20px; }
.mnf-rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.mnf-rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.mnf-rejilla--4 { grid-template-columns: repeat(4, 1fr); }

/* --- 9 · iconos ----------------------------------------------------------- */
/* Trazo fino y sin relleno: el pedido era "delicados y minimalistas". El grosor
   se fija acá y no en cada SVG para que ninguno se salga del sistema. */
.mnf-icono {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}
.mnf-icono--g { width: 24px; height: 24px; }

.mnf-ficha-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(140deg, rgba(212, 160, 23, .16), rgba(212, 160, 23, .05));
  border: 1px solid var(--borde);
  color: var(--gold-light);
  margin-bottom: 18px;
}

/* --- 10 · cifras ---------------------------------------------------------- */
.mnf-cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--borde-frio);
  padding-top: 40px;
}
.mnf-cifra { padding: 0 26px; border-left: 1px solid var(--borde-frio); }
.mnf-cifra:first-child { border-left: 0; padding-left: 0; }
.mnf-cifra__n {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 600;
  color: var(--tinta);
  letter-spacing: -.03em;
  line-height: 1;
}
.mnf-cifra__pie {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--tinta-3);
}
.mnf-cifra__pie .mnf-icono { color: var(--gold); margin-top: 1px; }

/* --- 11 · formularios ----------------------------------------------------- */
.mnf-campo { margin-bottom: 18px; }
.mnf-campo__rotulo {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-2);
  margin-bottom: 7px;
  letter-spacing: .01em;
}
.mnf-campo__nota { font-size: 12px; color: var(--tinta-3); margin-top: 6px; }

.mnf-entrada,
.mnf-area,
.mnf-selector {
  width: 100%;
  padding: 11px 14px;
  background: rgba(6, 11, 22, .55);
  border: 1px solid var(--borde-frio);
  border-radius: var(--r-sm);
  color: var(--tinta);
  transition: border-color var(--paso), box-shadow var(--paso), background var(--paso);
}
.mnf-entrada::placeholder, .mnf-area::placeholder { color: var(--tinta-3); }
.mnf-entrada:focus,
.mnf-area:focus,
.mnf-selector:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 160, 23, .13);
  background: rgba(6, 11, 22, .78);
}
.mnf-area { min-height: 96px; resize: vertical; }

.mnf-selector {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%237d8ca6' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 5.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
}

/* Interruptor sí/no. Las columnas booleanas de los catálogos caen acá. */
.mnf-palanca { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; }
.mnf-palanca input { position: absolute; opacity: 0; pointer-events: none; }
.mnf-palanca__via {
  width: 40px; height: 22px;
  background: rgba(6, 11, 22, .8);
  border: 1px solid var(--borde-frio);
  border-radius: 999px;
  position: relative;
  transition: background var(--paso), border-color var(--paso);
  flex-shrink: 0;
}
.mnf-palanca__via::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--tinta-3);
  transition: transform var(--paso), background var(--paso);
}
.mnf-palanca input:checked + .mnf-palanca__via { background: rgba(212, 160, 23, .22); border-color: var(--gold); }
.mnf-palanca input:checked + .mnf-palanca__via::after { transform: translateX(18px); background: var(--gold-light); }

/* Campo con botón pegado, como el "Start Building" de la referencia. */
.mnf-junto {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: var(--vidrio);
  border: 1px solid var(--borde-frio);
  border-radius: 999px;
  max-width: 430px;
}
.mnf-junto .mnf-entrada {
  border: 0; background: transparent; padding-left: 16px;
}
.mnf-junto .mnf-entrada:focus { box-shadow: none; background: transparent; }

/* --- 12 · avisos ---------------------------------------------------------- */
.mnf-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  margin: 14px 0;
  border: 1px solid transparent;
}
.mnf-aviso--ok  { background: var(--ok-bg);  color: var(--ok);  border-color: rgba(52, 211, 153, .28); }
.mnf-aviso--mal { background: var(--err-bg); color: var(--err); border-color: rgba(248, 113, 113, .28); }
.mnf-aviso--ojo { background: rgba(251, 191, 36, .10); color: var(--avisa); border-color: rgba(251, 191, 36, .26); }

/* El mismo aviso, flotando a la vista cuando su lugar quedó fuera de pantalla.
   El fondo de color va sobre uno opaco para que se lea encima de cualquier cosa. */
.mnf-aviso--flota {
  position: fixed; z-index: 9999; left: 50%; bottom: 28px; transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px)); margin: 0; font-weight: 600;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45); cursor: pointer;
  animation: mnf-flota-entra .28s ease-out;
  transition: opacity .5s, transform .5s;
}
.mnf-aviso--flota.mnf-aviso--ok  { background: linear-gradient(var(--ok-bg), var(--ok-bg)), #0b1322; }
.mnf-aviso--flota.mnf-aviso--mal { background: linear-gradient(var(--err-bg), var(--err-bg)), #0b1322; }
.mnf-aviso--flota.mnf-aviso--ojo { background: linear-gradient(rgba(251, 191, 36, .10), rgba(251, 191, 36, .10)), #0b1322; }
.mnf-aviso--sale { opacity: 0; transform: translate(-50%, 10px); }
@keyframes mnf-flota-entra { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

.mnf-marbete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
}
.mnf-marbete--oro { background: rgba(212, 160, 23, .14); color: var(--gold-light); }
.mnf-marbete--ok  { background: var(--ok-bg); color: var(--ok); }
.mnf-marbete--mal { background: var(--err-bg); color: var(--err); }
.mnf-marbete--gris { background: rgba(185, 198, 218, .09); color: var(--tinta-3); }

/* Los cuatro momentos de un correlativo. Se leen en orden por el color: los dos
   del medio son informativos y no compiten ni con el oro —que pide atención—
   ni con el verde, que es el único que dice "cerrado". */
.mnf-marbete--azul    { background: rgba(56, 148, 255, .14); color: #7db4ff; }
.mnf-marbete--violeta { background: rgba(167, 119, 245, .15); color: #c4a6fb; }
/* El cierre del servicio y el cobro (5 oct 2026): aparte del camino del pago. */
.mnf-marbete--cian    { background: rgba(34, 211, 238, .13); color: #67e8f9; }
.mnf-marbete--menta   { background: rgba(45, 212, 191, .16); color: #5eead4; }

/* El borde de una ficha, del color de su estado.
   SOLO el color: la tarjeta ya trae un borde de 1px y ese grosor no se toca. Un
   borde grueso para marcar el estado obliga a reservar ese espacio en todas las
   fichas —o a que la marcada quede un pixel mas grande que sus vecinas—, y en
   una rejilla eso se ve enseguida. */
.mnf-tarjeta.mnf-borde--azul    { border-color: rgba(56, 148, 255, .42); }
.mnf-tarjeta.mnf-borde--violeta { border-color: rgba(167, 119, 245, .42); }
.mnf-tarjeta.mnf-borde--oro     { border-color: rgba(212, 160, 23, .45); }
.mnf-tarjeta.mnf-borde--ok      { border-color: rgba(52, 211, 153, .42); }
.mnf-tarjeta.mnf-borde--mal     { border-color: rgba(248, 113, 113, .42); }
.mnf-tarjeta.mnf-borde--gris    { border-color: var(--borde-frio); }
.mnf-tarjeta.mnf-borde--cian    { border-color: rgba(34, 211, 238, .42); }
.mnf-tarjeta.mnf-borde--menta   { border-color: rgba(45, 212, 191, .42); }

/* --- 13 · tablas ---------------------------------------------------------- */
.mnf-tabla-caja {
  overflow-x: auto;
  border: 1px solid var(--borde-frio);
  border-radius: var(--r);
  background: var(--vidrio);
}
/* El min-width es lo que hace util al overflow-x de la caja: sin el, las
   columnas se aplastan hasta partir los nombres en dos lineas y la tabla
   "entra" en cualquier ancho siendo ilegible. Con el, se desliza. */
.mnf-tabla { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13.5px; }
.mnf-tabla th {
  text-align: left;
  padding: 13px 16px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-3);
  border-bottom: 1px solid var(--borde-frio);
  white-space: nowrap;
}
.mnf-tabla td {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(185, 198, 218, .05);
  color: var(--tinta-2);
}
/* La primera columna no se parte. Es la que identifica la fila —el nombre de
   la persona, del cliente, de la serie— y verla cortada en dos renglones
   cuesta mas que deslizar la tabla. El resto SI puede envolver: una
   descripcion larga en una sola linea volveria la tabla inmanejable.

   Solo la primera: un "nowrap" general convertiria cualquier catalogo con
   texto largo en una tabla de dos metros de ancho. */
.mnf-tabla td:first-child, .mnf-tabla th:first-child { white-space: nowrap; }

/* Salvo cuando esa primera columna es un id ya resuelto contra su tabla. Ahi
   no hay un codigo corto sino el nombre entero del registro al que apunta, y
   forzarlo a una linea le come el ancho a todas las demas columnas. */
.mnf-tabla td.mnf-ref:first-child {
  white-space: normal;
  min-width: 150px;
  /* El tope es lo que de verdad arregla el reparto: sin el, el navegador le
     da a esta columna el ancho que pida su texto mas largo y deja "Numero de
     DUCA" partido al lado. Medido: con 240 el nombre entra en una linea. */
  max-width: 240px;
}

/* La columna de acciones (Editar) queda pegada a la derecha. Cuando la tabla
   es más ancha que su caja y se desliza, el botón era lo primero que se salía
   de la vista: se veía cortado y había que deslizar para poder editar. */
.mnf-tabla .mnf-acc {
  position: sticky; right: 0; z-index: 1;
  background: var(--navy-900);
  box-shadow: -10px 0 12px -10px rgba(0, 0, 0, .6);
  text-align: right; white-space: nowrap; width: 1%;
}

.mnf-tabla tbody tr { transition: background var(--paso); }
.mnf-tabla tbody tr:hover { background: rgba(212, 160, 23, .04); }
.mnf-tabla tbody tr:last-child td { border-bottom: 0; }

/* --- 14 · vacío y carga --------------------------------------------------- */
.mnf-vacio { text-align: center; padding: 56px 24px; color: var(--tinta-3); }
.mnf-vacio .mnf-icono { width: 34px; height: 34px; color: var(--tinta-3); margin: 0 auto 14px; opacity: .55; }

/* Barras grises que laten mientras llegan los datos. Es más honesto que un
   spinner: dice cuánto va a llegar y dónde. */
.mnf-hueso {
  background: linear-gradient(90deg,
    rgba(185, 198, 218, .05) 25%,
    rgba(185, 198, 218, .11) 50%,
    rgba(185, 198, 218, .05) 75%);
  background-size: 200% 100%;
  animation: mnf-hueso 1.4s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes mnf-hueso { to { background-position: -200% 0; } }

/* --- 15 · pie ------------------------------------------------------------- */
.mnf-pie {
  border-top: 1px solid var(--borde-frio);
  padding: 56px 0 30px;
  margin-top: 80px;
  background: linear-gradient(180deg, transparent, rgba(10, 22, 40, .6));
}
.mnf-pie__fila { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.mnf-pie h4 {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 16px;
  font-family: var(--texto);
  font-weight: 600;
}
.mnf-pie ul { list-style: none; margin: 0; padding: 0; }
.mnf-pie li { margin-bottom: 10px; }
.mnf-pie li a { font-size: 13.5px; color: var(--tinta-2); transition: color var(--paso); }
.mnf-pie li a:hover { color: var(--gold-light); }
.mnf-pie__base {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--borde-frio);
  font-size: 12.5px;
  color: var(--tinta-3);
}

/* --- 16 · utilidades ------------------------------------------------------ */
.mnf-oculto { display: none !important; }
.mnf-solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mnf-pila { display: flex; flex-direction: column; gap: 14px; }
.mnf-fila { display: flex; align-items: center; gap: 12px; }
.mnf-fila--fin { justify-content: flex-end; }
.mnf-fila--entre { justify-content: space-between; }
.mnf-crecer { flex: 1; }

/* GSAP quita esto al animar. Si GSAP no carga —CDN caído, red bloqueada— el
   contenido tiene que verse igual, así que la regla vive bajo una clase que
   pone el propio script y no en el HTML. */
.mnf-anima .mnf-entra { opacity: 0; }

/* Quien pidió menos movimiento no debería recibir ninguno. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .mnf-anima .mnf-entra { opacity: 1 !important; transform: none !important; }
}

/* --- 17 · pantallas angostas ---------------------------------------------- */
@media (max-width: 980px) {
  .mnf-rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .mnf-rejilla--3 { grid-template-columns: repeat(2, 1fr); }
  .mnf-cifras { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
  .mnf-cifra:nth-child(3) { border-left: 0; padding-left: 0; }
  .mnf-pie__fila { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* El cajon toma el relevo a 1320, no a 980 ni a 1100.
   Por debajo de ese ancho la barra ya no entra —siete opciones, la marca y el
   bloque de quien-sos— y "Salir" se sale de la pantalla. Mas vale pasar al
   cajon un poco antes que dejar la barra rota en una franja entera.

   El umbral se movio tres veces, siempre porque el menu cambio de tamaño: de
   980 a 1100, de 1100 a 1320 al pasar "DTE" a "Operaciones MNF", y de vuelta a
   1260 al juntar "Correlativos" y "Pagos" en "Referencia MNF", que dejo la
   barra con cinco opciones en vez de siete.

   Medido en el navegador, no deducido: con los iconos ya escondidos la barra
   termina en 1241px. Cada vez que se agregue o se quite una opcion hay que
   volver a medir. */
@media (max-width: 1260px) {
  .mnf-nav { display: none; }
}

@media (max-width: 640px) {
  .mnf-seccion { padding: 60px 0; }
  .mnf-ancho { padding: 0 18px; }
  .mnf-rejilla--2, .mnf-rejilla--3, .mnf-rejilla--4 { grid-template-columns: 1fr; }
  .mnf-cifras { grid-template-columns: 1fr; }
  .mnf-cifra { border-left: 0; padding-left: 0; }
  .mnf-pie__fila { grid-template-columns: 1fr; }
  .mnf-marca__nota { display: none; }
}

/* --- 18 · proceso en marcha ------------------------------------------------
 *
 * La capa que se ve mientras sube un PDF o corre un flujo. Muestra PASOS, no un
 * porcentaje inventado: la barra solo se mueve sola cuando hay algo real que
 * medir (la subida del archivo). En "el flujo está procesando" no hay
 * porcentaje que medir, y una barra avanzando sola miente.
 */
.mnf-proceso {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 11, 22, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mnf-proceso__panel {
  width: 100%;
  max-width: 380px;
  padding: 32px 30px 26px;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-alta);
  text-align: center;
}

/* El orbe. El tamaño real lo fija el canvas desde JS (necesita saber los
   píxeles para pintar nítido en pantallas densas); acá solo se centra. */
.mnf-proceso__aro {
  height: 56px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mnf-orbe { display: block; }

.mnf-proceso__titulo {
  font-size: 16px;
  margin-bottom: 20px;
  transition: color var(--paso);
}

.mnf-proceso__pasos {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  text-align: left;
}
.mnf-proceso__paso {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--tinta-3);
  transition: color var(--paso);
}
.mnf-proceso__marca {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--borde-frio);
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--paso), background var(--paso);
}

/* El paso en curso late; los cumplidos se marcan con un cheque dibujado en
   CSS para no cargar un icono por cada fila. */
.mnf-proceso__paso.yendo { color: var(--tinta); }
.mnf-proceso__paso.yendo .mnf-proceso__marca {
  border-color: var(--gold);
  animation: mnf-latir 1.2s ease-in-out infinite;
}
@keyframes mnf-latir {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, .5); }
  50%      { box-shadow: 0 0 0 5px rgba(212, 160, 23, 0); }
}

.mnf-proceso__paso.listo { color: var(--tinta-2); }
.mnf-proceso__paso.listo .mnf-proceso__marca { border-color: var(--ok); background: var(--ok); }
.mnf-proceso__paso.listo .mnf-proceso__marca::after {
  content: '';
  position: absolute;
  left: 4.5px; top: 1.5px;
  width: 4px; height: 8px;
  border: solid var(--navy-950);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}

.mnf-proceso__barra {
  height: 3px;
  background: rgba(185, 198, 218, .09);
  border-radius: 999px;
  overflow: hidden;
}
.mnf-proceso__barra i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
}

/* El color del orbe al terminar lo cambia el JS (`orbe.tono`), no el CSS: lo
   que se pinta en canvas no se alcanza con un selector. */
.mnf-proceso__panel.bueno .mnf-proceso__titulo { color: var(--ok); }
.mnf-proceso__panel.malo  .mnf-proceso__titulo { color: var(--err); }

/* --- 19 · el menú en el teléfono -------------------------------------------
 *
 * La versión anterior escondía el nav con `display:none` bajo 980px y no ponía
 * nada en su lugar: en un teléfono no había forma de ir de una pantalla a otra,
 * y como la barra además se desbordaba, el nombre y el botón "Salir" quedaban
 * fuera de la pantalla. O sea que tampoco se podía cerrar sesión.
 *
 * Acá el botón de hamburguesa abre un cajón con lo mismo que hay arriba en el
 * escritorio: quién sos, las pantallas que podés abrir, y salir.
 */
.mnf-hamburguesa {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--borde-frio);
  border-radius: var(--r-sm);
  background: var(--vidrio);
  color: var(--tinta);
  cursor: pointer;
  transition: border-color var(--paso), background var(--paso);
}
.mnf-hamburguesa:hover { border-color: var(--borde-fuerte); }

.mnf-cajon {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6, 11, 22, .72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mnf-cajon__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(300px, 86vw);
  display: flex;
  flex-direction: column;
  background: linear-gradient(200deg, var(--navy-800), var(--navy-950));
  border-left: 1px solid var(--borde);
  box-shadow: var(--sombra-alta);
  /* En iPhone la barra de gestos se come el último renglón. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mnf-cajon__cab {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--borde-frio);
}
.mnf-cajon__quien { flex: 1; min-width: 0; }
.mnf-cajon__nombre {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
  word-break: break-word;
}
.mnf-cajon__links { flex: 1; padding: 10px; overflow-y: auto; }
.mnf-cajon__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 46px de alto: un objetivo de toque por debajo de eso se falla seguido. */
  min-height: 46px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 15px;
  color: var(--tinta-2);
}
.mnf-cajon__links a:active { background: rgba(185, 198, 218, .07); }
.mnf-cajon__links a.activo {
  color: var(--gold-light);
  font-weight: 600;
  background: linear-gradient(135deg, rgba(212,160,23,.16), rgba(212,160,23,.05));
  box-shadow: inset 2px 0 0 var(--gold);
}
.mnf-cajon__pie { padding: 14px 20px 20px; border-top: 1px solid var(--borde-frio); }

@media (max-width: 1100px) {
  .mnf-hamburguesa { display: inline-flex; }
  /* El nombre y "Salir" se mudan al cajón: en la barra no entran y empujaban
     el contenido fuera de la pantalla. */
  .mnf-barra__fin { display: none; }
  .mnf-barra__fila { gap: 12px; }
  .mnf-marca { min-width: 0; }
  .mnf-marca__nombre { font-size: 13.5px; }
}

/* Nada debe poder ensanchar la página: con la barra desbordada, todo el
   contenido se corría a la derecha y quedaba cortado. */
@media (max-width: 640px) {
  .mnf-marca__logo { height: 32px; }
  .mnf-marca__nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* --- 20 · adjuntar archivos ------------------------------------------------
 *
 * Estaba escrito dentro de dte.html, y requisicion.html usaba las MISMAS clases
 * sin tenerlas definidas: el botón salía como una caja gris sin identidad, y
 * nadie lo nota al escribirlo porque el HTML se ve idéntico. Copiar una clase
 * por nombre no copia sus estilos.
 *
 * Vive acá una sola vez. El prefijo deja de ser `dte-` porque ya no es de esa
 * pantalla: lo usan la de DTE y la de requisición, y mañana cualquier otra.
 */
.mnf-subir {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; width: 100%; padding: 18px 12px;
  border: 1px solid var(--borde); border-radius: var(--r);
  background: linear-gradient(160deg, rgba(212, 160, 23, .10), rgba(212, 160, 23, .03));
  color: var(--gold-light);
  cursor: pointer;
  transition: border-color var(--paso), background var(--paso), transform var(--paso);
}
.mnf-subir:hover {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(212, 160, 23, .18), rgba(212, 160, 23, .06));
  transform: translateY(-1px);
}
/* Mientras se arrastra un archivo encima. Sin esto no hay forma de saber que
   soltar ahí va a funcionar. */
.mnf-subir.encima {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(212, 160, 23, .26), rgba(212, 160, 23, .10));
}
.mnf-subir__aro {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--gold); color: var(--gold-light);
  transition: transform var(--paso);
}
.mnf-subir:hover .mnf-subir__aro { transform: translateY(-2px); }
.mnf-subir__t { font-size: 13px; font-weight: 600; }
.mnf-subir__s { font-size: 11.5px; color: var(--tinta-3); }

/* --- la lista de lo adjuntado --- */
.mnf-adjunto {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; margin-bottom: 6px;
  background: rgba(6, 11, 22, .55);
  border: 1px solid var(--borde-frio);
  border-radius: var(--r-sm);
  font-size: 12px;
  transition: border-color var(--paso);
}
.mnf-adjunto__nombre {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--tinta-2);
}
.mnf-adjunto__peso { color: var(--tinta-3); font-size: 11px; white-space: nowrap; }
.mnf-adjunto__barra {
  width: 54px; height: 3px; background: rgba(185, 198, 218, .14);
  border-radius: 999px; overflow: hidden;
}
.mnf-adjunto__barra i {
  display: block; height: 100%; width: 0;
  background: var(--gold); border-radius: 999px;
  transition: width .25s ease-out;
}
.mnf-adjunto.subiendo { border-color: rgba(212, 160, 23, .34); }
.mnf-adjunto.listo { border-color: rgba(52, 211, 153, .32); }
.mnf-adjunto.listo .mnf-adjunto__barra { display: none; }
.mnf-adjunto.malo { border-color: rgba(248, 113, 113, .38); }
.mnf-adjunto.malo .mnf-adjunto__barra { display: none; }

/* La palomita al terminar. Se dibuja con un trazo que se "escribe": es el
   momento en que la persona sabe que el archivo llegó, y merece verse. */
.mnf-adjunto__marca { width: 15px; height: 15px; flex: none; color: var(--ok); }
.mnf-adjunto__marca path {
  stroke: currentColor; stroke-width: 2.4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22;
  animation: mnf-palomita .34s ease-out forwards;
}
@keyframes mnf-palomita { to { stroke-dashoffset: 0; } }

/* Quien pidió no ver movimiento no lo ve: la palomita aparece ya dibujada. */
@media (prefers-reduced-motion: reduce) {
  .mnf-adjunto__marca path { animation: none; stroke-dashoffset: 0; }
  .mnf-adjunto__barra i { transition: none; }
  .mnf-subir, .mnf-subir:hover { transform: none; }
}

/* --- 21 · el menú con grupos -----------------------------------------------
 *
 * Requisición, Consulta y Por pagar son un solo asunto —el circuito de pago—
 * y sueltos en la barra la estiraban hasta empujar "Salir" fuera de la
 * pantalla. Agrupados, la barra vuelve a caber y el menú dice de qué se trata
 * cada cosa antes de entrar.
 */
.mnf-grupo { position: relative; display: flex; }

.mnf-grupo__b {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px 7px 13px;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--tinta-2);
  font-size: 13.5px; font-family: var(--texto);
  cursor: pointer; white-space: nowrap;
  transition: color var(--paso), background var(--paso);
}
.mnf-grupo__b:hover { color: var(--tinta); background: rgba(185, 198, 218, .06); }
.mnf-grupo__b.activo {
  color: var(--navy-950);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  font-weight: 600;
}

.mnf-grupo__v {
  width: 14px; height: 14px;
  stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--paso);
}
.mnf-grupo.abierto .mnf-grupo__v { transform: rotate(180deg); }

.mnf-grupo__caja {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 60;
  min-width: 272px;
  padding: 7px;
  border: 1px solid var(--borde);
  border-radius: var(--r);
  background: rgba(10, 22, 40, .985);
  box-shadow: var(--sombra-alta);

  /* Cerrado no ocupa lugar ni recibe clics, pero sigue en el árbol para poder
     animarse. `visibility` es lo que evita que un menú invisible se coma los
     clics de lo que tiene debajo. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--paso), transform var(--paso), visibility var(--paso);
}
/* El abierto va al frente. Los cerrados que vienen después en el menú
   (Facturación, Catálogos) tienen el mismo z-index y, aun invisibles,
   oscurecían el submenú de DTE y la etiqueta de Salir. */
.mnf-grupo.abierto .mnf-grupo__caja { z-index: 62; }
.mnf-grupo.abierto .mnf-grupo__caja {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* La punta que lo ancla al botón. */
.mnf-grupo__caja::before {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  width: 9px; height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(10, 22, 40, .97);
  border-left: 1px solid var(--borde);
  border-top: 1px solid var(--borde);
}

.mnf-grupo__caja a {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  color: var(--tinta-2);
  transition: background var(--paso), color var(--paso);
}
.mnf-grupo__caja a:hover { background: rgba(185, 198, 218, .07); color: var(--tinta); }
.mnf-grupo__caja a .mnf-icono { margin-top: 1px; color: var(--gold); }
.mnf-grupo__caja a.activo { background: rgba(212, 160, 23, .12); color: var(--gold-light); }
.mnf-grupo__caja a.activo .mnf-icono { color: var(--gold-light); }
/* La raya antes de una entrada que es otro proceso (`separar` en el menú). */
.mnf-grupo__sep, .mnf-cajon__sep { height: 1px; background: var(--borde-fuerte); margin: 6px 10px; }

.mnf-grupo__t { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.3; }

/* Submenú dentro de un desplegable (DTE en Operaciones MNF): se abre al
   costado con el puntero, o con un toque en pantallas sin puntero. */
.mnf-sub { position: relative; }
.mnf-sub__b {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--tinta-2); font: inherit; text-align: left; cursor: pointer;
  transition: background var(--paso), color var(--paso);
}
.mnf-sub__b .mnf-icono { margin-top: 1px; color: var(--gold); }
.mnf-sub__b .mnf-sub__v { margin: 0 0 0 auto; align-self: center; width: 15px; height: 15px; color: var(--tinta-3);
  transition: transform var(--paso), color var(--paso); }
.mnf-sub:hover .mnf-sub__b, .mnf-sub.abierto .mnf-sub__b { background: rgba(185, 198, 218, .07); color: var(--tinta); }
.mnf-sub:hover .mnf-sub__v, .mnf-sub.abierto .mnf-sub__v { color: var(--gold-light); transform: translateX(2px); }
.mnf-sub__b.activo { background: rgba(212, 160, 23, .12); color: var(--gold-light); }
.mnf-sub__caja {
  position: absolute; top: -8px; left: calc(100% + 8px); z-index: 61;
  min-width: 260px; padding: 7px;
  border: 1px solid var(--borde); border-radius: var(--r);
  /* Fondo sólido y sin desenfoque: un backdrop-filter dentro de otro (el del
     desplegable) Chrome lo dibuja casi transparente y el submenú se veía apagado. */
  background: var(--navy-900);
  box-shadow: var(--sombra-alta);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-6px);
  transition: opacity var(--paso), transform var(--paso), visibility var(--paso);
}
/* Un puente invisible sobre el hueco: sin él, al cruzar del botón al
   submenú el puntero sale de los dos y el submenú se cierra. */
.mnf-sub__caja::before { content: ''; position: absolute; top: 0; bottom: 0; left: -10px; width: 10px; }
/* Solo dentro de un desplegable abierto: `visibility: visible` en un hijo le gana al
   `hidden` del padre, y el submenu quedaria flotando con el menu cerrado. */
.mnf-grupo.abierto .mnf-sub:hover .mnf-sub__caja, .mnf-grupo.abierto .mnf-sub.abierto .mnf-sub__caja {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0);
  left: calc(100% + 8px);
}
/* Cerrado, el submenú queda DENTRO del desplegable (18 oct 2026): aunque no se
   vea, una caja oculta a la derecha del menú estiraba el ancho de la página y
   aparecía una barra de desplazamiento horizontal en pantallas de ~1300 px. */
.mnf-grupo:not(.abierto) .mnf-sub__caja, .mnf-sub:not(:hover):not(.abierto) .mnf-sub__caja { left: 0; }
.mnf-cajon__sub {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 2px 18px;
  font-size: 12px; font-weight: 600; color: var(--tinta-2);
}
.mnf-cajon__sub .mnf-icono { color: var(--gold); }
.mnf-cajon__links a.mnf-cajon__hijo--hondo { padding-left: 38px; }

/* Salir: un ícono redondo; "Salir" aparece al pasar el puntero. */
.mnf-salir {
  position: relative; z-index: 63; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(212, 160, 23, .35); background: rgba(212, 160, 23, .06); color: var(--gold-light);
  transition: background var(--paso), border-color var(--paso), color var(--paso), transform var(--paso);
}
.mnf-salir:hover, .mnf-salir:focus-visible {
  background: linear-gradient(135deg, var(--gold), var(--gold-light)); border-color: var(--gold);
  color: var(--navy-950); transform: translateY(-1px); outline: none;
}
.mnf-salir::after {
  content: attr(data-tip);
  /* Alineada a la derecha del botón: está pegado al borde de la pantalla. */
  position: absolute; top: calc(100% + 9px); right: 0; transform: translateY(-4px);
  padding: 5px 10px; border-radius: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  background: rgba(10, 22, 40, .97); color: var(--gold-light); border: 1px solid var(--borde);
  box-shadow: var(--sombra-alta);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--paso), transform var(--paso), visibility var(--paso);
}
.mnf-salir:hover::after, .mnf-salir:focus-visible::after { opacity: 1; visibility: visible; transform: translateY(0); }

/* Bajo 1500 px el nombre no entra junto al menú y empujaba Salir fuera de la
   pantalla. Queda la marca del perfil; el nombre sigue en el cajón del teléfono. */
@media (max-width: 1500px) { .mnf-quien__n { display: none; } }
.mnf-grupo__n {
  display: block; margin-top: 2px;
  font-size: 11.5px; color: var(--tinta-3); line-height: 1.35;
}

/* --- y en el cajón del teléfono --- */
.mnf-cajon__rotulo {
  margin: 14px 0 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--tinta-3);
}
/* Los enlaces del cajon separan sus extremos ('justify-content: space-between')
   para empujar la palomita al borde. Un hijo tiene icono Y texto al principio,
   asi que sin esto el texto se iba solo a la derecha y el icono quedaba
   huerfano del otro lado. El margen automatico manda la palomita al final sin
   romper el resto.

   Va con `.mnf-cajon__links a` adelante a proposito: sin eso la regla del
   contenedor gana por especificidad y el arreglo no se aplica. */
.mnf-cajon__links a.mnf-cajon__hijo {
  display: flex; align-items: center; gap: 10px;
  justify-content: flex-start;
  padding-left: 18px;
}
/* La palomita al borde, por su clase y no por ser el ultimo hijo: el texto es
   un nodo suelto, asi que sin marca el ULTIMO elemento era el icono de la
   izquierda, y el margen automatico lo empujaba a el —y al texto detras— hacia
   la derecha. */
.mnf-cajon__links a .mnf-cajon__marca { margin-left: auto; }
.mnf-cajon__links a.mnf-cajon__hijo .mnf-icono { color: var(--gold); }
.mnf-cajon__links a.mnf-cajon__hijo.activo .mnf-icono { color: var(--gold-light); }

/* --- 22 · el campo de fecha, en español ------------------------------------
 *
 * `<input type="date">` se dibuja en el idioma del NAVEGADOR, no en el de la
 * página. En un Chrome en inglés "09/01/2026" puede ser el 9 de enero o el 1
 * de septiembre, y en una pantalla de pagos esa duda no es cosmética. Este
 * campo es de texto y el calendario lo dibuja mnf.js: siempre DD-MM-AAAA y
 * siempre en español.
 */
.mnf-fecha { position: relative; display: block; }
.mnf-fecha .mnf-entrada { padding-right: 42px; }

.mnf-fecha__b {
  position: absolute; top: 50%; right: 8px;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--gold);
  cursor: pointer;
  transition: color var(--paso), background var(--paso);
}
.mnf-fecha__b:hover { color: var(--gold-light); background: rgba(212, 160, 23, .12); }
.mnf-fecha__b .mnf-icono { width: 17px; height: 17px; }

.mnf-fecha__panel {
  position: absolute;
  top: calc(100% + 8px); left: 0;
  z-index: 70;
  width: 268px;
  /* Cerrado sigue ocupando lugar —está oculto con `visibility`, no quitado—,
     así que en una pantalla angosta empujaba el ancho de la página y aparecía
     una barra horizontal en un formulario que se veía bien. Con el tope, el
     panel nunca es más ancho que la pantalla. */
  max-width: calc(100vw - 32px);
  padding: 12px;
  border: 1px solid var(--borde);
  border-radius: var(--r);
  background: rgba(10, 22, 40, .98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--sombra-alta);

  /* `visibility` y no solo opacidad: un panel invisible que igual recibe
     clics se come los de lo que tiene debajo. */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--paso), transform var(--paso), visibility var(--paso);
}
.mnf-fecha.abierto .mnf-fecha__panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
/* Cada tarjeta lleva desenfoque de fondo, y eso la vuelve su propia capa: el
   z-index del panel solo vale ADENTRO de su tarjeta, y la tarjeta que sigue
   —más abajo en la página— se pintaba encima del calendario. Mientras hay uno
   abierto, su tarjeta sube por encima de las demás. */
.mnf-tarjeta:has(.mnf-fecha.abierto) { z-index: 60; }
/* En el teléfono se cuelga del borde DERECHO del campo y crece hacia la
   izquierda: anclado a la izquierda, un campo que empieza a mitad de pantalla
   deja medio calendario afuera. */
@media (max-width: 560px) {
  .mnf-fecha__panel { left: auto; right: 0; }
}

.mnf-fecha__cab {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.mnf-fecha__mes {
  font-family: var(--display); font-size: 13.5px; font-weight: 600;
  color: var(--tinta); text-transform: capitalize;
}
.mnf-fecha__nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid var(--borde-frio); border-radius: var(--r-sm);
  background: transparent; color: var(--tinta-2); cursor: pointer;
  transition: border-color var(--paso), color var(--paso);
}
.mnf-fecha__nav:hover { border-color: var(--gold); color: var(--gold-light); }
.mnf-fecha__nav .mnf-icono { width: 14px; height: 14px; }

.mnf-fecha__dias, .mnf-fecha__rejilla {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.mnf-fecha__dias span {
  text-align: center; font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; color: var(--tinta-3);
  padding-bottom: 5px;
}

.mnf-fecha__d {
  /* 32px de alto: por debajo de eso el dedo falla seguido en un teléfono. */
  height: 32px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--tinta-2);
  font-size: 12.5px; cursor: pointer;
  transition: background var(--paso), color var(--paso), border-color var(--paso);
}
.mnf-fecha__d:hover { background: rgba(185, 198, 218, .08); color: var(--tinta); }
/* Hoy se marca con el borde; el día elegido, con el relleno. Dos señales
   distintas para dos cosas distintas: si usaran la misma, el día de hoy
   parecería seleccionado sin estarlo. */
.mnf-fecha__d.hoy { border-color: var(--borde-fuerte); color: var(--gold-light); }
.mnf-fecha__d.puesto {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-color: transparent; color: var(--navy-950); font-weight: 600;
}

.mnf-fecha__pie {
  display: flex; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--borde-frio);
}
.mnf-fecha__hoy, .mnf-fecha__limpiar {
  flex: 1; padding: 6px 0;
  border: 1px solid var(--borde-frio); border-radius: var(--r-sm);
  background: transparent; color: var(--tinta-2);
  font-size: 12px; cursor: pointer;
  transition: border-color var(--paso), color var(--paso);
}
.mnf-fecha__hoy:hover { border-color: var(--gold); color: var(--gold-light); }
.mnf-fecha__limpiar:hover { border-color: rgba(248, 113, 113, .5); color: var(--err); }

/* --- Avance: los pasos de un proceso largo, dentro de la pantalla ---------
 *
 * Tres tarjetas a la vista —la cumplida arriba, la que va en el medio, la
 * que sigue abajo— y el resto se esconde por arriba y por abajo con un
 * degradé. El alto de tarjeta más su separación (76 + 10) es AVANCE_ALTO en
 * mnf.js: si cambia uno, cambia el otro.
 */
.mnf-avance { width: 100%; text-align: left; }
.mnf-avance__ventana {
  height: 248px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 74%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 74%, transparent 100%);
}
.mnf-avance__lista {
  list-style: none; margin: 0; padding: 0;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
.mnf-avance__paso {
  box-sizing: border-box;
  height: 76px; margin: 0 0 10px;
  padding: 11px 16px 9px;
  border: 1px solid var(--borde-frio);
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--navy-800), var(--navy-950));
  transform: scale(.92);
  opacity: .5;
  transition: transform .45s ease, opacity .45s ease, border-color .45s ease;
}
.mnf-avance__paso.actual {
  transform: none; opacity: 1;
  border-color: var(--borde-fuerte);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.mnf-avance__cab { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--tinta); }
.mnf-avance__ico { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.mnf-avance__ico svg { width: 18px; height: 18px; }
.mnf-avance__paso.espera .mnf-avance__ico { color: var(--tinta-3); }
.mnf-avance__paso.yendo .mnf-avance__ico { color: var(--gold-light); }
.mnf-avance__paso.yendo .mnf-avance__ico svg { animation: mnf-avance-girar 1.1s linear infinite; }
.mnf-avance__paso.listo .mnf-avance__ico circle { fill: var(--ok); stroke: none; }
.mnf-avance__paso.listo .mnf-avance__ico path { fill: none; stroke: var(--navy-950); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mnf-avance__paso.mal .mnf-avance__ico circle { fill: var(--err); stroke: none; }
.mnf-avance__paso.mal .mnf-avance__ico path { fill: none; stroke: var(--navy-950); stroke-width: 2.2; stroke-linecap: round; }

.mnf-avance__barra {
  position: relative; height: 6px; margin: 9px 0 0 27px;
  border-radius: 999px; overflow: hidden;
  background: rgba(185, 198, 218, .14);
}
.mnf-avance__barra i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--ok); }
/* En curso, un tramo verde que va y viene: se mueve sin fingir un porcentaje. */
.mnf-avance__paso.yendo .mnf-avance__barra i { width: 38%; animation: mnf-avance-barrido 1.6s ease-in-out infinite; }
.mnf-avance__paso.listo .mnf-avance__barra i { width: 100%; }
.mnf-avance__paso.mal .mnf-avance__barra i { width: 100%; background: var(--err); }
.mnf-avance__nota { margin: 6px 0 0 27px; font-size: 11.5px; color: var(--tinta-3); min-height: 14px; }
.mnf-avance__paso.mal .mnf-avance__nota { color: var(--err); }
.mnf-avance__paso.listo.actual .mnf-avance__nota { color: var(--ok); }

@keyframes mnf-avance-girar { to { transform: rotate(360deg); } }
@keyframes mnf-avance-barrido {
  0%   { transform: translateX(-105%); }
  100% { transform: translateX(270%); }
}
@media (prefers-reduced-motion: reduce) {
  .mnf-avance__lista, .mnf-avance__paso { transition: none; }
  .mnf-avance__paso.yendo .mnf-avance__ico svg { animation: none; }
  .mnf-avance__paso.yendo .mnf-avance__barra i { animation: none; width: 55%; }
}


/* --- Buscador sobre un <select> (MNF.ui.buscador) ------------------------ */
.mnf-busca { position: relative; display: block; }
.mnf-busca__sel { display: none !important; }
.mnf-busca .mnf-busca__in { padding-left: 40px; padding-right: 42px; text-overflow: ellipsis; }
.mnf-busca.con-valor .mnf-busca__in { padding-right: 76px; }
/* Abierta, la lista va por encima de lo que sigue en la pantalla. La tarjeta
   que la contiene arma su propio apilado (backdrop-filter): sin subirla, la
   tarjeta de abajo tapaba la lista. */
.mnf-busca.abierto { z-index: 80; }
.mnf-tarjeta:has(.mnf-busca.abierto), .mnf-campo:has(.mnf-busca.abierto) { position: relative; z-index: 80; }
.mnf-busca__limpiar {
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  display: none; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--tinta-3); cursor: pointer;
  transition: background var(--paso), color var(--paso);
}
.mnf-busca.con-valor .mnf-busca__limpiar { display: inline-flex; }
.mnf-busca__limpiar:hover, .mnf-busca__limpiar:focus-visible { background: rgba(248, 113, 113, .14); color: var(--err); outline: none; }
.mnf-busca__limpiar .mnf-icono { width: 16px; height: 16px; }
.mnf-busca__flecha {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r-sm); color: var(--gold); cursor: pointer;
  transition: background var(--paso), color var(--paso);
}
.mnf-busca__flecha:hover { background: rgba(212, 160, 23, .12); color: var(--gold-light); }
.mnf-busca__flecha .mnf-icono { width: 18px; height: 18px; transition: transform var(--paso); }
.mnf-busca.abierto .mnf-busca__flecha .mnf-icono { transform: rotate(180deg); }
.mnf-busca__lupa {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--gold); cursor: text;
}
.mnf-busca__lupa .mnf-icono { width: 17px; height: 17px; }
.mnf-busca__lista {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70;
  max-height: 320px; overflow-y: auto; padding: 6px;
  border: 1px solid var(--borde); border-radius: var(--r);
  background: var(--navy-900); box-shadow: var(--sombra-alta);
  display: none;
}
.mnf-busca.abierto .mnf-busca__lista { display: block; }
.mnf-busca__op {
  padding: 8px 11px; border-radius: var(--r-sm); cursor: pointer;
  font-size: 13.5px; color: var(--tinta-2); line-height: 1.35;
}
.mnf-busca__op.marcada { background: rgba(185, 198, 218, .08); color: var(--tinta); }
.mnf-busca__op.elegida { color: var(--gold-light); font-weight: 600; }
.mnf-busca__mas { padding: 8px 11px; font-size: 12px; color: var(--tinta-3); }