/* CRM PyG Digital — estilos comunes. Ver DISENO.md */
@import url('/comun/lib/poppins/poppins.css');
:root{
  --fondo:#F4F5F9; --tarjeta:#FFFFFF; --borde:#E3E5EC; --txt:#1D2130; --txt2:#5D6475;
  --pri:#E35F0A; --pri-osc:#C24F06; --pri-txt:#FFFFFF; --peligro:#D93838; --ok:#0A8F2E;
  --verde:#099A0A; --naranja:#FF7620; --violeta:#663399;
  --radio:18px; --sombra:0 2px 10px rgba(20,25,40,.06); --sombra2:0 12px 40px rgba(20,25,40,.18);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--txt);font:400 16px/1.5 Poppins,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
h1,h2,h3{font-weight:700;line-height:1.25;margin:0 0 .5em}
h1{font-size:26px} h2{font-size:21px} h3{font-size:18px}
a{color:var(--pri-osc)}
img{max-width:100%}
.oculto,[hidden]{display:none!important}

/* ---------- estructura ---------- */
.pyg-barra{position:sticky;top:env(safe-area-inset-top,0);z-index:50;background:#fff;border-bottom:1px solid var(--borde);
  display:flex;align-items:center;gap:12px;padding:10px 16px;min-height:62px}
.pyg-barra h1{font-size:19px;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pyg-volver{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 10px;border-radius:12px;border:1px solid var(--borde);
  background:#fff;color:var(--txt);font:600 15px Poppins,sans-serif;text-decoration:none;cursor:pointer}
.pyg-volver:before{content:"‹";font-size:26px;line-height:1;margin-top:-3px}
.pyg-inicio{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--borde);
  background:#fff;color:var(--txt);font:600 14px Poppins,sans-serif;text-decoration:none;cursor:pointer}
.pyg-inicio span:first-child{font-size:16px}
@media (max-width:420px){.pyg-inicio{padding:0 9px}}
.pyg-logo{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--txt);text-decoration:none}
.pyg-puntos{display:inline-flex;gap:4px}.pyg-puntos i{width:10px;height:10px;border-radius:50%;display:block}
.pyg-puntos i:nth-child(1){background:var(--verde)}.pyg-puntos i:nth-child(2){background:var(--naranja);margin-top:-4px}.pyg-puntos i:nth-child(3){background:var(--violeta)}
.pyg-cuerpo{max-width:1100px;margin:0 auto;padding:20px 16px 150px}   /* el final deja lugar de sobra para los botones chicos del desarrollador, que nunca tapan la última tarjeta */
.grilla{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.fila{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}.fila>*{flex:1 1 220px}

/* ---------- tarjetas ---------- */
.tarjeta{background:var(--tarjeta);border-radius:var(--radio);box-shadow:var(--sombra);padding:20px;margin-bottom:16px;border:1px solid #EEF0F4}
.tarjeta h2,.tarjeta h3{display:flex;align-items:center;gap:6px}
.sub{color:var(--txt2);font-size:15px;margin:-4px 0 14px}
a.tarjeta{display:block;color:inherit;text-decoration:none;transition:transform .12s,box-shadow .12s}
a.tarjeta:hover{transform:translateY(-2px);box-shadow:var(--sombra2)}
.icono-grande{font-size:34px;line-height:1;margin-bottom:10px}

/* ---------- pestañas ---------- */
.pestanas{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none}
.pestanas::-webkit-scrollbar{display:none}
.pestanas button{flex:none;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--borde);background:#fff;color:var(--txt);
  font:600 15px Poppins,sans-serif;cursor:pointer;white-space:nowrap}
.pestanas button.activa{background:var(--txt);border-color:var(--txt);color:#fff}

/* ---------- migas de pan: dónde estás parado (regla fija 24-09: sección activa siempre visible) ---------- */
.pyg-migas{display:flex;flex-wrap:wrap;gap:3px;align-items:center;padding:7px 16px 0;max-width:1100px;margin:0 auto;font-size:12.5px;color:var(--txt2)}
.pyg-migas a{color:var(--txt2);text-decoration:none}
.pyg-migas a:hover{text-decoration:underline}
.pyg-migas .act{color:var(--txt);font-weight:600}
.pyg-migas .sep{opacity:.45;margin:0 1px}

/* ---------- botón que abre una sección: queda marcado con otro color mientras está abierta
   (regla fija 24-09, Christian). Usar esta MISMA clase en toda pantalla nueva con tarjetas plegables
   o paneles que se abren; el botón que abre siempre tiene, además, una forma visible de cerrar. ---------- */
.pyg-abre.abierta,.pyg-abre[aria-expanded="true"]{background:#FDEDE1;color:var(--pri-osc)}

/* ---------- campos ---------- */
label,.etiqueta{display:flex;align-items:center;gap:4px;font-weight:600;font-size:15px;margin:0 0 6px}
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),select,textarea{
  width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--borde);border-radius:12px;background:#fff;color:var(--txt);
  font:400 16px Poppins,sans-serif;outline:none;transition:border-color .15s,box-shadow .15s}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 4px rgba(227,95,10,.14)}
input[type=color]{width:64px;height:50px;border:1.5px solid var(--borde);border-radius:12px;padding:4px;background:#fff}
input[type=checkbox]{width:22px;height:22px;accent-color:var(--pri)}
.campo{margin-bottom:16px}
.nota{color:var(--txt2);font-size:14px;margin-top:4px}
.interruptor{display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 14px;border:1.5px solid var(--borde);border-radius:12px;background:#fff;cursor:pointer;font-weight:500}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:14px;border:1.5px solid var(--borde);
  background:#fff;color:var(--txt);font:600 17px Poppins,sans-serif;cursor:pointer;text-decoration:none;transition:filter .12s,transform .06s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55;cursor:wait}
.btn.pri{background:var(--pri);border-color:var(--pri);color:var(--pri-txt)}
.btn.pri:hover{filter:brightness(.95)}
.btn.peligro{color:var(--peligro);border-color:#F2C4C4}
.btn.chico{min-height:44px;padding:0 14px;font-size:15px;border-radius:12px}
.btn.ancho{width:100%}
.botonera{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* ---------- listas ---------- */
.lista{display:flex;flex-direction:column;gap:10px}
.item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #EEF0F4;border-radius:14px;padding:14px;box-shadow:var(--sombra)}
.item .txt{flex:1;min-width:0}.item .tit{font-weight:600}.item .det{color:var(--txt2);font-size:14px}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;background:#EEF0F4;color:var(--txt2);font-size:14px;font-weight:600}
.chip.ok{background:#E3F5E8;color:var(--ok)}.chip.alerta{background:#FDEBD9;color:#A34700}.chip.mal{background:#FBE2E2;color:var(--peligro)}
.vacio{text-align:center;color:var(--txt2);padding:30px 10px}
.tabla-caja{overflow-x:auto;border-radius:14px;border:1px solid var(--borde);background:#fff}
table.tabla{border-collapse:collapse;width:100%;font-size:15px}
.tabla th,.tabla td{padding:12px;border-bottom:1px solid #EEF0F4;text-align:left}
.tabla th{background:#FAFBFC;font-weight:600;color:var(--txt2)}

/* ---------- "?" de ayuda ---------- */
.pyg-q{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid #C9CDD8;
  background:#fff;color:var(--txt2);font:700 15px Poppins,sans-serif;cursor:pointer;padding:0;margin-left:6px;vertical-align:middle}
/* el círculo se ve chico pero la zona para tocarlo es de 44 x 44 */
.pyg-q:before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%}
.pyg-q:hover,.pyg-q:focus{border-color:var(--pri);color:var(--pri)}
.btn+.pyg-q{margin-left:-2px}
.pyg-q-oculto{display:none!important}
.botonera{align-items:center}

/* ---------- casillero que se abre entero (REGLA NÚMERO 11, 24-09) ---------- */
.pyg-editor-caja{max-width:560px}
.pyg-editor-ta{width:100%;min-height:170px;max-height:55vh;padding:12px 14px;border:1.5px solid var(--borde);border-radius:12px;
  background:#fff;color:var(--txt);font:400 16px Poppins,sans-serif;resize:vertical;overflow-y:auto}
.pyg-editor-ta:focus{border-color:var(--pri);box-shadow:0 0 0 4px rgba(227,95,10,.14);outline:none}

/* ---------- foco con teclado: contorno naranja bien visible ---------- */
:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}

/* ---------- carteles (guardado, error, ayuda, confirmar) ---------- */
.pyg-velo{position:fixed;inset:0;z-index:1000;background:rgba(20,25,40,.45);display:flex;align-items:center;justify-content:center;padding:20px;
  animation:pygAparece .15s ease-out}
.pyg-cartel{background:#fff;border-radius:24px;box-shadow:var(--sombra2);padding:28px 24px;max-width:420px;width:100%;text-align:center;
  max-height:calc(100vh - 32px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative}
/* Cruz de cerrar: en CUALQUIER ventanita del CRM (".pyg-velo"), no solo en .pyg-cartel — regla fija 25-09.
   36 x 36 visibles, con una zona invisible de 44 x 44 para tocar con el dedo (mismo truco que el «?»). */
.pyg-velo .cerrar-x{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;background:transparent;border-radius:50%;
  font-size:18px;line-height:1;color:var(--txt2);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5}
.pyg-velo .cerrar-x:before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.pyg-velo .cerrar-x:hover,.pyg-velo .cerrar-x:focus-visible{background:#0000000f}
.pyg-cartel .ico{width:84px;height:84px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:46px;color:#fff}
.pyg-cartel.ok .ico{background:var(--ok)} .pyg-cartel.mal .ico{background:var(--peligro)} .pyg-cartel.info .ico{background:var(--violeta);font-size:40px}
.pyg-cartel .t{font-size:24px;font-weight:700;margin-bottom:6px;overflow-wrap:anywhere}
.pyg-cartel .m{font-size:17px;color:var(--txt2);margin-bottom:18px;white-space:pre-line;overflow-wrap:anywhere}
.pyg-cartel.ok .m{margin-bottom:0}
.pyg-cartel.m-larga .m{text-align:left}   /* mensaje largo (ej. ayuda "?"): se lee mejor alineado a la izquierda que centrado */
@keyframes pygAparece{from{opacity:0}to{opacity:1}}

/* ---------- Pedirle a Claude Code (botones chicos, redondos, esquina abajo a la derecha) ---------- */
/* [BOTONES CHICOS 21-09] Antes eran dos píldoras grandes en fila y tapaban contenido (pedido de Christian).
   Ahora: dos círculos chicos, uno arriba del otro, solo el ícono, con una «x» chiquita arriba para esconderlos.
   .pyg-cuerpo reserva lugar abajo a la derecha (ver más abajo) para que nunca tapen la última tarjeta o fila de una lista. */
.pyg-flotantes{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.pyg-flotantes-botones{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.pyg-claude,.pyg-linea{position:relative;width:48px;height:48px;min-width:44px;min-height:44px;border-radius:50%;padding:0;border:0;
  color:#fff;font-size:21px;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--sombra2);cursor:pointer}
.pyg-claude{background:var(--violeta)}
.pyg-linea{background:#1D2130}
/* el nombre completo: un globito que aparece al pasar el mouse (o al enfocar con el teclado). En el celular no aparece, pero nunca tapa nada */
.pyg-claude span,.pyg-linea span{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;
  background:#1D2130;color:#fff;font:600 14px Poppins,sans-serif;padding:7px 12px;border-radius:10px;box-shadow:var(--sombra2);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s}
.pyg-claude:hover span,.pyg-linea:hover span,.pyg-claude:focus-visible span,.pyg-linea:focus-visible span{opacity:1;visibility:visible}
/* «x» chiquita para esconder los dos botones del todo (se vuelven a prender desde Configuración general) */
.pyg-flotantes-esconder{position:relative;width:24px;height:24px;min-width:0;min-height:0;border-radius:50%;border:1.5px solid var(--borde);background:#fff;
  color:var(--txt2);font:700 12px Poppins,sans-serif;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:var(--sombra)}
.pyg-flotantes-esconder:before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%)}
.pyg-flotantes-esconder:hover{border-color:var(--peligro);color:var(--peligro)}
.pyg-claude-caja textarea{margin:10px 0}
.pyg-grabando{color:var(--peligro);font-weight:600}

/* ---------- «hay una versión nueva»: aviso chico abajo al centro (24-09, pedido de Christian) ---------- */
/* [24-09] arriba, debajo de la barra del título: abajo tapaba el botón verde de Rutea y la barra de acciones */
.pyg-nv{position:fixed;left:50%;top:calc(72px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:900;
  display:flex;align-items:center;gap:10px;max-width:92vw;background:#1D2130;color:#fff;border-radius:999px;
  padding:9px 10px 9px 16px;font:600 14px/1.3 Poppins,sans-serif;box-shadow:var(--sombra2);animation:pygAparece .18s ease-out}
.pyg-nv-t{white-space:nowrap}
.pyg-nv-b{border:0;border-radius:999px;background:var(--pri);color:#fff;font:700 14px Poppins,sans-serif;padding:7px 14px;cursor:pointer;white-space:nowrap}
.pyg-nv-b:hover,.pyg-nv-b:focus-visible{background:var(--pri-osc)}
.pyg-nv-b:disabled{opacity:.7;cursor:default}
.pyg-nv-x{border:0;background:transparent;color:#B8BCC8;font-size:14px;line-height:1;padding:6px;cursor:pointer;border-radius:50%}
.pyg-nv-x:hover,.pyg-nv-x:focus-visible{color:#fff}
@media (max-width:760px){
  .pyg-nv{top:calc(64px + env(safe-area-inset-top,0px));font-size:13px;padding:8px 8px 8px 14px}
  .pyg-nv-t{max-width:52vw;overflow:hidden;text-overflow:ellipsis}
}

/* ---------- solo PC ---------- */
.solo-pc-aviso{display:none}
@media (max-width:760px){
  .solo-pc{display:none!important}
  .solo-pc-aviso{display:block}
  .btn.pri{width:100%}
  h1{font-size:22px}
  .pyg-cuerpo{padding-top:14px}
  .solo-grande{display:none}   /* [30 auditoría 24-09] en el celular se saca la parte larga del título para que no se corte con «…» */
  .pyg-claude span,.pyg-linea span{display:none}   /* en el celular el nombre no aparece: nunca tapa nada */
}

/* =====================================================================================================
   MENÚ LATERAL + TÍTULO FIJO + LISTA + EDITOR (piezas de la «pantalla modelo», Conocimiento 24-09).
   Mudadas acá desde negocio-ia/negocio-ia.css por PANT-C (24-09, Regla 11): las usan PyG.modulo / PyG.lista
   / PyG.editor (comun/pyg.js) y, con los mismos nombres de clase de siempre, negocio-ia/base.js (NI.*).
   Clases: ni-mod / ni-menu / ni-panel / ni-l / ni-fila / ni-ed. El offset de «pegado arriba» (--ni-top) lo
   calcula PyG.modulo con las medidas reales de la pantalla (barra + pestañas, si las hay); acá solo va un
   valor de arranque razonable para el instante antes de que corra ese cálculo. ===================== */
.ni-mod>*{min-width:0}
.ni-mod{--ni-top:calc(env(safe-area-inset-top,0px) + 63px);display:grid;grid-template-columns:256px minmax(0,1fr);gap:14px;align-items:start}
/* botonera: fondo propio (gris verdoso), la elegida ENCENDIDA en el verde de la marca */
.ni-menu{position:sticky;top:calc(var(--ni-top) + 4px);display:flex;flex-direction:column;gap:3px;background:#E9EFEA;border:1px solid #D3DDD5;
  border-radius:14px;padding:8px;max-height:calc(100vh - var(--ni-top) - 20px);overflow-y:auto}
.ni-menu-b{display:flex;align-items:center;gap:8px;width:100%;min-height:42px;padding:7px 10px;border:0;border-radius:10px;background:transparent;
  color:var(--txt);font:600 13.5px/1.25 Poppins,sans-serif;text-align:left;cursor:pointer}
.ni-menu-b:hover{background:#DCE6DE}
.ni-menu-b .ni-menu-ico{flex:none;font-size:16px}
.ni-menu-b .ni-menu-t{flex:1;min-width:0}
.ni-menu-b .ni-menu-n{flex:none;min-width:26px;text-align:center;font-size:12px;font-weight:700;padding:2px 7px;border-radius:999px;background:#fff;color:var(--txt2);border:1px solid #D3DDD5}
.ni-menu-b .ni-menu-n:empty{display:none}
.ni-menu-b.activa{background:var(--verde);color:#fff;box-shadow:0 2px 6px rgba(9,154,10,.28)}
.ni-menu-b.activa .ni-menu-n{background:#fff;color:#067A07;border-color:#fff}
.ni-menu-b:focus-visible{outline:3px solid #9BD69C;outline-offset:1px}
/* rótulo de grupo (opcional, ej. «ZONAS Y REPARTO» / «COBROS»): no es un botón, solo agrupa visualmente */
.ni-menu-grupo{padding:10px 10px 3px;font:700 10.5px Poppins,sans-serif;letter-spacing:.03em;color:var(--txt2);text-transform:uppercase}
.ni-menu-grupo:first-child{padding-top:2px}
/* panel de la derecha: título FIJO arriba */
.ni-panel{background:#fff;border:1px solid var(--borde);border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.05);min-height:420px;position:relative}
.ni-panel-cab{position:sticky;top:var(--ni-top);z-index:15;display:flex;align-items:center;gap:8px;background:#fff;border-bottom:2px solid var(--verde);
  border-radius:14px 14px 0 0;padding:10px 16px}
.ni-panel-tit{margin:0;font-size:17px;font-weight:700;flex:1;min-width:0}
.ni-panel-q .ni-q-pest{margin:0}
.ni-panel-cuerpo{padding:12px 16px 14px}
/* lista común */
.ni-l-temas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ni-l-temas[hidden]{display:none}
.ni-tema{min-height:34px;padding:4px 12px;border-radius:999px;border:1px solid #C9CFD8;background:#F6F7F9;color:var(--txt);font:500 13px Poppins,sans-serif;cursor:pointer}
.ni-tema b{display:inline-block;margin-left:4px;font-size:11.5px;padding:1px 7px;border-radius:999px;background:#fff;color:var(--txt2);border:1px solid var(--borde)}
.ni-tema:hover{background:#EDF4EE}
.ni-tema.activa{background:#E3F3E3;border-color:var(--verde);color:#056106;font-weight:700}
.ni-tema.activa b{background:var(--verde);color:#fff;border-color:var(--verde)}
.ni-l-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ni-l-barra[hidden]{display:none}
.ni-l-num{font-size:13.5px;font-weight:600;color:var(--txt);flex:1 1 220px}
.ni-l input.ni-l-buscar{flex:0 1 260px;min-width:160px;min-height:36px;background:#F6F7F9;border:1px solid #C9CFD8;border-radius:9px;padding:5px 10px;font:13px Poppins,sans-serif}
.ni-l .btn.ni-l-agregar{min-height:38px;font-size:13.5px;padding:0 16px;width:auto}
.ni-l-filas{display:flex;flex-direction:column;gap:4px}
.ni-l-vacio{padding:14px 4px}
.ni-fila{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:6px 10px;background:#fff;border:1px solid #E3E5EC;border-radius:9px;
  font:13.5px Poppins,sans-serif;color:var(--txt);text-align:left;cursor:pointer}
button.ni-fila:hover{border-color:var(--verde);background:#F6FBF6}
.ni-fila.solo{cursor:default}
.ni-fila.apagada .ni-fila-nom{color:var(--txt2)}
.ni-fila-ico{flex:none}
.ni-fila-nom{font-weight:600;flex:0 1 auto;min-width:0;max-width:48%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ni-fila-det{flex:1;min-width:0;font-size:12.5px;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ni-fila-flecha{flex:none;color:var(--txt2);font-size:18px;line-height:1}
.ni-est{flex:none;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:#EEF0F4;color:var(--txt2)}
.ni-est.on{background:#E3F5E8;color:#067A07}
.ni-est.off{background:#F1F2F5;color:#8A90A0}
/* editor de un solo ítem, Guardar FIJO abajo */
.ni-ed-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ni-ed-volver{min-height:34px;font-size:13px}
.ni-ed-tit{margin:0;font-size:15px;font-weight:700;flex:1;min-width:0}
.ni-ed-cuerpo .interruptor{min-height:40px;padding:6px 12px;font-size:13.5px;margin-bottom:8px}
.ni-ed-cuerpo .interruptor.chico{min-height:34px;margin:0}
.ni-ed-cuerpo textarea{min-height:0}
.ni-ed-pie{position:sticky;bottom:0;z-index:12;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border-top:1px solid var(--borde);
  margin:12px -16px -14px;padding:10px 16px;border-radius:0 0 14px 14px;box-shadow:0 -3px 8px rgba(0,0,0,.05)}
.ni-ed-guardar{min-height:44px;padding:0 34px;font-size:15px;font-weight:700}
.ni-ed-sucio{color:var(--pri-osc);font-weight:700;font-size:13px}
.ni-ed-borrar{margin-left:auto;min-height:36px;font-size:13px}
.ni-sub{font-size:13px;margin:14px 0 6px;color:var(--txt2)}
@media (max-width:760px){
  .ni-mod{grid-template-columns:minmax(0,1fr);gap:8px}
  .ni-l-temas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .ni-l-temas::-webkit-scrollbar{display:none}
  .ni-tema{flex:none}
  /* en el celular el menú va arriba, como una fila que se desliza con el dedo */
  .ni-menu{position:static;flex-direction:row;overflow-x:auto;max-height:none;padding:6px;scrollbar-width:none}
  .ni-menu::-webkit-scrollbar{display:none}
  .ni-menu-grupo{display:none}   /* en la fila que se desliza no entra: los íconos ya alcanzan para ubicarse */
  .ni-menu-b{width:auto;flex:none;min-height:38px;padding:6px 10px;font-size:12.5px;white-space:nowrap}
  .ni-panel-cab{top:calc(env(safe-area-inset-top,0px) + 58px);padding:8px 12px}
  .ni-panel-tit{font-size:15px}
  .ni-panel-cuerpo{padding:10px 10px 12px}
  .ni-fila-nom{max-width:none;flex:1}
  .ni-fila-det{display:none}
  .ni-l input.ni-l-buscar{flex:1 1 100%}
  .ni-l .btn.ni-l-agregar{flex:1 1 100%}
  .ni-ed-pie{margin:12px -10px -12px;padding:8px 10px}
  .ni-ed-guardar{flex:1}
}
/* [25-09 foto de Christian, Recordatorios en el celular] el título del editor quedaba cortado al lado de «Volver»,
   y los botones flotantes (📞 y 🛠️) tapaban el texto y el botón Guardar: en el celular el título va en su propio
   renglón, y con un editor abierto los flotantes suben por encima de la franja de Guardar y dejan lugar a la derecha. */
@media (max-width:760px){
  .ni-ed-tit{flex-basis:100%;overflow-wrap:anywhere}
  body:has(.pyg-flotantes) .ni-ed-pie{padding-right:74px}
}