/* ══════════════════════════════════════════════════════════════════════
   Marco del portal — variables, franjas, menú y piezas comunes.
   Lo que usan todos los módulos: .card, .btn, .etq, .placeholder, .rotulo.
   ══════════════════════════════════════════════════════════════════════ */

  :root{
    --brand:#6366F1;--brand-dark:#4F46E5;--brand-accent:#7C3AED;
    --verde:#16A34A;--ambar:#D97706;
    --bg:#F8FAFC;--panel:#FFFFFF;--panel-2:#FFFFFF;--border:#E2E8F0;
    --texto:#0F172A;--suave:#64748B;--mudo:#94A3B8;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--texto);min-height:100vh;display:flex;flex-direction:column}
  button{font-family:inherit}

  /* ══ Franja 1 — NUESTRA marca (el proveedor del portal) ══ */
  .barra-nuestra{background:linear-gradient(135deg,var(--brand-dark),var(--brand-accent));padding:.6rem 1.25rem;display:flex;align-items:center;gap:.75rem}
  .barra-nuestra .logo{width:30px;height:30px;display:grid;place-items:center}
  .barra-nuestra .nombre{font-weight:700;color:#fff;font-size:1rem;letter-spacing:.01em}
  .barra-nuestra .pendiente{font-size:.65rem;color:rgba(255,255,255,.6);border:1px dashed rgba(255,255,255,.35);border-radius:20px;padding:.1rem .5rem}
  .barra-nuestra .usuario{margin-left:auto;display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:rgba(255,255,255,.85)}
  .barra-nuestra .avatar{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:.7rem;font-weight:700;color:#fff}

  /* ══ Franja 2 — marca del CLIENTE (contexto: en nombre de quién trabajo) ══ */
  .barra-cliente{background:var(--panel-2);border-bottom:1px solid var(--border);padding:.55rem 1.25rem;display:flex;align-items:center;gap:.7rem}
  .barra-cliente .logo-cliente{width:26px;height:26px;border-radius:6px;background:#F1F5F9;border:1px solid var(--border);display:grid;place-items:center;font-size:.7rem;font-weight:700;color:var(--suave)}
  .barra-cliente .nombre-cliente{font-size:.85rem;font-weight:600}
  .barra-cliente .meta{font-size:.7rem;color:var(--mudo)}
  .barra-cliente .cambiar{margin-left:auto;font-size:.72rem;color:var(--suave);background:none;border:1px solid var(--border);border-radius:6px;padding:.25rem .6rem;cursor:pointer}
  .barra-cliente .cambiar:hover{border-color:var(--brand);color:var(--brand)}

  .layout{display:flex;flex:1;min-height:0}

  /* ══ Banner publicitario, franja fija abajo — tipo marcador deportivo ══ */
  :root{--banner-alto:66px}
  /* Fijo de verdad: si no, en una pantalla con mucho contenido queda debajo
     del scroll y hay que bajar del todo para verlo — tiene que estar SIEMPRE
     a la vista, sea cual sea el módulo o cuánto ocupe. */
  #banner{position:fixed;left:0;right:0;bottom:0;z-index:40;height:var(--banner-alto);
       border-top:1px solid var(--border);display:flex;align-items:stretch}
  #banner:empty{display:none}

  /* Aviso de que hay más contenido por debajo, SIEMPRE por encima del banner,
     nunca tapado por él. Solo aparece si de verdad queda algo por ver. */
  #continuaAbajo{position:fixed;right:1.5rem;bottom:calc(var(--banner-alto) + 1rem);z-index:30;
       display:none;align-items:center;gap:.35rem;background:var(--texto);color:#fff;
       border:none;border-radius:20px;padding:.4rem .9rem .4rem 1.1rem;font-size:.75rem;
       font-weight:600;font-family:inherit;cursor:pointer;box-shadow:0 4px 14px rgba(15,23,42,.25)}
  #continuaAbajo.visible{display:flex}
  #continuaAbajo:hover{background:var(--brand-dark)}
  #continuaAbajo svg{width:13px;height:13px}
  .banner-cuerpo{flex:1;display:flex;align-items:stretch;padding:.9rem 0;
       background:var(--brand-dark);color:#fff;text-decoration:none;min-width:0;overflow:hidden}

  /* La pista mide el doble del contenedor visible (dos copias del bloque
     imagen+texto) y se desplaza -50%: al llegar ahí la segunda copia está
     exactamente donde empezó la primera, así que el salto de vuelta a 0% no
     se nota. Imagen y texto viajan juntos, dentro de lo que se repite. */
  .banner-marquee{flex:1;overflow:hidden;min-width:0}
  .banner-marquee-pista{display:flex;width:max-content;animation:banner-desliza 18s linear infinite}
  .banner-cuerpo:hover .banner-marquee-pista{animation-play-state:paused}
  .banner-frase{display:flex;align-items:center;gap:.9rem;font-size:1rem;font-weight:700;
       white-space:nowrap;padding-right:4rem}
  .banner-frase img{height:44px;width:44px;object-fit:contain;flex-shrink:0;border-radius:8px;
       background:#fff;padding:3px}
  @keyframes banner-desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ══ Menú de módulos, vertical a la izquierda ══ */
  nav{width:250px;flex-shrink:0;background:var(--panel-2);border-right:1px solid var(--border);padding:.9rem 0;overflow-y:auto}
  .nav-titulo{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mudo);padding:.9rem 1.25rem .5rem}
  .nav-titulo:first-child{padding-top:.2rem}
  nav a{display:flex;align-items:center;gap:.6rem;padding:.55rem 1.25rem;color:var(--suave);text-decoration:none;font-size:.85rem;border-left:3px solid transparent;cursor:pointer}
  nav a:hover{background:#F1F5F9;color:var(--texto)}
  nav a .ico{width:1.1rem;text-align:center;font-size:.95rem;flex-shrink:0}
  nav a .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  nav a .punto{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:transparent}

  /* El fondo es el semáforo de verdad (mismo color que el nodo del Panel de
     control), no un indicador aparte que se pueda desalinear con él. */
  nav a.sf-naranja{color:#92400E;background:#FFFBEB;font-weight:600;border-left-color:var(--ambar)}
  nav a.sf-naranja .punto{background:var(--ambar);box-shadow:0 0 0 3px rgba(217,119,6,.18)}
  nav a.sf-azul{color:#3730A3;background:#EEF2FF;font-weight:600;border-left-color:#818CF8}
  nav a.sf-azul .punto{background:#4F46E5;box-shadow:0 0 0 3px rgba(79,70,229,.18)}

  nav a.activo{background:#EEF2FF;color:#312E81;font-weight:600;border-left-color:var(--brand)}
  nav a.no-contratado{color:#CBD5E1}
  nav a.no-contratado .ico{opacity:.45}
  nav a.no-contratado .candado{font-size:.62rem;color:#CBD5E1;border:1px solid #E2E8F0;border-radius:4px;padding:0 .3rem}

  /* Reordenar "Módulos" a mano: el asa solo aparece al pasar por encima, para
     no meter ruido visual permanente en un menú que ya tiene bastante. */
  nav a[draggable="true"] .asa{opacity:0;font-size:.8rem;color:var(--mudo);cursor:grab;width:.8rem;flex-shrink:0}
  nav a[draggable="true"]:hover .asa{opacity:1}
  nav a.arrastrando{opacity:.4}
  nav a.sobre-drop{border-left-color:var(--brand);background:#EEF2FF}

  /* Contratado pero sin añadir al lienzo: no bloqueado (se puede entrar y
     usar igual), solo más apagado — para distinguirlo de un vistazo de lo
     que ya está en marcha de verdad. */
  nav a.no-conectado{opacity:.55}
  nav a.no-conectado .ico{opacity:.7}

  /* ══ Cuerpo ══ */
  main{flex:1;overflow-y:auto;padding:1.5rem 1.75rem;min-width:0}
  /* El banner es fijo (ver más abajo) y le come sitio al final de la página:
     sin este hueco, la última tarjeta de cualquier pantalla larga quedaría
     tapada detrás de él. */
  body.con-banner main{padding-bottom:calc(1.5rem + var(--banner-alto))}
  h2{font-size:1.2rem;font-weight:700}
  .desc{font-size:.85rem;color:var(--suave);margin:.3rem 0 1.4rem;max-width:680px;line-height:1.55}

  .rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem;max-width:1000px}
  .card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1.1rem;box-shadow:0 1px 2px rgba(15,23,42,.04)}
  .card .k{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mudo);margin-bottom:.5rem}
  .card .v{font-size:1.7rem;font-weight:700}
  .card .v small{font-size:.8rem;font-weight:500;color:var(--suave)}
  .card.modulo{display:flex;flex-direction:column;gap:.5rem}
  .card.modulo .cab{display:flex;align-items:center;gap:.5rem}
  .card.modulo .cab .ico{font-size:1.1rem}
  .card.modulo .cab .nom{font-weight:600;font-size:.92rem}
  .card.modulo p{font-size:.78rem;color:var(--suave);line-height:1.5;flex:1}
  .etq{font-size:.65rem;font-weight:700;border-radius:20px;padding:.1rem .55rem;letter-spacing:.03em}
  .etq.verde{background:rgba(34,197,94,.15);color:var(--verde)}
  .etq.gris{background:#F1F5F9;color:var(--suave)}
  .etq.ambar{background:rgba(217,119,6,.15);color:var(--ambar)}
  .etq.azul{background:#EEF2FF;color:#4F46E5}
  .btn{background:var(--brand);color:#fff;border:none;border-radius:8px;padding:.45rem .9rem;font-size:.78rem;font-weight:600;cursor:pointer;align-self:flex-start}
  .btn.fantasma{background:#fff;border:1px solid var(--border);color:var(--suave)}
  .placeholder{color:var(--mudo);font-size:.85rem;padding:2.5rem;text-align:center;border:1px dashed var(--border);border-radius:12px;max-width:1000px}

  /* módulo visible pero no usable */
  .aviso-bloqueo{display:flex;align-items:center;gap:.7rem;background:#FFFBEB;border:1px solid #FDE68A;border-radius:10px;padding:.7rem .9rem;font-size:.82rem;color:var(--suave);max-width:1000px;margin-bottom:1rem;flex-wrap:wrap}
  .bloqueado{opacity:.5;filter:grayscale(.7);pointer-events:none;user-select:none}

  /* enlaces entre módulos */
  .conexiones{margin-top:1.6rem;max-width:1000px}
  .conexion{display:flex;align-items:center;gap:.6rem;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:.6rem .9rem;font-size:.8rem;margin-bottom:.5rem;box-shadow:0 1px 2px rgba(15,23,42,.04)}
  .conexion .flecha{color:var(--brand);font-weight:700}
  .conexion .nota{margin-left:auto;font-size:.7rem;color:var(--mudo)}

  @media (max-width:820px){ nav{width:64px} nav .txt,nav .candado,.nav-titulo{display:none} nav a{justify-content:center;padding:.6rem 0} main{padding:1.1rem} }

  /* ── añadidos de la versión conectada a datos ── */
  .barra-nuestra .salir{background:rgba(255,255,255,.18);border:none;color:#fff;border-radius:6px;
       padding:.25rem .6rem;font-size:.72rem;cursor:pointer;font-family:inherit}
  .barra-nuestra .salir:hover{background:rgba(255,255,255,.3)}
  .barra-cliente .logo-cliente img{width:100%;height:100%;object-fit:contain;border-radius:5px}
  select.cambiar{margin-left:auto;font-size:.75rem;color:var(--texto);background:#fff;
       border:1px solid var(--border);border-radius:6px;padding:.28rem .5rem;font-family:inherit;cursor:pointer}
  .cargando{color:var(--mudo);font-size:.85rem;padding:2rem}
  .rotulo{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mudo);margin-bottom:.7rem}
  code{background:#F1F5F9;border-radius:4px;padding:.05rem .3rem;font-size:.85em}


/* ── Ofertas de la cadena: trabajo esperando a que se contrate un módulo ── */
.card.modulo.oferta{border-color:#FDE68A;background:#FFFDF7}
.card.modulo.oferta .nom{color:var(--texto)}
.oferta-plazo{font-size:.7rem;color:var(--mudo);margin-top:-.2rem}
.oferta-acciones{display:flex;gap:.5rem;flex-wrap:wrap}
.oferta-acciones .btn{align-self:auto}

/* Los símbolos de los módulos son dibujos de trazo, no emoji: mismo grosor,
   mismo color que el texto, y se ven igual en cualquier sistema. */
.icono{display:inline-block;vertical-align:-.15em;flex-shrink:0}
h2 .icono{vertical-align:-.12em;margin-right:.15rem;opacity:.75}
nav a .ico{display:flex;align-items:center;justify-content:center}

/* Enlaces de vuelta a la web del revendedor, en la franja de su marca. */
.barra-nuestra .enlaces-marca{display:flex;gap:.9rem;margin-left:1rem}
.barra-nuestra .enlaces-marca a{color:rgba(255,255,255,.85);text-decoration:none;
     font-size:.75rem;border-bottom:1px solid transparent}
.barra-nuestra .enlaces-marca a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.5)}

/* Pie de página libre del revendedor — oculto por defecto, [hidden] lo controla vestir(). */
.pie-marca{padding:.9rem 1.5rem;font-size:.75rem;color:var(--mudo);text-align:center}