/* ════════════════════════════════════════════════════════════════════════════
   NUNIO — paleta de marca. ESTE ES EL ÚNICO LUGAR donde viven los colores.
   Cambiar la marca = cambiar el bloque "TINTA DE MARCA" de acá abajo. Nada más.

   Los colores salen de los píxeles del logo, no de una estimación: el degradado
   del isotipo recorre 204° (azul) → 274° (púrpura) con un acento turquesa a 188°.

   ── POR QUÉ HAY DOS JUEGOS DE VALORES ─────────────────────────────────────────
   Ningún color sirve para texto en los dos fondos. Medido con WCAG 2.1:
     violeta #391af6  → 7.92:1 sobre claro (AAA)  ·  2.39:1 sobre oscuro (ilegible)
     índigo  #8b93ff  → 2.72:1 sobre claro (ilegible) · 6.94:1 sobre oscuro (AA)
   Por eso el mismo token vale distinto según el fondo. El RELLENO de un botón sí
   puede ser el mismo: lo que importa ahí es el blanco encima (7.92:1).

   ── EL VERDE NO ES DECORACIÓN ─────────────────────────────────────────────────
   El verde queda reservado a ESTADO: número conectado, bot activo, semáforos.
   Un "conectado" que deja de ser verde miente. Por eso los tokens de estado están
   separados de los de marca, y ningún componente decorativo puede usarlos.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── TINTA DE MARCA (el degradado del logo, tal cual) ──────────────────── */
  --nu-azul:            #0198fa;
  --nu-azul-hondo:      #0363fa;
  --nu-indigo:          #1635fa;
  --nu-violeta:         #391af6;
  --nu-violeta-suave:   #6915fa;
  --nu-purpura:         #950dfa;
  --nu-turquesa:        #02d0ee;
  --nu-noche:           #0d112b;
  --nu-degradado:       linear-gradient(135deg, #0198fa 0%, #391af6 55%, #950dfa 100%);
  --nu-degradado-suave: linear-gradient(135deg, rgba(1,152,250,.14), rgba(149,13,250,.14));

  /* ── USO SOBRE FONDO CLARO (el defecto: 11 de las 15 pantallas son claras) ─ */
  --marca:            #391af6;              /* relleno de botón primario */
  --marca-fuerte:     #2a12c4;              /* su hover */
  --marca-texto:      #391af6;              /* texto y enlaces — 7.92:1 AAA */
  --marca-borde:      #391af6;
  --marca-tenue:      rgba(57, 26, 246, .10);   /* fondo de pestaña activa */
  --marca-tenue-2:    rgba(57, 26, 246, .05);
  --marca-encima:     #ffffff;              /* lo que va ENCIMA del relleno — 7.92:1 */
  --marca-acento:     #0e7490;              /* turquesa legible en claro — 5.36:1 */
  --marca-anillo:     rgba(57, 26, 246, .28);   /* foco */

  /* ── ESTADO (significado, nunca decoración) ───────────────────────────────
     El punto/pill es RELLENO: ahí el verde de WhatsApp se ve perfecto. El texto
     verde sobre claro daba 1.98:1 —ilegible— y pasa a 5.02:1 sin dejar de ser verde. */
  --estado-ok:        #15803d;   /* texto  — 5.02:1 (antes #25D366: 1.98:1) */
  --estado-ok-punto:  #25D366;   /* relleno del punto/pill: el verde de siempre */
  --estado-ok-tenue:  rgba(37, 211, 102, .12);
  --estado-alerta:       #b45309;   /* texto — 5.02:1 (antes #f59e0b: 2.15:1) */
  --estado-alerta-punto: #f59e0b;
  --estado-alerta-tenue: rgba(245, 158, 11, .12);
  --estado-error:        #dc2626;
  --estado-error-punto:  #ef4444;
  --estado-error-tenue:  rgba(239, 68, 68, .12);
  --estado-neutro:       #6b7280;
  --estado-neutro-punto: #9ca3af;
  /* ── LOS TRECE FONDOS DE ALERTA Y DE ESTADO · oficiales, con su rol (Pablo, 05/10) ────────
     🔴 Cada uno nace con EXACTAMENTE el color que ese uso ya tenía: esto no cambia un píxel,
        cambia de dónde sale. Antes vivían sueltos en catorce archivos.
     🔴 TRECE Y NO SEIS: los seis roles que nombró Pablo tienen más de un tono cada uno —tres
        verdes de éxito, cuatro ámbar de aviso, dos rojos, dos azules—. Juntarlos en seis
        tokens SÍ cambiaría el color de siete usos, que es lo que pidió que no pasara.
     ⚠️ Viven acá y no en `style.css` porque seis pantallas son autocontenidas y no cargan esa
        hoja; un token que no llega vuelve la declaración inválida y la borra ENTERA.
     ⚠️ No tienen versión oscura, ni antes ni ahora: en modo noche una alerta se ve con este
        mismo tinte claro. Darles una es cambiar el tono, así que queda a decisión de Pablo. */
  --fondo-error:          #fee2e2;                    /* rojo de una alerta de error */
  --fondo-error-suave:    #ffeeee;                    /* el rojo más suave (venía como #fee) */
  --fondo-aviso:          #fef3c7;                    /* ámbar de un aviso */
  --fondo-aviso-claro:    #fffbeb;                    /* el ámbar casi blanco */
  --fondo-aviso-tenue:    rgba(245, 158, 11, .08);    /* ámbar translúcido, para franjas */
  --fondo-aviso-tenue-2:  rgba(245, 158, 11, .14);    /* el mismo ámbar, más presente */
  --fondo-exito:          #d1fae5;                    /* verde de algo que salió bien */
  --fondo-exito-claro:    #dcfce7;                    /* el verde más claro */
  --fondo-exito-tenue:    #ecfdf5;                    /* el verde casi blanco */
  --fondo-info:           #dbeafe;                    /* azul de una nota informativa */
  --fondo-info-tenue:     rgba(90, 140, 180, .16);    /* azul translúcido */
  --fondo-seleccion:      rgba(37, 211, 102, .09);    /* lo que está elegido: pestaña activa */
  --fondo-chat:           #e5ddd5;                    /* el papel del chat */
}

/* ── USO SOBRE FONDO OSCURO ────────────────────────────────────────────────
   Lo aplican las 4 pantallas oscuras (dashboard, costos, numeros, plataforma)
   marcando <html class="oscuro">. Las claras nunca reciben esta clase.

   El `:not(.light)` evita tocar una sola línea de JavaScript: el interruptor de tema
   que ya existe pone y saca la clase `light` en el <html>, y con esto los valores
   oscuros se desactivan solos cuando el usuario elige claro. Un token de tema que
   necesita que alguien acuerde de llamar a una función termina desincronizado. */
:root.oscuro:not(.light) {
  --marca:            #5b34ff;   /* algo más claro: sobre #0f1115 el relleno se despega */
  --marca-fuerte:     #7856ff;
  --marca-texto:      #8b93ff;   /* 6.94:1 sobre el fondo oscuro */
  --marca-borde:      #6b52ff;
  --marca-tenue:      rgba(91, 52, 255, .18);
  --marca-tenue-2:    rgba(91, 52, 255, .09);
  --marca-encima:     #ffffff;
  --marca-acento:     #02d0ee;   /* acá el turquesa sí luce: 10.13:1 */
  --marca-anillo:     rgba(139, 147, 255, .35);

  --estado-ok:        #25D366;   /* sobre oscuro el verde de WhatsApp da 8.79:1 */
  --estado-ok-punto:  #25D366;
  --estado-ok-tenue:  rgba(37, 211, 102, .16);
  --estado-alerta:       #f59e0b;   /* 8.11:1 sobre oscuro */
  --estado-alerta-punto: #f59e0b;
  --estado-alerta-tenue: rgba(245, 158, 11, .16);
  --estado-error:        #ef4444;
  --estado-error-punto:  #ef4444;
  --estado-error-tenue:  rgba(239, 68, 68, .16);
  --estado-neutro:       #9ca3af;
  --estado-neutro-punto: #9ca3af;
}

/* ════════════════════════════════════════════════════════════════════════════
   MARCA EN PANTALLA
   ════════════════════════════════════════════════════════════════════════════ */

/* El isotipo del menú lateral. Reemplaza al cuadrado verde con una letra dentro. */
.logo-icon, .nu-isotipo {
  background: var(--nu-degradado) !important;
  color: #fff;
}
.logo-icon img, .nu-isotipo img { width: 76%; height: 76%; object-fit: contain; display: block; }

/* Logo del login: grande y centrado. */
.nu-logo-login { display: block; margin: 0 auto 6px; width: min(260px, 62vw); height: auto; }
/* El logotipo completo trae "nunio" en BLANCO. Sobre fondo claro sería invisible, así
   que hay dos archivos y se muestra el que corresponde al fondo. */
.nu-logo-oscuro { display: none; }
:root.oscuro:not(.light) .nu-logo-claro  { display: none; }
:root.oscuro:not(.light) .nu-logo-oscuro { display: block; }

/* Logo chico del encabezado. */
.nu-logo-barra { height: 26px; width: auto; display: block; }

@media (max-width: 640px) {
  .nu-logo-login { width: min(210px, 70vw); }
}

/* ── NOCHE — UNA SOLA DEFINICIÓN PARA TODO EL CRM ────────────────────────────
   Antes cada pantalla oscura llevaba su paleta COPIADA LITERAL: costos, dashboard,
   numeros e integraciones tenían los mismos siete hex escritos cuatro veces, y
   plataforma tenía otros distintos. Por eso el menú se veía azul y el contenido negro:
   el menú usaba #1a1a2e y el fondo #0f1115, dos colores que nadie había decidido juntos.
   Ahora el fondo ES el azul del menú y todo lo demás se deriva de él. Cambiarlo acá lo
   cambia en todas: si aparece una pantalla nueva, que use estas variables. */
:root {
  --noche-fondo:   #1a1a2e;   /* el azul del menú lateral — ahora también el fondo */
  --dia-titulo:    #1a1a2e;   /* títulos de día: el azul de la marca, 15.8:1 */
  --dia-fondo:     #f5f5f5;   /* la contraparte: el fondo de día, con nombre propio para
                                 que las muestras de Configuración lo puedan enseñar */
  --noche-alto:    #15152a;   /* barra superior: un punto más honda que el fondo */
  --noche-panel:   #22223d;   /* tarjetas — se despegan del fondo sin gritar */
  --noche-panel2:  #2a2a47;   /* superficies secundarias: campos, botones */
  --noche-linea:   #343453;   /* bordes */
  --noche-sep:     #2e2e4a;   /* separadores finos */
  --noche-hondo:   #141426;   /* zonas hundidas */
  /* El texto también es paleta. Estaba escrito a mano en style.css y era el último color
     de la noche que vivía fuera de acá. */
  --noche-texto:   #e9e9f2;   /* texto principal sobre fondo oscuro */
  --noche-texto2:  #c6c6d8;   /* texto secundario */
  --noche-tenue:   #9a9ab8;   /* apoyos y ayudas */
  --noche-tenue2:  #9494b0;   /* lo más apagado — el #7d7d9c daba 3.45:1 sobre las tarjetas */
  --noche-titulo:  #f4f4fc;   /* títulos de noche: 13:1, destacan de verdad */
  --noche-acento:  #b4a0ff;   /* el morado, cuando hace de TEXTO sobre oscuro */
}

/* ── MENÚ EN PANTALLA ANGOSTA ────────────────────────────────────────────────────────────
   Abajo de 900 px la barra lateral SALE DEL FLUJO y se abre por encima del contenido con el
   botón ☰. Antes de esto el teléfono quedaba sin navegación: 10 pantallas dejaban la barra
   fija comiéndose 230 de 375 px y las otras 4 la escondían sin dar ninguna forma de abrirla.
   En escritorio no cambia nada: el botón nace en display:none y solo aparece dentro de la
   media query. */
.nu-menu-btn{display:none;background:none;border:none;font:inherit;font-size:23px;line-height:1;
  cursor:pointer;color:var(--ui-titulo);padding:2px 8px 2px 0;flex-shrink:0}
.nu-menu-btn:hover{color:var(--marca)}
.nu-menu-fondo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1150}
@media(max-width:900px){
  .nu-menu-btn{display:block}
  /* La barra pasa a estar por encima y arrancada a la izquierda. Se mueve con transform y no
     con display, así conserva el foco y la transición.
     ⚠️ EL SELECTOR ES «body .sidebar» A PROPÓSITO, no «.sidebar». Cuatro pantallas
     (dashboard, costos, integraciones, numeros) redefinen .sidebar COMPLETA en su <style>
     local, que va después de style.css: con igual especificidad gana el que está más abajo y
     mi regla perdía —medido: la barra seguía en position:sticky—. «body .sidebar» tiene más
     especificidad y gana sin importar el orden. Es preferible a !important: se sigue pudiendo
     sobreescribir desde una pantalla si algún día hace falta.
     El estado abierto usa dos clases (0,2,0), así que le gana a este selector (0,1,1). */
  body .sidebar{position:fixed;top:0;left:0;bottom:0;height:100%;z-index:1200;
    transform:translateX(-100%);transition:transform .22s ease}
  .sidebar.nu-abierta{transform:none;box-shadow:0 0 40px rgba(0,0,0,.5)}
  .nu-menu-fondo.nu-abierta{display:block}
}


/* ── TABLA (vista en filas) ──────────────────────────────────────────────────────────────
   Tabla de VERDAD, no tarjetas acomodadas con flex. `table-layout:fixed` es lo que hace que
   cada columna caiga en el MISMO lugar en todas las filas —el intento anterior dejaba los
   botones bailando según el largo del nombre— y el nombre se recorta por la DERECHA con
   elipsis, nunca por la izquierda.
   Nada de esto depende de la cantidad de filas: sirve con 5 y con 3.000. */
/* 🔴 LA MISMA LETRA QUE MENSAJES (Pablo, 07/10). Estaba en 13 px fijos, contra los 14,58 de
   `--t-base` (13,5 x `--escala` 1,08): la tabla se veia mas chica que el resto del CRM y, por
   ser px, no seguia la escala. Los `th` se quedan en 11,5 px a proposito. */
.nu-tabla{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--t-base)}
.nu-tabla thead th{position:sticky;top:0;z-index:2;background:var(--ui-panel2);color:var(--ui-texto2);
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  text-align:left;padding:9px 10px;border-bottom:1px solid var(--ui-linea)}
.nu-tabla tbody td{padding:7px 10px;border-bottom:1px solid var(--ui-linea2);
  vertical-align:middle;color:var(--ui-texto)}
.nu-tabla tbody tr:hover{background:var(--ui-panel2)}
/* Una fila apagada se ve apagada, igual que la tarjeta. */
.nu-tabla tbody tr.nu-inactiva{opacity:.55}
/* El nombre es la única columna que se estira, y se recorta con elipsis a la derecha. */
.nu-tabla .col-nombre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;color:var(--ui-titulo)}
.nu-tabla .col-texto{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nu-tabla .col-casilla{width:38px;text-align:center}
.nu-tabla .col-foto{width:54px}
.nu-tabla .col-chica{width:88px}
.nu-tabla .col-acciones{width:136px;text-align:right;white-space:nowrap}
.nu-tabla .col-acciones .btn{padding:4px 7px}
.nu-tabla .nu-mini{width:38px;height:38px;border-radius:6px;object-fit:cover;display:block;
  background:var(--ui-linea2)}
.nu-tabla .nu-sinfoto{width:38px;height:38px;border-radius:6px;background:var(--ui-linea2);
  display:flex;align-items:center;justify-content:center;font-size:15px;opacity:.6}
/* La tabla vive dentro del contenedor de la grilla, que en modo filas deja de ser grilla. */
[data-vista].vista-filas{display:block}
.nu-vista-btn{white-space:nowrap}
/* En celular no caben 8 columnas: quedan casilla, foto, nombre y acciones. Se esconden las del
   medio en vez de volver a tarjetas — con 100 productos la fila compacta sigue siendo lo útil. */
@media(max-width:760px){
  .nu-tabla .col-oculta-movil{display:none}
  .nu-tabla .col-acciones{width:104px}
  /* En celular la tabla sigue mas chica que el texto normal —ocho columnas en 760 px no entran
     de otra forma—, pero con el token, no con un numero suelto. */
  .nu-tabla{font-size:var(--t-chico)}
}

/* ── LA CASILLA DENTRO DE LA TABLA ───────────────────────────────────────────────────────
   En la TARJETA la casilla es un recuadro `position:absolute` pegado arriba a la izquierda,
   encima de la foto (catalogo.html:18). Dentro de un <td> eso la manda contra el primer
   ancestro posicionado que encuentre y se va de su fila: estaba en el DOM y no se veía donde
   correspondía. En la tabla es una celda más, así que va estática y sin recuadro. */
.nu-tabla .masivo-chk{position:static;background:none;border:none;padding:0;
  display:inline-flex;align-items:center;justify-content:center}
.nu-tabla .col-casilla input[type="checkbox"]{cursor:pointer;margin:0}
/* La casilla de "seleccionar todos" vive en el encabezado. */
.nu-tabla thead .col-casilla{text-align:center}

/* ── CATEGORÍAS (sección de la página desde el 07/10) ──────────────────────────────────────────────────────────────────
   Usa el patrón de modal del proyecto: .modal-overlay es el fondo fijo, .modal la tarjeta y
   .open lo abre. Lo de acá es solo el interior de la lista. */
.nu-cats-fila{display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--ui-linea2)}
.nu-cats-fila:last-of-type{border-bottom:none}
.nu-cats-nombre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;color:var(--ui-titulo);font-size:13.5px}
.nu-cats-cuenta{font-size:12px;color:var(--ui-tenue);white-space:nowrap}
.nu-cats-edit{flex:1;min-width:0}
.nu-cats-nueva{display:flex;gap:8px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--ui-linea)}
.nu-cats-nueva .form-control{flex:1;min-width:0}
.nu-cats-vacio{font-size:var(--t-base);color:var(--ui-tenue);text-align:center;padding:18px 0}
/* ⚠️ SIN TAMAÑO PROPIO (lo sacó la revisión): tenía `font-size:12px` en duro, y una regla sobre
   el elemento le gana a lo que hereda del padre — así que la nota seguía a 12 px por más que
   `.nu-cats-pie` dijera `--t-base`. Pablo pidió el tamaño de texto NORMAL. */
.nu-cats-nota{color:var(--ui-texto2)}
/* (`.nu-cats-btn` era del botón de la cabecera, que se fue el 07/10) */
/* El pie del modal del proyecto alinea todo a la derecha; acá la nota va a la izquierda. */
/* (la regla de `#catsModal` se fue con el modal, el 07/10) */
@media(max-width:600px){
  .nu-cats-cuenta{display:none}
  .nu-cats-nueva{flex-wrap:wrap}
}


/* Bolita de pendientes del menú lateral. Va en nunio.css porque es lo único que cargan
   las 14 pantallas, y el menú es de todas. El número lo pone el servidor. */
.menu-bolita {
  display: none; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: auto;
  border-radius: 10px; background: var(--estado-error, #ef4444); color: #fff;
  font-size: 11.5px; font-weight: 700; line-height: 1;
}
.nav-item { display: flex; align-items: center; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   EL LOGO DEL MENÚ · ícono + «nunio», y debajo el nombre de la sección
   ──────────────────────────────────────────────────────────────────────────────────────────────
   🔴 LA SANGRÍA DE 34 px NO ESTÁ ELEGIDA A OJO: es dónde empieza la palabra «nunio» dentro de la
      imagen —al 29,2 % de sus 117 px de ancho—, medido contando píxeles. Así el nombre de la
      sección arranca exactamente debajo de la «n», como pidió Pablo. Si cambia la imagen, hay
      que volver a medir: es un número atado a ESE archivo, no una preferencia.
   ⚠️ Va acá y no en el <style> de cada pantalla por dos motivos: `style.css` pone
      `.sidebar-logo{display:flex}` con la misma fuerza, y esta hoja se carga DESPUÉS en las 26;
      y porque 22 copias de la misma regla es como terminan 22 menús distintos.
   ⚠️ `height` fijo y `width:auto`: la imagen no se deforma a ningún ancho de pantalla.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
/* 🔴 EL SELECTOR EMPIEZA CON «body» A PROPÓSITO, igual que el «body .sidebar» de más
   arriba, y no es adorno: OCHO pantallas redefinen «.sidebar-logo» en su propio <style>
   —asesoras, crm, dashboard,
   ia, integraciones, lienzo, numeros, seguimientos— y DOCE cargan ese <style> DESPUÉS de esta
   hoja. Donde las dos cosas coinciden (integraciones.html) el empate de fuerza lo ganaba el
   <style> de la pantalla y el menú salía con el logo y la sección UNO AL LADO DEL OTRO,
   desbordando los 230 px — medido: borde derecho 242 contra 230. Con «body» delante esta regla
   pesa más y ya no depende del orden en que cada pantalla cargue sus cosas. */
body .sidebar-logo { display: block; }
/* ⚠️ 37,5 px = los 30 de antes + 25 %, como pidió Pablo el 05/10. `width:auto` para que no
   se deforme: el ancho sale solo de la proporción del archivo (233×60). */
body .sidebar-logo .logo-nunio { display: block; height: 37.5px; width: auto; max-width: 100%; }
/* ⚠️ SIN SANGRÍA (Pablo, 05/10). Antes eran 34 px, que alineaban el texto con la «n» de
   «nunio»; ahora va alineado con el borde izquierdo del ÍCONO, o sea con el de la imagen. */
body .sidebar-logo .logo-seccion { display: block; margin-top: 5px; padding-left: 0;
  font-size: var(--t-micro, 11px); color: rgba(255, 255, 255, .55); line-height: 1.2; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   EL BOTÓN DE «CERRAR SESIÓN» DEL MENÚ · uno solo, para las 26 (Pablo, 05/10)
   ──────────────────────────────────────────────────────────────────────────────────────────────
   🔴 POR QUÉ ESTÁ ACÁ Y NO EN `style.css`: seis pantallas —asesoras, crm, ia, lienzo, numeros,
      seguimientos— son AUTOCONTENIDAS y NO cargan esa hoja. Un estilo «común» que seis pantallas
      no cargan no es común. `nunio.css` es la única que cargan las 26.
   🔴 POR QUÉ EL COLOR LLEVA UN LITERAL DE RESERVA DENTRO DEL `var()`: ahí estaba el defecto.
      Esas seis tenían un parche que pedía `var(--ui-linea)`, token que vive solo en `style.css`.
      Un `var()` vacío vuelve la declaración «inválida en tiempo de cómputo» y el navegador tira
      la declaración ENTERA: medido, el botón quedaba en `0px none`. Ninguna regla decía «sin
      borde»; el borde se caía porque su color no existía. Con la reserva eso no puede repetirse.
   ⚠️ El selector empieza con `body` porque NUEVE pantallas redefinen `.btn` en su propio <style>
      y DOCE cargan ese <style> después de esta hoja. Con `body` delante la regla común pesa más
      y deja de depender del orden de carga.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --menu-boton-borde: rgba(255, 255, 255, .28); }   /* el borde de los botones del menú */

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   LOS BOTONES DEL PIE DEL MENÚ, TODOS DEL MISMO TAMAÑO (Pablo, 05/10)
   ──────────────────────────────────────────────────────────────────────────────────────────────
   🔴 «Cerrar sesión» traía su ancho en un `style=` INLINE en 22 de las 26 pantallas; solo cuatro
      lo escribían como regla. «Mi perfil» lo crea `common.js` y no tiene ese inline, así que salía
      de 95 px al lado de uno de 198. La forma de un botón que aparece en las 26 pantallas no puede
      vivir en el HTML de cada una.
   ⚠️ Se fija también `padding` y `font-size`: el inline del logout no los trae, así que esta regla
      gobierna a los dos y quedan idénticos. Sin eso, uno tomaría `btn-sm` (5px 12px) y el otro la
      regla de su pantalla (6px 12px), y la diferencia se nota justo porque están pegados.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
/* 🔴 `width:100%` y `margin-top:8px` SE FUERON DE ACA (Pablo, 07/10). Desde el 07/10 el pie es
   un `grid` de dos columnas definido en `nunio-barras.css`: el ancho lo da la columna y la
   separacion la da el `gap`. Dejarlos aca obligaba a pelearlos con `!important` desde la otra
   hoja. La forma (relleno, borde, color, redondeo) sigue viviendo aca; la DISPOSICION, alla. */
body .sidebar-footer .btn,
body .sidebar-footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: var(--t-chico, 12.5px);
  font-weight: var(--p-medio, 600);
  font-family: inherit;
  cursor: pointer;
  line-height: 1.3;
}
/* 🔴 ACA HABIA UN `margin-top:8px` PARA EL BOTON QUE SIGUE AL ESTADO DE LA LINEA, y era el
   que rompia el pie nuevo: `body .sidebar-footer .wa-status-pill + .btn` pesa (0,3,1), EXACTAMENTE
   lo mismo que `body .sidebar .sidebar-footer .btn` de `nunio-barras.css`. Con especificidades
   empatadas gana la hoja que se cargue ultima, y ese orden cambia de pantalla en pantalla: medido,
   el pie daba 72 px en crm, dashboard y numeros y 80 px en metricas, messages, settings,
   integraciones y catalogo, con los dos botones de distinta altura. Ahora la separacion la da el
   `gap` del grid, en un solo lugar. */

body .sidebar .btn-outline,
body .sidebar-footer .btn,
body .sidebar-footer button {
  border: 1px solid var(--menu-boton-borde, rgba(255, 255, 255, .28));
  background: transparent;
  /* 🔴 EL COLOR TAMBIÉN, Y NO ES DE ADORNO. Agrupando las 24 por su pinta completa salieron
     TRES grupos: blanco en 12, rgba(255,255,255,.75) en 6 y rgb(15,23,42) en las seis
     autocontenidas — azul casi negro sobre el menú oscuro, porque su `.btn{color:var(--ink)}`
     usa el color de texto de página, pensado para fondo claro. Con el borde arreglado seguían
     viéndose distinto, que es lo que Pablo pidió que no pasara. */
  color: var(--marca-encima, #fff);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   LA LISTA DE BOTS · Automatizaciones (fase 1, Pablo 06/10)
   ──────────────────────────────────────────────────────────────────────────────────────────────
   ⚠️ Clases con prefijo `au-`, no `.bot` ni `.card`: esta pantalla ya carga el árbol con sus
      propias clases, y un nombre corto acá chocaría con uno de allá. Ya me pasó que un componente
      heredara el `.btn` de la pantalla que lo hospeda y se viera distinto en cada una.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.au-bots { display: flex; flex-direction: column; gap: 8px; }
.au-bot {
  display: grid; grid-template-columns: 1fr 120px 112px 1fr; gap: 12px; align-items: center;
  padding: 11px 13px; background: var(--ui-hondo); border: 1px solid var(--ui-linea);
  border-radius: 9px; border-left: 3px solid var(--marca);
}
.au-bot.con-arbol { border-left-color: var(--marca-acento); }
.au-bot .au-nom b { font-size: var(--t-base, 13.5px); font-weight: 600; }
.au-bot .au-nom small {
  display: block; font-size: var(--t-micro, 11px); color: var(--ui-tenue);
  font-weight: 400; margin-top: 2px;
}
.au-bot .au-pz { font-size: var(--t-micro, 11px); line-height: 1.6; }
.au-bot .au-pz b { font-weight: 600; color: var(--ui-texto2); }
.au-bot .au-no { color: var(--ui-tenue2); }
.au-bot .au-usa { font-size: var(--t-micro, 11px); color: var(--ui-tenue); line-height: 1.7; }
.au-etq {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: var(--t-micro, 11px); font-weight: 600;
}
.au-arbol { background: var(--marca-tenue); color: var(--marca-texto); }
.au-sin { background: rgba(156, 163, 175, .13); color: var(--ui-tenue2); }
.au-chip {
  display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--marca-tenue);
  color: var(--marca-texto); font-weight: 600; margin: 1px 3px 1px 0;
}
.au-chip.apagado { background: rgba(156, 163, 175, .13); color: var(--ui-tenue2); }
/* el aviso del texto repetido: es el dato que justifica la fase 2, así que se ve */
.au-rep {
  margin: -3px 0 4px; padding: 7px 12px; border-radius: 0 0 8px 8px;
  background: var(--estado-alerta-tenue, rgba(245, 158, 11, .16));
  border-left: 3px solid var(--estado-alerta, #f59e0b);
  font-size: var(--t-micro, 11px); line-height: 1.55; color: var(--ui-texto2);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   UN PASO ARCHIVADO DEL ÁRBOL (Pablo, 06/10)
   ──────────────────────────────────────────────────────────────────────────────────────────────
   🔴 EN GRIS Y NUNCA EN ROJO. Un paso con `activo = 0` no atiende a nadie: ni se le reprochan
      problemas ni compite por la atención con los que sí están contestando. Se ve —porque
      archivar no es borrar y hay que poder recuperarlo— pero se ve apagado.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.bt-nodo.archivado rect {
  fill: var(--ui-hondo, #f0f2f5);
  stroke: var(--ui-linea, #e0e0e0);
  stroke-dasharray: 4 3;
  opacity: .55;
}
.bt-nodo.archivado text { fill: var(--ui-tenue2, #6a6a76); opacity: .75; }
.bt-nodo.archivado:hover rect { opacity: .8; }


/* ── MENÚ DE DOS NIVELES · grupos desplegables (Pablo, 07/10) ──────────────────────
   🔴 VA EN ESTA HOJA, NO EN CADA PANTALLA. El CSS del menú está copiado dentro de 23 archivos
      HTML; meter esto ahí serían 23 lugares donde olvidarse de uno. `nunio.css` la cargan todas
      las que tienen menú menos `costos.html`, que no está en el menú desde agosto.
   ⚠️ La cabecera es un <button>: hereda la tipografía a mano porque los botones NO heredan la
      fuente del documento, y sin esto la única línea del menú sin Poppins habría sido justo ésta.
   ⚠️ Mismo alto que una opción normal (min-height de .nav-item) y mismos colores: lo único que
      agrega este bloque es la flecha, la sangría y el abrir/cerrar. */
.sidebar-nav .nav-grupo{width:100%;background:transparent;border:0;border-left:3px solid transparent;
  font-family:inherit;font-size:var(--t-base,13.5px);text-align:left;appearance:none}
/* 🔴🔴 SOLO EL ÍTEM ACTIVO VA EN BLANCO (Pablo, 12/10) ─────────────────────────────────
   La cabecera de grupo es un <button>, y `style.css` trae `.sidebar .btn, .sidebar button
   { color: var(--marca-encima,#fff) }` — (0,1,1) — que le ganaba a `.nav-item` — (0,1,0) —
   porque el bloque de arriba NO declaraba color. Resultado medido el 12/10 en la copia, en
   `/catalogo#productos`: CUATRO renglones en blanco a la vez —«Catálogo» (donde estoy),
   «Productos» (el activo) y además «Agentes» y «Automatizaciones», que ni siquiera tienen la
   clase `aqui`—. Un menú donde cuatro cosas gritan igual no dice dónde estás.
   ⚠️ Y NO SE VEÍA IGUAL EN TODAS: el Dashboard no carga `style.css`, así que ahí las cabeceras
      ya salían grises. El mismo menú con dos aspectos según la pantalla.
   ⚠️ `.sidebar .sidebar-nav .nav-grupo` son TRES clases (0,3,0): gana a `style.css` por
      especificidad y no por orden de carga, que cambia entre pantallas (en `/catalogo` las
      hojas llegan en otro orden que en `/settings`).
   ⚠️ El hover se vuelve a declarar acá abajo: sin esto, la regla de (0,3,0) también le ganaría
      a `.nav-item:hover` — (0,2,0) — y la cabecera quedaría muerta al pasar el ratón, que es
      justo el renglón que hay que pulsar para abrir el grupo. */
.sidebar .sidebar-nav .nav-grupo{color:rgba(255,255,255,.6)}
.sidebar .sidebar-nav .nav-grupo:hover{color:var(--marca-encima,#fff)}
/* 🔴 LA CABECERA TAMBIÉN SE REALZA AL PASAR EL RATÓN (07/10, por la revisión). El
   `background:transparent` de arriba pesa lo mismo que `.nav-item:hover` y, al ir después en el
   documento, le ganaba: era el único renglón del menú que no respondía, y es justo el que hay que
   pulsar para abrir el grupo. */
.sidebar-nav .nav-grupo:hover{background:rgba(255,255,255,.07)}
/* 🔴 LA CABECERA DEL GRUPO DONDE ESTOY TAMBIÉN VA EN GRIS (Pablo, 12/10). Acá decía
   `color:#fff`, y eso ponía DOS renglones en blanco a la vez: la cabecera «Catálogo» y su hijo
   «Productos». Dónde estoy ya lo dicen el grupo desplegado y el hijo marcado; el blanco queda
   para uno solo. La clase `aqui` se conserva porque `initSidebar` la usa para decidir qué grupo
   abrir, y quitarla del CSS no la quita del DOM. */
.sidebar .sidebar-nav .nav-grupo.aqui{color:rgba(255,255,255,.6)}
.sidebar .sidebar-nav .nav-grupo.aqui:hover{color:var(--marca-encima,#fff)}
.sidebar-nav .nav-flecha{margin-left:auto;flex:0 0 auto;width:6px;height:6px;
  border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(-45deg);transition:transform .18s ease;opacity:.75}
.sidebar-nav .nav-grupo.abierto .nav-flecha{transform:rotate(45deg)}
.sidebar-nav .nav-hijos{display:none}
.sidebar-nav .nav-hijos.abierto{display:block}
/* 🔴 LA SANGRÍA Y EL ALTO, MEDIDOS EN EL NAVEGADOR (07/10). Con 44 px de sangría, «Agentes
   especializados» no entraba en los 230 px del menú y saltaba a dos líneas: la fila medía 59 px
   en vez de 44 y rompía la retícula. Con 34 y una sola línea entra, y si algún día una etiqueta
   no cupiera se corta con puntos suspensivos en vez de crecer hacia abajo. */
/* 🔴 LAS SUBOPCIONES VUELVEN A 44 px (Pablo, 07/10). Bajaron a 40 cuando el menú no daba; con
   «Configuración» y la pastilla arriba sobran 13 px en el peor caso, así que todas las filas
   del menú miden lo mismo otra vez. */
/* ⚠️ `text-overflow` NO dibuja los puntos con `display:flex` (07/10, por la revisión): el texto
   queda en un ítem flex anónimo y se cortaba a seco. El recorte se hace sobre el <span> de adentro. */
.sidebar-nav .nav-hijo{padding-left:34px;min-height:44px;display:flex;align-items:center;overflow:hidden}
.sidebar-nav .nav-hijo>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* 🔴 EL HIJO ACTIVO, LEGIBLE. `.nav-item.active` pinta el texto del color de la marca (#391af6)
   sobre `--marca-tenue`, que es ese mismo morado al 10 % — y encima del menú, que es #1a1a2e, el
   contraste medido daba 1,9: ilegible. Acá se marca como se marca todo lo demás de este menú:
   texto blanco, fondo apenas más claro y el filete de la marca a la izquierda. */
.sidebar-nav .nav-hijo.active,
.sidebar-nav .nav-item.active,
/* 🔴 Y EL DEL PIE (07/10, lo sacó la segunda revisión): «Configuración» vive en `.sidebar-footer`,
   FUERA de `.sidebar-nav`, así que se quedaba con el morado sobre morado de 1,9 de contraste —
   justo lo que este bloque dice arreglar, y en `/settings`, que es donde esa fila está activa. */
.sidebar-footer .nav-pie.active{background:rgba(255,255,255,.09);color:#fff;border-left-color:var(--marca,#391af6)}
/* ⚠️ LO DE ARRIBA TAMBIÉN ARREGLA LA OPCIÓN DE PRIMER NIVEL, QUE YA VENÍA MAL (medido 07/10 en la
   copia, con sesión): `.nav-item.active` del CSS viejo pinta el texto con `--marca` (#391af6) sobre
   `--marca-tenue`, que es ese mismo morado al 10 %. Encima del menú, que es #1a1a2e, eso da 1,9 de
   contraste y la opción donde estás parado es la úNICA que no se lee. Se ve en «Configuración»
   estando en Configuración. NO lo introdujo este cambio; se corrige acá porque es la misma pieza
   y porque dejar el menú a medias habría sido entregar un menú con la opción activa ilegible. */
.sidebar-nav .nav-hijo::before{content:'';position:absolute;left:21px;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.12)}
.sidebar-nav .nav-hijo{position:relative}
@media (prefers-reduced-motion: reduce){.sidebar-nav .nav-flecha{transition:none}}


/* ── EL MENÚ DEL NOMBRE, ARRIBA A LA DERECHA (Pablo, 07/10) ───────────────────────
   Se lleva «Mi perfil» y «Cerrar sesión», que ocupaban dos filas del pie del menú lateral.
   ⚠️ `position:relative` en el envoltorio, no en el badge: el badge existe en 16 pantallas con
      estilos propios y pisarle la posición rompería alguna. */
.nu-usuario{position:relative;display:inline-flex;align-items:center}
.nu-usuario .user-badge{cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:6px}
.nu-usuario .user-badge:focus-visible{outline:2px solid var(--marca,#391af6);outline-offset:2px;border-radius:7px}
.nu-flecha{width:6px;height:6px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);opacity:.6;flex:0 0 auto}
.nu-menu{position:absolute;top:calc(100% + 7px);right:0;z-index:60;min-width:168px;padding:5px;
  background:var(--ui-panel,#fff);border:1px solid var(--ui-linea,#e5e7eb);border-radius:var(--radio,10px);
  box-shadow:0 10px 30px rgba(15,23,42,.16);display:flex;flex-direction:column;gap:2px}
.nu-menu[hidden]{display:none}
.nu-menu button{appearance:none;background:transparent;border:0;border-radius:7px;cursor:pointer;
  font-family:inherit;font-size:var(--t-chico,12.5px);color:var(--ui-texto2,#374151);
  padding:9px 11px;text-align:left;width:100%}
.nu-menu button:hover{background:var(--ui-panel2,#f3f4f6);color:var(--ui-texto,#111827)}
.nu-menu button:focus-visible{outline:2px solid var(--marca,#391af6);outline-offset:-2px}
/* el pie del menú queda solo con el estado de WhatsApp: sin los dos botones sobra padding */


/* ── LA BARRA DE ARRIBA: estado de WhatsApp · ⚙ · nombre (Pablo, 07/10, opción A) ─────────
   🔴 LA PASTILLA CAMBIA DE FONDO, ASÍ QUE CAMBIA DE COLOR. En el pie del menú estaba sobre #1a1a2e
      y su regla es `color:rgba(255,255,255,.7)` con fondo `rgba(255,255,255,.05)`: tal cual, sobre
      la barra clara habría quedado blanco sobre blanco. Acá se redefine con los tokens de siempre.
      La regla vieja sigue viva para cualquier pantalla que aún la muestre en el pie. */
.nu-barra{display:inline-flex;align-items:center;gap:10px;margin-left:auto}
.nu-barra .wa-status-pill{background:var(--ui-panel2,#f3f4f6);color:var(--ui-texto2,#374151);
  border:1px solid var(--ui-linea,#e5e7eb);padding:5px 10px;white-space:nowrap}
.nu-cfg{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:var(--radio,8px);color:var(--ui-tenue,#6b7280);text-decoration:none;flex:0 0 auto}
.nu-cfg:hover{background:var(--ui-panel2,#f3f4f6);color:var(--ui-texto,#111827)}
.nu-cfg.aqui{background:var(--marca-tenue,rgba(57,26,246,.10));color:var(--marca,#391af6)}
.nu-cfg:focus-visible{outline:2px solid var(--marca,#391af6);outline-offset:2px}


/* ── «CONFIGURACIÓN», FIJA EN EL PIE DEL MENÚ (Pablo, 07/10) ────────────────────────
   🔴 Es la misma fila de siempre —mismo alto, mismo ícono, misma letra— pero vive FUERA de
      `.sidebar-nav`, que es el que rueda cuando un grupo se despliega. Por eso no se va de la
      vista aunque la lista de arriba no entre entera. */
.sidebar-footer{padding:0;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-footer .nav-pie{min-height:44px;padding:11px 16px;box-sizing:border-box;width:100%}


/* ── EL ESTADO DE WHATSAPP: logo + punto de color (Pablo, 07/10) ─────────────────────
   🔴 Los colores son los de los estados del CRM, no inventados: el verde y el rojo son los
      mismos `--estado-*` del resto del panel, y el amarillo el de aviso. */
.nu-wa{position:relative;display:inline-flex;align-items:center;color:#25D366;cursor:default;padding:3px}
.nu-wa-punto{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto;
  background:var(--ui-tenue2,#9ca3af)}
.nu-wa>.nu-wa-punto{position:absolute;right:0;bottom:1px;border:2px solid var(--ui-panel,#fff)}
.nu-wa-punto.ok{background:var(--estado-ok-punto,#10b981)}
.nu-wa-punto.medio{background:#f59e0b}
.nu-wa-punto.mal{background:var(--estado-error-punto,#ef4444)}
.nu-wa-punto.nada{background:var(--ui-tenue2,#9ca3af)}
/* el detalle: aparece al pasar el ratón o al enfocar con el teclado */
.nu-wa-detalle{position:absolute;top:calc(100% + 7px);right:0;z-index:70;min-width:216px;padding:9px 11px;
  background:var(--ui-panel,#fff);border:1px solid var(--ui-linea,#e5e7eb);border-radius:var(--radio,10px);
  box-shadow:0 10px 30px rgba(15,23,42,.16);color:var(--ui-texto,#111827);
  font-size:var(--t-chico,12.5px);text-align:left;cursor:default}
/* 🔴 OCULTO POR DEFECTO (07/10, lo sacó la segunda revisión). Faltaba esta línea: solo estaban
   la del atributo `hidden` —que el JavaScript no pone— y la del `:hover`, así que el panel
   colgaba abierto bajo la cabecera de las 26 pantallas sin que nadie pasara el ratón. Yo lo vi
   en mis propias capturas y lo leí como «el ratón quedó encima»: estaba siempre. */
.nu-wa-detalle{display:none}
.nu-wa-detalle[hidden]{display:none}
.nu-wa:hover .nu-wa-detalle,.nu-wa:focus-within .nu-wa-detalle{display:block}
.nu-wa-titulo{font-weight:650;margin-bottom:6px;color:var(--ui-texto,#111827)}
.nu-wa-fila{display:flex;align-items:center;gap:7px;padding:3px 0;white-space:nowrap}
.nu-wa-fila b{font-weight:600;color:var(--ui-texto2,#374151)}
.nu-wa-fila span:last-child{color:var(--ui-tenue,#6b7280);margin-left:auto;padding-left:10px}
.nu-wa-aparte{margin-top:7px;padding-top:6px;border-top:1px solid var(--ui-linea2,#f0f2f5);
  color:var(--ui-tenue2,#9ca3af);font-size:var(--t-micro,11.2px)}
/* el pie del menú ya no lleva padding: su única fila es «Configuración», de 44 px */
/* ⚠️ ACOTADO AL PIE NUEVO (lo sacó la revisión final): sin la clase, esto aplicaba a TODOS los
   pies, también en el instante entre el primer pintado y `initSidebar()`, y dejaba la pastilla
   vieja y «Cerrar sesión» pegados a los bordes. El `!important` sí hace falta: el `<style>` en
   línea de cada pantalla va después del `<link>` y gana por orden. */
.sidebar-footer.pie-nunio{padding:0 !important}


/* ── EL PIE DEL MENÚ: «Configuración» y el estado de WhatsApp, en una fila (Pablo, 07/10) ────
   🔴 El detalle de las líneas se abre HACIA ARRIBA Y HACIA LA DERECHA: el pie está pegado a la
      esquina de abajo a la izquierda, y el panel que venía cayendo hacia abajo y hacia la
      izquierda quedaba fuera de la pantalla. */
/* ⚠️ `display:flex` CON `!important`. Lo que SÉ: midiendo el pie en el navegador, el `display`
   calculado daba **grid**, el logo caía en una celda de 100 px y se veía encima de
   «Configuración»; con esta regla el pie quedó en una fila (Configuración 187 px, logo 25 px).
   Lo que NO sé: de qué regla salía ese grid — la revisión final volcó las cuatro variantes de
   `.sidebar-footer{…}` de los 26 HTML y de `style.css` y ninguna lo declara. Dejo el
   `!important` porque la medición en el navegador manda sobre el grep, y dejo escrito que la
   fuente del grid no está identificada en vez de inventarla. */
.sidebar-footer.pie-nunio{display:flex !important;align-items:center;gap:0;grid-template-columns:none !important}
.sidebar-footer.pie-nunio>*{width:auto}
.sidebar-footer.pie-nunio .nav-pie{flex:1;min-width:0}
.sidebar-footer.pie-nunio .nu-wa{flex:0 0 auto;margin-right:12px;color:#25D366}
.sidebar-footer.pie-nunio .nu-wa.solo{margin-left:16px}
.sidebar-footer.pie-nunio .nu-wa>.nu-wa-punto{border-color:#1a1a2e}
.sidebar-footer.pie-nunio .nu-wa-detalle{top:auto;right:auto;bottom:calc(100% + 9px);left:0}

/* ⚠️ En «Categorías», la cabecera no muestra los botones de PRODUCTOS. Va por clase y no tocando
   cada botón porque «▤ Filas» lo crea `NuTabla` después de que la sección ya cambió, y así se
   escapaba. El menú del nombre se queda. */
body.nu-en-categorias .header-right > *:not(.nu-usuario){display:none}

/* ⚠️ El campo de crear ahora va ARRIBA de la lista (Pablo, 07/10): separación por abajo, no por
   arriba, para que no quede pegado a las filas. */
.nu-cats-seccion .nu-cats-nueva{margin:0 0 12px;display:flex;gap:8px}
.nu-cats-seccion .nu-cats-nueva input{flex:1;min-width:0}

/* ── «CATEGORÍAS» · la sección, con los componentes de Contactos y Ventas (Pablo, 07/10) ────
   🔴 NADA PROPIO QUE YA EXISTA: la tarjeta es `.card`, la tabla es `.nu-tabla` con sus
      `col-nombre`, `col-texto` y `col-acciones`, el botón es `.btn.btn-primary` y el buscador un
      `.form-control`. Acá solo queda lo que no existía: cómo se reparte la barra de arriba y el
      botón de acción de fila. Ni un tamaño en píxeles sueltos ni un color fuera de los tokens. */
.nu-cats-barra{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.nu-cats-barra .nu-cats-buscar{max-width:320px;flex:1 1 200px}
.nu-cats-barra .btn-primary{margin-left:auto}
.nu-cats-card{padding:0;overflow:auto}
.nu-cats-intro{font-size:var(--t-base);color:var(--ui-tenue);margin:0 0 14px;line-height:1.5;max-width:70ch}
/* 🔴 la nota va con el tamaño de texto NORMAL, no con el chico (Pablo, 07/10) */
.nu-cats-pie{margin-top:12px;font-size:var(--t-base);color:var(--ui-texto2)}
.nu-cats-pie a{color:var(--marca);text-decoration:none}
.nu-cats-pie a:hover{text-decoration:underline}
.nu-cats-vacio{padding:26px 10px;text-align:center;color:var(--ui-tenue2)}
.nu-tabla .nu-cats-tr-nueva td{background:var(--ui-panel2)}
.nu-tabla .nu-cats-edit{height:30px}
.nu-cats-sinacc{color:var(--ui-tenue2)}

/* 🔴 BOTÓN DE ACCIÓN DE FILA: discreto, y el rojo SOLO al pasar el ratón (Pablo, 07/10).
   Antes el de borrar era `.btn-danger`, rojo permanente: una tabla con diez categorías era una
   columna de botones rojos gritando. El color sale de los mismos tokens de estado del CRM. */
.nu-tabla .nu-acc{background:transparent;border:1px solid transparent;border-radius:var(--radio,8px);
  cursor:pointer;padding:3px 6px;font-size:var(--t-chico);line-height:1;color:var(--ui-tenue);
  opacity:.72;transition:opacity .15s,background .15s,color .15s}
.nu-tabla .nu-acc + .nu-acc{margin-left:2px}
.nu-tabla tr:hover .nu-acc{opacity:1}
.nu-tabla .nu-acc:hover{background:var(--ui-panel2);border-color:var(--ui-linea);color:var(--ui-texto)}
/* ⚠️ LOS TOKENS QUE EXISTEN DE VERDAD (lo sacó la revisión): yo había escrito
   `--estado-error-fondo` y `--estado-error-texto`, que **no están definidos en ninguna hoja**, así
   que lo que se pintaba eran los dos colores de respaldo —dos colores inventados, justo lo que
   Pablo pidió no hacer— y en modo noche el hover quedaba casi blanco, porque el tema redefine los
   tokens pero no los respaldos. La familia real es `--estado-error`, `--estado-error-punto` y
   `--estado-error-tenue`, y esas tres sí cambian con el tema. */
.nu-tabla .nu-acc-borrar:hover{background:var(--estado-error-tenue);
  border-color:var(--estado-error-punto);color:var(--estado-error)}
.nu-tabla .nu-acc:focus-visible{outline:2px solid var(--marca);outline-offset:1px;opacity:1}
@media (prefers-reduced-motion: reduce){.nu-tabla .nu-acc{transition:none}}
/* El ícono hereda el color del botón, así que el rojo del hover le llega solo. Acotado a las
   dos pantallas que hoy ponen un <svg> adentro; Categorías sigue con su texto, intacta. */
.nu-tabla .col-acciones .nu-acc .nu-ico,.product-card .nu-acc .nu-ico{display:block}

/* ── EL MISMO BOTÓN, PERO EN LA TARJETA DE PRODUCTOS ─────────────────────────────
   ⚠️ ES UNA COPIA A PROPÓSITO, no una generalización del selector de arriba. Quitarle el
      `.nu-tabla` habría servido para las dos y es lo que yo había hecho, pero ese selector es
      el de Categorías, que Pablo pidió no volver a tocar hoy (07/10, 23:00). Seis líneas
      repetidas valen menos que mover una regla aprobada hace dos horas. Queda anotado para
      unificarlas cuando él abra esa puerta. */
.product-card .nu-acc{background:transparent;border:1px solid transparent;border-radius:var(--radio,8px);
  cursor:pointer;padding:3px 6px;font-size:var(--t-chico);line-height:1;color:var(--ui-tenue);
  opacity:.72;transition:opacity .15s,background .15s,color .15s;
  display:inline-flex;align-items:center;justify-content:center}
/* ⚠️ Sin `margin-left`: `.product-card-actions` ya trae `gap:6px` y los dos se sumaban, así que
   los mismos tres botones quedaban a 8 px en tarjetas y a 2 px en filas. */
.product-card-actions{gap:6px}
.product-card:hover .nu-acc{opacity:1}
.product-card .nu-acc:hover{background:var(--ui-panel2);border-color:var(--ui-linea);color:var(--ui-texto)}
.product-card .nu-acc-borrar:hover{background:var(--estado-error-tenue);
  border-color:var(--estado-error-punto);color:var(--estado-error)}
.product-card .nu-acc:focus-visible{outline:2px solid var(--marca);outline-offset:1px;opacity:1}
@media (prefers-reduced-motion: reduce){.product-card .nu-acc{transition:none}}

/* ── PRODUCTOS: lo que la tarjeta necesita y no tenía (Pablo, 07/10) ──────────────────
   El hueco de la foto deja de ser un emoji de 40 px: es el ícono de línea del menú sobre el
   mismo gris de las demás cajas vacías del CRM. */
.pc-sinfoto{width:100%;height:140px;background:var(--ui-linea2);display:flex;
  align-items:center;justify-content:center;color:var(--ui-tenue2)}
/* ⚠️ EL MISMO GRIS EN LAS DOS VISTAS (lo sacó la revisión): en filas el ícono heredábamos el
   color del texto de la celda y salía de otro gris. Mismo ícono, mismo color. */
.nu-tabla .nu-sinfoto{color:var(--ui-tenue2)}
/* La cinta de la esquina: la pantalla la mostraba y el rediseno la había perdido. Ahora con
   los tokens de estado del CRM, no con el `#ef4444` escrito a mano que tenía antes. */
.pc-cinta{position:absolute;top:8px;right:8px;z-index:1;background:var(--estado-error);
  color:#fff;font-size:var(--t-micro);font-weight:var(--p-medio,600);
  padding:2px 8px;border-radius:var(--radio,6px)}
/* El producto CON conocimiento cargado se distingue de un vistazo, como antes. Con el token
   de «salió bien» del sistema, no con el `#166534` que estaba escrito a mano. */
.product-card-meta .pc-con-rag{color:var(--c-bien)}
/* La etiqueta de estado es un `.badge` del sistema, y además se puede apretar. */
/* ⚠️ `flex-shrink:0` y `nowrap`: es hija de un flex con `space-between`, y con un nombre de
   producto largo la palabra se partía en dos renglones dentro de la pastilla. */
.pc-estado{border:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;
  gap:5px;flex-shrink:0;white-space:nowrap}
.pc-estado .pc-punto{width:7px;height:7px;border-radius:50%;background:currentColor;display:block}
/* Los cinco datos de abajo: un solo tamaño y el ícono alineado con su número. */
.product-card-meta span{display:inline-flex;align-items:center;gap:4px}
.product-card-meta .nu-ico{opacity:.75}
/* Vacío de la grilla: el mismo ícono de línea, no un emoji gigante. */
.pc-vacio{text-align:center;color:var(--ui-tenue2);padding:60px 20px;grid-column:1/-1}
.pc-vacio .nu-ico{color:var(--ui-tenue2);margin-bottom:12px}
.pc-vacio h3{color:var(--ui-texto);font-weight:var(--p-medio,600);font-size:var(--t-titulo);margin-bottom:6px}
.pc-vacio p{font-size:var(--t-base);margin:0}

/* ⚠️ «Productos» no necesita media tabla: `.nu-tabla` es `table-layout:fixed` y, con solo
   `col-acciones` acotada, «Categoría» y «Productos» se repartían el resto mitad y mitad. */
/* 🔴 POR CLASE, NO POR POSICIÓN (lo sacó la revisión, y lo reproduje en pantalla). Esto decía
   `td:nth-child(2)` para acotar la columna «Productos». Al poner `colspan="2"` en la fila que se
   edita, la SEGUNDA celda de esa fila pasa a ser la de **acciones**, así que esta regla le
   clavaba 9em (0,3,1) y le ganaba al `width:auto` del arreglo (0,3,0). Resultado medido: la caja
   quedaba en 131 px, los botones necesitaban 155 y se desbordaban 24 px **encima del campo** —
   `elementFromPoint` sobre el borde derecho del campo devolvía «Guardar», o sea que un clic para
   poner el cursor al final del nombre dispara el renombrado. Apuntando por clase no puede pasar. */
/* ⚠️ `rem`, NO `em`: en un `th` el `em` se mide contra los 11,5 px del encabezado, asi que
   9em daban 103 px y «12 productos» a 14,58 px ya no entraba. Es la misma trampa que la
   columna de acciones. */
.nu-cats-card .nu-tabla th.col-texto,.nu-cats-card .nu-tabla td.col-texto{width:9rem}

/* ⚠️ La celda de acciones de la fila que se edita: los dos botones en UNA línea, sin cortarse y
   dentro de la tarjeta. `col-acciones` mide 136 px y «Guardar»+«Cancelar» no caben, así que acá
   se le da el ancho que necesita — el campo de texto cede, porque toma las dos columnas con
   `colspan`. Los botones son los de siempre: `.btn-primary` y `.btn-secondary`. */
/* ⚠️ El `display:flex` va en el <div> de adentro, no en el <td>: una celda con `display:flex` deja
   de ser celda —el navegador la envuelve en una celda anónima— y el borde de abajo y el fondo
   quedan cortos, además de perder el `vertical-align:middle`. */
/* 🔴 EL ANCHO LO MANDA LA COLUMNA, NO LA CELDA. Con `table-layout:fixed` el reparto se decide
   con la PRIMERA fila (el <thead>), así que ni `width:auto` ni `width:1%` en la celda de la fila
   que se edita hacían nada: la caja seguía en los 136 px de `col-acciones` y los dos botones, que
   necesitan ~155, se desbordaban 19-24 px **encima del campo** — medido con `elementFromPoint`,
   un clic en el borde derecho del nombre dispara «Guardar». Lo único que lo arregla es darle a la
   columna de esta tabla el ancho que los botones necesitan; las filas normales quedan con más
   aire para sus dos íconos, que no molesta.
   ⚠️ Yo mismo había escrito esto en un comentario del JS y después intenté `width:auto` igual. */
/* ⚠️ EN `rem`, NO EN `em`: el ancho de la columna lo fija el <th>, y la letra del <th> es la
   PEQUEÑA del encabezado (11,5 px). Con `11.5em` el navegador calculó 11,5 × 11,5 = **132 px**
   —medido— en vez de los ~167 que yo esperaba, y los botones seguían desbordándose sobre el
   campo. `rem` no depende de la letra del elemento. */
.nu-cats-card .nu-tabla .col-acciones{width:11rem}
.nu-cats-card .nu-tabla .nu-cats-acc-edit{white-space:nowrap}
.nu-cats-acc-caja{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.nu-cats-acc-caja .btn{flex:0 0 auto}

/* ── EL TAMAÑO DE LETRA DE LAS TABLAS (Pablo, 07/10) ───────────────────────
   ⚠️ MEDIDO EN PANTALLA, no en la hoja: el texto normal de Mensajes da **14,58 px**
      (`--t-base` con la escala 1,08) y la tabla daba **13**. Ya no hay regla propia de
      Categorías: el tamaño lo pone `.nu-tabla` arriba, con el token, para TODAS las tablas
      del CRM — Contactos, Ventas, Catálogo en filas, Categorías y CRM a la vez.
   🔴 Los ENCABEZADOS se quedan chicos a propósito (11,5 px): eso Pablo lo pidió explícito y
      esa regla no se toca. */

/* ── EL EDITOR DE PRODUCTO: el hueco de la foto de un paquete (Pablo, 07/10) ────────────────
   Antes era un 📷 de 22 px y una etiqueta de 10 px, los dos escritos en el HTML. Ahora el ícono
   del juego y la etiqueta con el token más chico de la escala. */
.pk-hueco{color:var(--ui-tenue2);display:flex;align-items:center;justify-content:center}
.pk-hueco-et{font-size:var(--t-micro);color:var(--ui-tenue2);margin-top:2px}
.media-upload-icon{color:var(--ui-tenue2);display:flex;align-items:center;justify-content:center}
/* ⚠️ ACOTADO AL EDITOR (lo sacó la revisión): `.btn-remove-fu` lo usa también Mensajes para
   borrar una etiqueta, y esa pantalla no entra en este trabajo. */
#productModal .btn-remove-fu,#productModal .media-item-remove{display:inline-flex;align-items:center;justify-content:center}

/* ── EL MISMO BOTÓN DISCRETO, EN VENTAS (Pablo, 07/10) ────────────────────────
   ⚠️ OTRA COPIA A PROPÓSITO, por lo mismo que la de Productos: generalizar `.nu-acc` toca el
      selector de Categorías, que Pablo pidió no volver a mover. Las tres se unifican el día
      que él abra esa puerta; está anotado.
   ⚠️ En celular `.tarjeta-venta .v-acciones .btn` pide 44×44 px para el dedo: eso se respeta
      abajo, porque un ícono de 17 px no se toca con el pulgar. */
.v-acciones .nu-acc{background:transparent;border:1px solid transparent;border-radius:var(--radio,8px);
  cursor:pointer;padding:3px 6px;font-size:var(--t-chico);line-height:1;color:var(--ui-tenue);
  opacity:.72;transition:opacity .15s,background .15s,color .15s;
  display:inline-flex;align-items:center;justify-content:center}
.v-acciones .nu-acc + .nu-acc{margin-left:2px}
tr:hover .v-acciones .nu-acc{opacity:1}
.v-acciones .nu-acc:hover{background:var(--ui-panel2);border-color:var(--ui-linea);color:var(--ui-texto)}
.v-acciones .nu-acc-borrar:hover{background:var(--estado-error-tenue);
  border-color:var(--estado-error-punto);color:var(--estado-error)}
.v-acciones .nu-acc:focus-visible{outline:2px solid var(--marca);outline-offset:1px;opacity:1}
/* ⚠️ `margin-left:0` en celular (lo sacó la revisión): `.tarjeta-venta .v-acciones` ya trae
   `gap:8px` y los dos se sumaban — 10 px en la tarjeta contra 2 px en la fila. Es el MISMO
   defecto que ya se había cazado en la tarjeta de Productos; se repitió acá. */
@media(max-width:768px){.tarjeta-venta .v-acciones .nu-acc{min-width:44px;min-height:44px;opacity:1}
  .tarjeta-venta .v-acciones .nu-acc + .nu-acc{margin-left:0}}
@media (prefers-reduced-motion: reduce){.v-acciones .nu-acc{transition:none}}

/* ── EL MISMO BOTÓN DISCRETO, EN CALENDARIO (Pablo, 07/10) ─────────────────────
   ⚠️ ACOTADO A `#apptList`, el cuerpo de la tabla de citas: la cuarta copia, por lo mismo que
      las otras tres —generalizar `.nu-acc` toca el selector de Categorías, que Pablo pidió no
      volver a mover—. `calendar.html` no tiene bloque <style> propio donde ponerla.
      Unificar las cuatro queda anotado. */
#apptList .nu-acc{background:transparent;border:1px solid transparent;border-radius:var(--radio,8px);
  cursor:pointer;padding:3px 6px;font-size:var(--t-chico);line-height:1;color:var(--ui-tenue);
  opacity:.72;transition:opacity .15s,background .15s,color .15s;
  display:inline-flex;align-items:center;justify-content:center}
#apptList .nu-acc + .nu-acc{margin-left:2px}
#apptList tr:hover .nu-acc{opacity:1}
#apptList .nu-acc:hover{background:var(--ui-panel2);border-color:var(--ui-linea);color:var(--ui-texto)}
#apptList .nu-acc-borrar:hover{background:var(--estado-error-tenue);
  border-color:var(--estado-error-punto);color:var(--estado-error)}
#apptList .nu-acc:focus-visible{outline:2px solid var(--marca);outline-offset:1px;opacity:1}
#apptList .nu-acc .nu-ico{display:block}
/* Los dos botones del pie de la ventana de la cita, y la cruz de cerrar. */
#apptModal [data-ico]{display:inline-flex;vertical-align:-3px}

/* ── EL MISMO BOTÓN DISCRETO, EN EMBUDOS (Pablo, 08/10) ──────────────────────
   ⚠️ La quinta copia. Unificar las cinco exige mover el selector de Categorías, que Pablo
      pidió no volver a tocar hoy; está anotado. */
.funnel-card .nu-acc{background:transparent;border:1px solid transparent;border-radius:var(--radio,8px);
  cursor:pointer;padding:3px 6px;font-size:var(--t-chico);line-height:1;color:var(--ui-tenue);
  opacity:.72;transition:opacity .15s,background .15s,color .15s;
  display:inline-flex;align-items:center;justify-content:center}
/* ⚠️ SIN `margin-left`: `.funnel-card-actions` ya trae `gap:6px` y los dos se sumaban. Es la
   TERCERA vez que caigo en lo mismo en esta tanda — Productos, Ventas y acá. */
.funnel-card:hover .nu-acc{opacity:1}
.funnel-card .nu-acc:hover{background:var(--ui-panel2);border-color:var(--ui-linea);color:var(--ui-texto)}
.funnel-card .nu-acc-borrar:hover{background:var(--estado-error-tenue);
  border-color:var(--estado-error-punto);color:var(--estado-error)}
.funnel-card .nu-acc:focus-visible{outline:2px solid var(--marca);outline-offset:1px;opacity:1}
.funnel-card .nu-acc .nu-ico{display:block}
/* ⚠️ LOS ID DE VERDAD (lo sacó la revisión, y lo reproduje): yo había escrito `#funnelModal`
   y `#funnelsList`, que **no existen** en esta pantalla — son `#modalOverlay`, `#aiModalOverlay`,
   `#suggestPreviewModal` y `#funnelsGrid`. Con los nombres inventados los 35 íconos se quedaban
   apoyados en la línea base, sin los −3 px. */
#funnelsGrid [data-ico],#modalOverlay [data-ico],#aiModalOverlay [data-ico],
#suggestPreviewModal [data-ico],.sidebar [data-ico],.header-right [data-ico]{display:inline-flex;vertical-align:-3px}
@media (prefers-reduced-motion: reduce){.funnel-card .nu-acc{transition:none}}

/* ── El botón «Pausar respuestas automáticas» en el celular (Pablo, 15/10) ──────────────────────
   El texto largo no entraba: se cortaba y tapaba el menú de la persona. Por debajo de 700 px se
   muestra el corto («Pausar» / «Reanudar») con su ícono, y el botón ya no empuja al menú. */
#btnPausaRespuestas .nu-pausa-corto{display:none}
@media (max-width: 700px){
  #btnPausaRespuestas{margin-right:6px !important;padding-left:10px;padding-right:10px;flex-shrink:0}
  #btnPausaRespuestas .nu-pausa-largo{display:none}
  #btnPausaRespuestas .nu-pausa-corto{display:inline}
  /* Y si la pantalla trae más botones arriba (Embudos: Filas, Números, Nuevo), el bloque de la derecha
     baja a una segunda línea en vez de empujar «Pausar» y el menú fuera de la pantalla. Donde todo
     entra, no cambia nada. */
  .header > .header-right{flex:1 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
}

/* ── Equipo: el botón «Guardar» quedaba cortado a la derecha (Pablo, 15/10) ──────────────────────
   La última columna traía `white-space:nowrap` en línea y los tres botones no entraban en la
   tarjeta. Se apilan, y la tabla se puede desplazar de costado si igual no entra.
   ⚠️ Apilarlos NO alcanzaba (medido en producción a 1366: tabla de 901 px en una tarjeta de 764, y
   «Guardar» en x = 1332–1450, fuera de la pantalla). Lo que ensanchaba la tabla eran los campos de
   texto con su ancho natural (~180 px cada uno): al 100 % de su celda, la tabla reparte el sitio. */
#usuarias{overflow-x:auto}
#usuarias table{width:100%}
#usuarias td input,#usuarias td select{width:100%;min-width:0;box-sizing:border-box}
#usuarias td:last-child{white-space:normal !important;min-width:96px}
#usuarias td:last-child .btn{display:block;width:100%;margin:3px 0}