/* Consola omnly: sistema de diseño según la guía de marca. La consola lleva siempre la marca omnly; el color de cada tienda
   es solo para su widget. Los estados van siempre con icono y palabra. */
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../fuentes/manrope-latin-wght-normal.fc03edc2c673.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../fuentes/manrope-latin-ext-wght-normal.91e6441f12d2.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("../fuentes/ibm-plex-sans-latin-400.77bc02670657.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("../fuentes/ibm-plex-sans-latin-ext-400.1bc0d8e41d21.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 600;
  src: url("../fuentes/ibm-plex-sans-latin-600.196e3cbc5fee.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 600;
  src: url("../fuentes/ibm-plex-sans-latin-ext-600.8fccbdf5bf67.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("../fuentes/ibm-plex-mono-latin-400.79936b18df9f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("../fuentes/ibm-plex-mono-latin-ext-400.8450d5944de2.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  /* la guía de marca: tinta, fondo, menta (solo sobre oscuro), verde profundo (sobre claro) y papel */
  --tinta: #0C1116; --noche: #0A0E12; --noche-2: #1E2A33; --menta: #3BE8A9; --verde: #0A7553; --papel: #F1F4F3;
  --marca: var(--verde); --sobre-marca: #ffffff; --coral: #C02A3F;
  --fondo: #F1F4F3; --superficie: #ffffff; --superficie-2: #F7F9F8; --borde: #DDE3E0; --borde-fuerte: #84918C;
  --texto: #0C1116; --texto-2: #3F4A54; --texto-3: #56626C;
  --lateral: #0C1116; --lateral-texto: #C9D2CF; --lateral-activo: #ffffff; --lateral-tenue: #94A19C;
  --ok: #2E7320; --ok-fondo: #E6F2E2; --aviso: #9A5B00; --aviso-fondo: #FBF1DE; --error: #C02A3F; --error-fondo: #FBE8EA;
  --info: #0A7553; --info-fondo: #E2F3EC; --neutro-fondo: #E9EDEB; --pulso: #0C1116;
  --radio: 16px; --radio-s: 10px; --sombra: 0 1px 2px rgba(12,17,22,.05), 0 8px 24px -14px rgba(12,17,22,.16);
  --letra: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titular: "Manrope", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
:root[data-tema="oscuro"] {
  --marca: #3BE8A9; --sobre-marca: #0C1116; --coral: #FF8E9B;
  --fondo: #0A0E12; --superficie: #121A21; --superficie-2: #18222B; --borde: #1E2A33; --borde-fuerte: #566770;
  --texto: #F1F4F3; --texto-2: #C9D2CF; --texto-3: #A9B4B0; --lateral: #0A0E12;
  --ok: #7FD98B; --ok-fondo: #14291B; --aviso: #F0B35A; --aviso-fondo: #2E2210; --error: #FF8E9B; --error-fondo: #33161B;
  --info: #3BE8A9; --info-fondo: #10302A; --neutro-fondo: #1E2A33; --pulso: #121A21; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
  --marca: #3BE8A9; --sobre-marca: #0C1116; --coral: #FF8E9B;
  --fondo: #0A0E12; --superficie: #121A21; --superficie-2: #18222B; --borde: #1E2A33; --borde-fuerte: #566770;
  --texto: #F1F4F3; --texto-2: #C9D2CF; --texto-3: #A9B4B0; --lateral: #0A0E12;
  --ok: #7FD98B; --ok-fondo: #14291B; --aviso: #F0B35A; --aviso-fondo: #2E2210; --error: #FF8E9B; --error-fondo: #33161B;
  --info: #3BE8A9; --info-fondo: #10302A; --neutro-fondo: #1E2A33; --pulso: #121A21; color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.6 var(--letra); color: var(--texto); background: var(--fondo); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: var(--marca); text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-family: var(--titular); font-size: 30px; line-height: 1.15; margin: 0; font-weight: 800; letter-spacing: -.025em; }
h2 { font-family: var(--titular); font-size: 18px; margin: 0 0 14px; font-weight: 700; letter-spacing: -.012em; }
h3 { font-family: var(--titular); font-size: 15px; margin: 0 0 8px; font-weight: 700; }
p { margin: 0 0 10px; }
code, .mono { font-family: var(--mono); font-size: 13px; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; border-radius: 4px; }
.lateral :focus-visible, .pulso :focus-visible { outline-color: var(--menta); }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--superficie); padding: 8px 12px; z-index: 10; }
.saltar:focus { left: 8px; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icono { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* --- armazón -------------------------------------------------------------------------------- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.lateral { background: var(--lateral); color: var(--lateral-texto); display: flex; flex-direction: column; padding: 18px 12px; gap: 18px; position: sticky; top: 0; height: 100vh; }
.logo { display: flex; align-items: center; gap: 10px; padding: 2px 8px 6px; color: var(--papel); font-family: var(--titular); font-weight: 700; letter-spacing: -.01em; font-size: 23px; --nodo: var(--menta); --hueco: var(--lateral); }
.logo-marca { width: 30px; height: 30px; flex: none; }
.logo-anillo { fill: none; stroke: currentColor; }
.logo-nodo { fill: var(--nodo); stroke: var(--hueco); }
.selector-org select { width: 100%; background: var(--noche-2); color: #fff; border: 1px solid #566770; border-radius: var(--radio-s); padding: 7px 8px; font: inherit; }
.nav { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.nav-grupo { display: flex; flex-direction: column; gap: 2px; }
.nav-titulo { font-size: 12px; color: var(--lateral-tenue); padding: 0 10px 4px; font-weight: 650; }
.nav a { display: flex; align-items: center; gap: 11px; color: var(--lateral-texto); padding: 9px 12px; border-radius: 10px; text-decoration: none; font-weight: 560; }
.nav a:hover { background: var(--noche-2); color: #fff; }
.nav a[aria-current="page"] { background: var(--menta); color: var(--tinta); font-weight: 600; }
.lateral-pie { margin-top: auto; font-size: 12px; color: var(--lateral-tenue); padding: 0 10px; overflow-wrap: anywhere; }
.cuerpo { min-width: 0; display: flex; flex-direction: column; }
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; border-bottom: 1px solid var(--borde); background: var(--superficie); position: sticky; top: 0; z-index: 2; }
.cabecera-usuario { display: flex; align-items: center; gap: 8px; color: var(--texto-2); }
.principal { padding: 24px 28px 48px; max-width: 1280px; width: 100%; }
.titulo-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.subtitulo { color: var(--texto-3); margin-top: 4px; }
.menu-movil { display: none; }

/* --- componentes ------------------------------------------------------------------------------ */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px 20px; }
.tarjeta + .tarjeta { margin-top: 16px; }
.rejilla { display: grid; gap: 16px; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla-kpi { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 20px; }
.kpi { padding: 16px 18px; }
.kpi-valor { font-size: 32px; font-weight: 780; letter-spacing: -.035em; line-height: 1.05; }
.kpi-etiqueta { color: var(--texto-3); font-size: 12.5px; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--texto-3); }
.punto.ok { background: var(--ok); } .punto.aviso { background: var(--aviso); } .punto.error { background: var(--error); } .punto.info { background: var(--info); }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto); font: inherit; font-weight: 550; cursor: pointer; text-decoration: none; white-space: nowrap; }
.boton:hover { background: var(--superficie-2); text-decoration: none; }
.boton.principal-btn { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.boton.principal-btn:hover { filter: brightness(1.08); }
.boton.peligro { color: var(--error); border-color: color-mix(in srgb, var(--error) 35%, var(--borde)); }
.boton.peque { padding: 5px 10px; font-size: 13px; }
.boton.plano { border-color: transparent; background: transparent; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--neutro-fondo); color: var(--texto-2); white-space: nowrap; }
.chip.ok { background: var(--ok-fondo); color: var(--ok); } .chip.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.chip.error { background: var(--error-fondo); color: var(--error); } .chip.info { background: var(--info-fondo); color: var(--info); }

.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12.5px; font-weight: 700; color: var(--texto-3); padding: 10px 14px; border-bottom: 1px solid var(--borde); background: var(--superficie-2); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--superficie-2) 60%, transparent); }
.fila-enlace { color: inherit; font-weight: 600; }
.secundario { color: var(--texto-3); font-size: 12.5px; }
.vacio { text-align: center; color: var(--texto-3); padding: 36px 16px; }

form.apilado { display: flex; flex-direction: column; gap: 14px; }
label { font-weight: 550; display: block; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.ayuda { color: var(--texto-3); font-size: 12.5px; font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=search], input[type=number], input[type=date], select, textarea {
  font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-s); padding: 8px 10px; width: 100%; max-width: 520px; }
input[type=color] { width: 56px; height: 36px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-s); background: var(--superficie); padding: 2px; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--marca) 45%, transparent); border-color: var(--marca); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--marca); }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: end; }
.filtros input, .filtros select { width: auto; min-width: 180px; }
.errorlist, .errores { color: var(--error); margin: 0; padding-left: 18px; }

.mensajes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.mensaje { padding: 10px 14px; border-radius: var(--radio-s); border: 1px solid var(--borde); background: var(--superficie); }
.mensaje.success { background: var(--ok-fondo); color: var(--ok); border-color: transparent; }
.mensaje.error { background: var(--error-fondo); color: var(--error); border-color: transparent; }
.mensaje.warning, .mensaje.info { background: var(--info-fondo); color: var(--info); border-color: transparent; }

.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); margin-bottom: 18px; overflow-x: auto; }
.pestanas a { padding: 9px 14px; color: var(--texto-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; display: flex; align-items: center; gap: 6px; }
.pestanas a[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--marca); font-weight: 720; }
.pestanas .chip.aviso, .chip.atencion { background: var(--error-fondo); color: var(--error); }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.datos dt { color: var(--texto-3); } .datos dd { margin: 0; }
.codigo-grande { font: 700 26px/1.2 var(--mono); letter-spacing: .08em; padding: 18px 20px; background: var(--superficie-2); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); text-align: center; user-select: all; overflow-wrap: anywhere; }
.pasos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.pista { background: var(--info-fondo); color: var(--info); padding: 8px 12px; border-radius: var(--radio-s); font-size: 13px; margin-top: 6px; }
.barra { height: 8px; border-radius: 99px; background: var(--neutro-fondo); overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--marca); }
.barra.p0>i{width:0}.barra.p10>i{width:10%}.barra.p20>i{width:20%}.barra.p30>i{width:30%}.barra.p40>i{width:40%}.barra.p50>i{width:50%}
.barra.p60>i{width:60%}.barra.p70>i{width:70%}.barra.p80>i{width:80%}.barra.p90>i{width:90%}.barra.p100>i{width:100%}
.matriz fieldset { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 16px; margin: 0 0 12px; }
.matriz legend { font-weight: 620; padding: 0 6px; }
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.entrada .tarjeta { width: 100%; max-width: 420px; }
.entrada .logo { color: var(--texto); justify-content: center; margin-bottom: 18px; --nodo: var(--marca); --hueco: var(--superficie); }
.entrada form p { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.entrada button, .entrada [type=submit] { width: 100%; }
.entrada .boton, .entrada button { margin-top: 4px; }
.htmx-indicator { opacity: 0; transition: opacity .2s; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.cargando { color: var(--texto-3); font-size: 12px; }
details > summary { cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--borde); margin: 16px 0; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 30% 0 0; z-index: 20; transform: translateX(-100%); transition: transform .2s; height: 100%; }
  .lateral.abierta { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
  .menu-movil { display: inline-flex; }
  .cabecera, .principal { padding-left: 16px; padding-right: 16px; }
  .datos { grid-template-columns: 1fr; gap: 2px 0; } .datos dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.centrado { justify-content: center; margin-top: 12px; }
.rejilla > .tarjeta + .tarjeta, .rejilla > .tarjeta { margin-top: 0; }
.boton.menu-movil { display: none; }
@media (max-width: 900px) { .boton.menu-movil { display: inline-flex; } }
.principal > p { margin-top: 16px; }
.entrada form .boton { margin-top: 6px; }
.entrada .boton + .boton, .entrada form + form .boton { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); }
.tarjeta form > p { display: flex; flex-direction: column; gap: 6px; }
.tarjeta img[src^="data:"] { background: #fff; padding: 8px; border-radius: 8px; }
/* --- bandeja del asistente ---------------------------------------------------------------------- */
.bandeja { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; align-items: start; }
.bandeja-lista .filtros input, .bandeja-lista .filtros select { min-width: 0; width: 100%; }
.bandeja-lista .filtros .campo { flex: 1 1 140px; }
.conversaciones { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); max-height: 70vh; overflow-y: auto; }
.conversaciones li + li { border-top: 1px solid var(--borde); }
.conversaciones a { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; color: inherit; text-decoration: none; }
.conversaciones a:hover { background: var(--superficie-2); }
.conversaciones a[aria-current="true"] { background: color-mix(in srgb, var(--marca) 9%, var(--superficie)); box-shadow: inset 3px 0 0 var(--marca); }
.conv-cabeza { display: flex; justify-content: space-between; gap: 8px; }
.conv-texto { color: var(--texto-2); font-size: 13px; }
.bandeja-conversacion { min-height: 420px; position: sticky; top: 80px; }
.conv-titulo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--borde); padding-bottom: 12px; margin-bottom: 12px; }
.conv-titulo h2 { margin: 0; }
.mensajes-chat { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; padding: 4px 2px 12px; }
.burbuja { max-width: 78%; padding: 9px 12px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borde); overflow-wrap: anywhere; }
.burbuja.cliente { align-self: flex-start; border-bottom-left-radius: 4px; }
.burbuja.tienda { align-self: flex-end; background: color-mix(in srgb, var(--marca) 10%, var(--superficie)); border-color: color-mix(in srgb, var(--marca) 25%, var(--borde)); border-bottom-right-radius: 4px; }
.burbuja .traduccion { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--borde-fuerte); font-size: 13px; }
.burbuja .hora { font-size: 11px; margin-top: 4px; text-align: right; }
.responder textarea { max-width: none; resize: vertical; }
.aprendizaje { padding: 6px 0; }
.crece { flex: 1 1 auto; }
.campo.crece input { max-width: none; }
.espacio { margin-top: 14px; }
@media (max-width: 1000px) { .bandeja { grid-template-columns: 1fr; } .bandeja-conversacion { position: static; } }
@media (min-width: 901px) { .app { background: linear-gradient(to right, var(--lateral) 248px, transparent 248px); } }
textarea.monoespacio { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; width: 100%; }

/* Pendiente: lo urgente en rojo, lo pendiente en amarillo */
.avisos { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.aviso { border-left: 4px solid var(--borde-fuerte); background: var(--superficie); border-radius: var(--radio-s); padding: 12px 14px; box-shadow: var(--sombra); display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.aviso.urgente { border-left-color: var(--error); background: var(--error-fondo); }
.aviso.pendiente { border-left-color: var(--aviso); background: var(--aviso-fondo); }
.aviso strong { display: block; } .aviso .detalle { color: var(--texto-2); font-size: .92em; margin-top: 4px; overflow-wrap: anywhere; }
.aviso form { flex-shrink: 0; }
.chip.aviso-chip { background: var(--aviso-fondo); color: var(--aviso); }
.seccion-pendiente { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 1.05rem; }
tr.resaltada td { background: color-mix(in srgb, var(--marca) 10%, transparent); font-weight: 600; }

/* --- pulso: la actividad de los últimos 30 días, lo primero que se ve ---------------------------------- */
.pulso { position: relative; background: var(--pulso); border: 1px solid var(--borde); color: var(--papel); border-radius: 20px; padding: 24px 28px 0; margin-bottom: 22px; overflow: hidden; }
.pulso-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; position: relative; z-index: 1; }
.pulso h2 { font-size: 15px; font-weight: 600; margin: 0; color: #C9D2CF; }
.pulso-cifras { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 10px; position: relative; z-index: 1; }
.pulso-cifra strong { display: block; font-family: var(--titular); font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.pulso-cifra span { color: #C9D2CF; font-size: 13px; }
.pulso-cifra .sube { color: var(--menta); font-weight: 600; } .pulso-cifra .baja { color: #FF8E9B; font-weight: 600; }
.pulso-grafico { display: block; width: calc(100% + 56px); margin: 6px -28px 0; height: 96px; }
.pulso-grafico .linea { fill: none; stroke: var(--menta); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.pulso-grafico .area { fill: var(--menta); opacity: .12; }
.pulso-grafico .hoy { fill: var(--menta); }
.pulso-pie { display: flex; justify-content: space-between; color: #A9B4B0; font-size: 12px; padding: 6px 0 14px; position: relative; z-index: 1; }

/* --- tarjetas de cifras con su mini-gráfico ------------------------------------------------------------ */
.kpi-mini { display: block; width: 100%; height: 34px; margin-top: 10px; }
.kpi-mini polyline { fill: none; stroke: var(--marca); stroke-width: 2; vector-effect: non-scaling-stroke; }
.kpi-mini.coral polyline { stroke: var(--coral); }

/* --- escaparate: reglas que deciden qué ve el cliente al buscar ---------------------------------------- */
.escaparate { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 22px; }
.escaparate a.tipo-regla { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); color: inherit; text-decoration: none; box-shadow: var(--sombra); }
.escaparate a.tipo-regla:hover { border-color: var(--marca); text-decoration: none; }
.escaparate a.tipo-regla[aria-current="true"] { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent); }
.tipo-regla .icono-grande { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--marca) 12%, var(--superficie)); color: var(--marca); }
.tipo-regla strong { display: block; font-size: 15px; } .tipo-regla span { color: var(--texto-3); font-size: 13px; }
.tipo-regla .cuantas { margin-left: auto; font-weight: 800; font-size: 20px; }
.regla-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.regla-fila .consulta { font-weight: 700; }
.factor.sube { color: var(--ok); font-weight: 700; } .factor.baja { color: var(--error); font-weight: 700; }
.banner-previa { max-width: 220px; max-height: 70px; border-radius: 8px; border: 1px solid var(--borde); object-fit: cover; }
table.escalones { width: auto; } table.escalones td, table.escalones th { padding: 6px 8px; } table.escalones input { width: 120px; }
@media (max-width: 900px) { .pulso { padding: 20px 18px 0; } .pulso-grafico { width: calc(100% + 36px); margin: 10px -18px 0; } .pulso-cifra strong { font-size: 34px; } }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset > legend { padding: 0; margin-bottom: 10px; font-size: 15px; }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 16px; }
.planes .tarjeta { min-width: 0; }
.planes input[type=text], .planes input[type=number] { max-width: 100%; }
@media (max-width: 520px) { .planes { grid-template-columns: 1fr; } }
.planes > .tarjeta, .planes > form.tarjeta { margin-top: 0; }

/* --- Enséñale: conversación para corregir buscador y asistente ------------------------------------------ */
.ensenale { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .ensenale { grid-template-columns: 1fr; } }
.ensenale .tarjeta + .tarjeta { margin-top: 0; }
.apilado-lateral { display: flex; flex-direction: column; gap: 16px; }
.charla { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px; }
.charla-cabeza { display: flex; gap: 14px; align-items: flex-start; }
.charla-cabeza > div { flex: 1 1 auto; } .charla-cabeza h2 { margin-bottom: 2px; font-size: 19px; }
.charla .icono-grande { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: var(--marca); color: var(--sobre-marca); }
.charla .icono-grande .icono { width: 22px; height: 22px; }
.hilo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.turno { display: flex; flex-direction: column; gap: 10px; }
.turno .burbuja { margin: 0; max-width: 85%; }
.turno.user .burbuja { align-self: flex-end; }
.turno.assistant .burbuja { align-self: flex-start; }
.burbuja.pregunta { border-style: dashed; }
.cambio { border: 1px solid var(--borde); border-left: 4px solid var(--marca); border-radius: var(--radio-s); padding: 12px 14px; background: var(--superficie-2); display: flex; flex-direction: column; gap: 6px; max-width: 92%; }
.cambio.destino-asistente { border-left-color: var(--coral); }
.cambio header { display: flex; gap: 8px; align-items: center; }
.cambio p { margin: 0; }
.cambio-que { font-weight: 650; font-size: 15px; }
.cambio-detalle { color: var(--texto-2); overflow-wrap: anywhere; }
.cambio .acciones { margin-top: 4px; }
.cambio.estado-rechazada { border-left-color: var(--borde-fuerte); background: var(--superficie); }
.cambio.estado-descartada, .cambio.estado-borrada { opacity: .7; }
.cambio .chip { align-self: flex-start; }
.cambio-no { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--texto-2); font-size: 13.5px; }
.cambio-no .icono { color: var(--ok); margin-top: 2px; }
.ejemplos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ejemplos li { padding: 7px 12px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto-2); font-size: 13px; }
.redactar { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--borde); padding-top: 16px; }
.redactar textarea { max-width: none; width: 100%; resize: vertical; min-height: 84px; font-size: 15px; }
form.pensando textarea { opacity: .6; }
form.pensando button[disabled] { cursor: progress; }
.normas h2 { display: flex; align-items: center; gap: 8px; } .normas h2 .icono { color: var(--ok); }
.normas ul { margin: 0 0 10px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--texto-2); }
.lista-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.titulo-seccion { margin: 26px 0 12px; } .titulo-seccion h2 { margin-bottom: 2px; }
.celda-texto { max-width: 420px; overflow-wrap: anywhere; }
.celda-texto .mono { margin-top: 4px; color: var(--texto-2); }
.chip.coral { background: var(--error-fondo); color: var(--error); }
.ensenale > * { min-width: 0; }
@media (max-width: 640px) {
  .charla { padding: 16px; }
  .charla-cabeza { flex-wrap: wrap; }
  .cambio, .turno .burbuja { max-width: 100%; }
}
.mensaje.aviso-mfa { background: var(--aviso-fondo); color: var(--aviso); border-color: transparent; margin-bottom: 16px; }
.mensaje.aviso-mfa a { font-weight: 700; margin-left: 6px; color: inherit; text-decoration: underline; }
.soporte-cabecera { align-items: flex-start; }
.pedir-soporte { position: relative; }
.pedir-soporte > summary { list-style: none; } .pedir-soporte > summary::-webkit-details-marker { display: none; }
.pedir-soporte[open] > form { position: absolute; right: 0; top: calc(100% + 8px); width: min(380px, 90vw); z-index: 5; }
@media (max-width: 640px) { .pedir-soporte[open] > form { position: static; width: 100%; margin-top: 8px; } }
/* «.aviso» (tarjeta de aviso) no debe deformar las etiquetas y puntos de estado que comparten el nombre */
.chip.aviso { border-left: 0; box-shadow: none; padding: 2px 9px; border-radius: 999px; display: inline-flex; gap: 5px; align-items: center; justify-content: flex-start; }
.punto.aviso { border-left: 0; box-shadow: none; padding: 0; border-radius: 50%; display: inline-block; }
.titulo-pagina > div:first-child { flex: 1 1 320px; min-width: 0; }
/* bandeja: ficha del cliente y sus datos */
.ficha-cliente { margin: 8px 0 12px; }
.ficha-cliente .ficha { padding: 12px 16px; border-left: 4px solid var(--marca); }
.ficha-cliente .ficha > summary { cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.ficha-cliente .historial { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.ficha-cliente .pedidos { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.ficha-cliente .pedidos li { padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio-s); background: var(--superficie-2); }
.menu-datos { position: relative; }
.menu-datos > summary { list-style: none; } .menu-datos > summary::-webkit-details-marker { display: none; }
.menu-datos[open] > .tarjeta { position: absolute; right: 0; top: calc(100% + 6px); width: 260px; z-index: 5; }
.espacio-abajo { margin-bottom: 14px; }
pre.registro { white-space: pre-wrap; font-family: var(--mono); font-size: 12px; max-height: 320px; overflow: auto; background: var(--superficie-2); padding: 10px; border-radius: var(--radio-s); }
.nav a .contador { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--menta); color: var(--tinta); }
.nav a .contador.urgente { background: #C02A3F; color: #fff; }
.nav a[aria-current="page"] .contador { background: var(--tinta); color: var(--menta); }
.sector-cifras { display: flex; gap: 6px; flex-wrap: wrap; }

/* alta desde la web: campo trampa para robots (fuera de la vista, sin display:none para que lo rellenen) */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.codigo-linea { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.codigo-linea code { overflow-wrap: anywhere; }

/* --- secciones de página, formularios en línea y tarjetas plegables (cobros, asistente, equipo) --- */
h2.seccion { font-size: 1.05rem; margin: 28px 0 12px; }
section.apilado, div.apilado { display: flex; flex-direction: column; gap: 12px; }
section.apilado > h2, section.apilado > h3 { margin: 0; }
.fila-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.fila-form .campo { margin: 0; min-width: 200px; flex: 1 1 220px; }
details.plegable { padding: 0; }
details.plegable > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 20px; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary h2 { margin: 0; font-size: 1rem; flex: 1; }
details.plegable > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3); transform: rotate(45deg); transition: transform .15s; margin: -4px 4px 0 0; }
details.plegable[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
details.plegable > .tabla-envoltorio, details.plegable > p { margin: 0 20px 18px; }
details.plegable:focus-within > summary { outline: none; }
details.plegable > summary:focus-visible { outline: 3px solid var(--marca); outline-offset: -3px; border-radius: var(--radio); }
.tarjeta + details.plegable, details.plegable + .tarjeta, details.plegable + details.plegable { margin-top: 16px; }
.titulo-pagina h2 { margin: 0; }
@media (prefers-reduced-motion: reduce) { details.plegable > summary::after { transition: none; } }
.aviso.separado { margin-bottom: 20px; }
.rejilla + .tarjeta, .tarjeta + .rejilla, .rejilla + details.plegable, .rejilla + .rejilla, .tarjeta + h2.seccion { margin-top: 16px; }
.tabla-envoltorio + .tarjeta, .tarjeta + .tabla-envoltorio, .tabla-envoltorio + h2, .tarjeta + h2, .pestanas + h2 { margin-top: 16px; }

/* --- Recursos: memoria, CPU y disco (65 % amarillo · 70 % rojo · 75 % pasado) --------------------------------- */
.recursos { width: 100%; border-collapse: collapse; }
.recursos td, .recursos th { padding: 10px 8px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: middle; }
.recursos th { font-size: .82rem; color: var(--texto-3); font-weight: 600; }
.recursos .cifra { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.recursos .barra { min-width: 120px; }
.recursos tr.n-vigilar .cifra { color: var(--aviso); }
.recursos tr.n-cerca .cifra, .recursos tr.n-pasado .cifra { color: var(--error); }
.recursos tr.n-cerca, .recursos tr.n-pasado { background: var(--error-fondo); }
.barra.n-vigilar > i { background: var(--aviso); } .barra.n-cerca > i, .barra.n-pasado > i { background: var(--error); }
.barra.n-bien > i { background: var(--ok); }
.alerta-recursos { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: #C02A3F; color: #fff; border-radius: var(--radio-s); padding: 12px 16px; margin-bottom: 16px; font-weight: 600; }
.alerta-recursos .boton { background: #fff; color: #C02A3F; border-color: #fff; }
.alerta-recursos .icono { width: 22px; height: 22px; }
@media (max-width: 700px) { .recursos .solo-ancho { display: none; } }
.ayuda.aviso-ventana { color: var(--aviso); font-weight: 600; }
/* «¿Cómo funciona?»: en la cabecera de cada pantalla; se despliega encima del contenido */
.como-funciona { position: relative; }
.como-funciona > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  font-weight: 600; font-size: 13px; color: var(--info); background: var(--info-fondo); }
.como-funciona > summary::-webkit-details-marker { display: none; }
.como-funciona > summary:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.como-funciona > ul { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: min(440px, calc(100vw - 32px));
  margin: 0; padding: 14px 18px 14px 34px; display: grid; gap: 8px; background: var(--superficie); color: var(--texto-2);
  border: 1px solid var(--borde); border-radius: var(--radio-s); box-shadow: var(--sombra); font-size: 14px; line-height: 1.5; }
@media (max-width: 700px) { .como-funciona > summary span.texto-ayuda { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .como-funciona > ul { position: fixed; left: 16px; right: 16px; width: auto; top: 64px; } }
.con-ayuda { margin: 0 0 12px; }
.con-ayuda > h2, .con-ayuda > h3, .con-ayuda > label { display: inline; margin: 0 6px 0 0; vertical-align: middle; }
.campo > .con-ayuda { margin: 0; }
.ayuda-bloque { display: inline; }
.ayuda-bloque > summary { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; list-style: none; cursor: pointer;
  vertical-align: middle; border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--info); background: var(--info-fondo); }
.ayuda-bloque > summary::-webkit-details-marker { display: none; }
.ayuda-bloque > summary:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.ayuda-bloque > p { display: block; margin: 8px 0 0; padding: 10px 12px; color: var(--texto-2); background: var(--info-fondo); border-radius: var(--radio-s); font-size: 14px; font-weight: 400; line-height: 1.5; }
.ayuda-pagina h3 { font-size: 14px; margin: 12px 0 4px; }
.ayuda-pagina dl { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 10px 20px; margin: 0; }
.ayuda-pagina dt { font-weight: 700; } .ayuda-pagina dd { margin: 0; color: var(--texto-2); }
@media (max-width: 700px) { .ayuda-pagina dl { grid-template-columns: 1fr; } .ayuda-pagina dd { margin-bottom: 8px; } }
@media (max-width: 700px) {
  .cabecera-usuario .texto-boton { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cabecera-usuario { gap: 2px; }
}

/* --- imagen omnly: más aire, cifras grandes y estados con icono y palabra --------------------------------- */
.principal { padding: 32px 36px 64px; }
.titulo-pagina { margin-bottom: 24px; }
.lateral { padding: 22px 14px; }
.nav a { border-radius: 10px; }
.nav a:hover { background: var(--noche-2); color: #fff; }
.nav a[aria-current="page"]:hover { background: var(--menta); color: var(--tinta); }
.tarjeta { padding: 24px; }
.rejilla { gap: 20px; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.kpi { padding: 22px 24px; }
.kpi-valor { font-family: var(--titular); font-size: 40px; font-weight: 800; }
.kpi-etiqueta { font-size: 13px; }
.boton { font-weight: 600; min-height: 42px; padding: 9px 18px; border-radius: 10px; }
.boton.peque { min-height: 34px; padding: 5px 12px; }
.boton.principal-btn:hover { filter: none; background: color-mix(in srgb, var(--marca) 86%, var(--texto)); }
.chip { padding: 3px 10px; font-family: var(--letra); font-weight: 600; letter-spacing: 0; vertical-align: middle; }
h1, h2, h3 { word-spacing: .08em; }
.pulso h2 { font-family: var(--letra); letter-spacing: 0; word-spacing: 0; }
.chip.ok::before, .chip.aviso::before, .chip.aviso-chip::before, .chip.atencion::before, .chip.coral::before, .chip.error::before {
  content: ""; width: 13px; height: 13px; flex: none; background: currentColor;
  -webkit-mask: url("../img/estado-aviso.86956a5ae066.svg") center / contain no-repeat; mask: url("../img/estado-aviso.86956a5ae066.svg") center / contain no-repeat; }
.chip.ok::before { -webkit-mask-image: url("../img/estado-ok.8c443708441f.svg"); mask-image: url("../img/estado-ok.8c443708441f.svg"); }
.chip.error::before, .chip.atencion::before, .chip.coral::before { -webkit-mask-image: url("../img/estado-error.6b3efe10e3c2.svg"); mask-image: url("../img/estado-error.6b3efe10e3c2.svg"); }
.chip .punto { display: none; }
th { font-weight: 600; padding: 12px 16px; font-family: var(--letra); }
td { padding: 13px 16px; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=search], input[type=number], input[type=date], select, textarea { padding: 10px 12px; border-radius: var(--radio-s); min-height: 42px; }
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--marca) 45%, transparent); }
.check input { accent-color: var(--marca); }
.pestanas { gap: 4px; margin-bottom: 24px; }
.pestanas a { padding: 11px 14px; }
.pestanas a[aria-selected="true"] { font-weight: 600; }
.pulso { padding: 28px 32px 0; margin-bottom: 24px; }
.pulso-cifras { gap: 48px; margin-top: 14px; }
.pulso .boton { background: transparent; color: var(--papel); border-color: #566770; }
.pulso .boton:hover { border-color: var(--menta); background: transparent; }
.pulso-grafico { width: calc(100% + 64px); margin: 10px -32px 0; }
.kpi-tienda { margin-bottom: 24px; }
.entrada { background: var(--fondo); }
.entrada .tarjeta { padding: 32px; max-width: 440px; }
@media (max-width: 900px) {
  .principal { padding: 22px 16px 48px; }
  .pulso { padding: 20px 18px 0; } .pulso-grafico { width: calc(100% + 36px); margin: 10px -18px 0; }
  .pulso-cifras { gap: 22px 32px; } .pulso-cifra strong { font-size: 36px; }
  .kpi-valor { font-size: 32px; } .kpi { padding: 16px 18px; } .tarjeta { padding: 18px; }
  h1 { font-size: 26px; }
}