/* ===========================================================
   GesPro Administrativo · Sistema de diseño
   =========================================================== */
:root {
  --fondo:        #f4f6f9;
  --superficie:   #ffffff;
  --superficie-2: #fafbfc;
  --borde:        #e2e6ec;
  --borde-fuerte: #cbd3dd;
  --texto:        #1a2230;
  --texto-2:      #5c6a7e;
  --texto-3:      #8b98aa;
  --marca:        #1f5faa;
  --marca-suave:  #e8f0fa;
  --marca-oscuro: #17477f;
  --ok:           #1a7f52;
  --ok-suave:     #e3f4ec;
  --alerta:       #9a6510;
  --alerta-suave: #fdf3e0;
  --error:        #b3271f;
  --error-suave:  #fceceb;
  --info:         #2c5f8a;
  --sombra:       0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --sombra-alta:  0 12px 32px rgba(16,24,40,.16);
  --r:            8px;
  --r-s:          5px;
  --barra:        252px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0e1319; --superficie: #161c25; --superficie-2: #1b222c;
    --borde: #28303b; --borde-fuerte: #3a4452; --texto: #e6ebf2; --texto-2: #9aa7b8; --texto-3: #6b7888;
    --marca: #5b9bd8; --marca-suave: #17293c; --marca-oscuro: #7db3e8;
    --ok: #4ec08a; --ok-suave: #12291f; --alerta: #d9a441; --alerta-suave: #2b2113;
    --error: #e8736a; --error-suave: #2d1715; --info: #6fa8d4;
    --sombra: 0 1px 3px rgba(0,0,0,.4); --sombra-alta: 0 12px 32px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --fondo: #0e1319; --superficie: #161c25; --superficie-2: #1b222c;
  --borde: #28303b; --borde-fuerte: #3a4452; --texto: #e6ebf2; --texto-2: #9aa7b8; --texto-3: #6b7888;
  --marca: #5b9bd8; --marca-suave: #17293c; --marca-oscuro: #7db3e8;
  --ok: #4ec08a; --ok-suave: #12291f; --alerta: #d9a441; --alerta-suave: #2b2113;
  --error: #e8736a; --error-suave: #2d1715; --info: #6fa8d4;
  --sombra: 0 1px 3px rgba(0,0,0,.4); --sombra-alta: 0 12px 32px rgba(0,0,0,.5);
}

/* ---------- Temas de color a elegir (Apariencia) ----------
   Cada persona elige el suyo. «Automático» (sin data-theme) sigue al sistema; claro y oscuro
   son los de siempre; los demás son variantes claras con su propio color de marca, y «grafito»
   es un oscuro neutro. Los claros repiten los estados (ok, alerta, error) para no heredar los del
   modo oscuro del sistema. Los textos y las marcas cumplen contraste AA sobre su fondo. */
:root[data-theme="rosado"], :root[data-theme="celeste"], :root[data-theme="menta"],
:root[data-theme="lavanda"], :root[data-theme="durazno"] {
  --superficie: #ffffff;
  --ok: #1a7f52; --ok-suave: #e3f4ec; --alerta: #9a6510; --alerta-suave: #fdf3e0;
  --error: #b3271f; --error-suave: #fceceb; --info: #2c5f8a;
  --sombra: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08); --sombra-alta: 0 12px 32px rgba(16,24,40,.16);
}
:root[data-theme="rosado"] {
  --fondo: #fdeff5; --superficie-2: #fff6fa; --borde: #f0d2e0; --borde-fuerte: #e3b0c8;
  --texto: #2b1722; --texto-2: #6c4659; --texto-3: #947383;
  --marca: #c2185b; --marca-suave: #fde3ee; --marca-oscuro: #8f1144;
}
:root[data-theme="celeste"] {
  --fondo: #eaf4fc; --superficie-2: #f5faff; --borde: #cfe2f2; --borde-fuerte: #a9c9e4;
  --texto: #12222e; --texto-2: #46607a; --texto-3: #6f8aa3;
  --marca: #0b6fb8; --marca-suave: #dcedfb; --marca-oscuro: #084f85;
}
:root[data-theme="menta"] {
  --fondo: #ebf7f1; --superficie-2: #f5fbf8; --borde: #cde5d9; --borde-fuerte: #a6cfbc;
  --texto: #11261e; --texto-2: #46695a; --texto-3: #6e9282;
  --marca: #12795a; --marca-suave: #d9f1e6; --marca-oscuro: #0d5a43;
}
:root[data-theme="lavanda"] {
  --fondo: #f2eefb; --superficie-2: #f8f6fd; --borde: #dcd4f0; --borde-fuerte: #c1b4e3;
  --texto: #1d1830; --texto-2: #5a5078; --texto-3: #82799f;
  --marca: #5b3fc4; --marca-suave: #e6dffa; --marca-oscuro: #43309a;
}
:root[data-theme="durazno"] {
  --fondo: #fff1e6; --superficie-2: #fff8f2; --borde: #f3d8c2; --borde-fuerte: #e8bc9a;
  --texto: #2b1a10; --texto-2: #6e4d38; --texto-3: #98745c;
  --marca: #c4511a; --marca-suave: #fde3d1; --marca-oscuro: #983c10;
}
:root[data-theme="grafito"] {
  --fondo: #1b1d21; --superficie: #24272c; --superficie-2: #2a2d33;
  --borde: #353a41; --borde-fuerte: #474d56; --texto: #e8eaed; --texto-2: #a4abb5; --texto-3: #7a828d;
  --marca: #8fb4e8; --marca-suave: #27303d; --marca-oscuro: #b3cdf0;
  --ok: #4ec08a; --ok-suave: #12291f; --alerta: #d9a441; --alerta-suave: #2b2113;
  --error: #e8736a; --error-suave: #2d1715; --info: #6fa8d4;
  --sombra: 0 1px 3px rgba(0,0,0,.4); --sombra-alta: 0 12px 32px rgba(0,0,0,.5);
}

/* ---------- Logo de la empresa como fondo (opcional, por persona) ----------
   Una marca de agua fija detrás de toda la aplicación. Las tarjetas se vuelven apenas
   translúcidas para que se note sin molestar la lectura. No se imprime. */
#fondo-logo { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none;
  background-repeat: no-repeat; background-position: center; background-size: min(70vmin, 640px);
  opacity: var(--logo-opacidad, .12); }
html[data-logo="1"] #fondo-logo { display: block; }
html[data-logo="1"] #app { position: relative; z-index: 1; }
html[data-logo="1"] .tarjeta { background: color-mix(in srgb, var(--superficie) 90%, transparent); }
@media print { #fondo-logo { display: none !important; } }

/* Selector de apariencia */
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.tema-op { border: 2px solid var(--borde); border-radius: var(--r); background: var(--superficie); padding: 8px;
  cursor: pointer; text-align: left; color: var(--texto); font: inherit; }
.tema-op:hover { border-color: var(--borde-fuerte); }
.tema-op[aria-checked="true"] { border-color: var(--marca); box-shadow: 0 0 0 2px var(--marca-suave); }
.tema-op .muestra { height: 34px; border-radius: 5px; border: 1px solid var(--borde); margin-bottom: 6px; display: flex; overflow: hidden; }
.tema-op .muestra i { flex: 1; display: block; }
.tema-op .nombre { font-size: 12.5px; font-weight: 600; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 20px; } h2 { font-size: 17px; } h3 { font-size: 15px; } h4 { font-size: 13px; }

/* ---------- Estructura ---------- */
#app { display: flex; min-height: 100vh; }
.barra {
  width: var(--barra); flex: 0 0 var(--barra); background: var(--superficie);
  border-right: 1px solid var(--borde); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.barra-marca { padding: 18px 18px 14px; border-bottom: 1px solid var(--borde); }
.barra-marca .logo { display: flex; align-items: center; gap: 10px; }
.barra-marca .ic { width: 30px; height: 30px; border-radius: 7px; background: var(--marca); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.barra-marca .nom { font-weight: 600; font-size: 14px; line-height: 1.25; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.barra-marca .sub { font-size: 11px; color: var(--texto-3); }
.nav { padding: 10px 10px 20px; flex: 1; }
.nav-grupo { margin-top: 14px; }
.nav-grupo > span { display: block; padding: 0 10px 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--texto-3); }
.nav a { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: var(--r-s);
  color: var(--texto-2); font-size: 13.5px; margin-bottom: 1px; min-height: 32px; }
.nav a:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }
.nav a.activo { background: var(--marca-suave); color: var(--marca); font-weight: 600; }
/* El dibujo de línea queda sólo si el icono 3D no carga: ocupa el mismo hueco. */
.nav a svg { width: 16px; height: 16px; flex: none; opacity: .85; margin: 0 3px; }
.nav a .ic3d { width: 22px; height: 22px; flex: none; transition: transform .15s; }
.nav a:hover .ic3d, .nav a.activo .ic3d { transform: scale(1.12); }
.nav a .pill { margin-left: auto; background: var(--error); color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 9px; }
.barra-pie { border-top: 1px solid var(--borde); padding: 10px; display: flex; align-items: center; gap: 9px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--marca-suave); color: var(--marca);
  display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--borde); padding: 13px 22px;
  display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 20; }
.cabecera .titulo { flex: 1; min-width: 0; }
.cabecera .titulo p { margin: 1px 0 0; font-size: 12.5px; color: var(--texto-2); }
.cabecera .titulo-ic { width: 36px; height: 36px; flex: none; margin-right: -2px; }
.contenido { padding: 20px 22px 60px; flex: 1; }

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); box-shadow: var(--sombra); }
.tarjeta + .tarjeta { margin-top: 16px; }
.tarjeta-cab { padding: 13px 16px; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tarjeta-cab h3 { flex: 1; min-width: 120px; }
.tarjeta-cuerpo { padding: 16px; }
.tarjeta-pie { padding: 11px 16px; border-top: 1px solid var(--borde); background: var(--superficie-2);
  border-radius: 0 0 var(--r) var(--r); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.rejilla { display: grid; gap: 14px; }
/* Sin esto, una tabla ancha dentro de una tarjeta (los saldos de tesorería, la
   proyección de caja) ensanchaba su columna hasta lo que mide la tabla y, en el
   teléfono, la página entera: quedaba más ancha que la pantalla y había que
   arrastrarla de lado. Así la tarjeta cabe y la tabla se desplaza dentro de su
   .tabla-env, que para eso está. */
.rejilla > * { min-width: 0; }
.r2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.r3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.r4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- Indicadores ---------- */
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sombra); }
.kpi .etq { font-size: 11.5px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.kpi .val { font-size: 25px; font-weight: 650; margin-top: 5px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .nota { font-size: 12px; color: var(--texto-3); margin-top: 3px; }
.kpi.t-ok .val { color: var(--ok); } .kpi.t-mal .val { color: var(--error); } .kpi.t-aviso .val { color: var(--alerta); }

/* ---------- Tablas ---------- */
.tabla-env { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabla th { text-align: left; padding: 9px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-2); background: var(--superficie-2);
  border-bottom: 1px solid var(--borde); white-space: nowrap; position: sticky; top: 0; }
table.tabla td { padding: 9px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
/* Títulos que ordenan la tabla al pulsarlos (nucleo.js · tabla, opción `orden`) */
table.tabla th.ordenable { padding: 0; }
table.tabla th .ordenar { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 5px; width: 100%;
  padding: 9px 12px; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
table.tabla th.num .ordenar { justify-content: flex-end; }
table.tabla th .ordenar:hover { color: var(--texto); }
table.tabla th .ordenar:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
table.tabla th .flecha { font-size: 9px; opacity: .35; }
table.tabla th[aria-sort="ascending"] .flecha, table.tabla th[aria-sort="descending"] .flecha { opacity: 1; color: var(--marca); }
table.tabla tbody tr:hover { background: var(--superficie-2); }
table.tabla tbody tr.clic { cursor: pointer; }
table.tabla tfoot td { padding: 10px 12px; font-weight: 650; background: var(--superficie-2); border-top: 2px solid var(--borde-fuerte); }
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.neg { color: var(--error); }
.vacio { padding: 44px 20px; text-align: center; color: var(--texto-3); }
.vacio strong { display: block; color: var(--texto-2); margin-bottom: 4px; font-size: 14px; }

/* ---------- Etiquetas de estado ---------- */
.etiq { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 650; letter-spacing: .02em; white-space: nowrap;
  background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borde); }
.etiq.t-ok { background: var(--ok-suave); color: var(--ok); border-color: transparent; }
.etiq.t-aviso { background: var(--alerta-suave); color: var(--alerta); border-color: transparent; }
.etiq.t-mal { background: var(--error-suave); color: var(--error); border-color: transparent; }
.etiq.t-info { background: var(--marca-suave); color: var(--marca); border-color: transparent; }

/* ---------- Controles ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 13px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-s); background: var(--superficie);
  color: var(--texto); font-size: 13px; font-weight: 550; cursor: pointer; font-family: inherit;
  transition: background .12s, border-color .12s; white-space: nowrap; }
.btn:hover { background: var(--superficie-2); border-color: var(--texto-3); }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.pri { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn.pri:hover { background: var(--marca-oscuro); border-color: var(--marca-oscuro); }
.btn.peligro { color: var(--error); border-color: var(--error); }
.btn.peligro:hover { background: var(--error-suave); }
.btn.exito { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.plano { border-color: transparent; background: transparent; padding: 5px 8px; }
.btn.plano:hover { background: var(--superficie-2); }
.btn.s { padding: 4px 9px; font-size: 12px; }
.btn svg { width: 15px; height: 15px; }

input, select, textarea {
  width: 100%; padding: 7px 10px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-s);
  background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marca); outline-offset: -1px; border-color: var(--marca); }
input[type="number"] { text-align: right; font-family: var(--mono); }
/* Las cifras que se teclean en un renglón. El input mide el 100 % de su celda,
   y dentro de una tabla eso no le da ancho mínimo: cuando la tabla no cabe
   —una compra lleva nueve columnas— el navegador encogía la columna hasta 36 px,
   las flechitas los ocupaban enteros y la cifra no se veía. Con el mínimo, la
   tabla se desplaza de lado dentro de su .tabla-env en vez de esconderla. */
input.cifra { min-width: 140px; }        /* costo, precio: caben 1234567.89 y las flechitas */
input.cifra-corta { min-width: 84px; }   /* cantidad, descuento */
input:disabled, select:disabled { background: var(--superficie-2); color: var(--texto-3); }
textarea { resize: vertical; min-height: 62px; }
label.campo { display: block; }
label.campo > span, div.campo > span { display: block; font-size: 12px; font-weight: 600; color: var(--texto-2); margin-bottom: 4px; }
label.campo .ayuda, div.campo > span .ayuda { font-weight: 400; color: var(--texto-3); font-size: 11.5px; }
/* El asterisco de un campo obligatorio (views/terceros.js · marcarObligatorio) */
label.campo .obligatorio { color: var(--error); font-weight: 700; }
.linea { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.linea > * { flex: 1; min-width: 130px; }
.linea > .fijo { flex: none; min-width: 0; }
.filtros { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; }
.filtros label.campo { flex: 0 1 auto; min-width: 140px; }
.buscador { flex: 1 1 220px; min-width: 180px; }

/* ---------- Modal ---------- */
.velo { position: fixed; inset: 0; background: rgba(12,18,28,.55); backdrop-filter: blur(2px);
  display: grid; place-items: center; z-index: 100; padding: 20px; overflow-y: auto; }
.modal { background: var(--superficie); border-radius: 11px; box-shadow: var(--sombra-alta);
  width: min(720px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.modal.ancho { width: min(1080px, 100%); }
.modal-cab { padding: 15px 18px; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 12px; }
.modal-cab h2 { flex: 1; }
.modal-cuerpo { padding: 18px; overflow-y: auto; flex: 1; }
.modal-pie { padding: 13px 18px; border-top: 1px solid var(--borde); display: flex; gap: 9px; justify-content: flex-end;
  background: var(--superficie-2); border-radius: 0 0 11px 11px; flex-wrap: wrap; }

/* ---------- Avisos ---------- */
.aviso { padding: 11px 14px; border-radius: var(--r-s); font-size: 13px; display: flex; gap: 9px; align-items: flex-start; }
.aviso.error { background: var(--error-suave); color: var(--error); }
.aviso.ok { background: var(--ok-suave); color: var(--ok); }
.aviso.aviso-alerta { background: var(--alerta-suave); color: var(--alerta); }
.aviso.info { background: var(--marca-suave); color: var(--marca); }
.aviso + * { margin-top: 12px; }

#notis { position: fixed; bottom: 18px; right: 18px; z-index: 300; display: flex; flex-direction: column; gap: 9px; max-width: 380px; }
.noti { background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--marca);
  border-radius: var(--r-s); padding: 11px 14px; box-shadow: var(--sombra-alta); font-size: 13px;
  animation: entra .2s ease; }
.noti.ok { border-left-color: var(--ok); } .noti.error { border-left-color: var(--error); }
/* Ni bien ni mal: se hizo, pero hay algo que conviene saber. */
.noti.aviso { border-left-color: var(--alerta, #d9a441); }
.noti strong { display: block; margin-bottom: 2px; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Pestañas ---------- */
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); margin-bottom: 16px; overflow-x: auto; }
.pestanas button { padding: 9px 14px; border: none; background: none; color: var(--texto-2); font: inherit;
  font-size: 13.5px; font-weight: 550; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.pestanas button:hover { color: var(--texto); }
.pestanas button.activo { color: var(--marca); border-bottom-color: var(--marca); }

/* ---------- Detalle clave/valor ---------- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 13px; }
.kv dt { color: var(--texto-2); font-weight: 550; }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Barra de progreso / distribución ---------- */
.barra-dist { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--superficie-2); }
.barra-dist i { display: block; height: 100%; }

/* ---------- Login ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: linear-gradient(150deg, var(--fondo), var(--marca-suave)); }
.acceso .caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: var(--sombra-alta); padding: 32px; width: min(400px, 100%); }
.acceso .caja h1 { text-align: center; margin-bottom: 4px; }
.acceso .caja .sub { text-align: center; color: var(--texto-2); font-size: 13px; margin-bottom: 22px; }
.acceso label.campo { margin-bottom: 13px; }
/* ---------- Demostración pública ---------- */
.acceso .caja.con-demo { width: min(450px, 100%); }
.acceso .caja.con-demo form h1 { font-size: 15px; margin-bottom: 14px; }
.demo-entrada { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--borde); }
.demo-entrada h1 { text-align: center; margin: 10px 0 8px; }
.demo-entrada p { color: var(--texto-2); font-size: 13.5px; line-height: 1.55; margin: 0 0 10px; }
.demo-entrada ul { margin: 0 0 16px 18px; padding: 0; color: var(--texto-2); font-size: 13px; line-height: 1.65; }
.demo-entrada .demo-contacto { text-align: center; margin: 12px 0 0; }
.demo-etiqueta { display: block; width: fit-content; margin: 0 auto; padding: 3px 11px; border-radius: 999px;
  background: var(--marca-suave); color: var(--marca); font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }
.franja-demo { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 50;
  background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-alta);
  border-radius: 999px; padding: 7px 16px; font-size: 12.5px; color: var(--texto-2);
  width: max-content; max-width: calc(100vw - 32px); text-align: center; }
@media (max-width: 600px) { .franja-demo { border-radius: 14px; bottom: 10px; } .franja-demo-detalle { display: none; } }
.franja-demo strong { color: var(--marca); }
.franja-demo a { color: var(--marca); font-weight: 600; }
@media print { .franja-demo { display: none; } }
.credenciales { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde);
  font-size: 12px; color: var(--texto-3); text-align: center; line-height: 1.7; }

/* ---------- Utilidades ---------- */
.fila { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.fila.fin { justify-content: flex-end; }
.entre { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.crece { flex: 1; }
.tenue { color: var(--texto-2); }
.min { font-size: 12px; }
.mini { font-size: 11.5px; color: var(--texto-3); }
.centro { text-align: center; }
.der { text-align: right; }
.mt { margin-top: 14px; } .mb { margin-bottom: 14px; } .mt-s { margin-top: 8px; }
.cargando { padding: 50px; text-align: center; color: var(--texto-3); }
.cargando::after { content: ''; display: block; width: 22px; height: 22px; margin: 12px auto 0;
  border: 2px solid var(--borde); border-top-color: var(--marca); border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.oculto { display: none !important; }

/* ---------- Responsive ---------- */
.menu-btn { display: none; }
@media (max-width: 900px) {
  .barra { position: fixed; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  .barra.abierta { transform: none; box-shadow: var(--sombra-alta); }
  .menu-btn { display: inline-flex; }
  .contenido { padding: 16px; }
  .cabecera { padding: 11px 16px; flex-wrap: wrap; }
  /* Con varios botones, el título se quedaba en una columna de una palabra por
     línea: en el teléfono los botones bajan a su propia fila. */
  .cabecera .titulo { flex-basis: calc(100% - 52px); }
  .cabecera .titulo-ic { width: 30px; height: 30px; }
  .cabecera .titulo-ic + .titulo { flex-basis: calc(100% - 96px); }
  .cabecera > .fila { flex-wrap: wrap; width: 100%; }
}
/* ---------- Desplegables que se buscan escribiendo ----------
   Ver `hacerBuscable` en js/nucleo.js. El <select> sigue ahí, oculto: es quien
   guarda el valor para todo el programa. Lo que se ve es el campo de búsqueda. */
.buscador-caja { position: relative; }
.buscador-campo { width: 100%; }
.buscador-oculto { display: none !important; }

/* Un renglón cuyo artículo ya no está en el catálogo. Se marca para que se vea
   que hay que cambiarlo: antes el desplegable mostraba «Concepto libre» como si
   todo estuviera bien y el documento se rechazaba al guardar. */
.opcion-huerfana { color: var(--error); font-weight: 600; }

.buscador-lista {
  display: none; position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 3px);
  max-height: 260px; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-s); box-shadow: var(--sombra-alta);
}
.buscador-caja.abierto .buscador-lista { display: block; }

.buscador-opcion { padding: 7px 10px; font-size: 13px; cursor: pointer; line-height: 1.35; }
.buscador-opcion + .buscador-opcion { border-top: 1px solid var(--borde); }
/* Una sola marca para el ratón y para las flechas: si el teclado pinta de un
   color y el ratón de otro, al mezclarlos parecen dos opciones elegidas. */
.buscador-opcion.marcada { background: var(--marca-suave); color: var(--marca-oscuro); }
.buscador-vacio { padding: 9px 10px; font-size: 12.5px; color: var(--texto-2); }

/* Los desplegables de los renglones (hacerBuscable · enTabla). La lista flota
   sobre la pantalla —colgada del campo, la tabla que se desplaza de lado la
   recortaba— y la coloca el propio buscador, con su ancho y su alto. */
.buscador-lista.flotante { position: fixed; right: auto; z-index: 120; }
.buscador-titulo { padding: 7px 10px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-2); background: var(--superficie-2);
  border-top: 1px solid var(--borde); position: sticky; top: 0; z-index: 1; }
.buscador-opcion.sin-valor { color: var(--texto-2); font-style: italic; }
.buscador-opcion.desactivada { color: var(--texto-3); cursor: default; }
.buscador-opcion.con-grupo { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.buscador-grupo { flex: none; font-size: 11.5px; color: var(--texto-3); }
.buscador-opcion.marcada .buscador-grupo { color: inherit; opacity: .75; }

/* Al imprimir no queda rastro: el buscador es para usar, no para el papel. */
@media print { .buscador-caja { display: none !important; } .buscador-oculto { display: block !important; } }

/* ---------- Impresión ----------
   Cualquier pantalla se lleva a papel o a PDF con el botón de la cabecera. Lo
   que se imprime es lo que se está viendo; aquí se quita lo que sólo sirve en
   pantalla y se añade lo que sólo hace falta en el papel. */

/* Sin tamaño declarado: así el usuario puede elegir vertical u horizontal en el
   diálogo del navegador, que es donde lo va a necesitar para una tabla ancha. */
@page { margin: 14mm 12mm; }

/* La cabecera de la hoja: de qué empresa es, qué informe, con qué filtros y
   cuándo se sacó. En pantalla no se ve nunca; la pone app.js al imprimir. */
.hoja-cabecera { display: none; }

@media print {
  /* El tema oscuro no se imprime. Sobre papel blanco su texto claro sale
     invisible, y el usuario no tiene por qué acordarse de cambiar de tema
     antes de imprimir. Los selectores repiten los del tema oscuro para ganarle
     en especificidad, no por gusto. */
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"],
  :root:not([data-theme="light"]) {
    --fondo: #ffffff; --superficie: #ffffff; --superficie-2: #ffffff;
    --borde: #c3ccd6; --borde-fuerte: #97a3b1;
    --texto: #000000; --texto-2: #333a44; --texto-3: #5a6572;
    --marca: #1f5faa; --marca-suave: #eef3f9; --marca-oscuro: #17477f;
    --ok: #10643f; --ok-suave: #eef6f1; --alerta: #7a4f08; --alerta-suave: #faf4e8;
    --error: #8f1c16; --error-suave: #faeceb; --info: #234a6b;
    --sombra: none; --sombra-alta: none;
  }

  /* Lo que no es el informe: navegación, botones, filtros y lo que flota. */
  .barra, .cabecera, .btn, .filtros, .tarjeta-pie, .pestanas,
  .velo, .resena, .resena-marca, .franja-instalar, .solo-pantalla {
    display: none !important;
  }
  .hoja-cabecera { display: block !important; }

  body, .principal, .contenido, .tarjeta { background: #fff !important; box-shadow: none !important; }
  .contenido { padding: 0 !important; }
  .principal { display: block; }
  .tarjeta { border: 1px solid var(--borde); margin-bottom: 10px; }

  /* Lo que no se parte entre dos hojas. Una fila cortada por la mitad o un
     título al final de una página con su tabla en la siguiente obligan a
     volver atrás para leer. */
  .tarjeta, tr, .kpi, .hoja-cabecera { break-inside: avoid; page-break-inside: avoid; }
  .tarjeta-cab, h3, h4 { break-after: avoid; page-break-after: avoid; }

  /* Los títulos de columna se repiten en cada hoja: una tabla de ocho páginas
     sin ellos no se puede leer a partir de la segunda. */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }

  /* Las barras del gráfico y los distintivos de estado son color de relleno. Sin
     esto el navegador los imprime en blanco y el gráfico sale vacío. */
  svg, .etiq, .kpi { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Cabe más por hoja sin dejar de leerse. */
  table { font-size: 10px; width: 100%; }
  table td, table th { padding: 4px 6px; }
  .contenido { font-size: 11px; }

  /* Los enlaces del panel son navegación: en papel, texto normal. */
  a { color: inherit !important; text-decoration: none !important; }
}

/* La cabecera de la hoja impresa */
.hoja-cabecera { margin-bottom: 14px; padding-bottom: 9px; border-bottom: 1.5px solid #000; }
.hoja-cabecera .hoja-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.hoja-cabecera .hoja-der { text-align: right; }
.hoja-cabecera h1 { margin: 9px 0 2px; font-size: 16px; }
.hoja-cabecera .hoja-mini { font-size: 10.5px; color: #333a44; line-height: 1.45; }

/* Franja de la barra lateral que ofrece instalar el sistema como aplicación.
   Sólo se muestra si el navegador avisa de que puede instalarse (app.js). */
.franja-instalar { padding: 0 10px 10px; }
.franja-instalar .btn { width: 100%; justify-content: center; font-size: 12px;
  border: 1px dashed var(--borde); color: var(--texto-2); }
.franja-instalar .btn:hover { color: var(--marca); border-color: var(--marca); }

/* ---------- Reseñas de campos ---------- */
/* La ⓘ junto a la etiqueta: se pulsa para abrir la explicación del campo (nucleo.js).
   El relleno le da algo de superficie para el dedo sin mover la etiqueta. */
.resena-marca { display: inline-block; margin-left: 2px; padding: 0 4px; border-radius: 999px;
  color: var(--texto-2); font-size: 12px; line-height: 1.4; cursor: pointer; opacity: .7;
  user-select: none; -webkit-user-select: none; }
.resena-marca:hover, .resena-marca[aria-expanded="true"] { opacity: 1; color: var(--marca); }
.resena-marca:focus-visible { opacity: 1; color: var(--marca); outline: 2px solid var(--marca); outline-offset: 1px; }
@media (pointer: coarse) { .resena-marca { padding: 2px 8px; font-size: 14px; } }

.resena {
  position: fixed; z-index: 9000; max-width: 330px; padding: 9px 12px;
  background: var(--texto); color: var(--superficie);
  border-radius: 8px; font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
  pointer-events: none;        /* cerrada, no estorba a nada de lo que hay debajo */
}
/* Abierta, se puede seleccionar su texto; pulsar dentro no la cierra */
.resena.visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

/* En pantallas pequeñas ocupa el ancho disponible en vez de salirse */
@media (max-width: 640px) { .resena { max-width: calc(100vw - 24px); } }

/* Al imprimir no pinta nada */
@media print { .resena, .resena-marca { display: none !important; } }

/* ---------- Manual de usuario ---------- */
.manual-rejilla { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }

.manual-indice { position: sticky; top: 76px; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; padding: 14px; max-height: calc(100vh - 110px); overflow: auto; }
.manual-indice-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-2); font-weight: 700; margin-bottom: 9px; }
.manual-indice a { display: block; padding: 6px 8px; border-radius: 7px; font-size: 13px;
  color: var(--texto-2); text-decoration: none; line-height: 1.35; }
.manual-indice a:hover { background: var(--fondo); color: var(--marca); }

.manual-cuerpo { background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; padding: 26px 30px; max-width: 900px; }
.manual-seccion { scroll-margin-top: 80px; }
.manual-seccion + .manual-seccion { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--borde); }
.manual-h2 { font-size: 20px; margin: 0 0 12px; letter-spacing: -.3px; }
.manual-h3 { font-size: 14.5px; margin: 20px 0 7px; color: var(--marca); }
.manual-p { margin: 0 0 10px; line-height: 1.62; color: var(--texto); }
.manual-lista, .manual-pasos { margin: 0 0 12px; padding-left: 20px; line-height: 1.6; }
.manual-lista li, .manual-pasos li { margin-bottom: 6px; }
.manual-aviso { border-left: 3px solid var(--marca); background: var(--marca-suave);
  padding: 11px 14px; border-radius: 0 8px 8px 0; margin: 12px 0 14px; line-height: 1.55; }
.manual-tabla { overflow-x: auto; margin: 10px 0 14px; }
.manual-tabla table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.manual-tabla th, .manual-tabla td { border: 1px solid var(--borde); padding: 7px 10px;
  text-align: left; vertical-align: top; }
.manual-tabla th { background: var(--fondo); font-weight: 650; font-size: 12px; }
.manual-cuerpo mark { background: var(--marca-suave); color: var(--marca); border-radius: 3px; padding: 0 2px; }
.manual-vacio { text-align: center; padding: 40px 20px; color: var(--texto-2); }

@media (max-width: 900px) {
  .manual-rejilla { grid-template-columns: 1fr; }
  .manual-indice { position: static; max-height: none; }
  .manual-cuerpo { padding: 18px; }
}

/* Capturas dentro del manual */
.manual-figura { margin: 14px 0 18px; }
.manual-figura img { display: block; width: 100%; border: 1px solid var(--borde);
  border-radius: 9px; background: var(--fondo); }
.manual-figura figcaption { font-size: 12.5px; color: var(--texto-2); margin-top: 7px; line-height: 1.5; }

/* Aviso de autoría. Discreto pero legible: está para constar, no para gritar. */
.copyright { font-size: 11.5px; color: var(--texto-3); letter-spacing: .01em; margin: 0; }
.barra-pie + .copyright { padding: 0 16px 12px; text-align: center; }
@media print { .copyright { color: #666; } }

/* Ambiente de pruebas. La franja sale arriba en cada pantalla; además, el borde
   de color y el logotipo en ámbar se ven aunque se haya bajado por la página,
   para que nadie registre algo real donde se borra cada noche. */
.franja-pruebas { background: var(--alerta-suave); color: var(--alerta); border-bottom: 2px solid var(--alerta);
  padding: 10px 22px; font-size: 13px; display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; }
.franja-pruebas strong { letter-spacing: .03em; }
.franja-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
body.entorno-pruebas .principal { border-top: 4px solid var(--alerta); }
body.entorno-pruebas .barra-marca .logo .ic { background: var(--alerta); }
.ir-pruebas { margin-top: 6px; padding-left: 0; font-size: 12px; }
@media (max-width: 600px) { .franja-pruebas { padding: 10px 16px; } }

/* Modo demo (ERP_MODO_DEMO). La franja sale arriba en cada pantalla y, al
   imprimir, cada hoja lleva la etiqueta en la cabecera y una marca de agua. */
.franja-modo-demo { background: #1f2937; color: #fff; padding: 9px 22px; font-size: 13px; display: flex;
  gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.franja-modo-demo strong { letter-spacing: .04em; text-transform: uppercase; }
.franja-modo-demo-detalle { opacity: .8; }
.franja-modo-demo .btn { background: #fff; color: #1f2937; border-color: #fff; }
body.modo-demo .principal { border-top: 4px solid #1f2937; }
.etiqueta-modo-demo { margin: 0 auto 14px; width: fit-content; padding: 4px 12px; border-radius: 999px;
  background: #1f2937; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hoja-demo { display: block; margin-bottom: 8px; padding: 3px 8px; background: #000; color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: center;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@media (max-width: 600px) { .franja-modo-demo { padding: 9px 16px; } .franja-modo-demo-detalle { display: none; } }
@media print {
  .franja-modo-demo { display: none !important; }
  body.modo-demo::before { content: 'DEMO – datos ficticios'; position: fixed; top: 45%; left: 0; right: 0;
    text-align: center; transform: rotate(-30deg); font-size: 64px; font-weight: 800; color: rgba(0, 0, 0, .07);
    z-index: 0; pointer-events: none; }
}

/* ---------- CRM ---------- */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.kanban-col { flex: 0 0 260px; background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--r); display: flex; flex-direction: column; max-height: 70vh; }
.kanban-col.sobre, .kanban-cierre.sobre { outline: 2px dashed var(--marca); outline-offset: -2px; }
.kanban-cab { padding: 10px 12px; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between;
  align-items: baseline; gap: 8px; }
.kanban-lista { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; }
.kanban-vacio { color: var(--texto-3); font-size: 12px; text-align: center; padding: 18px 0; }
.kanban-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 9px 10px;
  cursor: grab; box-shadow: var(--sombra); }
.kanban-tarjeta:hover { border-color: var(--marca); }
.kanban-tarjeta.arrastrando { opacity: .5; }
.kanban-titulo { font-weight: 600; font-size: 13px; margin-bottom: 2px; overflow-wrap: anywhere; }
.kanban-cierres { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.kanban-cierre { border: 1px dashed var(--borde); border-radius: var(--r); padding: 14px; text-align: center; font-weight: 600; }
.kanban-cierre.t-ok { color: var(--ok); background: var(--ok-suave); }
.kanban-cierre.t-mal { color: var(--error); background: var(--error-suave); }
.embudo-fila { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr minmax(90px, auto); gap: 10px;
  align-items: center; padding: 6px 0; cursor: pointer; border-bottom: 1px solid var(--borde); }
.embudo-fila:last-child { border-bottom: none; }
.embudo-barra { background: var(--marca-suave); border-radius: 4px; height: 14px; overflow: hidden; }
.embudo-barra > div { background: var(--marca); height: 100%; border-radius: 4px; }
.embudo-monto { text-align: right; font-variant-numeric: tabular-nums; }
.alerta-fila { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borde);
  cursor: pointer; }
.alerta-fila:last-child { border-bottom: none; }
.alerta-fila:hover strong { color: var(--marca); }
.agenda { display: flex; flex-direction: column; }
.agenda-fila { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--borde); align-items: flex-start; }
.agenda-fila:last-child { border-bottom: none; }
.agenda-fila.vencida { background: var(--error-suave); }
.agenda-fila.hecha { opacity: .8; }
.agenda-icono { width: 28px; height: 28px; border-radius: 50%; background: var(--marca-suave); display: grid;
  place-items: center; flex: 0 0 28px; font-size: 14px; }
.pasos { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.pasos .paso { flex: 1 1 110px; padding: 7px 10px; border: 1px solid var(--borde); background: var(--superficie);
  border-radius: 6px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--texto-2); }
.pasos .paso.hecho { background: var(--marca-suave); color: var(--marca); }
.pasos .paso.actual { background: var(--marca); color: #fff; border-color: var(--marca); font-weight: 600; }
.pasos .paso:disabled { cursor: default; }
@media (max-width: 720px) {
  .kanban-col { flex-basis: 82vw; }
  .embudo-fila { grid-template-columns: 1fr; }
  .embudo-monto { text-align: left; }
}

/* Botón de reportar, al pie de la barra */
.barra .reportar { width: calc(100% - 24px); margin: 0 12px 6px; justify-content: flex-start; font-size: 12.5px;
  color: var(--texto-2); border: 1px dashed var(--borde); }
.barra .reportar:hover { color: var(--marca); border-color: var(--marca); }

/* ---------- Punto de venta ---------- */
.pos-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
@media (max-width: 900px) { .pos-rejilla { grid-template-columns: 1fr; } }
.pos-rejilla input[type=search] { width: 100%; flex: 1; min-width: 0; }
.pos-resultados { display: grid; gap: 6px; margin-top: 8px; }
.pos-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left;
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--texto); cursor: pointer; }
.pos-item:hover, .pos-item:focus { border-color: var(--marca); background: var(--marca-suave); }
.pos-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; }
.pos-total strong { font-size: 32px; }
.pos-cobrar { width: 100%; font-size: 20px; padding: 14px; }
.pos-medios { display: grid; gap: 8px; margin-bottom: 12px; }
.pos-medio { display: grid; grid-template-columns: 1.4fr 1.3fr 1.2fr auto; gap: 8px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; }
.pos-medio > .mini:empty { display: none; }
@media (max-width: 700px) { .pos-medio { grid-template-columns: 1fr 1fr; } }
.pos-cobro-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.pos-cobro-resumen > div { display: flex; flex-direction: column; padding: 10px; border-radius: 10px; background: var(--superficie-2); }
.pos-cobro-resumen strong { font-size: 22px; }
.pos-cobro-resumen .t-mal strong { color: var(--error); }
.pos-cobro-resumen .t-ok strong { color: var(--ok); }
.ticket { font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #000; background: #fff; padding: 10px; }
.ticket-vista { max-width: 340px; margin: 0 auto; border: 1px dashed var(--borde-fuerte); border-radius: 6px; }
.tk-centro { text-align: center; }
.tk-fila { display: flex; justify-content: space-between; gap: 8px; }
.tk-fila > span:last-child { white-space: nowrap; }
.tk-grande { font-size: 15px; font-weight: 700; }
.tk-linea { border-top: 1px dashed #000; margin: 6px 0; }
.ticket-impresion { display: none; }
@page ticket { size: 80mm auto; margin: 3mm; }
@media print {
  body.imprimiendo-ticket > *:not(.ticket-impresion) { display: none !important; }
  body.imprimiendo-ticket .ticket-impresion { display: block !important; page: ticket; width: 72mm; }
  body.imprimiendo-ticket .ticket { padding: 0; }
}

/* Estado de la conexión del punto de venta */
.pos-red { font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 999px; white-space: nowrap; align-self: center; }
.pos-red.ok { color: var(--ok); background: var(--ok-suave); }
.pos-red.aviso { color: var(--alerta); background: var(--alerta-suave); }
.pos-red.mal { color: var(--error); background: var(--error-suave); }

/* Escribir por GP Mensajes (js/conversar.js): el botón 💬 de la cabecera y su diálogo */
.btn-conversar { position: relative; }
.btn-conversar .pill { position: absolute; top: -2px; right: -4px; background: var(--error); color: #fff; font-size: 10px;
  font-weight: 700; padding: 1px 5px; border-radius: 9px; line-height: 1.3; }
.conversar > * + * { margin-top: 12px; }
.conversar-personas { border: 1px solid var(--borde); border-radius: var(--r-s); max-height: 240px; overflow-y: auto; }
.conversar-persona { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-bottom: 1px solid var(--borde); cursor: pointer; }
.conversar-persona:last-child { border-bottom: 0; }
.conversar-persona > span:first-of-type { flex: 1; min-width: 0; }
.conversar-casilla { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.conversar input[type=search] { margin-bottom: 6px; }
/* La regla general de los campos (input { width: 100% }) estiraba las casillas y aplastaba los nombres */
.conversar input[type=checkbox] { width: auto; flex: none; margin: 0; }

/* Contraseña con su ojo para verla (nucleo.js · conOjo). Sin el ojo propio de Edge: saldrían dos. */
label.campo > span.campo-clave, .campo-clave { position: relative; display: block; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.campo-clave > input { padding-right: 38px; }
.campo-clave > input::-ms-reveal, .campo-clave > input::-ms-clear { display: none; }
.ver-clave { position: absolute; top: 50%; right: 3px; transform: translateY(-50%); display: grid; place-items: center;
  width: 30px; height: 28px; padding: 0; border: 0; border-radius: var(--r-s); background: transparent; color: var(--texto-2); cursor: pointer; }
.ver-clave:hover { background: var(--superficie-2); color: var(--texto); }
.ver-clave:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.ver-clave svg { width: 18px; height: 18px; }