/* ============================================================================
   MULTISALA SOPORTE · ESTILOS DEL BACK OFFICE DE LIVE HELPER CHAT (operadores)
   ============================================================================
   Archivo en el servidor:
     <raíz LHC>/extension/multisalaux/design/multisalauxtheme/css/multisalaux-operator.css
   Versión: 2026-09-22 · "ux-v3" (ver HANDOFF_CODEX.md en saas_autoinstall/soporte_lhc_ux).

   REGLAS DE ESTE ARCHIVO
   - Todo cuelga de html.ms-operator (clase que agrega multisalaux.js) o de
     clases propias .ms-*. Así, si el JS no carga, LHC queda con su estilo nativo.
   - Sólo estética y legibilidad: no se ocultan botones, permisos ni funciones de
     LHC. Nunca usar display:none sobre controles nativos.
   - Los componentes nativos de LHC (React/Svelte) NO se reestructuran: sólo se
     les da estilo. En particular, .panel-list debe conservar su scroll horizontal
     (arreglo previo: la tabla de pendientes de Svelte se desbordaba).

   ÍNDICE
   1. Tokens de color y tipografía
   2. Marco general de LHC (cabecera, menú lateral, tarjetas, tablas, formularios)
   3. Listas de chats del dashboard
   4. Ventana de chat (mensajes, pestañas, cuadro de respuesta)
   5. Ficha del jugador (.ms-context …)
   6. Login
   7. Responsive, contenedor angosto y movimiento reducido
   ============================================================================ */

/* 1. TOKENS ----------------------------------------------------------------- */
html.ms-operator{--ms-ink:#282238;--ms-muted:#70687e;--ms-purple:#6943bb;--ms-purple-600:#5a35a6;--ms-purple-dark:#362051;--ms-purple-50:#f5f0fd;--ms-gold:#e6bd68;--ms-line:#e9e3f1;--ms-paper:#fff;--ms-bg:#f6f3fa;
  /* Estados: ok = acreditado/pagado, warn = en curso, bad = rechazado/fallido */
  --ms-ok:#157a4f;--ms-ok-bg:#e8f6ef;--ms-ok-line:#bfe5d0;--ms-warn:#8f5a06;--ms-warn-bg:#fff5de;--ms-warn-line:#f1d7a0;--ms-bad:#b3261e;--ms-bad-bg:#fdeceb;--ms-bad-line:#f3c3be;--ms-neutral:#5d5470;--ms-neutral-bg:#f2eef7;--ms-neutral-line:#e2dbeb;
  color-scheme:light}

/* 2. MARCO GENERAL DE LHC ---------------------------------------------------- */
.ms-operator body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--ms-bg);color:var(--ms-ink)}
.ms-operator #page-content-wrapper,.ms-operator #middle-column-page{background:var(--ms-bg)}
.ms-operator .top-menu-bar-lhc{background:linear-gradient(110deg,#291b3e,#4b2b70);border-color:#695080!important;box-shadow:0 3px 16px #30204018;min-height:58px;color:#fff}
.ms-operator .top-menu-bar-lhc .back-logo{padding:8px 14px;max-width:188px}
.ms-operator .top-menu-bar-lhc .back-logo img{width:160px;height:54px;object-fit:cover;max-width:100%}
.ms-operator .top-menu-bar-lhc .btn-outline-secondary,.ms-operator .top-menu-bar-lhc>.nav-link,.ms-operator .top-menu-bar-lhc .navbar-toggler{color:#fff}
.ms-operator #sidebar-wrapper{background:#30213f;color:#e9e1f5;border-color:#483354}
.ms-operator #side-menu>li>a,.ms-operator #side-menu .nav-link{color:#ece6f4;border-radius:10px;margin:3px 6px;transition:background .16s ease,transform .16s ease}
.ms-operator #side-menu a:hover,.ms-operator #side-menu a:focus-visible{background:#533771;color:#fff}
.ms-operator #side-menu .active>a{background:#66458a;color:#ffe0a0}
.ms-operator .card,.ms-operator .panel,.ms-operator .modal-content{background:var(--ms-paper);color:var(--ms-ink);border:1px solid var(--ms-line);border-radius:16px;box-shadow:0 5px 22px #34204d08}
.ms-operator .card-header,.ms-operator .panel-heading,.ms-operator .modal-header{background:#faf8fd;color:#41314f;border-color:var(--ms-line);border-radius:15px 15px 0 0}
.ms-operator .table{--bs-table-bg:#fff;--bs-table-color:#30293c;--bs-table-border-color:#eee8f3;--bs-table-hover-bg:#f5effd;font-size:13px;vertical-align:middle}
.ms-operator .table>thead{color:#6b587b;background:#faf7fd;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.ms-operator .table>:not(caption)>*>*{padding-top:.6rem;padding-bottom:.6rem}
/* Native Svelte 4.91v renders WidgetBodyPending inside .panel-list. Keep its
   virtual DOM intact: horizontal scrolling belongs to that existing parent. */
.ms-operator lhc-widget{display:block;min-width:0;max-width:100%}
.ms-operator .panel-list{overflow-x:auto!important;max-width:100%;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#cdbbdf #f7f2fc}
.ms-operator .panel-list>.table{table-layout:auto!important;min-width:740px;width:100%}
.ms-operator .panel-list>.table>thead>tr>th,.ms-operator .panel-list>.table>tbody>tr>td{min-width:100px;white-space:nowrap;overflow-wrap:normal!important;word-break:normal!important;padding-left:10px;padding-right:10px}
.ms-operator .panel-list>.table>thead>tr>th:first-child,.ms-operator .panel-list>.table>tbody>tr>td:first-child{min-width:180px}
.ms-operator .panel-list>.table .abbr-list{min-width:90px;max-width:220px;white-space:nowrap!important;word-break:normal!important;overflow:hidden;text-overflow:ellipsis}
.ms-operator .nav-pills .nav-link.active,.ms-operator .btn-primary{background:#6841ad;border-color:#6841ad;color:#fff}
.ms-operator .btn-primary:hover{background:#53318f;border-color:#53318f}
.ms-operator .btn{border-radius:9px}
.ms-operator .form-control,.ms-operator .form-select,.ms-operator textarea{background:#fff;color:#292234;border-color:#dcd3e7;border-radius:9px}
.ms-operator .form-control:focus,.ms-operator .form-select:focus,.ms-operator textarea:focus{border-color:#9270cd;box-shadow:0 0 0 3px #8f68cf22}
/* Foco visible en todo el panel (navegación con teclado). */
.ms-operator a:focus-visible,.ms-operator button:focus-visible,.ms-operator .btn:focus-visible{outline:3px solid #aa81dd;outline-offset:2px}

/* 3. LISTAS DE CHATS DEL DASHBOARD ------------------------------------------ */
/* (sección completada tras revisar el DOM real del dashboard; ver más abajo) */

/* 4. VENTANA DE CHAT --------------------------------------------------------- */
.ms-operator .chat-main-left-column,.ms-operator .chat-main-right-column{min-width:0}
.ms-operator .msgBlock-admin{background:linear-gradient(135deg,#faf8fd,#f4f0f8);border:1px solid var(--ms-line);border-radius:14px;padding:14px!important}
.ms-operator .msgBlock-admin .message-row{margin-bottom:12px}
.ms-operator .msgBlock-admin .msg-body{border-radius:14px;padding:11px 14px;background:#fff;color:#2e263a;box-shadow:0 2px 8px #3820440a;line-height:1.55}
.ms-operator .msgBlock-admin .message-admin .msg-body{background:#f0e8ff;color:#382354;border:1px solid #dfd0f5}
.ms-operator .chat-tab-sub-items{background:#fff;border-radius:12px 12px 0 0;padding:5px;border-color:var(--ms-line)!important}
.ms-operator .chat-tab-sub-items .nav-link.active{color:#6943bb;border-color:#6943bb}

/* 5. FICHA DEL JUGADOR ------------------------------------------------------- */
/* Celda de la tabla de información del chat donde la plantilla inserta la ficha. */
.ms-operator .ms-context-cell{padding:0 0 16px!important;border:0!important}
.ms-context{position:relative;container-type:inline-size;font:13px/1.5 Inter,ui-sans-serif,system-ui,sans-serif;border:1px solid #e4d9ed;border-radius:16px;background:#fff;color:#2d2438;overflow:hidden;box-shadow:0 5px 22px #38244c0a;text-transform:none;letter-spacing:normal;text-align:left;white-space:normal;animation:ms-context-in .25s ease-out}
.ms-context *{box-sizing:border-box}
/* Cabecera que dibuja la plantilla PHP (título "Ficha del jugador" + "Solo lectura"). */
.ms-context-head{display:flex;align-items:center;gap:9px;padding:12px 14px;background:linear-gradient(120deg,#f6f0ff,#fffbf1);border-bottom:1px solid #eee5f1}
.ms-context-head>div{min-width:0;flex:1}
.ms-context-head strong{display:block;font-size:13px;line-height:1.3}
.ms-context-head small{display:block;color:#836997;font-size:9px;font-weight:750;letter-spacing:.15em;margin-top:4px}
.ms-context-mark{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:10px;background:#563382;color:#ffe0a0;font-size:18px;font-weight:900;box-shadow:0 3px 10px #56338226}
.ms-readonly{font-size:9px;color:#6b547c;white-space:nowrap;border:1px solid #dfd2eb;border-radius:99px;padding:3px 6px;background:#ffffff99}
.ms-context-content{position:relative;padding:14px;min-height:140px}

/* Íconos y botones propios */
.ms-icon{display:inline-grid;place-items:center;flex:0 0 auto;line-height:0}
.ms-icon svg{width:16px;height:16px;display:block}
.ms-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid #dfd1ed;border-radius:9px;background:#fff;color:#67438b;font-family:inherit;font-size:11.5px;font-weight:650;line-height:1.3;padding:7px 11px;min-height:32px;cursor:pointer;transition:background .16s ease,border-color .16s ease}
.ms-button:hover{background:#f4edfb;border-color:#cdb7ea}.ms-button:disabled{opacity:.45;cursor:default}
.ms-button-primary{background:var(--ms-purple,#6943bb);border-color:var(--ms-purple,#6943bb);color:#fff}
.ms-button-primary:hover{background:var(--ms-purple-600,#5a35a6);border-color:var(--ms-purple-600,#5a35a6)}
.ms-icon-button{appearance:none;display:inline-grid;place-items:center;width:26px;height:26px;flex:0 0 26px;padding:0;border:1px solid #e3d8ee;border-radius:8px;background:#fff;color:#6a4a8c;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.ms-icon-button:hover{background:#f4edfb;border-color:#cdb7ea}
.ms-icon-button .ms-icon svg{width:14px;height:14px}
.ms-icon-button.is-done{color:var(--ms-ok);border-color:var(--ms-ok-line);background:var(--ms-ok-bg)}
.ms-link-button{appearance:none;display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:#6a43bd;font:inherit;font-size:11px;font-weight:700;padding:4px 7px;border-radius:7px;cursor:pointer;white-space:nowrap}
.ms-link-button:hover{background:#f3ecfc}
.ms-link-button .ms-icon svg{width:14px;height:14px}
.ms-context button:focus-visible,.ms-context input:focus-visible,.ms-context summary:focus-visible,.ms-tab-panel:focus-visible{outline:3px solid #aa81dd;outline-offset:2px}

/* Chips de estado: el color depende del tono (ok/warn/bad/neutral). */
.ms-pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;line-height:1.3;border:1px solid var(--ms-neutral-line);border-radius:99px;padding:2px 8px;color:var(--ms-neutral);background:var(--ms-neutral-bg);max-width:100%;overflow-wrap:anywhere}
.ms-pill::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:currentColor}
.ms-tone-ok.ms-pill{color:var(--ms-ok);background:var(--ms-ok-bg);border-color:var(--ms-ok-line)}
.ms-tone-warn.ms-pill{color:var(--ms-warn);background:var(--ms-warn-bg);border-color:var(--ms-warn-line)}
.ms-tone-bad.ms-pill{color:var(--ms-bad);background:var(--ms-bad-bg);border-color:var(--ms-bad-line)}

/* Compatibilidad: estilos de la versión anterior del JS (.ms-player-summary).
   Se conservan para que, si se vuelve atrás SOLO el JS, la ficha siga prolija. */
.ms-player-summary{display:flex;gap:10px;align-items:center;margin-bottom:13px}
.ms-player-summary strong{display:block;font-size:17px;word-break:break-word}
.ms-player-summary small{display:block;color:#766781;font-size:11px}

/* Cabecera del jugador */
.ms-hero{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.ms-player-avatar{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#6a43bd,#9b6fe0);color:#fff;font-size:15px;font-weight:800;box-shadow:0 4px 12px #6a43bd33}
.ms-hero-main{min-width:0;flex:1}
.ms-hero-title{display:flex;align-items:center;gap:7px;min-width:0}
.ms-hero-name{font-size:18px;font-weight:800;line-height:1.2;color:#221a31;overflow-wrap:anywhere}
.ms-hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px;font-size:11px;color:#766781}
.ms-hero-role{font-weight:650}
.ms-hero-id{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:10.5px;color:#7a6c87;min-width:0}
.ms-hero-id code,.ms-operation-id{font:10.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#5b4b69;background:#f7f3fb;border:1px solid #ede6f4;border-radius:6px;padding:2px 6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-hero-id code{flex:1;max-width:100%}
.ms-hero-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.ms-button-soft{background:#f6f1fd;border-color:#e6dbf4;color:#5b3690;font-size:11px;padding:5px 10px;min-height:28px}
.ms-button-soft .ms-icon svg{width:14px;height:14px}

/* Títulos de sección */
.ms-section-title{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8a769b;margin:0 0 7px}

/* "Para revisar" */
.ms-alerts{margin:0 0 12px}
.ms-alert-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ms-alert{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--ms-neutral-line);border-radius:12px;padding:9px 10px;font:inherit;background:var(--ms-neutral-bg);color:var(--ms-neutral)}
button.ms-alert{appearance:none;cursor:pointer;transition:filter .15s,transform .15s}
button.ms-alert:hover{filter:brightness(.98);transform:translateY(-1px)}
.ms-alert.ms-tone-warn{color:var(--ms-warn);background:var(--ms-warn-bg);border-color:var(--ms-warn-line)}
.ms-alert.ms-tone-bad{color:var(--ms-bad);background:var(--ms-bad-bg);border-color:var(--ms-bad-line)}
.ms-alert-text{display:flex;flex-direction:column;min-width:0;flex:1}
.ms-alert-text strong{font-size:12.5px;line-height:1.35;color:inherit}
.ms-alert-text small{font-size:11px;line-height:1.4;color:#5e5068}
.ms-alert .ms-icon-chevron{opacity:.6}

/* Tarjetas "Última carga" / "Último retiro" */
.ms-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.ms-kpi{appearance:none;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;text-align:left;font:inherit;color:inherit;border:1px solid #ebe3f3;border-radius:13px;background:#fbf9fd;padding:10px 11px 10px 13px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.ms-kpi:hover{border-color:#cdb7ea;box-shadow:0 4px 14px #5a35a614;transform:translateY(-1px)}
.ms-kpi::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:#ddd3e8}
.ms-kpi.ms-tone-ok::before{background:var(--ms-ok)}.ms-kpi.ms-tone-warn::before{background:#d99a1f}.ms-kpi.ms-tone-bad::before{background:var(--ms-bad)}
.ms-kpi-label{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#7d6a8e}
.ms-kpi-label .ms-icon svg{width:14px;height:14px}
.ms-kpi-value{font-size:17px;font-weight:800;line-height:1.25;color:#241c33;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ms-kpi-empty{font-size:13px;font-weight:650;color:#8b7e97}
.ms-kpi-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:10.5px;color:#7a6c87}
.ms-kpi-total{font-size:10px;color:#978aa3}

/* Casino y sala / datos de la cuenta */
.ms-place{margin-bottom:4px}
.ms-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.ms-fields-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ms-field{position:relative;padding:8px 9px;background:#f9f6fc;border:1px solid #f0eaf5;border-radius:10px;min-width:0}
.ms-field>span{display:block;font-size:10px;color:#83748c;margin-bottom:2px}
.ms-field>strong{display:block;font-size:12px;color:#493754;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ms-field>.ms-icon-button{position:absolute;top:6px;right:6px;width:24px;height:24px}
.ms-field:has(>.ms-icon-button)>strong{padding-right:26px}
.ms-positive>strong{color:var(--ms-ok)}.ms-negative>strong{color:var(--ms-bad)}.ms-zero>strong{color:#6f6480}
.ms-note{font-size:11px;line-height:1.6;color:#7b6d86;margin:10px 0;white-space:normal}
.ms-local-activity{padding:10px 2px 0;border-top:1px solid #eee6f3;margin-top:12px}
.ms-local-activity summary{font-size:11.5px;font-weight:700;color:#74518e;cursor:pointer;padding:2px 0 8px}
.ms-local-activity[open] summary{margin-bottom:2px}

/* Pestañas */
.ms-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;background:#f4eff8;padding:4px;border-radius:12px;margin:16px 0 10px}
.ms-tab{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:0;border-radius:9px;background:transparent;color:#7c6a8a;font:inherit;font-size:11.5px;font-weight:700;padding:7px 2px;min-height:34px;cursor:pointer;transition:background .16s,color .16s;min-width:0}
.ms-tab:hover{color:#5d3a8a;background:#ffffff80}
.ms-tab[aria-selected=true]{background:#fff;color:#5d3690;box-shadow:0 2px 6px #2a173214}
.ms-count{font-size:9.5px;font-weight:800;line-height:1.5;min-width:18px;padding:0 5px;border-radius:99px;background:#e6dcf3;color:#5e3a8e;text-align:center}
.ms-tab[aria-selected=true] .ms-count{background:var(--ms-purple,#6943bb);color:#fff}
.ms-tab-panel{max-height:460px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d1c2df transparent;padding:0 2px 2px}

/* Movimientos (cargas, retiros, juegos, red) */
.ms-day{position:sticky;top:0;z-index:1;padding:8px 2px 5px;background:linear-gradient(#fff 72%,#fff0);font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#7b6690}
.ms-operation{display:flex;flex-direction:column;gap:5px;border:1px solid #ece4f3;border-left:3px solid #ddd3e8;border-radius:11px;padding:9px 10px;margin-bottom:7px;background:#fff}
.ms-operation.ms-tone-ok{border-left-color:var(--ms-ok)}.ms-operation.ms-tone-warn{border-left-color:#d99a1f}.ms-operation.ms-tone-bad{border-left-color:var(--ms-bad)}
.ms-operation-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px}
.ms-operation-head strong{font-size:14px}
.ms-amount{font-size:15px!important;font-weight:800;color:#261d35;font-variant-numeric:tabular-nums}
.ms-operation-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:11px;color:#7d6f89}
.ms-operation time,.ms-operation>small,.ms-time{font-size:11px;color:#83718f}
.ms-dot{color:#c3b6cf}
.ms-operation-foot{display:flex;align-items:center;gap:6px;min-width:0}
.ms-operation-foot .ms-operation-id{flex:1}
.ms-provider{font-size:11px;color:#8a7c95}
.ms-ip{font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700}
.ms-empty-inline{display:flex;align-items:center;gap:8px;padding:14px 12px;margin:6px 0;border:1px dashed #e0d5ea;border-radius:12px;color:#7b6d86;font-size:12px;background:#fcfbfe}
.ms-pagination{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 0 2px;font-size:11px;color:#87758f}
.ms-page-info{font-variant-numeric:tabular-nums}

/* Juegos */
.ms-game-filter{display:flex;align-items:end;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.ms-game-filter label{font-size:10.5px;color:#7b6888;flex:1;min-width:130px;margin:0}
.ms-game-filter input{display:block;width:100%;border:1px solid #dccfe7;border-radius:9px;padding:6px 8px;color:#4c385b;background:#fff;margin-top:4px;font:inherit;font-size:12px;min-height:32px}
.ms-quick-dates{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:0 0 8px}
.ms-quick-label{font-size:10.5px;color:#8a7c95}
.ms-chip-button{appearance:none;border:1px solid #e0d4ec;border-radius:99px;background:#fff;color:#5e3f84;font:inherit;font-size:11px;font-weight:700;padding:3px 10px;min-height:26px;cursor:pointer}
.ms-chip-button:hover{background:#f4edfb}
.ms-chip-button[aria-pressed=true]{background:var(--ms-purple,#6943bb);border-color:var(--ms-purple,#6943bb);color:#fff}
.ms-game-totals{margin:0 0 10px}

/* Pie, estados de carga y error */
.ms-context-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #eee6f4;margin-top:12px;padding-top:10px}
.ms-context-footer small,.ms-context-footer time{font-size:10px;color:#897690;max-width:100%}
.ms-verified{min-width:0;flex:1}
.ms-empty{padding:18px 6px;text-align:center}
.ms-error .ms-icon{color:#b35a6a;margin-bottom:6px}.ms-error .ms-icon svg{width:24px;height:24px}
.ms-error strong{display:block;font-size:13px;color:#74476a}
.ms-context-content.is-refreshing>*:not(.ms-context-footer){opacity:.55;transition:opacity .2s}
.ms-context-content.is-refreshing::before{content:"";position:absolute;left:14px;right:14px;top:6px;height:3px;border-radius:3px;background:linear-gradient(90deg,#ece3f7 0,#8b5cf6 50%,#ece3f7 100%);background-size:200% 100%;animation:ms-loading 1s linear infinite}
.ms-skeleton{padding:2px 0}
.ms-skel{display:block;border-radius:10px;background:linear-gradient(100deg,#f5f0fa 20%,#e9e0f3 42%,#f5f0fa 65%);background-size:240% 100%;animation:ms-loading 1.4s linear infinite}
.ms-skel-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ms-skel-avatar{width:44px;height:44px;border-radius:14px;flex:0 0 44px}
.ms-skel-title{height:18px;flex:1;max-width:60%}
.ms-skel-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.ms-skel-card{height:78px}
.ms-skel-line{height:12px;margin:9px 0}.ms-skel-short{width:62%}
.ms-skel-text{display:block;text-align:center;color:#8b729d;font-size:11.5px;margin-top:12px}
.ms-toast{position:absolute;left:50%;bottom:12px;z-index:5;max-width:calc(100% - 24px);transform:translate(-50%,8px);padding:8px 12px;border-radius:10px;background:#241a33;color:#fff;font-size:11.5px;font-weight:600;line-height:1.4;text-align:center;box-shadow:0 8px 24px #1a102855;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.ms-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* 6. LOGIN ------------------------------------------------------------------- */
.ms-login body{background:radial-gradient(ellipse at 18% 15%,#634480 0,transparent 45%),radial-gradient(ellipse at 90% 90%,#725c45 0,transparent 35%),#271b36;min-height:100vh}
.ms-login .modal-dialog{margin:8vh auto 2rem;max-width:440px;padding:12px}
.ms-login .modal-content{border-radius:22px;box-shadow:0 24px 80px #10071855;overflow:hidden;border:1px solid #ffffff35}
.ms-login .modal-header{background:#f7f1fc;justify-content:center;padding:24px}.ms-login .modal-header img{width:280px;height:94px;max-height:none;max-width:100%;object-fit:cover}
.ms-login .modal-body{padding:28px}.ms-login .form-control{min-height:45px}.ms-login .btn-primary{min-height:43px}

/* 7. RESPONSIVE Y MOVIMIENTO ------------------------------------------------- */
@keyframes ms-context-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes ms-loading{to{background-position:-240% 0}}
/* La ficha se adapta al ancho de SU columna (container query), no al de la pantalla. */
@container (max-width:340px){.ms-kpis,.ms-fields{grid-template-columns:minmax(0,1fr)}.ms-fields-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ms-hero-name{font-size:16px}.ms-tab{font-size:10.5px;gap:3px}.ms-count{padding:0 4px}}
@media(max-width:767px){.ms-operator .top-menu-bar-lhc{min-height:52px}.ms-operator .top-menu-bar-lhc .back-logo{max-width:138px}.ms-operator .chat-main-right-column{padding:12px 0}.ms-context-content{padding:12px}.ms-tab-panel{max-height:380px}.ms-login .modal-dialog{margin-top:3vh}.ms-icon-button{width:32px;height:32px;flex-basis:32px}.ms-link-button{padding:7px 8px}}
@media(prefers-reduced-motion:reduce){.ms-context,.ms-skel,.ms-context-content.is-refreshing::before{animation:none}.ms-context *,.ms-operator #side-menu .nav-link{transition:none!important}.ms-kpi:hover,button.ms-alert:hover{transform:none}}