/* diseno-marco.css — LA CÁSCARA. Usa los tokens y la escala de diseno.css.
   El marco: barra de arriba (migas, campana, tema, avatar), el menú azul con
   su título y la empresa activa, el estado al pie del menú, el buscador
   Ctrl K, la barra de abajo del teléfono y el pie.
   V3 (6/10/2026): el menú, el cajón del teléfono y el pie se rehicieron con
   los pedidos de Mario del 3 al 6/10; están al final, bajo «VERSIÓN 3». */

/* ------------------------------------------------------------- barra -- */
.barra { gap: 12px; padding: 0 16px; }

/* SIN FRANJA BLANCA (Mario, 18/9/2026). La columna del contenido lleva la
   barra y el main; el menú azul, a su izquierda, llega hasta arriba. En
   escritorio la barra es del color del fondo y sin raya: es la primera fila
   del contenido, no un marco aparte. */
.columna-app { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* EL CARTELITO DE LA DEMOSTRACIÓN (Mario, 20/9/2026). Discreto —una pastilla
   ámbar en la barra— para que no arruine una captura, pero a la vista para que
   nadie confunda la demo con una cuenta de verdad. Sin `body.es-demo` no
   existe. */
.cinta-demo { display: none; }
body.es-demo .cinta-demo {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 3px 10px;
  border: 1px solid var(--ambar);
  border-radius: 999px;
  background: var(--ambar-suave);
  color: var(--ambar);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* EN TELÉFONO, «DEMO» A SECAS. La pastilla entera son unos 120 px y ahí
   comparte barra con el nombre de la empresa, la campana, el tema y el
   avatar: apretaría lo que importa. El texto largo vive en el HTML y se
   esconde; el corto lo pone el `::after`. */
@media (max-width: 700px) {
  body.es-demo .cinta-demo { font-size: 0; padding: 3px 7px; }
  body.es-demo .cinta-demo::after { content: 'DEMO'; font-size: 10.5px; }
}
/* EL MODO DE PRÁCTICA (Mario, 2/10/2026): bien visible, porque quien la ve es
   el dueño probando su cuenta y tiene que saber que nada de esto es de verdad.
   Ámbar lleno, centrada en su renglón, y en teléfono «PRÁCTICA» a secas. */
.cinta-practica { display: none; }
body.es-practica .cinta-practica {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--ambar);
  /* El suave sobre el fuerte: se lee en claro y en oscuro. */
  color: var(--ambar-suave);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: center;
  white-space: nowrap;
}
/* EN TELÉFONO, EN SU PROPIO RENGLÓN (capturas en Edge, 2/10/2026): en la barra
   apretaba el selector de empresa hasta «E…». Va centrada justo debajo de la
   barra —que es `position: relative`—, con el texto entero, y el contenido baja
   lo que ella ocupa para que no tape nada. */
@media (max-width: 700px) {
  body.es-practica .cinta-practica {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    padding: 2px 12px;
    font-size: 11px;
  }
  body.es-practica main { padding-top: 40px; }
}
@media (min-width: 701px) {
  header.barra { background: transparent; border-bottom: 0; box-shadow: none; height: 60px; padding: 0 16px; }
  /* La marca, a la altura de la barra. Va a la IZQUIERDA desde la v3 (Mario,
     4–6/10/2026: «me gusta el titulo de facturador de la segunda»). */
  .lateral .marca { min-height: 60px; padding-block: 0; box-sizing: border-box; }
}

/* LA CINTA EN CHIQUITO, A LA ALTURA DE «BUENOS DÍAS» (Mario, 18/9/2026). Dos
   cajitas a la derecha de la cabecera del Inicio: arriba el rótulo y la cifra
   en un renglón, abajo el vencimiento. */
.tablero .dn-cabecera { align-items: center; }
/* Centrada en el campo que queda entre el saludo y el borde derecho (Mario,
   18/9/2026: «que estén centrados entre el buenos días y el final de la
   página, a como está es muy feo»): la caja se lleva todo ese campo y
   centra adentro las dos cajitas. */
.cinta-barra { flex: 1; min-width: 0; display: flex; justify-content: center; }
.cinta-barra .cinta-membresia { margin: 0; background: none; border: 0; box-shadow: none; }
.cinta-barra .cinta-membresia .cuerpo.cifras { display: flex; gap: 8px; padding: 0; }
.cinta-barra .cifra.chica {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 6px;
  align-items: baseline;
  justify-items: center;
  padding: 3px 10px;
  background: var(--papel);
  border: 1px solid var(--borde-tarjeta);
  border-radius: 8px;
  box-shadow: var(--sombra-chica);
  line-height: 1.25;
}
.cinta-barra .cifra.chica .etiqueta { font-size: 10.5px; justify-self: end; }
.cinta-barra .cifra.chica .valor { font-size: 13.5px; justify-self: start; }
.cinta-barra .cifra.chica .nota { grid-column: 1 / -1; font-size: 10.5px; white-space: nowrap; }
/* En escritorio la del Inicio sobra (ya está en la barra); en el teléfono es
   al revés: la barra no tiene campo y la cinta sigue arriba del Inicio. */
@media (min-width: 701px) { main > div > .cinta-membresia { display: none; } }
@media (max-width: 700px) { .cinta-barra { display: none !important; } }
/* Con la ventana a media pantalla, sin el renglón del vencimiento. */
@media (min-width: 701px) and (max-width: 1100px) { .cinta-barra .cifra.chica .nota { display: none; } }
.relleno-barra { flex: 1; min-width: 0; }

/* Migas: dónde está uno. El grupo es clic; la pantalla, en negrita. */
.migas {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 0 1 auto;
  font-size: 14px;
  color: var(--tenue);
  white-space: nowrap;
}
.migas b { font: 650 15px var(--fuente-titulo); color: var(--texto); overflow: hidden; text-overflow: ellipsis; }
.migas .miga-grupo {
  border: 0;
  background: none;
  font: inherit;
  color: var(--tenue);
  padding: 2px 4px;
  border-radius: 6px;
  cursor: pointer;
}
.migas .miga-grupo:hover { color: var(--azul); background: var(--azul-suave); }
.migas .miga-separador { color: var(--borde-fuerte); }

/* Las teclas del buscador (Ctrl K), en su paleta. */
.paleta kbd {
  font: 600 11px var(--fuente-texto);
  padding: 1px 6px;
  border: 1px solid var(--borde);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--papel);
  color: var(--tenue);
}

/* Campana y tema: botones planos, sin el círculo con borde. */
.barra .boton-tema {
  border-color: transparent;
  background: transparent;
  border-radius: 10px;
  width: 36px;
  height: 36px;
  color: var(--tenue);
}
.barra .boton-tema:hover { background: var(--papel-2); border-color: var(--borde); color: var(--texto); }
/* EL NÚMERO DE LA CAMPANA, SIN ROJO (Mario, 30/9/2026). Desde que cuenta lo
   sin responder y lo que no se entregó —que salieron del Inicio porque
   asustaban a los clientes—, un globito rojo asustaría igual. Va en el azul
   de los íconos, con su letra: la pareja que mide contraste.test.ts. */
.conteo-campana { background: var(--azul-icono); color: var(--sobre-azul-icono); top: -2px; right: -2px; }

/* En escritorio la empresa activa vive en el menú; la píldora de la barra es
   solo para el teléfono (ver abajo). */
.barra .empresa-actual { display: none; }

/* ------------------------------------------------------------ avatar -- */
.avatar-usuario { position: relative; flex: none; }
.barra .usuario {
  width: 36px;
  height: 36px;
  background: var(--tinta-2);
  color: var(--sobre-tinta);
  border: 2px solid var(--papel);
  box-shadow: 0 0 0 1px var(--borde);
  font: 650 12.5px var(--fuente-titulo);
}
.barra .usuario:hover,
.barra .usuario[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--azul); border-color: var(--papel); }
.menu-avatar {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 230px;
  max-width: calc(100vw - 24px);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
  padding: 6px;
  z-index: 60;
  display: grid;
  gap: 1px;
}
.menu-avatar .quien-avatar { display: grid; padding: 8px 10px 10px; border-bottom: 1px solid var(--borde); margin-bottom: 4px; }
.menu-avatar .quien-avatar b { font-family: var(--fuente-titulo); }
.menu-avatar .quien-avatar small { color: var(--tenue); overflow-wrap: anywhere; }
.menu-avatar .item-avatar {
  border: 0;
  background: none;
  font: inherit;
  color: var(--texto);
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.menu-avatar .item-avatar:hover,
.menu-avatar .item-avatar:focus-visible { background: var(--papel-2); outline: none; }
.menu-avatar .item-avatar.salir { color: var(--rojo); }
.menu-avatar hr { border: 0; border-top: 1px solid var(--borde); margin: 4px 0; }

/* ------------------------------------------ marca y empresa en el menú -- */
.lateral .marca {
  padding: 14px 16px 8px;
  color: #fff;
  font: 650 15px var(--fuente-titulo);
  flex: none;
}
.tarjeta-empresa {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 8px 6px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 10px;
  background: var(--tinta-2);
  color: var(--sobre-tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.tarjeta-empresa:hover { border-color: rgba(255, 255, 255, .28); }
.tarjeta-empresa .iniciales-empresa {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  /* Blanco suave sobre la tinta, con letras blancas (Mario, 8/10/2026, viendo
     cinco opciones: «A»). Iba en verde lima desde la v2: «siento q choca mucho». */
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font: 700 12px var(--fuente-titulo);
}
.tarjeta-empresa .datos-empresa { display: grid; min-width: 0; line-height: 1.3; }
.tarjeta-empresa .datos-empresa b { color: #fff; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta-empresa .datos-empresa small { color: var(--sobre-tinta-tenue); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------ estado al pie del menú -- */
/* EL SEMÁFORO DE HACIENDA (Mario, 1/10/2026): solo el punto, centrado en su
   renglón, un poco más grande que los 8 px de antes y con un brillo suave del
   color que dice. Sin animación: un semáforo que se mueve distrae, y el color
   ya avisa. La frase sale en un cartelito al posarse, al enfocarlo con el
   teclado o al tocarlo (app.js, pintarPunto). `padding` generoso: el dedo
   necesita más que 12 px para acertarle.
   Las alarmas («Base caída», «Servidor caído») llevan `.con-texto`: el punto
   y la frase escrita al lado, como siempre, y sin cartel. */
.estado-sistema {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; border-radius: 999px;
  font-size: 12.5px; color: var(--sobre-tinta);
}
.estado-sistema.con-texto { padding: 4px 10px; }
.estado-sistema:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.punto-estado { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--sobre-tinta-tenue); }
.estado-sistema.tono-ok .punto-estado { background: var(--lima); box-shadow: 0 0 0 3px rgba(87, 252, 15, .16), 0 0 12px 2px rgba(87, 252, 15, .45); }
.estado-sistema.tono-aviso .punto-estado { background: #e8b45c; box-shadow: 0 0 0 3px rgba(232, 180, 92, .16), 0 0 12px 2px rgba(232, 180, 92, .45); }
.estado-sistema.tono-malo .punto-estado { background: #f08b84; box-shadow: 0 0 0 3px rgba(240, 139, 132, .16), 0 0 12px 2px rgba(240, 139, 132, .45); }

/* El cartelito: arriba del punto y centrado. Se esconde con `visibility` y no
   con `display`: así `aria-describedby` lo sigue leyendo y la salida se ve
   suave. Sin eventos del puntero, para no tapar el toque que lo cierra. */
.cartel-estado {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 208px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--texto); color: var(--papel);
  box-shadow: var(--sombra);
  font-size: 12.5px; line-height: 1.4; text-align: center;
  z-index: 140;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .12s ease;
}
.cartel-estado b { display: block; font-weight: 650; }
.cartel-estado .cartel-detalle span { display: block; margin-top: 2px; font-size: 12px; opacity: .85; }
.cartel-estado .cartel-detalle:empty { display: none; }
/* La colita, hacia el punto. */
.cartel-estado::after {
  content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: var(--texto);
}
.estado-sistema:focus-visible .cartel-estado,
.estado-sistema.abierto .cartel-estado { visibility: visible; opacity: 1; }
/* Con el mouse, al posarse; en el teléfono no hay hover y el toque lo abre. */
@media (hover: hover) {
  .estado-sistema:hover .cartel-estado { visibility: visible; opacity: 1; }
}

/* Minimizado: la marca, la empresa y el estado quedan en su puro ícono. */
body.menu-encogido .lateral .marca { justify-content: center; padding-inline: 0; }
body.menu-encogido .lateral .adorno-temporada { display: none; }
body.menu-encogido .tarjeta-empresa { justify-content: center; margin-inline: 6px; padding: 6px 0; }
body.menu-encogido .lateral .estado-barra { display: flex; justify-content: center; }
/* MINIMIZADO, EL CARTEL SALE A LA DERECHA DE LA COLUMNA (como el nombre de los
   iconitos del menú, estilo.css): en 58 px, un cartel de 200 centrado sobre el
   punto se saldría por la izquierda de la ventana. La columna deja de recortar
   en escritorio (`overflow: visible`); el ancla es la caja del estado, que
   llena la columna, y no el punto. En el teléfono no existe «minimizado». */
@media (min-width: 701px) {
  body.menu-encogido .estado-barra { position: relative; }
  body.menu-encogido .estado-sistema { position: static; padding: 6px; }
  body.menu-encogido .cartel-estado {
    left: calc(100% + 14px); bottom: auto; top: 50%; transform: translateY(-50%);
  }
  body.menu-encogido .cartel-estado::after {
    top: 50%; left: auto; right: 100%; margin: -5px 0 0;
    border-top-color: transparent; border-right-color: var(--texto);
  }
}

/* Minimizada la columna no se desplaza (los paneles flotan fuera de ella):
   con la marca y la empresa arriba pedía 546 px, y en una laptop de 600 de
   alto se salía por abajo —«Maximizar» quedaba fuera— y la página entera se
   volvía desplazable. En ventanas bajas todo se aprieta hasta caber (432). */
@media (min-width: 701px) and (max-height: 740px) {
  body.menu-encogido .lateral .marca { padding-block: 8px 2px; }
  body.menu-encogido .tarjeta-empresa { margin-block: 2px 4px; padding-block: 3px; }
  body.menu-encogido .menu { padding-block: 4px; }
  body.menu-encogido .menu > button,
  body.menu-encogido .menu .abre-grupo { padding-block: 5px; }
  body.menu-encogido .pie-lateral { padding-block: 4px; gap: 2px; }
}

/* ------------------------------------------------------------ campana -- */
.panel-campana {
  border-radius: var(--radio-grande);
  border-color: var(--borde);
  box-shadow: var(--sombra);
  top: calc(100% + 8px);
}
.pestanas-campana {
  display: flex;
  gap: 2px;
  padding: 6px 6px 0;
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  background: var(--papel);
  z-index: 1;
}
.pestana-campana {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--tenue);
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pestana-campana[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--azul); }
.cuantas-campana { background: var(--azul-suave); color: var(--azul); border-radius: 999px; font-size: 11px; padding: 0 7px; }
.panel-campana .fila-notificacion { padding: 10px 14px; }
.panel-campana .fila-notificacion.sin-leer { background: var(--azul-suave); box-shadow: inset 3px 0 0 var(--azul); }
.panel-campana .fila-notificacion .cuando { color: var(--tenue); opacity: 1; }
.panel-campana .pie-campana { background: var(--papel-2); border-radius: 0 0 var(--radio-grande) var(--radio-grande); }
/* El basurero de los rechazados (Mario, 18/9/2026), que se vino del Inicio con
   su fila el 30/9/2026: en la esquinita, fuera de la fila-botón. La fila deja
   sitio a la derecha para que el texto no pase por debajo. */
.fila-con-basurero { position: relative; }
.panel-campana .fila-con-basurero > .fila-notificacion { padding-right: 36px; }
.dn-basurero {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--tenue);
  cursor: pointer;
}
.dn-basurero svg { width: 14px; height: 14px; }
.dn-basurero:hover, .dn-basurero:focus-visible { color: var(--rojo); background: var(--rojo-suave); }

/* ------------------------------------------------------ buscador Ctrl K -- */
.fondo-paleta {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(10, 17, 27, .45);
  padding: 12vh 12px 12px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.paleta {
  width: min(640px, 100%);
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.cabeza-paleta { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--borde); }
.lupa-paleta { color: var(--tenue); font-size: 18px; }
.cabeza-paleta input.campo-paleta.campo-paleta.campo-paleta,
.cabeza-paleta input.campo-paleta.campo-paleta.campo-paleta:focus {
  text-align: left;
  outline: none;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  padding: 6px 0;
}
.resultados-paleta { overflow-y: auto; padding: 6px; }
.seccion-paleta {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tenue);
  padding: 10px 10px 4px;
}
.opcion-paleta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.opcion-paleta[aria-selected="true"] { background: var(--azul-suave); }
.opcion-paleta .principal-opcion { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opcion-paleta .principal-opcion small { color: var(--tenue); margin-left: 8px; }
.opcion-paleta .derecha-opcion { flex: none; color: var(--tenue); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.estado-paleta { margin: 0; padding: 0 16px; color: var(--tenue); font-size: 13px; }
.estado-paleta:not(:empty) { padding: 12px 16px; }
.pie-paleta { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--borde); background: var(--papel-2); color: var(--tenue); font-size: 12px; }

/* ------------------------------------------------- barra de abajo -- */
.nav-inferior { display: none; }

/* ------------------------------------------------------------ teléfono -- */
@media (max-width: 700px) {
  .barra { gap: 8px; padding: 0 10px; }
  .migas { display: none; }
  .barra .empresa-actual { display: flex; }

  /* El menú desplegado ocupa el alto entero, con la marca arriba. */
  .lateral { top: 0; }

  .nav-inferior {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    flex: none;
    background: var(--papel);
    border-top: 1px solid var(--borde);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -1px 8px rgba(15, 42, 74, .06);
  }
  .nav-inferior button {
    display: grid;
    justify-items: center;
    gap: 2px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--tenue);
    padding: 7px 2px 6px;
    min-height: 52px;
    cursor: pointer;
    box-shadow: inset 0 2px 0 transparent;
  }
  .nav-inferior .icono { font-size: 18px; line-height: 1.2; }
  .nav-inferior button.activo { color: var(--texto); box-shadow: inset 0 2px 0 var(--verde); }
  .nav-inferior button[aria-expanded="true"] { color: var(--texto); }
}

/* Teléfono: el conteo de la campana se ancla a SU botón (la campana es
   estática para que el panel se mida contra la barra), y la píldora de la
   empresa va en tinta, como la tarjeta del menú. */
@media (max-width: 700px) {
  #boton-campana { position: relative; }
  .barra .avatar-empresa { background: var(--tinta-2); color: var(--sobre-tinta); }
  /* Los avisos flotan encima de la barra de abajo, no sobre ella. */
  .avisos { bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* =========================================================================
   VERSIÓN 3 (6/10/2026) — el menú azul, el cajón del teléfono y el pie
   -------------------------------------------------------------------------
   Lo que Mario pidió, con sus palabras (CAMBIOS-PENDIENTES, «4–6/10/2026»):
     · «me gusta el titulo de facturador de la segunda y los iconos y la
       división de la primera»: el título a la izquierda, sin tarjeta; cada
       renglón una tarjetita suave con su flechita; tres grupos con raya.
     · el cajón del teléfono, «del tamaño del nombre del menú más grande,
       solo un poquito más».
     · el pie: «solo dejemos el logo y el link a la página en la esquina
       inferior izquierda y en la derecha lo de Ele»; en el teléfono, nada.
   ========================================================================= */

/* ------------------------------------------- EL MAPA DE ÍCONOS DEL MENÚ -- */
/* CAMBIAR UN ÍCONO ES TOCAR ESTE BLOQUE Y NADA MÁS. El HTML solo dice el
   NOMBRE (`data-icono`); el dibujo vive aquí, y el menú de arriba y la barra
   de abajo del teléfono piden el mismo nombre.

   LOS DIBUJOS LOS ESCOGIÓ MARIO EL 6/10/2026: de colores y con volumen, «la B
   en todos» (casa con jardín, tablilla, hoja, bandeja) y, visto al lado de un
   paquete de línea, «me gusta más los iconos con colores … ignoremos lo de
   codex». Son de Fluent Emoji 3D (Microsoft, MIT: iconos-menu/LICENCIA.txt),
   achicados a 72 px. Un dibujo va en `--dibujo` y deja `--icono` vacío; un
   signo o emoji va en `--icono`. «Laboratorio» sigue con su 🧪: ese no lo
   escogió todavía. */
[data-icono="inicio"]      { --icono: ""; --dibujo: url("/iconos-menu/inicio.png"); }
[data-icono="clientes"]    { --icono: ""; --dibujo: url("/iconos-menu/clientes.png"); }
[data-icono="laboratorio"] { --icono: "🧪"; }
[data-icono="proformas"]   { --icono: ""; --dibujo: url("/iconos-menu/proformas.png"); }
[data-icono="facturar"]    { --icono: ""; --dibujo: url("/iconos-menu/facturar.png"); }
[data-icono="gastos"]      { --icono: ""; --dibujo: url("/iconos-menu/gastos.png"); }
[data-icono="reportes"]    { --icono: ""; --dibujo: url("/iconos-menu/reportes.png"); }
[data-icono="archivo"]     { --icono: ""; --dibujo: url("/iconos-menu/archivo.png"); }
[data-icono="catalogos"]   { --icono: ""; --dibujo: url("/iconos-menu/catalogos.png"); }
[data-icono="ajustes"]     { --icono: ""; --dibujo: url("/iconos-menu/ajustes.png"); }
[data-icono="ayuda"]       { --icono: ""; --dibujo: url("/iconos-menu/ayuda.png"); }
[data-icono="mas"]         { --icono: "⋯"; }
[data-icono="minimizar"]   { --icono: "⟨"; }
/* «Cobrar»: la bolsa con el signo de colones que escogió Mario el 17/9/2026. */
[data-icono="cobrar"]      { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20'%3E%3Cpath d='M9 3.5h6l-1.6 3h-2.8z' fill='%23c98a1b'/%3E%3Cpath d='M8.6 7.2h6.8c3.2 2.4 5.1 5.8 5.1 9 0 3-2.6 4.3-8.5 4.3S3.5 19.2 3.5 16.2c0-3.2 1.9-6.6 5.1-9z' fill='%23e0a82e'/%3E%3Cpath d='M9.4 7.2h5.2' stroke='%238a5a0a' stroke-width='1.4' stroke-linecap='round'/%3E%3Cg stroke='%232e7e07' stroke-width='1.6' fill='none' stroke-linecap='round'%3E%3Cpath d='M14.3 11.6a3.1 3.1 0 1 0 0 4.4'/%3E%3Cpath d='M11.2 10.2l-1.2 7.4M13.2 10.2l-1.2 7.4'/%3E%3C/g%3E%3C/svg%3E"); }
.icono[data-icono]::before { content: var(--icono); display: block; }
/* Los que llevan dibujo: una cajita cuadrada con el dibujo adentro, entero. */
.icono:is([data-icono="inicio"], [data-icono="clientes"], [data-icono="proformas"], [data-icono="facturar"],
  [data-icono="gastos"], [data-icono="reportes"], [data-icono="archivo"], [data-icono="catalogos"],
  [data-icono="ajustes"], [data-icono="ayuda"])::before {
  width: var(--lado-dibujo, 24px);
  height: var(--lado-dibujo, 24px);
  margin-inline: auto;
  background: var(--dibujo) center / contain no-repeat;
}

/* -------------------------------------------------------------- el título -- */
/* El ícono a la izquierda y «Facturador CR» en blanco. Sin tarjeta ni adorno. */
.lateral .marca {
  justify-content: flex-start;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-4) var(--e-2) 18px;
  font: 650 16.5px var(--fuente-titulo);
  letter-spacing: -.012em;
}
.lateral .marca img { width: 24px; height: 24px; border-radius: var(--radio-chico); }
.lateral { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }

/* La empresa activa: una tarjetita de la misma familia que los renglones. */
.tarjeta-empresa {
  margin: var(--e-1) var(--e-2) var(--e-2);
  padding: var(--e-2) var(--e-3) var(--e-2) var(--e-2);
  border-color: var(--menu-raya);
  border-radius: 12px;
  background: var(--menu-renglon);
  transition: background-color .12s ease, border-color .12s ease;
}
.tarjeta-empresa:hover { background: var(--menu-renglon-hover); border-color: rgba(255, 255, 255, .28); }
.tarjeta-empresa .iniciales-empresa { width: 32px; height: 32px; border-radius: var(--radio-control); }

/* ------------------------------------------------------------ los renglones -- */
/* CADA RENGLÓN, UNA TARJETITA SUAVE con las esquinas redondeadas, su ícono a
   la izquierda y la flechita a la derecha. */
.menu { gap: var(--e-1); padding: var(--e-1) var(--e-2) var(--e-2); }
.menu button {
  gap: var(--e-3);
  padding: 8px var(--e-3);
  border-radius: var(--radio);
  background: var(--menu-renglon);
  color: var(--sobre-tinta);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.35;
  transition: background-color .12s ease, color .12s ease;
}
.menu button .icono { width: 24px; font-size: 15px; line-height: 1; text-align: center; --lado-dibujo: 23px; }
.menu button:hover { background: var(--menu-renglon-hover); color: #fff; }
.menu button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
/* EL ACTIVO: fondo verde azulado translúcido con la barra lima a la izquierda. */
.menu button.activo,
.menu .abre-grupo.activo {
  background: var(--menu-activo);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--lima);
}

/* LA FLECHITA, DIBUJADA: › en los que entran directo, ⌄ en los que se
   despliegan (y se da vuelta al abrir). Dos rayitas de borde giradas: no
   depende de que la letra traiga el signo. */
.menu > button[data-pantalla]::after,
.abre-grupo .flecha {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: auto;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  font-size: 0;
  opacity: .5;
}
.menu > button[data-pantalla]::after { transform: rotate(-45deg); }
.menu .abre-grupo .flecha { color: inherit; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.menu .abre-grupo[aria-expanded="true"] .flecha { transform: translateY(1px) rotate(-135deg); }
.menu button:hover::after, .menu button.activo::after,
.menu .abre-grupo:hover .flecha, .menu .abre-grupo.activo .flecha { opacity: .9; }

/* LA DIVISIÓN: una raya fina entre grupo y grupo. */
.raya-menu {
  flex: none;
  align-self: stretch;
  height: 0;
  margin: 6px var(--e-2);
  border: 0;
  border-top: 1px solid var(--menu-raya);
}

/* Lo de adentro de un grupo: renglones sin tarjeta, colgados de una rayita
   que baja desde el ícono del grupo. */
.panel-grupo {
  gap: 2px;
  margin: 2px 0 var(--e-1) 21px;
  padding-left: var(--e-2);
  border-left: 1px solid var(--menu-raya);
}
.panel-grupo button {
  padding: 7px var(--e-3);
  background: transparent;
  color: var(--sobre-tinta-tenue);
  font-size: 13.5px;
  font-weight: 450;
}
.panel-grupo button.activo { font-weight: 600; }

/* El pie del menú: el semáforo y «Minimizar». */
.pie-lateral { padding: var(--e-2); gap: var(--e-1); border-top-color: var(--menu-raya) !important; }
.pie-lateral .encoger-menu { border-radius: var(--radio); padding: 7px var(--e-3); font-size: 13.5px; }
.pie-lateral .encoger-menu:hover { background: var(--menu-renglon-hover); color: #fff; }

/* MINIMIZADO (solo en escritorio): cada ícono en su tarjetita, sin flechita;
   el panel que flota a la derecha es del mismo azul del menú, para que se
   lea como parte de él. */
@media (min-width: 701px) {
  body.menu-encogido .menu > button[data-pantalla]::after { display: none; }
  body.menu-encogido .menu { padding-inline: 7px; }
  body.menu-encogido .raya-menu { margin-inline: 6px; }
  body.menu-encogido .panel-grupo {
    margin: 0;
    background: var(--tinta);
    border: 1px solid var(--menu-raya);
    border-radius: 12px;
  }
  body.menu-encogido .panel-grupo::before { color: #fff; }
  body.menu-encogido .panel-grupo button { color: var(--sobre-tinta); }
}
@media (min-width: 701px) and (max-height: 740px) {
  body.menu-encogido .menu { gap: 2px; }
  body.menu-encogido .raya-menu { margin-block: 2px; }
}

/* ---------------------------------------------------------- el teléfono -- */
/* EL CAJÓN MIDE LO QUE SU RENGLÓN MÁS LARGO (Mario, 4/10/2026: «escojo la B,
   pero podría ser todavía más pequeño, del tamaño del nombre del menú más
   grande, solo un poquito más, el nombre de la empresa arriba no importa, q
   se vean unos puntitos de q sigue»). Medía 280 de 375 (`min(280px, 85vw)`).
   Ahora es `max-content`: lo que piden sus renglones de primer nivel, más el
   respiro de `--respiro-cajon`. Ni el nombre de la empresa ni los submenús
   lo ensanchan (`contain: inline-size` los deja fuera de la cuenta): el
   nombre se corta con «…» y un submenú largo se parte en dos renglones. */
@media (max-width: 700px) {
  .lateral,
  body.menu-encogido .lateral {
    --respiro-cajon: 28px;
    width: max-content;
    max-width: 85vw;
    border-radius: 0 var(--radio-grande) var(--radio-grande) 0;
    box-shadow: var(--sombra);
  }
  .lateral .tarjeta-empresa,
  .lateral .panel-grupo,
  .lateral .pie-lateral { contain: inline-size; }
  .lateral .tarjeta-empresa { margin-top: var(--e-2); }
  .menu > button .texto,
  .menu .abre-grupo .texto { white-space: nowrap; margin-right: var(--respiro-cajon); }
  .menu button,
  body.menu-encogido .menu button { padding: 10px var(--e-3); }
  .panel-grupo,
  body.menu-encogido .panel-grupo { padding-left: var(--e-1); margin-left: 21px; }
  .panel-grupo button,
  body.menu-encogido .panel-grupo button { padding: 8px var(--e-2); line-height: 1.3; }

  .nav-inferior { box-shadow: none; }
  .nav-inferior .icono { height: 24px; display: grid; place-items: center; --lado-dibujo: 24px; }
  .nav-inferior button.activo { box-shadow: inset 0 2px 0 var(--verde); }
}

/* ---------------------------------------------------------------- el pie -- */
/* DOS ESQUINAS Y NADA MÁS (Mario, 4/10/2026): a la izquierda el logo de
   EleMa™ con el enlace a la página; a la derecha, en la esquina, Ele. La
   versión, el emisor y los atajos viven en Ajustes → «Acerca de». */
.pie {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: 38px;
  padding: var(--e-1) var(--e-3);
  background: var(--fondo);
  border-top: 1px solid var(--borde);
  font-size: var(--t-nota);
  color: var(--tenue);
}
.pie .marca-pie {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 3px var(--e-2) 3px var(--e-1);
  border-radius: var(--radio-control);
  color: var(--tenue);
  text-decoration: none;
  white-space: nowrap;
}
.pie .marca-pie b { color: var(--texto); font: 650 13px var(--fuente-titulo); }
.pie .marca-pie:hover { background: var(--papel); color: var(--azul); }
.pie .marca-pie:hover span { text-decoration: underline; }
.pie .marca-pie-icono { border-radius: 5px; }
.pie .esquina-ayuda { margin-left: auto; }
/* Ele, solo en su esquina: un pelo más grande que cuando compartía el pie. */
.pie .boton-ele { height: 28px; padding: 0 var(--e-3) 0 var(--e-2); font-size: 12px; gap: 6px; }
.pie .boton-ele .ele-dibujo { width: 16px; height: 17px; }
.pie .boton-ele.ele-callado { width: 28px; padding: 0; }

/* En el teléfono no hay pie (Mario, 3/10/2026: «debe quitarse todo eso de
   abajo … debe quedar limpio»). A Ele se llega por el avatar y por Ayuda; a
   las sugerencias, por «Más» → Ayuda. */
@media (max-width: 700px) { .pie { display: none; } }

/* --------------------------------- lo que flota, con la escala de la v3 -- */
/* EL MENÚ DE PERFIL, EL BUSCADOR DE CTRL K Y LA CAMPANA (frontend v3 · fase 6,
   fichas 87 a 94): solo la cara. Ya traían los radios y las sombras de la
   escala, más arriba en esta hoja; aquí va lo que faltaba: cada renglón que se
   aprieta mide al menos 40 px y el vacío de la campana va al centro. No cambia
   qué se abre ni qué hace. «Tu sesión» no se toca: su ficha la midió Mario el
   10/9/2026 y vive en sesion.js, que otra rama está cambiando. */
.menu-avatar .item-avatar { min-height: 40px; border-radius: var(--radio-control); }
.opcion-paleta { min-height: 40px; border-radius: var(--radio-control); }
.panel-campana > p.nota { margin: 0; text-align: center; text-wrap: balance; }
.panel-campana .fila-notificacion { min-height: 40px; }