/* ===== Chrome global replicado de web4rev (base.html) ===== */
  body.shell{ background:#f5f5f7; }
  .nav{ min-height:64px !important; align-items:center; position:sticky; top:0; z-index:40; background:#fff; margin-left:100px; }
  .site-footer{ margin-left:100px; }
  .nav-brand img{ height:60px; width:auto; }
  .nav-brand{ margin-left:22px; }
  /* Barra de búsqueda / preguntar a Agentika AI (centro del header) */
  .hdr-search-wrap{ flex:1; display:flex; justify-content:center; padding:0 12px; min-width:0; }
  .hdr-search{ display:flex; align-items:center; gap:12px; width:100%; max-width:680px;
    background:transparent; border:1px solid #e2e6ec; border-radius:26px; padding:12px 20px;
    transition:border-color .15s, box-shadow .15s; }
  .hdr-search:focus-within{ border-color:#1FA577; box-shadow:0 0 0 3px rgba(31,165,119,.15); }
  .hdr-search__ico{ width:24px; height:24px; flex:none; object-fit:contain; animation: agtk-spin 5s linear infinite; }
  @keyframes agtk-spin{ to{ transform:rotate(360deg); } }
  .hdr-search input{ flex:1; min-width:0; border:0; background:transparent; outline:none; font:inherit; font-size:14px; color:#1d1d1f; }
  .hdr-search input::placeholder{ color:#8a94a6; }
  .hdr-search kbd{ font-family:inherit; font-size:11px; color:#8a94a6; background:#fff; border:1px solid #d6dbe2;
    border-radius:6px; padding:2px 7px; flex:none; }
  /* ===== Footer claro (ad-hoc a esta versión) ===== */
  .site-footer{ background:#f7f8fa !important; color:#5b6b82 !important;
    border-top:1px solid #e6e9ee !important; border-image:none !important; }
  .sf-col h4{ color:#8a94a6 !important; }
  .sf-col a{ color:#5b6b82 !important; }
  .sf-col a:hover{ color:#1d1d1f !important; }
  .sf-legal{ color:#9aa3b2 !important; border-top-color:#e8ebf0 !important; }
  .sf-legal a{ color:#6b7280 !important; }
  .sf-legal__sep{ color:#c9ced6 !important; }
  /* ===== KPIs del dashboard ===== */
  .kpi-head{ display:flex; align-items:center; justify-content:flex-end; margin-bottom:10px; }
  .kpi-nav{ display:flex; gap:6px; }
  .kpi-arrow{ width:30px; height:30px; border-radius:8px; border:1px solid #e2e6ec; background:#fff; color:#6b7280;
    display:grid; place-items:center; cursor:pointer; font-size:17px; line-height:1; }
  .kpi-arrow:hover:not([disabled]){ background:#f0f3f8; color:#1d1d1f; }
  .kpi-arrow[disabled]{ opacity:.35; cursor:default; }
  .kpis{ display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; padding:2px;
    scroll-snap-type:x proximity; scroll-behavior:smooth; overscroll-behavior-x:contain; cursor:grab;
    scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
  .kpis.grabbing{ cursor:grabbing; scroll-snap-type:none; }
  .kpis.grabbing .kpi, .kpis.grabbing .kpi-add{ pointer-events:none; }
  .kpis::-webkit-scrollbar{ display:none; }
  /* Indicador de desplazamiento: linea gruesa con tinte verde + pestana triangular deslizante */
  .kpi-bar{ position:relative; height:12px; margin:8px 0 2px; cursor:pointer;
    touch-action:none; -webkit-user-select:none; user-select:none; }
  .kpi-bar__line{ position:absolute; left:0; right:0; top:50%; height:3px; transform:translateY(-50%);
    background:rgba(31,165,119,.22); border-radius:3px; }
  .kpi-bar__thumb{ position:absolute; top:50%; left:0; width:0; height:0; transform:translate(-50%,-50%);
    border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid #1FA577;
    filter:drop-shadow(0 1px 2px rgba(31,165,119,.45)); transition:left .09s ease-out; will-change:left; }
  .kpi-bar:hover .kpi-bar__thumb{ border-bottom-color:#0f7a54; }
  @media (max-width:1500px){ .kpis{ grid-template-columns:repeat(4,1fr); } }
  @media (max-width:1080px){ .kpis{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:760px){ .kpis{ grid-template-columns:repeat(2,1fr); } }
  .kpi{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px;
    box-shadow:0 1px 2px rgba(10,31,61,.05); display:flex; flex-direction:column;
    flex:0 0 190px; min-width:190px; min-height:0; scroll-snap-align:start; }
  .kpi__hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .kpi__k{ color:#8a94a6; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
  .kpi__ic{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:#e7f3ee; color:#0f7a54; flex:none; }
  .kpi__ic svg{ width:17px; height:17px; }
  .kpi__v{ font-size:26px; font-weight:700; color:#15294a; letter-spacing:-.02em; margin-top:8px; line-height:1; }
  .kpi__d{ color:#6b7280; font-size:12px; margin-top:6px; line-height:1.3; }
  .kpi__row{ display:flex; align-items:center; gap:12px; margin-top:8px; }
  .kpi .ring{ flex:none; width:54px; height:54px; }
  .ring .fg{ animation: ringfill 1.2s ease .15s both; }
  @keyframes ringfill{ from{ stroke-dasharray:0 100; } }
  .dash-sep{ height:1px; background:#e6e9ee; margin:30px 0 22px; }
  .sec-title{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#6b7280; margin-bottom:14px; }
  .kpi-add{ border:1.5px dashed #cfd6e0 !important; box-shadow:none !important; align-items:center; justify-content:center;
    gap:8px; text-align:center; color:#8a94a6; text-decoration:none; cursor:pointer; }
  .kpi-add:hover{ border-color:#1FA577 !important; color:#0f7a54; background:#f6fbf9; }
  .kpi-add .plus{ width:38px; height:38px; border-radius:10px; border:1.5px solid currentColor; display:grid;
    place-items:center; font-size:24px; font-weight:300; line-height:1; }
  .kpi-add__t{ font-size:13px; font-weight:600; }
  .kpi-add__s{ font-size:11.5px; color:#9aa3b2; }
  .kpi__k .lk{ width:10px; height:10px; opacity:.45; margin-right:5px; vertical-align:-1px; }
  /* ===== Menú de perfil ===== */
  .profile-wrap{ position:relative; margin-left:.35rem; }
  .profile-menu{ position:absolute; top:calc(100% + 10px); right:0; width:272px; background:#fff;
    border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 16px 44px rgba(10,31,61,.16);
    opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .16s; z-index:60; overflow:hidden; }
  .profile-menu.open{ opacity:1; visibility:visible; transform:none; }
  .pm-head{ display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid #eef1f5; }
  .pm-ava{ width:44px; height:44px; border-radius:50%; background:#1FA577; color:#fff; display:grid; place-items:center; font-weight:600; font-size:15px; flex:none; }
  .pm-name{ font-weight:600; color:#15294a; font-size:14px; }
  .pm-mail{ color:#8a94a6; font-size:12.5px; margin-top:1px; }
  .pm-role{ color:#0f7a54; font-size:11.5px; font-weight:600; margin-top:4px; }
  .pm-list{ padding:6px; }
  .pm-list a, .pm-foot a{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
    color:#3f4a5a; text-decoration:none; font-size:13.5px; font-weight:500; cursor:pointer; }
  .pm-list a:hover, .pm-foot a:hover{ background:#f0f3f8; color:#15294a; }
  .pm-list a svg, .pm-foot a svg{ width:17px; height:17px; color:#8a94a6; }
  .pm-foot{ padding:6px; border-top:1px solid #eef1f5; }
  .pm-foot a, .pm-foot a svg{ color:#c0392b; }
  /* ===== Configuración de cuenta ===== */
  .cfg-h{ font-size:24px; font-weight:700; color:#15294a; letter-spacing:-.02em; }
  .cfg-sub{ color:#6b7280; margin-top:6px; font-size:14px; }
  .cfg-tabs{ display:flex; gap:2px; border-bottom:1px solid #e5e7eb; margin-top:24px; }
  .cfg-tab{ appearance:none; border:0; background:transparent; padding:12px 16px; font:inherit; font-size:14px;
    font-weight:600; color:#6b7280; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
  .cfg-tab:hover{ color:#1d1d1f; }
  .cfg-tab.active{ color:#0f7a54; border-bottom-color:#1FA577; }
  .cfg-panel{ display:none; padding:24px 0; max-width:700px; }
  .cfg-panel.active{ display:block; }
  .cfg-card{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:22px 24px; margin-bottom:16px; }
  .cfg-card h3{ font-size:14px; font-weight:600; color:#15294a; }
  .cfg-card .hint{ color:#8a94a6; font-size:12.5px; margin:4px 0 16px; }
  .cfg-field{ margin-bottom:16px; }
  .cfg-field label{ display:block; font-size:13px; font-weight:600; color:#5b6b82; margin-bottom:6px; }
  .cfg-field input{ width:100%; box-sizing:border-box; border:1px solid #d6dbe2; border-radius:8px; padding:10px 12px; font:inherit; font-size:14px; background:#fff; }
  .cfg-panel, .cfg-card, .cview{ box-sizing:border-box; max-width:100%; }
  .cfg-field input:focus{ outline:none; border-color:#1FA577; box-shadow:0 0 0 3px rgba(31,165,119,.15); }
  .cfg-field input[readonly]{ background:#f7f8fa; color:#6b7280; }
  .cfg-field textarea{ width:100%; box-sizing:border-box; border:1px solid #d6dbe2; border-radius:8px; padding:10px 12px; font:inherit; font-size:14px; background:#fff; resize:vertical; min-height:56px; }
  .cfg-field textarea:focus{ outline:none; border-color:#1FA577; box-shadow:0 0 0 3px rgba(31,165,119,.15); }
  .cfg-row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .cfg-lockrow{ display:flex; align-items:center; gap:7px; font-size:12px; color:#8a94a6; margin-top:6px; }
  .cfg-lockrow svg{ width:12px; height:12px; }
  .cfg-btn{ appearance:none; border:0; background:#1FA577; color:#fff; font:inherit; font-weight:600; font-size:14px; padding:11px 20px; border-radius:9px; cursor:pointer; }
  .cfg-btn:hover{ background:#178a63; }
  .cfg-btn.ghost{ background:#fff; color:#15294a; border:1px solid #d6dbe2; }
  .cfg-photo{ display:flex; align-items:center; gap:18px; }
  .cfg-photo .pic{ width:72px; height:72px; border-radius:50%; background:#1FA577; color:#fff; display:grid; place-items:center; font-size:24px; font-weight:600; flex:none; }
  .seg{ display:inline-flex; background:#f0f3f8; border-radius:10px; padding:4px; gap:4px; }
  .seg button{ appearance:none; border:0; background:transparent; padding:8px 16px; border-radius:8px; font:inherit; font-size:13px; font-weight:600; color:#6b7280; cursor:pointer; }
  .seg button.on{ background:#fff; color:#15294a; box-shadow:0 1px 2px rgba(0,0,0,.06); }
  .swatches{ display:flex; gap:12px; }
  .sw{ width:34px; height:34px; border-radius:9px; cursor:pointer; border:2px solid transparent; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
  .sw.on{ border-color:#15294a; }

  /* ===== Hamburguesa + drawer móvil ===== */
  .hamburger{ display:none; width:40px; height:40px; border:0; background:transparent; color:#1d1d1f;
    cursor:pointer; border-radius:10px; align-items:center; justify-content:center; margin-right:2px; flex:none; }
  .hamburger svg{ width:22px; height:22px; }
  .hamburger:hover{ background:#f0f3f8; }
  .rail-scrim{ display:none; }
  .rail-close{ display:none; }

  /* ===== Responsive ===== */
  @media (max-width:1000px){
    .hdr-search-wrap{ padding:0 10px; }
    .hdr-search{ max-width:none; }
  }
  @media (max-width:820px){
    .hamburger{ display:inline-flex; }
    .nav, .app-body, .site-footer, .nav-brand{ margin-left:0 !important; }
    .hdr-search-wrap{ display:none; }
    .rail{ width:250px; transform:translateX(-100%); transition:transform .26s cubic-bezier(.22,1,.36,1);
      box-shadow:14px 0 48px rgba(10,31,61,.24); z-index:1200 !important; padding:18px 12px; }
    .rail.open{ transform:none; }
    .rail-item{ flex-direction:row; justify-content:flex-start; gap:14px; padding:11px 14px; font-size:14px; border-radius:12px; }
    .rail-item .ic{ width:auto; height:auto; border-radius:0; background:transparent !important; }
    .rail-item.active{ background:#e7f3ee; }
    .rail-item.active .ic{ background:transparent !important; }
    .rail-sep{ margin:10px 14px; }
    .rail-scrim{ display:block; position:fixed; inset:0; background:rgba(10,31,61,.45);
      opacity:0; visibility:hidden; transition:opacity .2s; z-index:1100; }
    .rail-scrim.open{ opacity:1; visibility:visible; }
    body.rail-open{ overflow:hidden; }
    .rail-close{ display:inline-flex; align-self:flex-end; width:38px; height:38px; border:0; background:transparent;
      color:#6b7280; border-radius:9px; cursor:pointer; align-items:center; justify-content:center; margin:-4px 0 4px; }
    .rail-close svg{ width:22px; height:22px; }
    .rail-close:active, .rail-close:hover{ background:#f0f3f8; }
  }
  @media (max-width:640px){
    .nav{ min-height:56px !important; }
    .nav-brand img{ height:46px !important; }
    .nav-right{ gap:.1rem !important; }
    .nav-ico{ width:36px; height:36px; }
    .kpis{ grid-template-columns:repeat(2,1fr) !important; }
    .kpi{ min-height:0; }
    .cfg-row2{ grid-template-columns:1fr; }
    .cfg-panel{ padding:18px 0; }
    .cfg-h{ font-size:20px; }
    .cfg-tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .cfg-tabs::-webkit-scrollbar{ display:none; }
    .cfg-tab{ white-space:nowrap; padding:10px 12px; font-size:13px; }
    #view-config, .content{ overflow-x:hidden; }
    .profile-menu{ position:fixed; top:60px; right:8px; left:8px; width:auto; }
    .sec-title{ margin-top:6px; }
  }
  @media (max-width:420px){
    .kpis{ grid-template-columns:1fr !important; }
    .nav-ico{ display:none; }
    .pvx{ transform:scale(.85); transform-origin:bottom right; }
  }

  /* ===== Rail lateral fijo (estilo Gmail) ===== */
  .app-body{ display:block; margin-left:100px; min-height:calc(100vh - 64px); }
  .rail{ width:100px; background:#fff; border-right:1px solid var(--line,#d2d2d7);
    display:flex; flex-direction:column; align-items:stretch; gap:4px; padding:16px 10px;
    position:fixed; left:0; top:0; bottom:0; z-index:50; }
  .rail-item{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 4px;
    color:#5b6b82; text-decoration:none; cursor:pointer; font-size:11px; font-weight:500; }
  .rail-item .ic{ width:58px; height:32px; border-radius:16px; display:grid; place-items:center;
    transition:background .15s, color .15s; }
  .rail-item .ic svg{ width:22px; height:22px; }
  .rail-item .lbl{ text-align:center; line-height:1.2; }
  .rail-item, .rail-item:hover, .rail-item:focus{ text-decoration:none !important; }
  .rail-item:hover{ color:#1d1d1f; }
  .rail-item:hover .ic{ background:#f0f3f8; }
  .rail-item.active{ color:#0f7a54; font-weight:600; }
  .rail-item.active .ic{ background:#e7f3ee; color:#0f7a54; }
  .rail-sep{ height:1px; background:var(--line-soft,#e8e8ed); margin:8px 8px; }
  .content{ flex:1; min-width:0; }
  .nav-menu{ display:none !important; }
  .nav-dock{ flex:1; display:flex; align-items:flex-start; justify-content:flex-start;
    gap:clamp(.8rem,1.8vw,1.7rem); overflow-x:auto; scrollbar-width:none; padding:.6rem .4rem .25rem; }
  .nav-dock::-webkit-scrollbar{ display:none; }
  .nav-dock .dock-row{ display:flex; gap:clamp(.7rem,1.6vw,1.5rem); align-items:flex-start; }
  .nav-dock .module-card{ position:relative; background:transparent !important; border:0 !important; box-shadow:none !important;
    padding:0 !important; width:84px; overflow:visible !important; display:flex; flex-direction:column;
    align-items:center; gap:.5rem; text-align:center; text-decoration:none; cursor:pointer; }
  .nav-dock .module-card .ic{ width:58px; height:58px; border-radius:50%; margin:0; display:grid; place-items:center;
    background:#fff !important; border:1px solid #e8e8ed !important; color:#1d1d1f !important; box-shadow:none !important;
    transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, border-color .18s; }
  .nav-dock .module-card .ic svg{ width:27px; height:27px; }
  .nav-dock .module-card.on:hover .ic{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.12) !important; border-color:transparent !important; }
  .nav-dock .module-card h3{ font-size:.82rem; font-weight:500; color:#1d1d1f; margin:0 auto; line-height:1.2;
    width:100%; text-align:center !important; white-space:nowrap; padding:0 !important; }
  .nav-dock .module-card.off .ic{ background:#fbfbfd !important; color:#86868b !important; }
  .nav-dock .module-card.off h3{ color:#86868b; }
  .nav-dock .module-card.dock-here .ic{ border-color:#1FA577 !important; box-shadow:0 0 0 3px rgba(31,165,119,.16) !important; }
  .nav-dock .module-card.dock-here h3{ color:#1FA577; }
  .dk-sep{ flex:0 0 auto; align-self:center; width:1.5px; height:58px; background:#1FA577; opacity:.4; border-radius:2px; margin:0 .3rem; }
  .nav-greet{ display:flex; flex-direction:column; line-height:1.18; }
  .nav-greet--right{ text-align:right; margin-right:.5rem; align-self:center; }
  .nav-greet__hi{ font-size:.82rem; font-weight:400; color:var(--texto-suave); letter-spacing:-.01em; }
  .nav-greet__hi b{ font-weight:600; color:var(--azul-noche); }
  .nav-greet__meta{ font-size:.68rem; color:var(--gris-400); letter-spacing:.02em; }
  .nav-greet__cargo{ color:#1FA577; font-weight:600; }
  .nav-ico{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
    border-radius:11px; color:var(--texto-suave,#6e6e73); border:1px solid transparent; background:transparent;
    cursor:pointer; text-decoration:none; transition:all .15s; }
  .nav-ico svg{ width:20px; height:20px; }
  .nav-ico:hover{ color:var(--ink,#1d1d1f); background:#f0f0f3; }
  .site-footer .sf-inner{ max-width:var(--cwmax); margin:0 auto; padding-left:var(--cwpad); padding-right:var(--cwpad); }
  .sf-legal{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .75rem; margin-top:1.8rem;
    padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.08); font-size:.78rem; color:#7d7d82; }
  .sf-legal a{ color:#a1a1a6; text-decoration:none; }
  .sf-legal__sep{ color:#48484a; }

  /* ===== Encabezado de sección de contenido ===== */
  .pg-head{ margin:0 0 1.4rem; }
  .pg-head .eyebrow{ display:block; }
  .pg-head h1{ font-size:1.7rem; font-weight:700; letter-spacing:-.02em; margin:.25rem 0 .2rem; color:var(--azul-noche,#0A1F3D); }
  .pg-head p{ color:var(--texto-suave,#5b6b82); max-width:64ch; }

  /* ===== Vistas (toggle de la vista previa) ===== */
  .cview{ display:none; }
  .cview.show{ display:block; }

  /* ===== Login split-screen · moderno corporativo ===== */
  #view-login{ position:fixed; inset:0; z-index:150; display:none; }
  #view-login.show{ display:flex; }

  /* Panel de marca (izquierda) */
  #view-login .lg-side{ position:relative; overflow:hidden; width:42%; max-width:640px; color:#fff;
    padding:clamp(40px,5vw,64px); display:flex; flex-direction:column; justify-content:center;
    background: radial-gradient(760px 540px at 0% -8%, rgba(31,165,119,.30), transparent 58%), #0e1013; }
  #view-login .lg-side__mid{ display:flex; flex-direction:column; align-items:flex-start; }
  #view-login .lg-side::after{ content:""; position:absolute; right:-150px; bottom:-170px; width:540px; height:540px;
    background:url('../img/agentika_icon.png') center/contain no-repeat; opacity:.07;
    filter:brightness(0) invert(1); }
  #view-login .lg-side > *{ position:relative; z-index:1; }
  #view-login .lg-side__logo{ height:54px; width:auto; }
  #view-login .lg-eyebrow{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; color:rgba(255,255,255,.78); margin-bottom:16px; }
  #view-login .lg-side__mid h2{ color:#fff; font-size:clamp(24px,2.4vw,32px); font-weight:700; line-height:1.18; letter-spacing:-.02em; max-width:16ch; }
  #view-login .lg-side__mid p{ margin-top:16px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.85); max-width:42ch; }
  #view-login .lg-ag-mark{ height:46px; width:auto; opacity:.92; }
  #view-login .lg-form__logo{ height:46px; width:auto; display:block; margin-bottom:26px; }

  /* Panel de formulario (derecha) */
  #view-login .lg-form{ flex:1; display:flex; flex-direction:column; background:#fff; }
  #view-login .lg-form__main{ flex:1; display:flex; align-items:center; justify-content:center; padding:40px 24px; }
  #view-login .box{ width:100%; max-width:384px; }
  #view-login .lg-h{ font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--texto,#15294a); }
  #view-login .lg-sub{ margin:6px 0 28px; color:var(--texto-suave,#5b6b82); font-size:14px; }
  #view-login .field{ margin-bottom:16px; }
  #view-login label{ display:block; font-size:13px; font-weight:600; color:var(--texto,#15294a); margin:0 0 7px; }
  #view-login .field input{ width:100%; border:1px solid var(--gris-300,#D6DBE2); border-radius:8px; padding:13px 14px;
    font:inherit; font-size:15px; background:#fff; transition:border-color .15s, box-shadow .15s; }
  #view-login .field input:focus{ outline:none; border-color:#1FA577; box-shadow:0 0 0 3px rgba(31,165,119,.16); }
  #view-login .go{ width:100%; border:0; background:#1FA577; color:#fff; font:inherit; font-weight:600; font-size:15px;
    padding:13px; border-radius:8px; cursor:pointer; margin-top:6px; transition:background .15s; }
  #view-login .go:hover{ background:#178a63; }
  #view-login .lg-row{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; font-size:13px; }
  #view-login .lg-remember{ display:flex; align-items:center; gap:8px; color:var(--texto-suave,#5b6b82); cursor:pointer; }
  #view-login .lg-remember input{ width:15px; height:15px; accent-color:#1FA577; }
  #view-login a.lg-link{ color:#1FA577; text-decoration:none; font-weight:500; }
  #view-login a.lg-link:hover{ text-decoration:underline; }
  #view-login .lg-div{ display:flex; align-items:center; gap:12px; margin:26px 0 18px; color:var(--gris-400,#9CA3AF); font-size:12px; }
  #view-login .lg-div::before, #view-login .lg-div::after{ content:""; flex:1; height:1px; background:var(--gris-200,#e5e7eb); }
  #view-login .lg-alt{ display:block; text-align:center; border:1px solid var(--gris-300,#D6DBE2); border-radius:8px;
    padding:12px; font-size:14px; font-weight:600; color:var(--texto,#15294a); text-decoration:none; transition:background .15s; }
  #view-login .lg-alt:hover{ background:#f9fafb; }
  #view-login .lg-form__foot{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
    padding:20px; font-size:12px; color:var(--gris-400,#9CA3AF); }
  #view-login .lg-form__foot a{ color:var(--gris-500,#6B7280); text-decoration:none; }
  #view-login .lg-form__foot a:hover{ color:var(--texto,#15294a); }
  #view-login .lg-form__foot img{ height:18px; opacity:.5; filter:grayscale(1); }
  @media (max-width:860px){ #view-login .lg-side{ display:none; } }

  /* ===== Encabezado con acción (Flota / Clientes / Store) ===== */
  .pg-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 1.4rem; }
  .pg-head-row .pg-head{ margin:0; }
  .btn-primary{ appearance:none; border:0; background:#1FA577; color:#fff; font:inherit; font-weight:600; font-size:14px;
    padding:11px 18px; border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:background .15s; }
  .btn-primary:hover{ background:#178a63; }
  .btn-primary svg{ width:17px; height:17px; }
  .mini{ display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:8px; border:1px solid #e2e6ec;
    background:#fff; color:#3f4a5a; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .15s,border-color .15s; }
  .mini:hover{ background:#f2f5f9; border-color:#d3d9e2; }
  .mini svg{ width:15px; height:15px; }

  /* ===== Módulo Factory: submenú lateral (Biblioteca módulo / Diseño de mockup) ===== */
  .factory-shell{ display:flex; align-items:flex-start; gap:26px; }
  .fsub{ flex:0 0 200px; display:flex; flex-direction:column; gap:4px; position:sticky; top:20px; }
  .fsub__item{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px;
    font-size:13.5px; font-weight:600; color:#5b6b82; text-decoration:none; transition:background .15s,color .15s; }
  .fsub__item svg{ width:17px; height:17px; flex:none; color:#8a94a6; transition:color .15s; }
  .fsub__item:hover{ background:#f2f5f9; color:#15294a; }
  .fsub__item.on{ background:#e7f3ee; color:#0f7a54; }
  .fsub__item.on svg{ color:#1FA577; }
  .factory-main{ flex:1; min-width:0; }
  @media (max-width:860px){
    .factory-shell{ flex-direction:column; gap:14px; }
    .fsub{ position:static; flex-direction:row; flex:none; width:100%; overflow-x:auto; gap:8px; padding-bottom:2px; }
    .fsub__item{ white-space:nowrap; }
  }

  /* ===== Tabla minimalista + estados ===== */
  .tbl-card{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(10,31,61,.05); }
  .tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tbl{ width:100%; border-collapse:collapse; min-width:580px; }
  .tbl th{ text-align:left; padding:13px 18px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:#8a94a6; background:#fbfbfd; border-bottom:1px solid #eef1f5; white-space:nowrap; }
  .tbl td{ padding:14px 18px; font-size:13.5px; color:#15294a; border-bottom:1px solid #f1f3f7; vertical-align:middle; }
  .tbl tr:last-child td{ border-bottom:0; }
  .tbl tbody tr{ transition:background .12s; }
  .tbl tbody tr:hover{ background:#f8fafc; }
  .tbl .num{ font-variant-numeric:tabular-nums; color:#5b6b82; }
  .tbl .r-act{ text-align:right; white-space:nowrap; }
  .mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; color:#6b7280; }
  .cell-name{ font-weight:600; }
  .badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 9px; border-radius:7px; font-size:11.5px; font-weight:600; line-height:1.6; }
  .badge i{ width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
  .badge.ok{ background:#e7f3ee; color:#0f7a54; }   .badge.ok i{ background:#1FA577; }
  .badge.warn{ background:#fdf3e0; color:#b26a1a; } .badge.warn i{ background:#E89F1F; }
  .badge.err{ background:#fdeaea; color:#c0392b; }  .badge.err i{ background:#DC2626; }
  .badge.mute{ background:#eef1f5; color:#6b7280; } .badge.mute i{ background:#9CA3AF; }

  /* ===== Botones-ícono de acción en tablas (editar/dar de alta/dar de baja/eliminar) ===== */
  .iconbtn{ appearance:none; width:34px; height:34px; padding:0; border:1px solid #d6dbe2; background:#fff; color:#5b6b82; border-radius:9px; display:inline-grid; place-items:center; cursor:pointer; text-decoration:none; transition:transform .15s, box-shadow .15s, border-color .15s, background .15s, color .15s; }
  .iconbtn svg{ width:16px; height:16px; }
  .iconbtn:hover{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(10,31,61,.08); }
  .iconbtn:focus-visible{ outline:2px solid #1B4D8C; outline-offset:2px; }
  .iconbtn.edit:hover{ border-color:#0A1F3D; color:#0A1F3D; }
  .iconbtn.pause:hover{ border-color:#E89F1F; color:#b26a1a; background:#fffaf0; }
  .iconbtn.play:hover{ border-color:#1FA577; color:#0f7a54; background:#f2fbf7; }
  .iconbtn.del:hover{ border-color:#c0392b; color:#c0392b; background:#fdeaea; }

  /* ===== Module Store (tarjetas con acción) ===== */
  .store-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  @media (max-width:1080px){ .store-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:640px){ .store-grid{ grid-template-columns:1fr; } }
  .store-card{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:20px; box-shadow:0 1px 2px rgba(10,31,61,.05); display:flex; flex-direction:column; }
  .store-card__hd{ display:flex; align-items:center; gap:12px; }
  .store-card .ic{ width:44px; height:44px; border-radius:12px; background:#e7f3ee; color:#0f7a54; display:grid; place-items:center; flex:0 0 auto; }
  .store-card .ic svg{ width:22px; height:22px; }
  .store-card h3{ font-size:15px; font-weight:600; color:#15294a; margin:0; }
  .store-card .ver{ font-size:12px; color:#8a94a6; margin-top:2px; }
  .store-card p{ color:#5b6b82; font-size:13px; line-height:1.55; margin:14px 0 0; flex:1; }
  .store-card__ft{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:18px; }
  .store-tag{ font-size:11px; font-weight:600; color:#8a94a6; display:inline-flex; align-items:center; gap:5px; }
  .btn-inst{ appearance:none; border:1px solid #1FA577; background:#1FA577; color:#fff; font:inherit; font-weight:600; font-size:12.5px; padding:8px 15px; border-radius:8px; cursor:pointer; transition:background .15s; }
  .btn-inst:hover{ background:#178a63; }
  .btn-inst.ghost{ background:#fff; color:#0f7a54; }
  .btn-inst.ghost:hover{ background:#e7f3ee; }
  .btn-inst.done{ background:#f0f3f8; color:#6b7280; border-color:#e2e6ec; cursor:default; }
  @media (max-width:640px){
    .tbl th, .tbl td{ padding:11px 12px; }
    .pg-head-row .btn-primary{ width:100%; justify-content:center; }
  }

/* ===== Secciones de sistema: form + tabla reutilizable ===== */
.fdt-grid{ display:grid; grid-template-columns:340px 1fr; gap:22px; align-items:start; }
@media (max-width:900px){ .fdt-grid{ grid-template-columns:1fr; } }
.side-form{ background:#fbfcfe; border:1px solid #eef1f5; border-radius:12px; padding:16px; }
.side-form .cfg-field{ margin-bottom:12px; }
.cf-title{ font-size:13px; font-weight:700; color:#15294a; margin:0 0 14px; text-transform:uppercase; letter-spacing:.03em; }
.cfg-field select{ width:100%; padding:12px 14px; border:1px solid #d6dbe2; border-radius:9px; font:inherit; font-size:14px; background:#fff; box-sizing:border-box; }
.cfg-field select:focus{ outline:none; border-color:#1FA577; box-shadow:0 0 0 3px rgba(31,165,119,.15); }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; border:1px solid #e2e6ec; background:#fff; color:#3f4a5a; cursor:pointer; text-decoration:none; }
.icon-btn:hover{ background:#f0f3f8; }
.icon-btn.danger{ color:#c0392b; border-color:#e6c9c9; }
.icon-btn.danger:hover{ background:#fdf2f2; }
.icon-btn svg{ width:15px; height:15px; }
.chk-inline{ display:flex; align-items:center; gap:8px; margin-top:12px; font-weight:500; color:#5b6b82; font-size:13.5px; }
.chk-inline input{ width:16px; height:16px; accent-color:#1FA577; }

/* ===== Formulario corporativo (alta/edición) ===== */
.frm{ max-width:640px; }
.frm h2{ font-size:15px; font-weight:700; color:#15294a; margin:28px 0 14px; padding-top:18px; border-top:1px solid #eef1f5; }
.frm p{ display:block; margin:0 0 16px; }
.frm label{ display:block; font-weight:600; font-size:13px; color:#5b6b82; margin-bottom:6px; }
.frm input,
.frm select,
.frm textarea{ width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #d6dbe2; border-radius:8px;
  font:inherit; font-size:14px; color:#15294a; background:#fff; transition:border-color .15s, box-shadow .15s; }
.frm textarea{ resize:vertical; min-height:88px; }
.frm input:focus,
.frm select:focus,
.frm textarea:focus{ outline:none; border-color:#1FA577; box-shadow:0 0 0 3px rgba(31,165,119,.15); }

/* Flecha propia en todos los <select> del sistema (el nativo del navegador desentona con el diseno) */
.cfg-field select,
.frm select,
.side-form select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b82' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:15px;
  padding-right:36px; cursor:pointer;
}
.frm input[type="checkbox"],
.frm input[type="radio"]{ width:16px; height:16px; accent-color:#1FA577; }
.frm .helptext{ display:block; margin-top:6px; font-size:12px; color:#8a94a6; }
.frm ul.errorlist{ list-style:none; margin:0 0 6px; padding:0; }
.frm .errorlist{ font-size:12.5px; color:#c0392b; }
.frm .errorlist li{ margin-bottom:2px; }
.frm-acts{ display:flex; align-items:center; gap:12px; margin-top:22px; }

/* Switch Activo/Desactivado reusable (Biblioteca de modulos, Agentika IA, etc.) */
.tsw{ position:relative; width:36px; height:20px; border-radius:999px; background:#1FA577; border:none; cursor:pointer; flex:none; padding:0; }
.tsw::after{ content:""; position:absolute; top:2px; left:18px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left .16s; }
.tsw[aria-checked="false"]{ background:#cfd4da; }
.tsw[aria-checked="false"]::after{ left:2px; }
.tsw[disabled]{ opacity:.55; cursor:not-allowed; }
.tsw:focus-visible{ outline:2px solid #1B4D8C; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .tsw::after{ transition:none; } }

/* Badge/contador del rail (p. ej. reuniones activas de Salas y Reuniones) */
.rail-item .ic{ position:relative; }
.rail-badge{ position:absolute; top:-6px; right:-9px; min-width:16px; height:16px;
  padding:0 4px; border-radius:999px; background:#e5484d; color:#fff;
  font-size:10px; font-weight:700; line-height:16px; text-align:center;
  box-shadow:0 0 0 2px var(--rail-bg, #fff); }