:root {
  --rubro: #0b6e4f; --rubro-hover: #095c42; --rubro-claro: #86c9b0; --rubro-medio: #3a8a6e;
  --rojo: #c62828; --verde: #2e7d32; --naranja: #ef6c00; --fondo-suave: #f4f7f6;
  --pico-font-size: 100%;
}
[x-cloak] { display: none !important; }
body { background: var(--fondo-suave); }
.barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1rem; background: var(--color-rubro-oscuro, #0b3d2e); transition: background .4s; color: #fff; position: sticky; top: 0; z-index: 20; }
.marca { display: flex; align-items: center; gap: .7rem; }
.marca .logo { font-size: 2rem; width: 3rem; height: 3rem; display: grid; place-items: center; background: #ffffff22; border-radius: 50%; }
.marca strong { display: block; font-size: 1.15rem; }
.marca small { color: #cfe8de; text-transform: capitalize; }
.acciones-barra { display: flex; gap: .5rem; align-items: center; }
.acciones-barra select { margin: 0; padding-block: .35rem; min-width: 9rem; }
.acciones-barra .outline { white-space: nowrap; color: #fff; border-color: #ffffff66; margin: 0; padding: .35rem .7rem; }
.campana { position: relative; }
.globo { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; border-radius: 1rem; background: var(--rojo); color: #fff;
  font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.3rem; margin-left: .25rem; }
.campana .globo { position: absolute; top: -6px; right: -8px; }

/* Alta */
.alta { max-width: 820px; margin: 2rem auto; }
.alta h1 { font-size: 1.9rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.4rem 0 1rem; }
.chip { padding: .3rem .8rem; font-size: .9rem; border-radius: 2rem; background: #fff; color: #263238; border: 1px solid var(--pico-muted-border-color); width: auto; margin: 0; }
.chip.activo { background: var(--pico-primary-background); color: #fff; }

/* KPIs */
.app { padding: 1rem; max-width: 1500px; margin: 0 auto; }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; margin-bottom: 1rem; }
.kpi { background: #fff; border-radius: 12px; padding: .8rem 1rem; box-shadow: 0 1px 3px #0001; }
.kpi small { color: var(--pico-muted-color); display: block; }
.kpi strong { font-size: 1.6rem; display: block; line-height: 1.2; }
.kpi span { font-size: .8rem; color: var(--pico-muted-color); }
.kpi.riesgo { background: linear-gradient(135deg, #b71c1c, #e53935); color: #fff; cursor: pointer; }
.kpi.riesgo small, .kpi.riesgo span { color: #ffe0e0; }
.kpi.ok strong { color: var(--verde); }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, 1fr); } .kpi.riesgo { grid-column: 1 / -1; } }

/* Pestañas */
.pestanas { display: flex; gap: .3rem; overflow-x: auto; margin-bottom: 1rem; border-bottom: 2px solid #dfe7e4; }
.pestanas button { background: none; border: 0; color: var(--pico-muted-color); border-bottom: 3px solid transparent; border-radius: 0;
  padding: .6rem .9rem; margin: 0 0 -2px; white-space: nowrap; width: auto; }
.pestanas button.activa { color: var(--pico-primary); border-bottom-color: var(--pico-primary); font-weight: 600; }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .dos { grid-template-columns: 1fr; } }
article { border-radius: 12px; }
article > header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: space-between; }
.vacio { display: flex; flex-direction: column; justify-content: center; color: var(--pico-muted-color); font-size: 1.05rem; }
.canal { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-bottom: .6rem; }
.canal label { margin: 0; }
.radio { font-size: .9rem; text-transform: capitalize; }
.archivo { display: flex; align-items: center; justify-content: center; border: 1px solid var(--pico-primary); border-radius: var(--pico-border-radius);
  color: var(--pico-primary); cursor: pointer; padding: .6rem; margin-bottom: var(--pico-spacing); font-size: .95rem; }
.archivo input { display: none; }
.grabando { background: var(--rojo) !important; color: #fff !important; border-color: var(--rojo) !important; }

/* Ficha */
.ia { background: #eef7f3; border-left: 4px solid var(--pico-primary); padding: .5rem .8rem; border-radius: 6px; font-size: .95rem; }
.etiqueta { font-size: .78rem; padding: .15rem .55rem; border-radius: 1rem; background: #e8eef0; white-space: nowrap; }
.etiqueta.pedido { background: #d8f3e6; } .etiqueta.presupuesto { background: #e3ecff; } .etiqueta.reclamo, .etiqueta.rojo, .etiqueta.u-alta { background: #ffdede; color: #8b0000; }
.etiqueta.no_es_venta { background: #eee; color: #666; } .etiqueta.u-media { background: #fff1d6; }
.prob { flex: 1; min-width: 80px; height: 8px; background: #e6e6e6; border-radius: 4px; overflow: hidden; }
.prob i { display: block; height: 100%; background: linear-gradient(90deg, var(--naranja), var(--verde)); }
table.items input, table.catalogo input { margin: 0; padding: .3rem .4rem; height: auto; }
table.items td:first-child { width: 5rem; }
.der { text-align: right; }
.aviso-cat { color: var(--naranja); display: block; }
.falta { background: #fff8e6; border-radius: 8px; padding: .6rem .9rem; margin-bottom: 1rem; }
.falta ul { margin: .3rem 0 0; }
button.mini { padding: .1rem .45rem; font-size: .8rem; margin: 0; width: auto; }
.mini-texto { padding: .25rem .6rem; font-size: .85rem; width: auto; margin: 0; }
input.corto { width: 6rem; display: inline-block; margin: 0 .3rem; padding: .3rem .5rem; height: auto; }

/* Embudo */
.filtros { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: .8rem; }
.filtros label { margin: 0; }
.filtros input[type=search] { margin: 0; max-width: 300px; }
.kanban { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: .7rem; overflow-x: auto; padding-bottom: 1rem; }
.columna { background: #e9efed; border-radius: 12px; padding: .6rem; min-height: 300px; }
.columna h4 { font-size: .95rem; margin: .2rem .2rem .6rem; display: flex; justify-content: space-between; flex-wrap: wrap; }
.columna h4 small { color: var(--pico-muted-color); font-weight: 400; }
.columna.perdido { background: #f3e9e9; } .columna.confirmado, .columna.entregado { background: #e4f2e8; }
.tarjeta { background: #fff; border-radius: 10px; padding: .55rem .7rem; margin-bottom: .5rem; cursor: pointer; box-shadow: 0 1px 2px #0002;
  border-left: 4px solid #b0bec5; transition: transform .1s; }
.tarjeta:hover { transform: translateY(-2px); }
.tarjeta.riesgo { border-left-color: var(--rojo); background: #fff6f6; }
.tarjeta.sonando { animation: sacudir 2.5s infinite; }
@keyframes sacudir { 0%, 90%, 100% { transform: none; } 92% { transform: rotate(-1.5deg); } 96% { transform: rotate(1.5deg); } }
.tarjeta small { color: var(--pico-muted-color); display: block; font-size: .8rem; }
.fila { display: flex; justify-content: space-between; gap: .4rem; align-items: center; }
.meta { font-size: .75rem; color: var(--pico-muted-color); margin-top: .3rem; }
.rojo { color: var(--rojo); font-weight: 600; }

/* Tablero */
.graficos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 900px) { .graficos { grid-template-columns: 1fr; } }
.grafico { position: relative; height: 260px; }
.prioridades ol li { margin-bottom: .5rem; }

/* Detalle */
dialog article.detalle { max-width: 1050px; width: 96vw; }
.etapas { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; }
.etapas button { width: auto; margin: 0; padding: .35rem .7rem; font-size: .88rem; }
.lista-items { padding-left: 1rem; }
.lista-items li { display: flex; justify-content: space-between; gap: 1rem; list-style: none; border-bottom: 1px dashed #ddd; padding: .2rem 0; }
.posponer { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-bottom: .3rem; }
.chat { background: #efeae2; border-radius: 10px; padding: .6rem; max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.burbuja { max-width: 85%; padding: .35rem .6rem; border-radius: 8px; font-size: .88rem; white-space: pre-wrap; }
.burbuja small { display: block; text-align: right; font-size: .7rem; color: #667781; }
.burbuja.cliente { background: #fff; align-self: flex-start; }
.burbuja.negocio { background: #d9fdd3; align-self: flex-end; }
.nota { display: flex; gap: .5rem; }
.nota input { margin: 0; } .nota button { width: auto; margin: 0; }
.linea-tiempo { list-style: none; padding: 0; border-left: 2px solid #cfd8dc; margin-left: .4rem; }
.linea-tiempo li { padding: .2rem 0 .2rem .8rem; font-size: .88rem; position: relative; }
.linea-tiempo li::before { content: ''; position: absolute; left: -6px; top: .6rem; width: 10px; height: 10px; border-radius: 50%; background: var(--pico-primary); }
.linea-tiempo small { color: var(--pico-muted-color); }

/* Config */
.usuario input, .usuario select { margin: 0; }
.avisos li { margin-bottom: .4rem; }
.wa-config fieldset label { margin-bottom: .5rem; }

/* QR */
.qr-tarjeta { text-align: center; }
.qr { width: 240px; max-width: 70vw; margin: 1rem auto; }
.qr.chico { width: 120px; margin: 0; flex: none; }
.qr svg { width: 100%; height: auto; display: block; }
.sim-qr { display: flex; gap: 1rem; align-items: center; text-align: left; }
@media print {
  body * { visibility: hidden; }
  #cartel, #cartel * { visibility: visible; }
  #cartel { position: fixed; inset: 0; box-shadow: none; font-size: 1.4rem; padding-top: 3rem; }
  .no-imprimir { display: none !important; }
}

/* Cómo usa la IA */
.como-ia { max-width: 1100px; margin: 1rem auto; background: #fff; padding: 1.5rem; border-radius: 12px; }
.grid-ia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.grid-ia > div { background: var(--fondo-suave); padding: .9rem; border-radius: 10px; font-size: .92rem; }
@media (max-width: 900px) { .grid-ia { grid-template-columns: 1fr; } }

/* Avisos flotantes */
.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; max-width: min(420px, calc(100vw - 2rem)); }
.toast { background: #263238; color: #fff; padding: .7rem 1rem; border-radius: 10px; box-shadow: 0 4px 14px #0004; cursor: pointer; font-size: .92rem; animation: entra .25s; }
.toast.ok { background: var(--verde); } .toast.alerta { background: var(--rojo); }
@keyframes entra { from { transform: translateY(20px); opacity: 0; } }
.error-flotante { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 2001; max-width: calc(100% - 2rem);
  margin: 0; padding: .75rem 1rem; cursor: pointer; background: var(--rojo); color: #fff; border-radius: 10px; }

button.bot { width: 100%; background: linear-gradient(135deg, #5b21b6, #7c3aed); border-color: #6d28d9; margin-bottom: .3rem; }
button.bot small { opacity: .85; font-weight: 400; }
.pista { color: var(--pico-muted-color); margin-bottom: 1rem; }
.burbuja.nota { background: #fff3c4; align-self: center; font-style: italic; }

.bot-tarjeta { display: flex; align-items: center; gap: .8rem; padding: .8rem; border-radius: 12px; margin-bottom: 1rem; color: #fff;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000)); }
.bot-tarjeta strong { display: block; font-size: 1.2rem; }
.bot-tarjeta small { opacity: .85; }
.bot-avatar { font-size: 2rem; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; background: #fff; border-radius: 50%; }
.chip.emoji { font-size: 1.3rem; padding: .15rem .55rem; }
.emoji-input { width: 4rem !important; margin: 0 !important; padding: .2rem .4rem !important; height: auto !important; text-align: center; font-size: 1.2rem; }
input[type=color] { height: 2.8rem; padding: .2rem; }
.logo-alta { font-size: 3rem; }
.kpi.ok strong { color: var(--verde); }

.archivo.insta { border: 0; color: #fff; background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); }
.entradas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem; }
.entradas > * { margin: 0 !important; }

.ayuda { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; padding: 0; margin: 0 0 0 .3rem; border-radius: 50%;
  font-size: .85rem; font-weight: 700; line-height: 1; vertical-align: middle; background: var(--pico-primary); border: 0; color: #fff; cursor: pointer; }
.ayuda.falsa { cursor: default; }
.ayuda-caja { max-width: 560px; }
.ayuda-caja ol { padding-left: 1.2rem; } .ayuda-caja li { margin-bottom: .4rem; }
.ayuda-caja footer { display: flex; gap: .5rem; } .ayuda-caja footer > * { margin: 0; }

.sugerido { display: block; color: var(--naranja); font-size: .72rem; }

/* ---------- Modo oscuro (Pico pone sus colores; acá los de Mostrador) ---------- */
[data-theme=dark] { --fondo-suave: #0f1417; }
[data-theme=dark] body { background: var(--fondo-suave); }
[data-theme=dark] .kpi, [data-theme=dark] .tarjeta, [data-theme=dark] .como-ia, [data-theme=dark] .chip { background: #1a2127; color: #e6edf3; }
[data-theme=dark] .kpi.riesgo { background: linear-gradient(135deg, #8e1717, #c62828); }
[data-theme=dark] .columna { background: #151b20; }
[data-theme=dark] .columna.perdido { background: #241719; }
[data-theme=dark] .columna.confirmado, [data-theme=dark] .columna.entregado { background: #13221a; }
[data-theme=dark] .tarjeta.riesgo { background: #2a1517; }
[data-theme=dark] .ia { background: #12241d; }
[data-theme=dark] .falta { background: #2a2414; }
[data-theme=dark] .grid-ia > div { background: #151b20; }
[data-theme=dark] .chat { background: #0d1916; }
[data-theme=dark] .burbuja.cliente { background: #202c33; color: #e6edf3; }
[data-theme=dark] .burbuja.negocio { background: #005c4b; color: #e6edf3; }
[data-theme=dark] .burbuja.nota { background: #3a3214; color: #f3e6b0; }
[data-theme=dark] .etiqueta { background: #26313a; color: #e6edf3; }
[data-theme=dark] .etiqueta.pedido { background: #12402c; } [data-theme=dark] .etiqueta.presupuesto { background: #1d2f55; }
[data-theme=dark] .etiqueta.reclamo, [data-theme=dark] .etiqueta.rojo, [data-theme=dark] .etiqueta.u-alta { background: #4a1517; color: #ffb4b4; }
[data-theme=dark] .etiqueta.u-media { background: #3d3214; }
[data-theme=dark] .pestanas { border-bottom-color: #26313a; }
[data-theme=dark] .qr svg { background: #fff; padding: 6px; border-radius: 8px; }
[data-theme=dark] .linea-tiempo { border-left-color: #2d3640; }
.tema { padding: .35rem .6rem !important; }
[data-theme=dark] .pestanas button.activa { color: #fff; }
[data-theme=dark] a:not([role=button]) { color: #8cc8ff; }

/* Colores de Pico a partir del color del rubro (más claros en modo oscuro para que se lean). */
:root[data-theme=light], :root:not([data-theme]) {
  --pico-primary: var(--rubro); --pico-primary-background: var(--rubro); --pico-primary-border: var(--rubro);
  --pico-primary-hover: var(--rubro-hover); --pico-primary-hover-background: var(--rubro-hover); --pico-primary-hover-border: var(--rubro-hover);
  --pico-primary-underline: var(--rubro); --pico-primary-focus: color-mix(in srgb, var(--rubro) 30%, transparent);
}
:root[data-theme=dark] {
  --pico-primary: var(--rubro-claro); --pico-primary-background: var(--rubro-medio); --pico-primary-border: var(--rubro-medio);
  --pico-primary-hover: #fff; --pico-primary-hover-background: var(--rubro); --pico-primary-hover-border: var(--rubro-claro);
  --pico-primary-underline: var(--rubro-claro); --pico-primary-focus: color-mix(in srgb, var(--rubro-claro) 35%, transparent);
  --pico-primary-inverse: #fff;
  --pico-secondary: #b8c4cf; --pico-secondary-border: #4b5866; --pico-secondary-background: #3a4652; --pico-secondary-inverse: #fff;
  --pico-contrast: #e6edf3; --pico-contrast-background: #e6edf3; --pico-contrast-border: #e6edf3; --pico-contrast-inverse: #11161a;
}
[data-theme=dark] .archivo { color: var(--rubro-claro); border-color: var(--rubro-claro); }
[data-theme=dark] .archivo.insta { color: #fff; }
[data-theme=dark] .etapas button.outline { color: #e6edf3; border-color: #4b5866; }
[data-theme=dark] .etapas button.activa { background: var(--rubro-medio); border-color: var(--rubro-claro); color: #fff; }
[data-theme=dark] button.outline.secondary, [data-theme=dark] [role=button].outline.secondary { color: #d0d8e0; border-color: #4b5866; }
[data-theme=dark] input[type=color] { background: #1a2127; }
[data-theme=dark] .ayuda { background: var(--rubro-medio); color: #fff; }
[data-theme=dark] .kpi small, [data-theme=dark] .kpi span { color: #9aa7b3; }
[data-theme=dark] .kpi.riesgo small, [data-theme=dark] .kpi.riesgo span { color: #ffe0e0; }
[data-theme=dark] .tarjeta small, [data-theme=dark] .meta { color: #9aa7b3; }
[data-theme=dark] .aviso-cat, [data-theme=dark] .sugerido { color: #ffb066; }

.oir { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; margin: 0 0 0 .25rem; border-radius: 50%;
  background: transparent; border: 1px solid currentColor; color: inherit; font-size: .8rem; vertical-align: middle; opacity: .75; cursor: pointer; }
.oir:hover { opacity: 1; }
.oir.texto { width: auto; border-radius: 1rem; padding: .1rem .6rem; font-size: .8rem; }