/* Puente de mando — mismos tokens que los dashboards (scripts/_dashboard_html.py, BlueGrow DS) */
:root{
  --blue-grow:#1616EF;
  --bg-primary:#FAFBFC; --bg-card:#FFFFFF; --bg-secondary:#F2F3F5;
  --text-primary:#111218; --text-secondary:#5A5D6B; --text-tertiary:#8E91A0; --text-inverse:#FFF;
  --border-light:#E4E5EA; --border-medium:#D0D2D9;
  --verde:#0D9E5E; --verde-bg:#E6F7EF; --naranja:#D97B0D; --naranja-bg:#FEF4E6;
  --rojo:#D93025; --rojo-bg:#FDECEB; --gris:#8E91A0; --gris-bg:#F2F3F5;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --radius-md:10px; --radius-lg:14px; --radius-full:9999px;
  --font:'Montserrat',sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--text-primary);background:var(--bg-primary);
     display:grid;grid-template-columns:230px 1fr;height:100vh;font-size:14px}

/* Anti-parpadeo del arranque. Hasta que /api/sesion contesta no se sabe QUIÉN mira, y el
   index trae el menú completo escrito en el HTML. Sin esto se ve un fotograma con todos los
   apartados del cerebro antes de que el JS esconda los que no te tocan. El reparto de
   páginas (equipo/cliente/login) ya lo hace el servidor con un 302 —ver destino_shell()—;
   esto cubre lo que el 302 no alcanza: una copia en caché del index y los apartados por rol.
   `visibility` y no `display`: la rejilla ya está montada, así que al aparecer no salta nada. */
body.arrancando > *{visibility:hidden}

/* --- barra lateral --- */
#nav{background:var(--blue-grow);color:var(--text-inverse);display:flex;flex-direction:column;padding:18px 12px}
#nav .marca{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
#nav .logo{font-size:26px}
#nav .marca b{display:block;font-size:16px;font-weight:800}
#nav .marca span{display:block;font-size:11px;opacity:.75}
/* Quién eres, en la cabecera del menú. Es un ENLACE a Mi perfil: la identidad se mira y se toca
   en el mismo sitio, sin buscarla en el pie. La inicial es lo que sobrevive al ancho de un móvil. */
#nav .yo{display:flex;align-items:center;gap:9px;margin:0 0 14px;padding:7px 8px;
         border-radius:var(--radius-md);background:rgba(255,255,255,.10);
         color:var(--text-inverse);text-decoration:none;opacity:.95}
#nav .yo:hover{background:rgba(255,255,255,.18);opacity:1}
#nav .yo.activa{background:rgba(255,255,255,.22);opacity:1}   /* estás en Mi perfil */

/* Lo que se viene a mirar desde «Mis encargos»: se marca un momento y se apaga. Sin animación
   de entrada a propósito — el scroll ya dice dónde estás, y un parpadeo más es ruido. */
.enfocado{outline:2px solid var(--blue-grow);outline-offset:3px;border-radius:var(--radius-md);
          transition:outline-color .5s ease}

#nav .yo .ini{flex:none;width:30px;height:30px;border-radius:var(--radius-full);
              background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;
              font-weight:800;font-size:14px}
#nav .yo .quien{min-width:0}
#nav .yo .quien b{display:block;font-size:12.5px;font-weight:700;overflow:hidden;
                  text-overflow:ellipsis;white-space:nowrap}
#nav .yo .quien span{display:block;font-size:10.5px;opacity:.75}
#nav nav{display:flex;flex-direction:column;gap:2px;flex:1}
#nav a{color:var(--text-inverse);text-decoration:none;padding:9px 10px;border-radius:var(--radius-md);
       font-weight:600;font-size:13px;opacity:.82}
#nav a:hover{background:rgba(255,255,255,.12);opacity:1}
#nav a.activa{background:rgba(255,255,255,.18);opacity:1}
#nav .badge{background:var(--rojo);border-radius:var(--radius-full);padding:1px 7px;font-size:11px;margin-left:4px}
#nav .pie{font-size:11.5px;opacity:.85;padding:10px 8px 0;display:flex;align-items:center;gap:7px;
          border-top:1px solid rgba(255,255,255,.18)}

/* --- barra de móvil (oculta en escritorio: el menú es la columna de la izquierda) --- */
#barra-movil{display:none}
#nav-fondo{display:none}

/* --- contenido --- */
/* `min-width:0` no es cosmético: sin él, una celda de grid se ensancha con su contenido
   (`min-width:auto`), así que una tabla ancha estiraba la columna y el `overflow-x` de
   `.table-wrap` no llegaba a activarse nunca — la tabla se comía el layout en vez de scrollar. */
#contenido{overflow-y:auto;padding:26px 30px;min-width:0}
h2{font-size:19px;font-weight:800;margin:0 0 4px}
.sub{color:var(--text-tertiary);font-size:12px;margin:0 0 18px}
.cargando{color:var(--text-tertiary);padding:40px;text-align:center}

/* `min(Xpx,100%)` en vez de `Xpx` a secas: en escritorio se comporta igual, pero en una columna
   más estrecha que la tarjeta el mínimo deja de forzar el desbordamiento (era lo que cortaba las
   fichas de cliente por la mitad en el móvil). */
.grid{display:grid;gap:14px}
.grid.kpis{grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr))}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}

.card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);
      padding:16px 18px;box-shadow:var(--shadow-sm)}
.card h3{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--text-secondary);
         text-transform:uppercase;letter-spacing:.4px}
.card.alerta{border-left:4px solid var(--rojo)}
.card.aviso{border-left:4px solid var(--naranja)}

.kpi .valor{font-size:24px;font-weight:800}
.kpi .etiqueta{font-size:11.5px;color:var(--text-tertiary);margin-top:2px}
.kpi.verde .valor{color:var(--verde)} .kpi.naranja .valor{color:var(--naranja)}
.kpi.rojo .valor{color:var(--rojo)}

.dot{display:inline-block;width:9px;height:9px;border-radius:var(--radius-full);flex:none}
.dot.verde{background:var(--verde)} .dot.naranja{background:var(--naranja)}
.dot.rojo{background:var(--rojo)} .dot.gris{background:var(--gris)}

.chip{display:inline-block;border-radius:var(--radius-full);padding:3px 10px;font-size:11.5px;
      font-weight:600;margin:2px 4px 2px 0}
.chip.rojo{background:var(--rojo-bg);color:var(--rojo)}
.chip.naranja{background:var(--naranja-bg);color:var(--naranja)}
.chip.verde{background:var(--verde-bg);color:var(--verde)}
.chip.gris{background:var(--gris-bg);color:var(--text-secondary)}
/* Etapa EN CURSO en el tablero de vídeo: azul de marca, con el punto latiendo para que se
   distinga de un chip informativo — es lo único de la tarjeta que dice «esto se mueve». */
.chip.azul{background:#EEF0FF;color:var(--blue-grow)}
@keyframes v-latido{0%,100%{opacity:1}50%{opacity:.45}}
.chip.azul{animation:v-latido 1.6s ease-in-out infinite}

ul.checks{list-style:none;margin:0;padding:0}
ul.checks li{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13px}
ul.checks li.mal{color:var(--rojo);font-weight:600}

/* Una tabla densa (roster, asignaciones, conectores, servicios) NO se apila bien: son matrices
   donde el valor está en comparar filas. Así que scrollan DENTRO de su caja, nunca moviendo la
   página. Las dos sombras laterales aparecen solas cuando hay más tabla fuera de la vista (truco
   de gradientes con background-attachment: local/scroll — sin JS y sin tocar el marcado). */
.table-wrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(90deg, var(--bg-card) 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat local,
    linear-gradient(90deg, rgba(255,255,255,0), var(--bg-card) 70%) right / 24px 100% no-repeat local,
    linear-gradient(90deg, rgba(17,18,24,.13), rgba(17,18,24,0)) left / 10px 100% no-repeat scroll,
    linear-gradient(90deg, rgba(17,18,24,0), rgba(17,18,24,.13)) right / 10px 100% no-repeat scroll;}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{background:var(--bg-secondary);text-align:left;padding:7px 10px;font-size:11px;
   text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary)}
td{padding:7px 10px;border-top:1px solid var(--border-light)}
tr:hover td{background:rgba(22,22,239,.04)}

button,.btn{font-family:var(--font);font-weight:700;font-size:12.5px;border:0;cursor:pointer;
     border-radius:var(--radius-md);padding:8px 14px;background:var(--blue-grow);color:#fff}
button.secundario,a.btn.secundario{background:var(--bg-secondary);color:var(--text-primary)}
a.btn{display:inline-block;text-decoration:none;line-height:1.15}
button.peligro{background:var(--rojo)}
button:disabled{opacity:.5;cursor:default}

.vacio{color:var(--text-tertiary);font-size:13px;padding:8px 0}
.error-api{background:var(--rojo-bg);color:var(--rojo);padding:10px 14px;border-radius:var(--radius-md);
           font-size:13px;margin:10px 0}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:11.5px}

/* prosa: markdown del cerebro renderizado */
.prosa{font-size:13.5px;line-height:1.65;color:var(--text-primary)}
.prosa h2,.prosa h3,.prosa h4{margin:16px 0 6px;font-weight:800}
.prosa h2{font-size:16px}.prosa h3{font-size:14px}.prosa h4{font-size:13px}
.prosa ul,.prosa ol{margin:6px 0;padding-left:22px}
.prosa li{margin:3px 0}
.prosa code{background:var(--bg-secondary);padding:1px 5px;border-radius:5px;font-size:.9em}
.prosa pre{background:var(--bg-secondary);padding:10px 12px;border-radius:var(--radius-md);overflow-x:auto}
.prosa blockquote{border-left:3px solid var(--border-medium);margin:8px 0;padding:2px 12px;color:var(--text-secondary)}
.prosa hr{border:0;border-top:1px solid var(--border-light);margin:14px 0}
.prosa a{color:var(--blue-grow)}
.prosa table{margin:8px 0}

a.card.cliente{display:block;text-decoration:none;color:inherit}
a.card.cliente:hover{border-color:var(--blue-grow)}
a.card.cliente.rojo{border-left:4px solid var(--rojo)}
a.card.cliente.naranja{border-left:4px solid var(--naranja)}
a.card.cliente.verde{border-left:4px solid var(--verde)}
.fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sep{height:18px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-light);margin:14px 0 18px}
.tab{padding:8px 16px;text-decoration:none;color:var(--text-secondary);font-size:13px;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--blue-grow)}
.tab.activa{color:var(--blue-grow);border-bottom-color:var(--blue-grow)}
.arbol-doc:hover{color:var(--blue-grow)}
/* Switch (agentes): checkbox oculto + pill deslizante. El input sigue siendo el control real. */
.switch{position:relative;display:inline-block;width:36px;height:21px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:var(--border-medium);border-radius:21px;transition:background .15s;cursor:pointer}
.switch .slider::before{content:"";position:absolute;width:17px;height:17px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform .15s;box-shadow:var(--shadow-sm)}
.switch input:checked + .slider{background:var(--blue-grow)}
.switch input:checked + .slider::before{transform:translateX(15px)}
.agente-icono{width:42px;height:42px;border-radius:10px;background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.actividad{font-size:11.5px;color:var(--text-secondary);background:var(--bg-secondary);border-radius:8px;padding:7px 10px;margin-top:8px}
.nav-seccion{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.45);padding:14px 18px 4px}

/* --- Vídeo: encargo + tablero de jobs (columnas = máquina de estados del repo de vídeo) --- */
.v-tarjetas{display:flex;gap:8px;flex-wrap:wrap}
.v-tarjeta-opcion{position:relative;flex:1 1 170px}
.v-tarjeta-opcion input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.v-tarjeta-opcion .caja{display:block;border:1px solid var(--border-light);border-radius:var(--radius-md);
  padding:8px 10px;background:var(--bg-card)}
.v-tarjeta-opcion .t{display:block;font-size:12.5px;font-weight:600}
.v-tarjeta-opcion .d{display:block;font-size:11px;color:var(--text-tertiary);margin-top:2px}
.v-tarjeta-opcion input:checked + .caja{border-color:var(--blue-grow);background:#EEF0FF}
/* Tarjetas CON muestra renderizada: `grid` y no el `flex` de arriba, porque con flex cada columna
   sale de un ancho distinto según lo largo del título y las muestras dejan de ser comparables
   entre sí — que es exactamente para lo que están. */
.v-rejilla-muestras{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.v-rejilla-muestras .v-tarjeta-opcion{flex:none}
.v-rejilla-muestras .caja{padding:8px 9px 10px}
.v-rejilla-muestras img{display:block;width:100%;border-radius:6px;margin-bottom:7px;background:#111}
.v-seg{display:inline-flex;border:1px solid var(--border-light);border-radius:9px;overflow:hidden}
.v-seg label{position:relative;display:block}
.v-seg input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.v-seg span{display:block;padding:6px 12px;font-size:12.5px;border-left:1px solid var(--border-light);white-space:nowrap}
.v-seg label:first-child span{border-left:0}
.v-seg input:checked + span{background:#EEF0FF;color:var(--blue-grow);font-weight:600}
.v-tablero{display:flex;gap:8px;align-items:flex-start;overflow-x:auto;padding:4px 0 10px}
.v-col{flex:0 0 200px;background:var(--bg-secondary);border:1px solid var(--border-light);
  border-radius:var(--radius-md);padding:8px;display:flex;flex-direction:column;gap:8px}
.v-col h4{font-size:11.5px;margin:0;font-weight:700;white-space:nowrap;color:var(--text-secondary)}
.v-col.vacia{flex:0 0 96px}
.v-col.gate{border-color:var(--blue-grow);box-shadow:inset 0 0 0 1px var(--blue-grow)}
.v-col.destino-valido{outline:2px dashed var(--blue-grow);outline-offset:2px;background:#EEF0FF}
.v-tarjeta{background:var(--bg-card);border:1px solid var(--border-light);border-radius:8px;
  padding:8px;font-size:12px;cursor:pointer}
.v-tarjeta[draggable=true]{cursor:grab}
.v-tarjeta .titulo{font-weight:600;margin-top:4px;overflow-wrap:anywhere}
.v-tarjeta img{display:block;max-width:100%;border-radius:6px;margin-top:6px}
.v-detalle{margin-top:8px;border-top:1px dashed var(--border-light);padding-top:8px;
  display:flex;flex-direction:column;gap:6px;cursor:auto;overflow-wrap:anywhere}
.v-detalle ul{margin:0;padding-left:16px}
.v-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--text-primary);
  color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;max-width:min(90vw,640px);
  z-index:20;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.v-toast.mal{background:var(--rojo)}

/* Ficha de decisión de vídeo (#/video/<job>): el plan a la izquierda, y a la derecha —pegajoso—
   lo que se mira para decidir. A una columna en móvil, que es desde donde se aprueba de viaje. */
.v-ficha { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.v-ficha video { width: 100%; border-radius: 8px; background: #000; display: block; }
.v-lado { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 900px) {
  .v-ficha { grid-template-columns: 1fr; }
  .v-lado { position: static; }
}

/* ---------- Aprobar con contexto: la tarjeta se despliega y enseña QUÉ se aprueba -------------
   Aprobar a ciegas era el problema: la cabecera es un botón y el cuerpo trae el diff, el acta o
   el trozo de transcripción, sin salir de la bandeja. */
.ap-cab{display:flex;gap:10px;align-items:flex-start;width:100%;background:none;border:0;padding:0;
  margin:0;cursor:pointer;text-align:left;font-family:var(--font);color:var(--text-primary)}
.ap-cab:hover .ap-titulo{color:var(--blue-grow)}
.ap-titulo{font-size:14px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.ap-flecha{color:var(--text-tertiary);font-size:11px;flex-shrink:0;margin-top:3px;transition:transform .15s}
.ap-cab[aria-expanded=true] .ap-flecha{transform:rotate(90deg)}
.ap-cuerpo{margin-top:10px;border-top:1px dashed var(--border-light);padding-top:10px}
.ap-quepasa{font-size:12px;color:var(--text-secondary);background:var(--bg-secondary);
  border-radius:8px;padding:8px 10px;margin-bottom:10px}
/* Diff legible: verde lo que entra, rojo lo que sale. */
.diff{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.55;
  background:var(--bg-secondary);border-radius:var(--radius-md);padding:10px;overflow-x:auto;
  max-height:340px;overflow-y:auto;margin:0;white-space:pre}
.diff .mas{background:var(--verde-bg);color:var(--verde);display:block}
.diff .menos{background:var(--rojo-bg);color:var(--rojo);display:block}
.diff .cab{color:var(--text-tertiary);display:block}
.diff .ctx{display:block}
/* Trozo de transcripción donde se acordó una tarea. */
.frag{border-left:3px solid var(--border-medium);padding:2px 0 2px 10px;margin:8px 0;font-size:12.5px}
.frag .quien{font-weight:700}
.frag .marca{color:var(--text-tertiary);font-size:11px;font-weight:400}
.frag .vecino{color:var(--text-tertiary)}

/* ---------- Editor visual (WYSIWYG): editar el cerebro sin ver Markdown ---------------------- */
.ed-barra{display:flex;gap:3px;flex-wrap:wrap;padding:6px;background:var(--bg-secondary);
  border:1px solid var(--border-light);border-bottom:0;border-radius:var(--radius-md) var(--radius-md) 0 0;
  position:sticky;top:0;z-index:2}
.ed-barra button{background:transparent;color:var(--text-secondary);font-size:12.5px;font-weight:600;
  padding:5px 9px;border-radius:6px;min-width:30px}
.ed-barra button:hover{background:var(--bg-card);color:var(--blue-grow)}
.ed-barra .sepv{width:1px;background:var(--border-medium);margin:3px 4px}
.ed-lienzo{border:1px solid var(--border-light);border-radius:0 0 var(--radius-md) var(--radius-md);
  padding:16px 18px;min-height:360px;max-height:62vh;overflow-y:auto;background:var(--bg-card);
  outline:none;font-size:13.5px;line-height:1.65}
.ed-lienzo:focus{border-color:var(--blue-grow)}
.ed-lienzo > :first-child{margin-top:0}
/* El lienzo hereda la tipografía de .prosa; el placeholder avisa si se queda vacío. */
.ed-lienzo:empty::before{content:"Escribe aquí…";color:var(--text-tertiary)}
.ed-meta{font-size:11.5px;color:var(--text-tertiary);margin:8px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.arbol-doc{border-radius:6px;transition:background .12s}
.arbol-doc.activo{background:var(--bg-secondary);font-weight:600;padding-left:6px !important;padding-right:6px !important}
/* Tarjeta de aprobación abierta: ocupa la fila entera para que el diff/acta se lea. */
.card.desplegada{grid-column:1 / -1}

/* El atributo `hidden` pierde contra cualquier clase que fije `display` (`.fila` es flex): sin
   esto, una caja marcada como oculta se pintaba igual. */
[hidden]{display:none !important}

/* Taller SEO (#/seo) — el visor es un DRAWER, no un card apilado al fondo: se aprueba
   sin perder de vista el documento, y se salta entre los informes de una auditoría sin
   cerrarlo. A pantalla completa en móvil, que es desde donde se aprueba de viaje. */
/* `.seo-drawer` como clase además del id: lo reusa el popup de ayuda (#ayuda-drawer), que puede
   coexistir con este y por tanto no puede llevar su id. */
#seo-drawer, .seo-drawer { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.seo-drawer-fondo { position: absolute; inset: 0; background: rgba(17, 18, 24, .38); }
.seo-drawer-panel { position: relative; background: var(--bg-card); width: min(1080px, 94vw);
  height: 100%; display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,.18); }
.seo-drawer-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--border-light); flex: none; }
.seo-drawer-res:not(:empty) { padding: 10px 20px; border-bottom: 1px solid var(--border-light); flex: none; }
.seo-drawer-cuerpo { display: grid; grid-template-columns: 232px minmax(0, 1fr); flex: 1; min-height: 0; }
.seo-drawer-lista { background: var(--bg-secondary); border-right: 1px solid var(--border-light);
  padding: 12px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.seo-drawer-lista-t { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-tertiary); padding: 2px 8px 6px; }
.seo-art { text-align: left; background: none; border: 0; font-family: var(--font); font-size: 12.5px;
  font-weight: 600; color: var(--text-secondary); padding: 8px 10px; border-radius: 8px; cursor: pointer;
  min-height: 34px; }
.seo-art:hover { background: rgba(22, 22, 239, .06); }
.seo-art.sel { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.seo-drawer-doc { overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.seo-drawer-doc #seo-arte-marco { width: 100%; flex: 1; min-height: 420px; border: 0; background: #fff; }
.seo-toc { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px 4px; flex: none; }
.seo-toc button { background: var(--bg-secondary); border: 0; border-radius: var(--radius-full);
  padding: 4px 12px; font-family: var(--font); font-size: 11.5px; font-weight: 700;
  color: var(--text-secondary); cursor: pointer; min-height: 28px; }
.seo-toc button:hover { color: var(--blue-grow); }

@media (max-width: 760px) {
  /* Aprobar desde el móvil por el VPS es EL caso de uso del acceso remoto. */
  .seo-drawer-panel { width: 100vw; }
  .seo-drawer-cuerpo { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .seo-drawer-lista { flex-direction: row; overflow-x: auto; border-right: 0;
    border-bottom: 1px solid var(--border-light); padding: 8px; }
  .seo-drawer-lista-t { display: none; }
  .seo-art { white-space: nowrap; min-height: 44px; }          /* zona de toque real */
  /* El título no compite con los botones: fila propia (si no, se corta a «Inform…»). */
  .seo-drawer-cab { padding: 12px 14px; flex-wrap: wrap; }
  .seo-drawer-cab > div:first-child { width: 100%; }
  .seo-drawer-cab > div:first-child > div:first-child { white-space: normal; }
  .seo-drawer-cab > .fila { width: 100%; justify-content: flex-end; }
  .seo-drawer-cab button { min-height: 44px; }
  .seo-toc { padding: 10px 12px 2px; }
  .seo-toc button { min-height: 36px; }
}

/* ---------- Pestaña «Contratado»: servicios del cliente y su volumen ------------------------- */
.ct-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.ct-serv{border:1px solid var(--border-light);border-radius:var(--radius-md);padding:9px 11px;
  background:var(--bg-card)}
.ct-serv.activo{border-color:var(--blue-grow);background:#F7F8FF}
.ct-campos{margin:8px 0 0;padding-top:8px;border-top:0.5px dashed var(--border-light);
  display:flex;flex-direction:column;gap:6px}
.ct-campo{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;
  color:var(--text-secondary)}
.ct-campo input[type=number]{width:82px;padding:4px 7px;border:1px solid var(--border-light);
  border-radius:6px;font-family:var(--font);font-size:12px}

/* Celda de asignación cuyo rol no tiene servicio contratado detrás: se marca, no se bloquea. */
td.sin-servicio{background:var(--naranja-bg)}
td.sin-servicio select{opacity:.6}

/* ---------- Ayuda: el «?» de cada apartado y su popup ----------------------------------------
   El botón es FIJO y global (lo enciende el router, no las vistas). Se aparta del toast, que
   vive abajo en el centro, y queda por debajo del drawer (z-index 60) para no flotar sobre él. */
#ayuda-fab{position:fixed;right:20px;bottom:20px;z-index:15;width:46px;height:46px;padding:0;
  border-radius:var(--radius-full);font-size:21px;font-weight:800;line-height:1;
  box-shadow:0 3px 12px rgba(22,22,239,.32)}
#ayuda-fab:hover{filter:brightness(1.08)}
/* El «💡» del buzón de mejoras: junto al «?», más discreto (secundario), mismo lenguaje. */
#mejora-fab{position:fixed;right:76px;bottom:20px;z-index:15;width:46px;height:46px;padding:0;
  border-radius:var(--radius-full);font-size:20px;line-height:46px;text-align:center;
  background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-light);
  box-shadow:var(--shadow-sm)}
#mejora-fab:hover{border-color:var(--blue-grow)}
.ayuda-prosa{padding:4px 24px 28px}
.ayuda-prosa section{scroll-margin-top:8px}
/* Las capturas son el contenido, no un adorno: ancho completo, con marco para que se vea dónde
   acaba la pantalla fotografiada, y ampliables (a tamaño de columna no se leen los botones). */
img.ayuda-img{display:block;width:100%;margin:10px 0 4px;border:1px solid var(--border-light);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);cursor:zoom-in;background:var(--bg-secondary)}
#ayuda-zoom{position:fixed;inset:0;z-index:80;background:rgba(17,18,24,.82);cursor:zoom-out;
  display:flex;align-items:center;justify-content:center;padding:24px}
#ayuda-zoom img{max-width:100%;max-height:100%;border-radius:var(--radius-md);background:#fff}
.ayuda-chat{display:flex;flex-direction:column;height:100%;padding:16px 22px 18px;box-sizing:border-box}
.ayuda-hilo{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px;
  min-height:180px}

@media (max-width: 760px){
  #ayuda-fab{right:14px;bottom:14px;width:44px;height:44px}
  #mejora-fab{right:66px;bottom:14px;width:44px;height:44px;line-height:44px}
  /* La cabecera de la ayuda no necesita el reparto en dos filas del visor del Taller SEO (que ahí
     existe para que el título no compita con «Aprobar»): aquí solo hay una ✕. */
  #ayuda-drawer .seo-drawer-cab > div:first-child{width:auto;flex:1;min-width:0}
  #ayuda-drawer .seo-drawer-cab > .fila{width:auto}
  .ayuda-prosa{padding:4px 14px 24px}
  .ayuda-chat{padding:12px 14px 14px}
}

/* =============================================================================================
   MÓVIL — el panel se usa desde el teléfono (es EL caso de uso del acceso remoto por el VPS)
   =============================================================================================
   Regla de oro de este bloque: **no toca el escritorio**. Todo vive dentro de media queries; lo
   de arriba se queda exactamente como estaba.

   El problema de fondo era el esqueleto: `body` es una rejilla de `230px 1fr`, así que en un
   teléfono de 375 px el menú se comía 230 (el 61%) y al contenido le quedaban 145 px — con las
   fichas de cliente cortadas por la mitad y las tablas asomando por una rendija de 47 px. Aquí
   el menú deja de ser una columna y pasa a ser un CAJÓN que se abre con el botón ☰.

   Se usa el mismo corte que ya tenían el visor del Taller SEO y la ayuda (760 px), para no
   inventar un segundo modelo mental: por debajo de eso, todo el panel es de una columna.
   ============================================================================================= */
@media (max-width: 760px) {
  /* --- el esqueleto: de dos columnas a una, y que scrolle la PÁGINA ---
     En escritorio el body mide 100vh y quien scrollea es `#contenido`. En el móvil eso es peor:
     la barra de direcciones del navegador nunca se retrae y se pierde alto de pantalla. Aquí
     scrollea el documento, como en cualquier web. `100dvh` (dynamic viewport height) es lo que
     mide de verdad la ventana cuando esa barra aparece y desaparece. */
  body { display: block; height: auto; min-height: 100vh; min-height: 100dvh; }

  #barra-movil {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 50;
    background: var(--blue-grow); color: var(--text-inverse);
    padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top));
    box-shadow: 0 1px 6px rgba(0,0,0,.12);
  }
  #nav-abrir {
    background: rgba(255,255,255,.14); color: var(--text-inverse);
    font-size: 19px; line-height: 1; padding: 0;
    width: 44px; height: 44px; flex: none;    /* zona de toque real, no un icono suelto */
  }
  #barra-titulo { font-weight: 800; font-size: 15px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  /* La identidad en móvil: la inicial a la derecha, con la misma zona de toque que el ☰.
     `margin-left:auto` la empuja al borde y deja el título con todo el ancho que sobre. */
  #yo-movil {
    margin-left: auto; flex: none; width: 34px; height: 34px;
    border-radius: var(--radius-full); background: rgba(255,255,255,.22);
    color: var(--text-inverse); text-decoration: none;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px;
  }

  /* El menú: cajón que entra desde la izquierda. `translateX` y no `left` para que la animación
     la haga el compositor (en un móvil de gama media se nota). */
  #nav {
    position: fixed; inset: 0 auto 0 0; z-index: 70;
    width: min(280px, 84vw); max-width: 84vw;
    transform: translateX(-100%);
    overflow-y: auto; overscroll-behavior: contain;
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    box-shadow: 4px 0 24px rgba(0,0,0,.22);
  }
  #nav.abierto { transform: translateX(0); }
  /* La animación solo DESPUÉS de que el JS haya montado el cajón. Si el `transition` estuviera
     puesto desde el principio, al cargar la página el menú se ve un instante en su sitio y luego
     se desliza hacia fuera — parece que el panel se rompe al abrirlo. Capturado en un móvil. */
  body.nav-listo #nav { transition: transform .22s ease; }
  #nav-fondo { display: block; position: fixed; inset: 0; z-index: 68;
    background: rgba(17,18,24,.42); }
  /* Con el cajón abierto, el fondo no se mueve (si no, se scrollea la página de detrás). */
  body.nav-abierto { overflow: hidden; }

  /* Cada entrada del menú, una zona de toque de verdad (antes eran 31 px de alto). */
  #nav a { min-height: 44px; display: flex; align-items: center; font-size: 14px; }
  #nav .nav-seccion { padding: 12px 10px 4px; }
  #nav .marca { padding-bottom: 12px; }

  #contenido { overflow: visible; padding: 16px 14px calc(28px + env(safe-area-inset-bottom)); }

  /* --- tipografía y aire: la misma escala, un punto más compacta --- */
  h2 { font-size: 17px; }
  .sub { margin-bottom: 14px; }
  .card { padding: 14px; border-radius: var(--radius-md); }
  .grid { gap: 10px; }
  .sep { height: 12px; }

  /* --- zonas táctiles: 44 px es el mínimo de Apple, y aquí se aprueba trabajo real --- */
  button, .btn { min-height: 44px; padding: 10px 16px; font-size: 13px; }
  /* El `!important` es a propósito y es el único del archivo: muchas vistas piden botones
     pequeños con `style="min-height:28px"` EN LÍNEA (chips de una fila, ✕, 🔄), y un estilo en
     línea gana a cualquier regla de hoja. En escritorio están bien; con el pulgar, no hay quien
     acierte. Solo se fuerza el ALTO: el tamaño de letra y el ancho que pidió la vista se
     respetan, así que la fila no se descoloca. */
  #contenido button, #contenido .btn { min-height: 44px !important; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { min-height: 44px; display: flex; align-items: center; white-space: nowrap; }
  ul.checks li { padding: 8px 0; }

  /* --- formularios: 16 px o iOS hace zoom al enfocar y te descoloca la página entera --- */
  input:not([type=checkbox]):not([type=radio]), select, textarea {
    font-size: 16px; min-height: 44px; max-width: 100%;
  }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  /* Un `width` en línea puesto para escritorio (170 px, 220 px…) no puede empujar el layout. */
  #contenido input, #contenido select, #contenido textarea { max-width: 100%; }
  /* El interruptor de Agentes crece para poder darle con el dedo. */
  .switch { width: 46px; height: 27px; }
  .switch .slider { border-radius: 27px; }
  .switch .slider::before { width: 23px; height: 23px; }
  .switch input:checked + .slider::before { transform: translateX(19px); }

  /* --- tablas: scroll dentro de su caja, nunca moviendo la página --- */
  .table-wrap { margin-inline: -4px; }          /* un pelín de aire lateral extra */
  th, td { padding: 8px 9px; }
  /* Sin `nowrap`, una columna estrecha parte «Julian Felipe Moreno Palacio» en cuatro líneas y
     la fila crece hasta ser ilegible. Como la tabla ya se desliza, es mejor que cada celda
     ocupe su ancho natural y se navegue en horizontal. */
  th, .table-wrap td { white-space: nowrap; }
  /* Los campos DENTRO de una tabla no necesitan los 44 px de alto (la fila entera ya es la zona
     de toque) pero sí los 16 px de tipo, o iOS hace zoom al enfocarlos. */
  .table-wrap input:not([type=checkbox]):not([type=radio]),
  .table-wrap select { min-height: 38px; }

  /* --- rejillas de tarjetas que traían un mínimo pensado para escritorio --- */
  .ct-lista, .v-rejilla-muestras { grid-template-columns: 1fr; }
  .v-tarjeta-opcion { flex-basis: 100%; }
  /* El control segmentado (ventanas de Meta, opciones de vídeo) no cabe de una pieza: se
     desliza. `inline-flex` + `nowrap` lo hacían asomar por el borde derecho de la pantalla. */
  .v-seg { display: flex; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .v-seg span { min-height: 44px; display: flex; align-items: center; }
  /* El tablero de vídeo sigue siendo columnas (es un kanban), pero más estrechas y con scroll
     táctil: apilarlo perdería justo lo que se mira, que es en qué etapa está cada job. */
  .v-tablero { -webkit-overflow-scrolling: touch; }
  .v-col { flex-basis: 78vw; }
  .v-col.vacia { flex-basis: 42vw; }

  /* El «?» no se pone encima del último botón de la página, y desaparece mientras el cajón
     del menú está abierto (si no, se ve flotando sobre el velo y no se puede pulsar). */
  #ayuda-fab { bottom: calc(14px + env(safe-area-inset-bottom)); }
  body.nav-abierto #ayuda-fab, body.nav-abierto #mejora-fab { display: none; }
  #mejora-fab { bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* Tablet en vertical (761-1000 px): el menú cabe, pero las rejillas de tres columnas no. */
@media (min-width: 761px) and (max-width: 1000px) {
  #contenido { padding: 20px 18px; }
  .grid.cards { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
}


/* ─── Taller SEO: pestañas ───────────────────────────────────────────────────────────────
   Dos secciones: el trabajo del día (lo que espera tu decisión) y la configuración, que se
   toca de mes en mes. Antes la configuración vivía al pie de la misma columna, así que
   había que pasar por delante de ella cada vez que entrabas a decidir. */
.seo-tabs { display: flex; gap: 4px; align-items: center; margin: 4px 0 18px;
            border-bottom: 1px solid var(--border-light);
            overflow-x: auto; scrollbar-width: none; }   /* en móvil las 4 pestañas no caben: se desliza */
.seo-tab {
  appearance: none; border: 0; background: none; font: inherit; cursor: pointer; white-space: nowrap;
  padding: 9px 3px 11px; margin-right: 22px; font-size: 14px; font-weight: 650;
  color: var(--text-tertiary); border-bottom: 2px solid transparent;
  display: flex; align-items: center; gap: 8px;
}
.seo-tab:hover { color: var(--text-secondary); }
.seo-tab[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--blue-grow); }
.seo-tab:focus-visible { outline: 2px solid var(--blue-grow); outline-offset: 2px; border-radius: 6px; }
.seo-n {
  font-size: 11px; font-weight: 800; min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center;
  background: var(--rojo); color: #fff; font-variant-numeric: tabular-nums;
}

/* Sub-pestañas de configuración: pastillas, para que no compitan con las de arriba. */
.seo-subtabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 18px; }
.seo-sub {
  appearance: none; font: inherit; cursor: pointer; font-size: 12.5px; font-weight: 650;
  padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--border-light);
  background: var(--bg-card); color: var(--text-secondary); min-height: 34px;
}
.seo-sub:hover { border-color: var(--border-medium); color: var(--text-primary); }
.seo-sub[aria-selected="true"] { background: var(--blue-grow); border-color: var(--blue-grow); color: #fff; }
.seo-sub:focus-visible { outline: 2px solid var(--blue-grow); outline-offset: 2px; }
.seo-sub-n {
  font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; padding: 0 6px; margin-left: 2px;
  border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center;
  background: var(--gris-bg); color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.seo-sub[aria-selected="true"] .seo-sub-n { background: rgba(255,255,255,.22); color: #fff; }

/* ─── Taller SEO: la página de un cliente ────────────────────────────────────────────────
   Selector con punto de salud, cabecera con cuatro cifras (cada una lleva a su sub-pestaña)
   y la barra del mes; debajo, UNA sub-pestaña a la vez. Antes iban los cinco bloques
   apilados y la página era un muro. */
.seo-cli-selector { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.seo-cli-abrir {
  appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-full);
  padding: 5px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-primary); min-height: 34px;
}
.seo-cli-abrir:hover { border-color: var(--border-medium); }
.seo-cli-abrir[aria-pressed="true"] { border: 2px solid var(--blue-grow); padding: 4px 13px; font-weight: 700; }

.seo-cli-cab { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: 14px 28px;
               align-items: center; margin-bottom: 16px; }
.seo-cli-nombre { font-size: 20px; font-weight: 800; line-height: 1.2; }
.seo-cli-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.seo-stat {
  appearance: none; font: inherit; cursor: pointer; text-align: left; min-width: 0;
  background: var(--bg-secondary); border: 1px solid transparent; border-radius: var(--radius-md);
  padding: 10px 12px; color: var(--text-primary);
}
.seo-stat:hover { border-color: var(--border-medium); background: var(--bg-card); }
.seo-stat b { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.seo-stat b.verde { color: var(--verde); }
.seo-stat b.naranja { color: var(--naranja); }
.seo-stat span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
                 text-transform: uppercase; color: var(--text-tertiary); margin-top: 3px; }
/* La barra del mes: una casilla por tarea, en su orden. */
.mes-barra { grid-column: 1 / -1; display: flex; gap: 3px; height: 8px; margin-top: 2px; }
.mes-barra span { flex: 1; border-radius: 3px; background: var(--border-light); }
.mes-barra span.hecha { background: var(--verde); }
.mes-barra span.libre { background: #B9BAF8; }
.seo-cli-cab .mes-pie { grid-column: 1 / -1; margin: -8px 0 0; }

/* El tablero del mes: tres columnas por fase, una tarjeta por tarea con su número en color. */
.mes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); gap: 14px; }
.mes-col-t { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
             color: var(--text-tertiary); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.mes-col-t .chip { margin: 0; font-size: 11px; padding: 2px 8px; }
.mes-tarea { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-card);
             border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; }
.mes-tarea.hecha { background: var(--verde-bg); border-color: transparent; }
.mes-tarea.bloq { background: var(--bg-secondary); border-color: transparent; color: var(--text-secondary); }
.mes-num { flex: none; width: 30px; height: 30px; border-radius: var(--radius-full); display: flex; align-items: center;
           justify-content: center; font-size: 12px; font-weight: 800; background: var(--border-light);
           color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.mes-tarea.hecha .mes-num { background: var(--verde); color: #fff; }
.mes-tarea.libre .mes-num { background: var(--blue-grow); color: #fff; }
.mes-cuerpo { flex: 1; min-width: 0; }
.mes-titulo { font-size: 13px; font-weight: 700; line-height: 1.3; }
.mes-est { font-size: 11.5px; color: var(--text-tertiary); margin-top: 3px; line-height: 1.35; }
.mes-est.verde { color: var(--verde); font-weight: 600; }
.mes-est.naranja { color: var(--naranja); font-weight: 600; }
.mes-est.recorta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mes-tarea button, .otro-tarea button { flex: none; font-size: 12px; padding: 5px 12px; min-height: 30px; }

/* Los encargos fuera del ciclo: rejilla de tarjetas, las bloqueadas en gris y al final. */
.otros-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 10px; }
.otro-tarea { display: flex; flex-direction: column; gap: 6px; background: var(--bg-card);
              border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 11px 13px; }
.otro-tarea.hecha { background: var(--verde-bg); border-color: transparent; }
.otro-tarea.bloq { background: var(--bg-secondary); border-color: transparent; color: var(--text-secondary); }
.otro-tarea .mes-est { flex: 1; margin-top: 0; }
.otro-tarea button { align-self: flex-start; margin-top: 2px; }

/* Los 8 módulos del proceso, como baldosas. */
.proc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr)); gap: 8px; }
.proc-mod { text-align: center; border-radius: var(--radius-md); padding: 14px 8px 12px;
            background: var(--bg-secondary); opacity: .55; }
.proc-mod.hecho { background: var(--verde-bg); opacity: 1; }
.proc-mod .n { font-size: 10.5px; font-weight: 700; color: var(--text-tertiary); }
.proc-mod .t { font-size: 12.5px; font-weight: 700; margin: 3px 0 4px; }
.proc-mod .a { font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--verde); }
.proc-mod:not(.hecho) .a { font-size: 14px; color: var(--text-tertiary); }

@media (max-width: 760px) {
  .seo-cli-cab { grid-template-columns: 1fr; }
  .seo-cli-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 👁️ Lo que ve: el inventario con interruptores ------------------------------------- */
.lqv-lista{margin-top:6px}
.lqv-fila{display:flex;gap:12px;align-items:flex-start;padding:10px 8px;
          border-bottom:1px solid var(--linea)}
.lqv-fila:last-child{border-bottom:0}
.lqv-fila.on{background:#f5f7ff}
.lqv-cuerpo{flex:1;min-width:0}
.lqv-t{font-weight:600;font-size:13.5px;line-height:1.35}
.lqv-m{font-size:11.5px;color:var(--txt3);margin-top:3px;word-break:break-word}
.lqv-desc{margin-top:6px}
.lqv-desc summary{font-size:11.5px;color:var(--txt2);cursor:pointer}
.lqv-desc pre{white-space:pre-wrap;font:12px/1.5 ui-monospace,Menlo,monospace;
              background:#f7f8fb;border:1px solid var(--linea);border-radius:6px;
              padding:10px;margin:6px 0 0;max-height:280px;overflow:auto}
.aviso-inline{color:#a35b00}
/* Interruptor. Nace apagado y se enciende en azul: encender es lo que da material. */
.lqv-sw{position:relative;display:inline-block;width:38px;height:22px;flex:0 0 auto;margin-top:2px}
.lqv-sw input{opacity:0;width:0;height:0}
.lqv-sw span{position:absolute;inset:0;background:#ccd1de;border-radius:22px;
             transition:background .15s;cursor:pointer}
.lqv-sw span:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;
                    background:#fff;border-radius:50%;transition:transform .15s}
.lqv-sw input:checked + span{background:var(--azul,#2323dc)}
.lqv-sw input:checked + span:before{transform:translateX(16px)}
.lqv-sw input:disabled + span{opacity:.45;cursor:progress}
.filtro-linea{display:flex;gap:6px;margin:8px 0 2px;flex-wrap:wrap}
.chip-filtro{border:1px solid var(--linea);background:#fff;border-radius:14px;
             padding:4px 11px;font:600 11.5px Montserrat,sans-serif;cursor:pointer;
             color:var(--txt2)}
.chip-filtro.activo{background:#eceaff;border-color:#c9c3ff;color:var(--azul,#2323dc)}
.card-mini{border:1px dashed var(--linea);border-radius:8px;padding:12px;margin-top:12px}
.card-mini input,.card-mini textarea,.card-mini select{width:100%;box-sizing:border-box;
             margin-bottom:8px;font:13px Montserrat,sans-serif;padding:7px 9px;
             border:1px solid var(--linea);border-radius:6px}
.fila-campos{display:flex;gap:8px;align-items:center}
.fila-campos select,.fila-campos input{margin-bottom:0}
.lqv-fila.off{opacity:.55}
.lqv-desc-sw{display:flex;gap:7px;align-items:center;margin-top:6px;
             font:600 11.5px Montserrat,sans-serif;color:var(--text-secondary);cursor:pointer}
.lqv-desc-sw input{margin:0}

/* --- Catálogo de conexiones (Conectores y Mi perfil › Conexiones) ------------------------------
   Una fila por herramienta, agrupadas por estado y con una sola acción. Mismo componente en las
   dos pantallas para que lo de la agencia y lo tuyo se lean igual sin mezclarse. */
.con-cab{display:flex;gap:18px;align-items:flex-end;justify-content:space-between;
         padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--border-light)}
.con-buscar{width:min(340px,100%);padding:9px 12px;border:1px solid var(--border-light);
            border-radius:var(--radius-md);font:inherit;font-size:13px;background:var(--bg-card)}
.con-aviso{background:rgba(31,164,99,.07);border:1px solid rgba(31,164,99,.28);color:var(--text-primary);
           border-radius:var(--radius-md);padding:12px 14px;font-size:12.5px;line-height:1.5;margin-bottom:18px}
.con-recuento{display:flex;justify-content:space-between;font-size:12.5px;margin:0 0 6px}
.con-recuento span{color:var(--text-tertiary);font-size:11.5px}
.con-grupo{margin:14px 0 4px}
.con-grupo-cab{display:flex;justify-content:space-between;font-size:12px;font-weight:700;
               color:var(--text-secondary);padding:0 2px 7px;border-bottom:1px solid var(--border-light);
               margin-bottom:8px}
.con-grupo-cab span:last-child{color:var(--text-tertiary);font-weight:600}
.con-fila{display:flex;gap:14px;align-items:center;background:var(--bg-card);
          border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:8px}
.con-logo{flex:none;width:40px;height:40px;border-radius:10px;color:#fff;font-weight:800;font-size:15px;
          display:flex;align-items:center;justify-content:center;letter-spacing:-.02em}
/* Con logo real: azulejo blanco con borde y la marca en su color, como en el referente. */
.con-logo-img{background:#fff;border:1px solid var(--border-light)}
.con-logo-img img{display:block;width:22px;height:22px}
.con-txt{flex:1;min-width:0}
.con-txt b{font-size:14px}
.con-detalle-txt{font-size:11.5px;color:var(--text-tertiary);margin-top:4px;line-height:1.45}
.con-accion{flex:none}
.con-accion button{white-space:nowrap}
.con-det{margin:-4px 0 10px;padding:12px 16px 14px;border:1px solid var(--border-light);border-top:0;
         border-radius:0 0 var(--radius-lg) var(--radius-lg);background:var(--bg-secondary,#f6f7f9)}
.con-clientes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.con-form{display:flex;flex-direction:column;gap:8px;max-width:520px}
.con-campo{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-secondary)}
@media (max-width: 720px){
  .con-cab{flex-direction:column;align-items:stretch}
  .con-buscar{width:100%}
  .con-fila{flex-wrap:wrap}
  .con-accion{width:100%}
  .con-accion button{width:100%}
}

/* Mi perfil › Calendario */
.cal-dia{padding:10px 14px}
.cal-hoy{border-color:var(--blue-grow)}
.cal-dia-cab{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:4px}
.cal-ev{display:flex;gap:12px;padding:9px 6px;border-top:1px solid var(--border-light);cursor:pointer;border-radius:6px}
.cal-ev:hover{background:var(--bg-subtle, rgba(0,0,0,.03))}
.cal-hora{font-size:12px;font-weight:700;color:var(--text-secondary);min-width:92px;padding-top:1px}
.cal-titulo{font-size:13.5px;font-weight:700}
.cal-rechazada{opacity:.55}
.cal-det-cuerpo{margin:0 0 8px 104px;padding:10px 12px;border-left:3px solid var(--blue-grow);background:var(--bg-subtle, rgba(0,0,0,.03));border-radius:0 6px 6px 0}
@media (max-width:640px){.cal-hora{min-width:70px}.cal-det-cuerpo{margin-left:0}}
.cal-dia .chip.azul{animation:none}
.cal-clasif{gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px;padding:8px 0;border-top:1px dashed var(--border-light);border-bottom:1px dashed var(--border-light)}
.cal-clasif select{font-size:12.5px;max-width:100%}
.cal-prep{font-size:12.5px;line-height:1.45;margin-top:6px;padding:8px 10px;background:var(--bg-subtle, rgba(0,0,0,.03));border-radius:6px}
.cal-prep ul{margin:4px 0 0;padding-left:18px}
.cal-prep-caja{margin:0 0 10px}
.cal-prep-fila{padding:10px 0;border-top:1px solid var(--border-light)}
.cal-notas textarea{width:100%;min-height:64px;box-sizing:border-box;font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--border-light);border-radius:8px}

/* ---------- Buzón de mejoras (#/mejoras) ---------------------------------------------------- */
.mj-form label{display:block;font-size:12px;font-weight:700;color:var(--text-secondary);margin:12px 0 4px}
.mj-form .ayuda{font-weight:400;color:var(--text-tertiary)}
.mj-form input,.mj-form select,.mj-form textarea,.mj-gestion input,.mj-gestion select,.mj-gestion textarea,
.mj-caja textarea{width:100%;box-sizing:border-box;padding:7px 10px;border:1px solid var(--border-light);
  border-radius:8px;font-family:var(--font);font-size:13px;background:var(--bg-card)}
.mj-form textarea,.mj-caja textarea,.mj-gestion textarea{min-height:64px;resize:vertical}
.mj-dos{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:640px){.mj-dos{grid-template-columns:1fr}}
.mj-fila{display:flex;gap:10px;align-items:flex-start;text-decoration:none;color:inherit;padding:12px 14px;
  border-top:1px solid var(--border-light)}
.mj-fila:first-child{border-top:0}
.mj-fila:hover{background:rgba(22,22,239,.04)}
.mj-fila .t{font-weight:700;font-size:13.5px;line-height:1.3}
.mj-fila .m{font-size:11.5px;color:var(--text-tertiary);margin-top:3px}
.mj-punto{width:9px;height:9px;border-radius:50%;background:var(--rojo);flex-shrink:0;margin-top:5px}
.mj-punto.no{background:transparent}
.mj-lista{padding:0;overflow:hidden}
.mj-hilo{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.mj-msg{border-radius:10px;padding:8px 12px;font-size:13px;line-height:1.45;background:var(--bg-secondary);
  max-width:92%;white-space:pre-wrap;word-break:break-word}
.mj-msg.suyo{align-self:flex-end;background:#EEF0FF}
.mj-msg.integracion{background:var(--verde-bg);border-left:3px solid var(--verde)}
.mj-msg .quien{display:block;font-size:11px;font-weight:700;color:var(--text-tertiary);margin-bottom:2px}
.mj-interna{font-size:12px;border-left:3px solid var(--naranja);padding:4px 10px;margin:6px 0;
  white-space:pre-wrap;word-break:break-word}
.mj-bloque{margin-top:10px}
.mj-bloque .etq{font-size:11px;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.03em}
.mj-bloque .val{font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.mj-brief{width:100%;box-sizing:border-box;min-height:220px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px}

/* Equipo › Uso del cerebro: las cifras a la derecha y alineadas, para leerlas en columna. */
.uso-tabla td.num,.uso-tabla th.num{text-align:right;font-variant-numeric:tabular-nums}
.uso-tabla td{vertical-align:middle}

/* Apartados EN PRUEBAS: fuera del menú, vivos por URL (ver index.html). `display`, no `hidden`:
   `hidden` es la señal de PERMISO que leen puedeAbrirVista() y el arranque. */
#nav a[data-en-pruebas]{display:none}
#pruebas-pill{position:fixed;bottom:29px;right:134px;z-index:15;padding:5px 12px;font-size:11.5px;
  font-weight:700;text-decoration:none;border-radius:var(--radius-full);
  background:var(--naranja-bg);color:var(--naranja);border:1px solid currentColor}
@media (max-width:760px){ #pruebas-pill{bottom:calc(22px + env(safe-area-inset-bottom));right:120px} }
#nav a#pie-laboratorio{font-size:11.5px;font-weight:600;opacity:.7;padding:8px;border-radius:0;
  text-decoration:none;color:var(--text-inverse)}
#nav a#pie-laboratorio:hover{opacity:1;background:none}

/* ─── Taller SEO: el cajón de encargo ────────────────────────────────────────────────────
   Mismo patrón que el visor: catálogo a la izquierda, el encargo elegido a la derecha y el pie
   con «Encargar» siempre a la vista. Vive dentro del lienzo de la vista, no en <body>. */
#seo-encargo .seo-drawer-panel { width: min(980px, 94vw); }
#seo-encargo .seo-drawer-cuerpo { grid-template-columns: 250px minmax(0, 1fr); }
#seo-encargo .seo-drawer-lista-t { padding-top: 10px; }
#seo-encargo .seo-drawer-lista-t:first-child { padding-top: 2px; }
.seo-art { display: flex; align-items: center; gap: 8px; width: 100%; }
.seo-art-t { flex: 1; min-width: 0; }
.seo-art.bloq { color: var(--text-tertiary); }
.seo-art.pieza { padding-left: 26px; font-weight: 500; font-size: 12px; }
.seo-art-est { flex: none; font-size: 11px; font-weight: 800; }
.seo-art-est.verde { color: var(--verde); }
.seo-art-est.naranja { color: var(--naranja); }
.seo-encargo-cuerpo { padding: 16px 22px 24px; }
.seo-encargo-titulo { margin-bottom: 14px; }
.seo-tipo-movil { display: none; width: 100%; margin-bottom: 12px; font-size: 13px; }
.seo-drawer-pie { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
                  flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--border-light);
                  background: var(--bg-card); }
.seo-drawer-pie #seo-res .cargando { padding: 0; text-align: left; }
@media (max-width: 760px) {
  #seo-encargo .seo-drawer-cuerpo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
  #seo-encargo .seo-drawer-lista { display: none; }
  /* La cabecera cabe en una fila: el «Para» y el ✕ no necesitan dos. */
  #seo-encargo .seo-drawer-cab > div:first-child { width: auto; flex: 1; min-width: 0; }
  #seo-encargo .seo-drawer-cab > .fila { width: auto; }
  .seo-tipo-movil { display: block; min-height: 44px; }
  .seo-drawer-pie button { min-height: 44px; }
}

/* ─── Taller SEO: el tablero de ClickUp en «Necesita tu decisión» ────────────────────────
   Columnas = los estados reales de la lista «Servicios» del cliente; cada tarjeta lleva la
   tarea (número, título, responsable, fecha) y lo que sabe el agente (documento, cola,
   bloqueo). Es un kanban: en móvil se desliza, no se apila. */
.tab-seo { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.tab-col { flex: 0 0 258px; min-width: 0; background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 10px; }
.tab-col-t { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
             color: var(--text-tertiary); margin: 2px 2px 8px; display: flex; align-items: center; gap: 6px; }
.tab-col-t .chip { margin: 0; font-size: 10.5px; padding: 1px 7px; }
.tab-tarea { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md);
             padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow-sm); }
.tab-tarea.decision { border-left: 3px solid var(--blue-grow); }
.tab-tarea.disc { border-left: 3px solid var(--naranja); }
.tab-linea { margin-top: 7px; font-size: 11.5px; line-height: 1.4; }
.tab-linea .chip { font-size: 10.5px; padding: 1px 7px; margin: 0 3px 0 0; }
.tab-ag { font-weight: 600; }
.tab-ag.verde { color: var(--verde); } .tab-ag.naranja { color: var(--naranja); }
.tab-ag.azul { color: var(--blue-grow); } .tab-ag.gris { color: var(--text-tertiary); font-weight: 500; }
.tab-tarea button.tab-revisar { min-height: 30px; }
@media (max-width: 760px) { .tab-col { flex-basis: 78vw; } }