/* ============================================================================
PlantaTelefónica — Rediseño (design system + modo oscuro)
----------------------------------------------------------------------------
Implementación del rediseño aprobado en Claude Design para los roles
EMPRESA, DISTRIBUIDOR y ADMINISTRADOR.
Reglas respetadas (ver GUIA_REDISENO_EMPRESA_DISTRIBUIDOR.md):
- Solo CSS, no toca PHP/JS ni renombra clases JS, js- o css- .
- El modo oscuro es OPT-IN: se activa con [data-theme="dark"] en .
En modo claro las vistas legacy quedan prácticamente intactas (solo se
moderniza el dashboard y los componentes nuevos).
- Acento por defecto: AZUL (#2D6CDF) — aprobado por el usuario.
Carga: último del en los baseDocument.html.twig de cada rol,
después de css/main.css y css//main.css.
============================================================================ */
/* La fuente Inter se carga vía en el (no con @import, que en
algunos navegadores corrompía el parseo del bloque :root siguiente). */
/* =========================================================================
1. TOKENS — LIGHT
========================================================================= */
:root {
/* Acento de marca (AZUL por defecto) */
--accent: #2D6CDF;
--accent-hover: #1E55C0;
--accent-press: #1A47AE;
--accent-soft: #E6EDFC;
--accent-soft-2: #D4E1FA;
--accent-fg: #FFFFFF;
--accent-ink: #1A47AE;
/* Gradiente de marca (tile del logo) — se conserva el teal del logo */
--brand-grad: linear-gradient(135deg, #7FB99B 0%, #3FA6B0 45%, #5B6CB0 100%);
--accent-grad: linear-gradient(135deg, #2D6CDF 0%, #1E55C0 100%);
/* Neutros (fríos) */
--bg: #F1F5F7;
--surface: #FFFFFF;
--surface-2: #F5F8FA;
--surface-3: #EBF1F4;
--surface-hover: #F0F5F7;
/* Texto */
--ink-1: #0E1A1F;
--ink-2: #2B3B42;
--ink-3: #586871;
--ink-4: #8A99A1;
--ink-5: #AEBBC1;
/* Bordes */
--line-1: #E6EDF1;
--line-2: #D8E2E7;
--line-3: #C3D1D8;
/* Semánticos */
--green: #15A34A; --green-soft: #E4F6EA; --green-ink:#0E7A37;
--amber: #D9810A; --amber-soft: #FCEFD7; --amber-ink:#9A5B05;
--red: #DC2626; --red-soft: #FBE5E5; --red-ink: #A81D1D;
--blue: #2563EB; --blue-soft: #E3ECFD; --blue-ink: #1A47AE;
--violet:#6D5AE0; --violet-soft:#ECE9FB;
/* Colores por módulo (tiles del dashboard) */
--mod-did:#F39A1F; --mod-ext:#2C8CF0; --mod-usuarios:#586872; --mod-colas:#45B86B;
--mod-pidalo:#F84E5C; --mod-ivr:#16A6A0; --mod-operador:#6D5AE0; --mod-config:#46B0CF;
--mod-reportes:#607079; --mod-campanas:#1FA08A;
/* Layout shell */
--pt-sidebar-w: 256px;
--pt-sidebar-w-collapsed: 74px;
--pt-topbar-h: 64px;
/* Radios */
--r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;
--r-pill: 999px;
/* Sombras */
--sh-1: 0 1px 2px rgba(16, 38, 45, 0.05), 0 1px 3px rgba(16, 38, 45, 0.04);
--sh-2: 0 2px 6px rgba(16, 38, 45, 0.06), 0 6px 16px rgba(16, 38, 45, 0.06);
--sh-3: 0 8px 24px rgba(16, 38, 45, 0.10), 0 24px 48px rgba(16, 38, 45, 0.08);
--sh-accent: 0 6px 18px rgba(45, 108, 223, 0.28);
--ring: 0 0 0 3px rgba(45, 108, 223, 0.22);
color-scheme: light;
}
/* =========================================================================
2. TOKENS — DARK
========================================================================= */
:root[data-theme="dark"] {
--accent: #5B8DF0;
--accent-hover: #76A2F4;
--accent-press: #76A2F4;
--accent-soft: #15264A;
--accent-soft-2: #1B305C;
--accent-fg: #06122A;
--accent-ink: #A0BFF8;
--brand-grad: linear-gradient(135deg, #6FA98C 0%, #2E97A4 45%, #5360A8 100%);
--accent-grad: linear-gradient(135deg, #3C79E6 0%, #2E5FC0 100%);
--bg: #0B1418;
--surface: #111E24;
--surface-2: #16262D;
--surface-3: #1C2F37;
--surface-hover: #1A2C33;
--ink-1: #ECF3F5;
--ink-2: #C9D6DB;
--ink-3: #92A3AB;
--ink-4: #6A7C84;
--ink-5: #51636B;
--line-1: #213138;
--line-2: #2A3D45;
--line-3: #36505A;
--green: #34C46B; --green-soft: #11331F; --green-ink:#5FD98B;
--amber: #E59A2E; --amber-soft: #362810; --amber-ink:#F2B860;
--red: #F26060; --red-soft: #371B1B; --red-ink: #F58B8B;
--blue: #4B85F5; --blue-soft: #15233F; --blue-ink: #88AEF9;
--violet:#8C7BF0; --violet-soft:#221E3D;
/* Colores por módulo (oscuro) */
--mod-did:#E89523; --mod-ext:#3A93EE; --mod-usuarios:#6C7C86; --mod-colas:#41B468;
--mod-pidalo:#F0596A; --mod-ivr:#1CB0AA; --mod-operador:#7E6FE8; --mod-config:#44AECC;
--mod-reportes:#6E7E88; --mod-campanas:#20AE96;
--sh-1: 0 1px 2px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.30);
--sh-2: 0 2px 8px rgba(0,0,0,0.40), 0 8px 20px rgba(0,0,0,0.36);
--sh-3: 0 10px 30px rgba(0,0,0,0.50), 0 28px 56px rgba(0,0,0,0.44);
--sh-accent: 0 6px 20px rgba(91, 141, 240, 0.30);
--ring: 0 0 0 3px rgba(91, 141, 240, 0.28);
color-scheme: dark;
}
/* =========================================================================
3. TOGGLE DE TEMA (sol/luna) — pill con knob deslizante
========================================================================= */
.pt-theme-toggle {
-webkit-appearance: none; appearance: none;
width: 58px; height: 30px; padding: 0; margin: 0 6px;
border-radius: var(--r-pill);
border: 1px solid var(--line-2);
background: var(--surface-3);
position: relative; vertical-align: middle; cursor: pointer;
transition: background-color .3s, border-color .3s;
display: inline-block; flex: 0 0 auto;
}
.pt-theme-toggle .pt-tt-knob {
position: absolute; top: 2px; left: 2px;
width: 24px; height: 24px; border-radius: var(--r-pill);
background: #fff; box-shadow: var(--sh-1);
display: grid; place-items: center; color: #D9810A;
transition: transform .32s cubic-bezier(.5,1.6,.4,1), color .3s;
}
.pt-theme-toggle .pt-tt-knob svg { width: 14px; height: 14px; display: block; }
.pt-theme-toggle .pt-tt-moon { display: none; }
:root[data-theme="dark"] .pt-theme-toggle .pt-tt-knob { transform: translateX(28px); color: var(--accent); background: var(--surface); }
:root[data-theme="dark"] .pt-theme-toggle .pt-tt-sun { display: none; }
:root[data-theme="dark"] .pt-theme-toggle .pt-tt-moon { display: block; }
.pt-theme-toggle:hover { border-color: var(--line-3); }
.pt-theme-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
/* =========================================================================
4. DASHBOARD (tiles de módulos)
Las tiles son IMÁGENES de diseñador a ancho completo: NO se redimensionan ni
se encajonan en tarjetas. En modo claro el menú queda IGUAL que antes; solo
se garantiza legibilidad (el subtítulo era color:black -> invisible en
oscuro) y un realce sutil de la etiqueta al pasar el cursor.
========================================================================= */
.card-dashboard-subtitle { color: var(--ink-1); font-weight: 600; }
.css-img-zoom-efect { position: relative; transition: transform .16s cubic-bezier(.2,.8,.2,1); }
.css-img-zoom-efect:hover { transform: translateY(-3px); }
.css-img-zoom-efect:hover .card-dashboard-subtitle { color: var(--accent-ink); }
/* Pestañas (grupos) del dashboard de empresa: legibilidad en ambos modos */
.div_pestanas_pedido .nav-tabs .js-name_modulo_group { color: var(--ink-3); }
.div_pestanas_pedido .nav-tabs > li.active_li .js-name_modulo_group { color: var(--accent-ink); }
/* =========================================================================
5. MODO OSCURO — "dark skin" para la UI legacy (Material Dashboard + BS4)
Solo aplica cuando [data-theme="dark"]. En claro no cambia nada de esto.
========================================================================= */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .wrapper,
:root[data-theme="dark"] .main-panel,
:root[data-theme="dark"] .content {
background-color: var(--bg) !important;
color: var(--ink-2);
}
:root[data-theme="dark"] body { background-image: none !important; }
/* Encabezados / texto general */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] .card-title,
:root[data-theme="dark"] .title,
:root[data-theme="dark"] label,
:root[data-theme="dark"] p,
:root[data-theme="dark"] .modal-title { color: var(--ink-1); }
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] small { color: var(--ink-4) !important; }
:root[data-theme="dark"] a { color: var(--accent-ink); }
/* Tarjetas */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card-body,
:root[data-theme="dark"] .card-stats {
background-color: var(--surface) !important;
color: var(--ink-2);
border-color: var(--line-1);
box-shadow: var(--sh-1);
}
:root[data-theme="dark"] .card .card-header { color: var(--ink-1); }
/* Dashboard: las tiles son imágenes de diseñador; en oscuro solo se asegura
que el subtítulo se lea (la imagen se mantiene tal cual). */
/* Tablas */
:root[data-theme="dark"] .table,
:root[data-theme="dark"] table { color: var(--ink-2); }
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table td { border-top-color: var(--line-1); }
:root[data-theme="dark"] .table thead th { border-bottom-color: var(--line-2); color: var(--ink-3); }
:root[data-theme="dark"] .table .text-primary { color: var(--accent-ink) !important; }
:root[data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--surface-2) !important; }
:root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.02); }
/* Inputs / formularios */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select.form-control,
:root[data-theme="dark"] .bootstrap-select .dropdown-toggle {
background-color: var(--surface-2) !important;
color: var(--ink-1) !important;
border-color: var(--line-2) !important;
background-image: none;
}
:root[data-theme="dark"] .form-control::placeholder { color: var(--ink-4) !important; }
:root[data-theme="dark"] .form-control:focus {
border-color: var(--accent) !important;
box-shadow: var(--ring) !important;
}
:root[data-theme="dark"] .bmd-form-group [class^="bmd-label"],
:root[data-theme="dark"] .bmd-form-group label { color: var(--ink-3); }
:root[data-theme="dark"] .input-group-text {
background-color: var(--surface-3) !important;
color: var(--ink-3) !important;
border-color: var(--line-2) !important;
}
/* Botones */
:root[data-theme="dark"] .btn.btn-primary,
:root[data-theme="dark"] .real-btn-primary,
:root[data-theme="dark"] .btn-primary {
background-color: var(--accent) !important;
border-color: var(--accent) !important;
color: var(--accent-fg) !important;
box-shadow: var(--sh-accent);
}
:root[data-theme="dark"] .btn.btn-default,
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-white {
background-color: var(--surface-2) !important;
color: var(--ink-1) !important;
border-color: var(--line-2) !important;
}
/* Dropdowns / menús */
:root[data-theme="dark"] .dropdown-menu {
background-color: var(--surface) !important;
border-color: var(--line-2);
box-shadow: var(--sh-3);
}
:root[data-theme="dark"] .dropdown-item { color: var(--ink-2) !important; }
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
background-color: var(--surface-3) !important;
color: var(--ink-1) !important;
}
/* Modales */
:root[data-theme="dark"] .modal-content {
background-color: var(--surface) !important;
color: var(--ink-2);
border: 1px solid var(--line-2);
}
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer { border-color: var(--line-1); }
:root[data-theme="dark"] .modal-header .close,
:root[data-theme="dark"] .close { color: var(--ink-2); text-shadow: none; opacity: .8; }
:root[data-theme="dark"] .css-close-modal-icon { color: var(--ink-2); }
/* Nav tabs / pestañas */
:root[data-theme="dark"] .div_pestanas_pedido .nav-tabs { background: var(--surface-2); }
:root[data-theme="dark"] .nav-tabs { border-bottom-color: var(--line-2); }
/* Alertas */
:root[data-theme="dark"] .alert-warning {
background-color: var(--amber-soft); color: var(--amber-ink); border-color: transparent;
}
/* Navbar / barra superior (fila logo + opciones) */
:root[data-theme="dark"] .css-text-icon-user-profile,
:root[data-theme="dark"] .css-span-text-rol,
:root[data-theme="dark"] .css-nav-name-distributor { color: var(--ink-1); }
:root[data-theme="dark"] .css-balance-number { color: var(--ink-1); }
/* Botón volver */
:root[data-theme="dark"] .js-btn-backbutton,
:root[data-theme="dark"] .margin_btn_back .real-btn-primary { color: var(--accent-fg) !important; }
/* Loader de precarga */
:root[data-theme="dark"] .loader-page,
:root[data-theme="dark"] .loader-page-login { background-color: var(--bg) !important; }
/* Paginación (BS) */
:root[data-theme="dark"] .pagination .page-link {
background-color: var(--surface-2); border-color: var(--line-2); color: var(--ink-2);
}
:root[data-theme="dark"] .pagination .page-item.active .page-link {
background-color: var(--accent); border-color: var(--accent); color: var(--accent-fg);
}
/* Scrollbar en oscuro */
:root[data-theme="dark"] *::-webkit-scrollbar { width: 11px; height: 11px; }
:root[data-theme="dark"] *::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
:root[data-theme="dark"] *::-webkit-scrollbar-track { background: transparent; }
/* Cards/segmentos blancos forzados a oscuro */
:root[data-theme="dark"] [style*="background:#fff" i],
:root[data-theme="dark"] [style*="background: #fff" i],
:root[data-theme="dark"] [style*="background-color:#fff" i],
:root[data-theme="dark"] [style*="background-color: #fff" i] {
background-color: var(--surface) !important;
}
/* =========================================================================
6. LOGIN REDISEÑADO (split: panel de marca + formulario) — como el diseño.
Usa position:fixed para llenar el viewport sin que el wrapper/card de
Material Dashboard lo deforme. Neutraliza los estilos legacy del card y
restila los .input-group conservando los hooks JS (jsUser, jsPassword...).
========================================================================= */
.pt-login {
position: fixed; inset: 0; z-index: 20;
display: grid; grid-template-columns: 1.05fr 1fr;
background: var(--bg);
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
overflow: auto;
}
.pt-login * { box-sizing: border-box; }
/* ---- Panel de marca (izquierda) ---- */
.pt-login .pt-login-aside {
position: relative; overflow: hidden; color: #fff;
background: var(--brand-grad);
display: flex; flex-direction: column; padding: 46px 52px;
}
:root[data-theme="dark"] .pt-login .pt-login-aside {
background: linear-gradient(150deg, #0E2A2F 0%, #133A45 50%, #1B2C52 100%);
}
.pt-login .la-glow {
position: absolute; width: 520px; height: 520px; border-radius: 50%;
right: -180px; top: -160px; z-index: 1;
background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%);
}
.pt-login .la-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
.pt-login .la-top img { max-width: 200px; max-height: 60px; object-fit: contain; }
.pt-login .la-brand-name { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.pt-login .la-mid { position: relative; z-index: 2; margin-top: auto; }
.pt-login .la-mid h2 {
font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.14;
letter-spacing: -.02em; margin: 0 0 16px; color: #fff;
}
.pt-login .la-mid p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.86); max-width: 430px; margin: 0 0 28px; }
.pt-login .la-feats { display: grid; gap: 13px; }
.pt-login .la-feat { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.95); }
.pt-login .laf-ico {
width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
background: rgba(255,255,255,.16); display: grid; place-items: center; backdrop-filter: blur(4px);
}
.pt-login .laf-ico .material-icons { font-size: 19px; }
.pt-login .la-foot { position: relative; z-index: 2; margin-top: 36px; font-size: 12.5px; color: rgba(255,255,255,.7); }
/* ---- Columna del formulario (derecha) ---- */
.pt-login .pt-login-main { position: relative; display: grid; place-items: center; padding: 32px; min-width: 0; }
.pt-login .pt-login-topbar { position: absolute; top: 20px; right: 24px; display: flex; align-items: center; gap: 12px; z-index: 5; }
.pt-login .pt-login-card { width: 100%; max-width: 400px; }
/* neutralizar el card de Material Dashboard */
.pt-login .card,
.pt-login .card-login { background: transparent !important; box-shadow: none !important; border: none !important; margin: 0 !important; }
.pt-login .card-header { background: transparent !important; box-shadow: none !important; padding: 0 0 6px !important; text-align: left !important; }
.pt-login .card-header img { width: auto !important; max-width: 200px; max-height: 60px; }
.pt-login .card-header h3 { color: var(--ink-1); font-weight: 800; }
.pt-login .card-body { padding: 0 !important; }
.pt-login .card-footer { background: transparent !important; padding: 0 !important; justify-content: stretch !important; }
.pt-login .pt-lc-title { font-size: 27px; font-weight: 800; color: var(--ink-1); letter-spacing: -.02em; margin: 4px 0 6px; }
.pt-login .pt-lc-sub { font-size: 14.5px; color: var(--ink-3); margin: 0 0 26px; }
/* campos: restilar .input-group conservando los hooks */
.pt-login .bmd-form-group { width: 100%; display: block; }
.pt-login .input-group {
display: flex; align-items: center; width: 100%; margin: 0;
background: var(--surface); border: 1px solid var(--line-2);
border-radius: var(--r-sm); overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
.pt-login .input-group:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.pt-login .input-group-prepend { margin: 0; }
.pt-login .input-group-text { background: transparent !important; border: none !important; color: var(--ink-4) !important; padding: 0 4px 0 14px; }
.pt-login .input-group-text .material-icons { font-size: 20px; }
.pt-login .form-control {
background: transparent !important; border: none !important; box-shadow: none !important;
height: 48px; flex: 1 1 auto; width: auto; margin: 0; padding: 0 12px;
color: var(--ink-1) !important; font-size: 14.5px;
}
.pt-login .form-control::placeholder { color: var(--ink-4) !important; opacity: 1; }
.pt-login .js-see { color: var(--ink-4); cursor: pointer; padding: 0 4px; }
.pt-login .js-see:hover { color: var(--accent); }
.pt-login .messageErrorLogIn { color: var(--red-ink); font-size: 13px; margin: 6px 2px 0; }
.pt-login .has-danger { margin: 0; }
/* botón INGRESAR */
.pt-login .css-btn-login-into {
width: 100%; height: 48px; border-radius: var(--r-sm); margin-top: 8px;
background: var(--accent) !important; color: #fff !important; border: none !important;
font-weight: 700; font-size: 15px; letter-spacing: .03em; text-transform: uppercase;
box-shadow: var(--sh-accent); transition: background-color .15s, transform .08s;
}
.pt-login .css-btn-login-into:hover { background: var(--accent-hover) !important; }
.pt-login .css-btn-login-into:active { transform: translateY(1px); }
.pt-login #emailHelp {
display: block; text-align: center; margin-top: 18px;
color: var(--accent-ink) !important; font-weight: 600; cursor: pointer;
}
.pt-login #emailHelp:hover { text-decoration: underline; }
/* selector de idioma (chip) */
.pt-login .idioma {
-webkit-appearance: none; appearance: none;
height: 38px; padding: 0 30px 0 14px; border-radius: var(--r-pill);
border: 1px solid var(--line-2); background: var(--surface) !important;
color: var(--ink-2) !important; font-size: 13.5px; font-weight: 600;
width: auto; min-width: 120px; box-shadow: none; cursor: pointer;
}
/* recuperar contraseña */
.pt-login .div-help .card-description { color: var(--ink-3); margin: 0 0 18px; }
.pt-login .btn-rose { color: var(--accent-ink) !important; }
@media (max-width: 880px) {
.pt-login { grid-template-columns: 1fr; }
.pt-login .pt-login-aside { display: none !important; }
.pt-login .pt-login-topbar { top: 16px; right: 16px; }
}
/* =========================================================================
8. VISTAS DE MÓDULO (list / create / edit) — restyle del patrón común.
Mismo HTML/hooks; solo CSS sobre clases compartidas. Scope a .main-panel
para no afectar navbar, login ni dashboard.
========================================================================= */
/* Banner del card (header primario) → gradiente de acento */
.real-card-header-primary,
.modal_header_primary {
background: var(--accent-grad) !important;
color: #fff !important;
border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg);
box-shadow: none;
}
.real-card-header-primary h3,
.real-card-header-primary h4,
.real-card-header-primary .card-title { color: #fff !important; font-weight: 700; }
.real-card-header-primary .card-category,
.real-card-header-primary p { color: rgba(255,255,255,.82) !important; }
/* Botón primario → acento; fabs del banner → translúcidos sobre el gradiente */
.real-btn-primary {
background: var(--accent) !important; color: #fff !important;
border: none !important; box-shadow: var(--sh-accent);
transition: background-color .15s, transform .08s;
}
.real-btn-primary:hover { background: var(--accent-hover) !important; }
.real-btn-primary:active { transform: translateY(1px); }
.real-text-primary { color: var(--accent-ink) !important; }
.real-card-header-primary .real-btn-primary {
background: rgba(255,255,255,.18) !important; box-shadow: none;
}
.real-card-header-primary .real-btn-primary:hover { background: rgba(255,255,255,.32) !important; }
/* Card de contenido → bordes suaves + sombra */
.main-panel .card {
border: 1px solid var(--line-1);
border-radius: var(--r-lg);
box-shadow: var(--sh-2);
}
/* Tabla → cabecera, hover y bordes modernos */
.main-panel .table thead th {
color: var(--accent-ink); font-weight: 700;
text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em;
border-bottom: 2px solid var(--line-2); border-top: none;
}
.main-panel .table td { border-top: 1px solid var(--line-1); vertical-align: middle; color: var(--ink-2); }
.main-panel .table.table-hover tbody tr:hover { background-color: var(--surface-2); }
.main-panel .td-actions .icons { font-size: 17px; }
/* Buscador (inputs/selects del toolbar) → foco con anillo de acento */
.main-panel .form-control:focus {
border-color: var(--accent) !important;
box-shadow: var(--ring) !important;
}
/* Paginación */
.paginationButton { background: var(--accent) !important; color: #fff !important; border: none !important; }
.paginationButton:hover { background: var(--accent-hover) !important; }
.main-panel .btn-default {
background: var(--surface) !important; color: var(--ink-2) !important;
border: 1px solid var(--line-2) !important; box-shadow: none;
}
/* Botón "Volver" superior */
.js-btn-backbutton, .margin_btn_back .real-btn-primary { background: var(--accent) !important; }
/* En oscuro, el card de contenido usa superficie oscura (refuerzo) */
:root[data-theme="dark"] .main-panel .card { background-color: var(--surface) !important; border-color: var(--line-1); }
:root[data-theme="dark"] .main-panel .table thead th { color: var(--accent-ink); border-bottom-color: var(--line-2); }
/* =========================================================================
10. DASHBOARD NUEVO (fiel al prototipo) — saludo + tarjetas de módulo.
Todo scoped a .pt-page para NO colisionar con Bootstrap/Material Dashboard.
========================================================================= */
.pt-page {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
max-width: 1320px; margin: 0 auto; padding: 8px clamp(8px, 2vw, 24px) 48px;
color: var(--ink-2);
}
.pt-page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.pt-ph-title { font-size: clamp(23px, 2.6vw, 31px); font-weight: 800; color: var(--ink-1); letter-spacing: -.02em; margin: 0; line-height: 1.1; }
.pt-ph-sub { font-size: 14.5px; color: var(--ink-3); margin: 8px 0 0; }
.pt-ph-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* botón del header (namespaced, no toca .btn de Bootstrap) */
.pt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-1); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background-color .15s, border-color .15s, transform .08s; }
.pt-btn:hover { background: var(--surface-2); border-color: var(--line-3); color: var(--ink-1); }
.pt-btn:active { transform: translateY(1px); }
.pt-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--sh-accent); }
.pt-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.pt-btn svg { width: 18px; height: 18px; }
/* KPIs */
.pt-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 26px; }
.pt-stat { background: var(--surface); border: 1px solid var(--line-1); border-radius: var(--r-md); padding: 18px 20px; display: flex; align-items: center; gap: 16px; box-shadow: var(--sh-1); }
.pt-stat .pt-s-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; }
.pt-stat .pt-s-ico svg { width: 24px; height: 24px; }
.pt-stat .pt-s-val { font-size: 26px; font-weight: 800; color: var(--ink-1); line-height: 1; letter-spacing: -.02em; }
.pt-stat .pt-s-label { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; font-weight: 500; }
/* encabezado de sección */
.pt-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 16px; flex-wrap: wrap; }
.pt-sec-h h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink-1); letter-spacing: -.01em; }
.pt-sec-h p { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); }
/* rejilla + tarjetas de módulo (estilo vivid del prototipo) */
.pt-mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.pt-mtile {
position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
padding: 18px; text-decoration: none; cursor: pointer;
background: var(--surface); border: 1px solid var(--line-1); border-radius: var(--r-lg); box-shadow: var(--sh-1);
transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .18s, border-color .18s, background-color .35s;
}
.pt-mtile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.pt-mtile:active { transform: translateY(-1px); }
.pt-mt-ico { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; color: #fff; box-shadow: var(--sh-2); background: var(--accent); }
.pt-mt-ico svg { width: 30px; height: 30px; }
.pt-mt-ico img { width: 38px; height: 38px; object-fit: contain; }
.pt-mt-name { font-weight: 700; color: var(--ink-1); font-size: 15px; }
.pt-mt-desc { font-size: 12.5px; color: var(--ink-4); margin-top: -6px; }
.pt-mt-badge { position: absolute; top: 14px; right: 14px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
@media (max-width: 600px) {
.pt-mod-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.pt-mtile { padding: 14px; }
.pt-mt-ico { width: 50px; height: 50px; border-radius: 13px; }
.pt-mt-ico svg { width: 26px; height: 26px; }
}
/* iconos vectoriales del sidebar (reemplazan las imágenes) */
.pt-sb-ico svg { width: 19px; height: 19px; }
/* =========================================================================
9. SHELL — Sidebar + Topbar (layout del prototipo PlantaTelefónica.html)
Sidebar fijo a la izquierda; topbar pegajoso; contenido con margen.
Clases con prefijo pt- para no chocar con Bootstrap/Material Dashboard.
========================================================================= */
.pt-shell { min-height: 100vh; background: var(--bg); }
body.pt-has-shell { background: var(--bg); }
/* ---- Sidebar ---- */
.pt-sidebar {
position: fixed; left: 0; top: 0; bottom: 0; width: var(--pt-sidebar-w);
background: var(--surface); border-right: 1px solid var(--line-1);
display: flex; flex-direction: column; z-index: 1030;
transition: width .25s cubic-bezier(.4,0,.2,1), transform .25s ease, background-color .35s, border-color .35s;
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.pt-sb-head {
height: var(--pt-topbar-h); flex: 0 0 var(--pt-topbar-h);
display: flex; align-items: center; gap: 10px; padding: 0 16px;
border-bottom: 1px solid var(--line-1); overflow: hidden;
}
.pt-sb-head img { max-height: 38px; max-width: 170px; object-fit: contain; }
.pt-sb-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 12px 16px; }
.pt-sb-section {
font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--ink-4); padding: 0 12px; margin: 14px 0 7px; white-space: nowrap;
}
.pt-sb-item {
display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 3px;
border-radius: var(--r-sm); color: var(--ink-3); font-size: 14px; font-weight: 500;
position: relative; cursor: pointer; white-space: nowrap; text-decoration: none;
transition: background-color .15s, color .15s;
}
.pt-sb-item:hover { background: var(--surface-3); color: var(--ink-1); }
.pt-sb-item.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.pt-sb-item.active::before {
content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.pt-sb-ico {
width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; overflow: hidden;
display: grid; place-items: center; background: var(--surface-3); color: var(--ink-3);
}
.pt-sb-ico img { width: 22px; height: 22px; object-fit: contain; }
.pt-sb-ico .material-icons { font-size: 18px; }
.pt-sb-item.active .pt-sb-ico { background: var(--accent); color: #fff; }
.pt-sb-label { overflow: hidden; text-overflow: ellipsis; }
.pt-sb-foot { border-top: 1px solid var(--line-1); padding: 10px 12px; }
.pt-sb-collapse {
display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px;
background: transparent; border: none; color: var(--ink-3); font-size: 13.5px;
font-weight: 600; border-radius: var(--r-sm); cursor: pointer;
}
.pt-sb-collapse:hover { background: var(--surface-3); color: var(--ink-1); }
/* ---- Main (contenido) ---- */
.pt-main {
margin-left: var(--pt-sidebar-w);
min-height: 100vh; display: flex; flex-direction: column;
transition: margin-left .25s cubic-bezier(.4,0,.2,1);
}
.pt-content { padding-top: 14px; flex: 1; }
/* el contenedor de contenido legacy no necesita el padding superior duro */
.pt-content .main-panel { padding-top: 0; }
/* ---- Topbar ---- */
.pt-topbar {
position: sticky; top: 0; z-index: 1020;
height: var(--pt-topbar-h); display: flex; align-items: center; gap: 12px;
padding: 0 18px;
background: color-mix(in srgb, var(--surface) 88%, transparent);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--line-1);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.pt-tb-title { font-size: 16px; font-weight: 700; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-tb-spacer { flex: 1; }
.pt-tb-right { display: flex; align-items: center; gap: 10px; }
.pt-hamb { display: none; width: 40px; height: 40px; border: none; background: transparent; color: var(--ink-2); border-radius: var(--r-sm); align-items: center; justify-content: center; cursor: pointer; }
.pt-hamb:hover { background: var(--surface-3); }
.pt-hamb .material-icons { font-size: 24px; }
/* Reubicar la barra antigua dentro del topbar: que el dropdown de perfil fluya */
.pt-topbar .dropdown.show { display: flex !important; align-items: center; gap: 6px; flex-wrap: nowrap; }
.pt-topbar .pt-tb-right { display: flex; align-items: center; }
/* Domar los iconos grandes (tenían font-size:35px inline) y los chips */
.pt-topbar .material-icons { font-size: 22px !important; vertical-align: middle !important; }
.pt-topbar .css-balance-icon { height: 22px !important; width: auto !important; vertical-align: middle; }
.pt-topbar .css-balance-number { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--ink-1); font-size: 13px; }
.pt-topbar .css-icon-user-profile { width: 30px !important; height: 30px !important; border-radius: 50%; object-fit: cover; }
.pt-topbar .css-text-icon-user-profile { font-weight: 600; color: var(--ink-1); font-size: 13.5px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.pt-topbar .css-container-branch-office { font-size: 13px; color: var(--ink-2); }
/* Perfil de distribuidor (rol + nombre apilados, sin desbordar) */
.pt-topbar .logo-all-pages { display: inline-flex; flex-direction: column; line-height: 1.15; max-width: 150px; text-align: left; vertical-align: middle; margin-top: 0 !important; }
.pt-topbar .css-span-text-rol { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
/* el legacy distribuidor/main.css fuerza un salto de línea con ::after{content:'\A'};
ya apilamos con flex-column, así que ese pseudo sobra y añadía una línea vacía. */
.pt-topbar .css-span-text-rol::after { content: none !important; }
/* RESET del posicionamiento legacy: distribuidor/main.css desplazaba el nombre con
position:relative; top:-25px; right:-46px; width:91px (offsets del navbar viejo) → se "remontaba". */
.pt-topbar .css-nav-name-distributor { font-size: 13px; font-weight: 600; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
position: static !important; top: auto !important; right: auto !important; margin-right: 0 !important;
width: auto !important; min-width: 0 !important; max-width: 150px !important; resize: none !important; display: block !important; }
/* Chips de saldo (distribuidor) compactos; ocultar el secundario si falta espacio */
.pt-topbar .css-balance-number { white-space: nowrap; }
@media (max-width: 1280px) { .pt-topbar .batery_1 { display: none; } .pt-topbar a:has(.batery_1) { display: none; } }
.pt-topbar .text-info, .pt-topbar .text-warning { color: var(--ink-3) !important; }
.pt-topbar .dropdown-toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-1); }
.pt-topbar .dropdown-menu { right: 0; left: auto; }
.pt-topbar .css-notification-icon-i { color: var(--red) !important; }
/* La alerta de saldo bajo cae a ancho completo bajo el topbar, sin romperlo */
.pt-topbar .alert { position: absolute; top: 100%; left: 0; right: 0; margin: 0; border-radius: 0; z-index: 5; }
/* El título del topbar se oculta si no hay espacio */
@media (max-width: 1200px) { .pt-tb-title { display: none; } }
/* ---- Colapsado ---- */
.pt-shell.pt-collapsed .pt-sidebar { width: var(--pt-sidebar-w-collapsed); }
.pt-shell.pt-collapsed .pt-main { margin-left: var(--pt-sidebar-w-collapsed); }
.pt-shell.pt-collapsed .pt-sb-label,
.pt-shell.pt-collapsed .pt-sb-section,
.pt-shell.pt-collapsed .pt-sb-collapse .pt-sb-label { display: none; }
.pt-shell.pt-collapsed .pt-sb-item { justify-content: center; padding-left: 0; padding-right: 0; }
.pt-shell.pt-collapsed .pt-sb-head { justify-content: center; padding: 0; }
.pt-shell.pt-collapsed .pt-sb-head .pt-sb-head-full { display: none; }
/* ---- Scrim móvil ---- */
.pt-scrim { display: none; position: fixed; inset: 0; background: rgba(8,18,22,.5); z-index: 1029; backdrop-filter: blur(2px); }
/* ---- Responsive: sidebar deslizable ---- */
@media (max-width: 992px) {
.pt-sidebar { transform: translateX(-100%); box-shadow: var(--sh-3); }
.pt-shell.pt-nav-open .pt-sidebar { transform: none; }
.pt-shell.pt-nav-open .pt-scrim { display: block; }
.pt-main { margin-left: 0 !important; }
.pt-hamb { display: inline-flex; }
.pt-shell.pt-collapsed .pt-sidebar { width: var(--pt-sidebar-w); }
}
/* =========================================================================
7. RESPONSIVE / MÓVIL — pulido general del dashboard
========================================================================= */
@media (max-width: 600px) {
.css-img-zoom-efect .card-dashboard { padding: 16px 8px 14px; gap: 9px; }
.css-img-zoom-efect .card-dashboard img { width: 56px; height: 56px; }
.card-dashboard-subtitle { font-size: 12px; }
.div_pestanas_pedido .nav-tabs { width: 100%; }
}
/* respeta usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce) {
.css-img-zoom-efect .card-dashboard,
.css-img-zoom-efect .card-dashboard img,
.pt-theme-toggle .pt-tt-knob { transition: none !important; }
}
/* =========================================================================
11. PANTALLA DE CARGA — centrar los anillos del spinner con el logo
(los ::before/::after eran position:absolute sin offsets → descentrados)
========================================================================= */
.loader-page::before, .loader-page::after,
.loader-page-login::before, .loader-page-login::after {
left: 50%; top: 50%; margin: -100px 0 0 -100px;
}
.loader-page, .loader-page-login { background: var(--bg) !important; }
/* Logo/texto centrado en absoluto: no depende de display:flex/block del contenedor */
.loader-page-login > img, .loader-page-login > p,
.loader-page > img, .loader-page > p {
position: absolute !important; left: 50% !important; top: 50% !important;
transform: translate(-50%, -50%) !important;
width: auto !important; max-width: 150px; max-height: 150px; object-fit: contain; margin: 0 !important; z-index: 2;
}
/* =========================================================================
12. COMPONENTES DE VISTA DE MÓDULO (list/form) — fiel al prototipo.
Clases prefijadas pt-* (no colisionan con Bootstrap/Material Dashboard).
========================================================================= */
.pt-card { background: var(--surface); border: 1px solid var(--line-1); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.pt-card-pad { padding: 22px; }
.pt-card-head { padding: 18px 22px; border-bottom: 1px solid var(--line-1); }
.pt-card-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink-1); }
.pt-card-head p { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); }
/* toolbar + buscador */
.pt-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 22px; }
.pt-searchbox { position: relative; flex: 1; min-width: 220px; max-width: 460px; }
.pt-searchbox > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-4); pointer-events: none; width: 18px; height: 18px; }
.pt-searchbox input { width: 100%; height: 44px; padding: 0 14px 0 42px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-1); font-size: 14px; }
.pt-searchbox input::placeholder { color: var(--ink-4); }
.pt-searchbox input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.pt-select { position: relative; }
.pt-select select { appearance: none; -webkit-appearance: none; height: 44px; padding: 0 38px 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-1); font-size: 14px; cursor: pointer; }
.pt-select::after { content: ''; position: absolute; right: 15px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ink-4); border-bottom: 2px solid var(--ink-4); transform: translateY(-65%) rotate(45deg); pointer-events: none; }
/* inputs de formulario */
.pt-field { display: flex; flex-direction: column; gap: 7px; }
.pt-field > label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.pt-field .pt-hint { font-size: 12px; color: var(--ink-4); }
.pt-input, .pt-field select, textarea.pt-input { width: 100%; height: 44px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-1); font-size: 14px; font-family: inherit; }
textarea.pt-input { height: auto; padding: 11px 14px; resize: vertical; line-height: 1.5; }
.pt-input:focus, .pt-field select:focus, textarea.pt-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.pt-grid-form { display: grid; gap: 18px 20px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .pt-grid-form { grid-template-columns: 1fr; } }
.pt-form-foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
/* tabla */
.pt-table-wrap { overflow-x: auto; padding: 4px 8px 8px; }
table.pt-tbl { width: 100%; border-collapse: collapse; font-size: 14px; font-family: 'Inter', sans-serif; }
table.pt-tbl th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); padding: 8px 16px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
table.pt-tbl td { padding: 14px 16px; border-bottom: 1px solid var(--line-1); color: var(--ink-2); vertical-align: middle; }
table.pt-tbl tbody tr { transition: background-color .12s; }
table.pt-tbl tbody tr:hover { background: var(--surface-2); }
table.pt-tbl tbody tr:last-child td { border-bottom: none; }
.pt-t-link { color: var(--accent-ink); font-weight: 600; }
.pt-t-link:hover { text-decoration: underline; }
.pt-t-mut { color: var(--ink-4); }
.pt-t-mono { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--ink-3); }
/* badge de extensión + pills de estado */
.pt-ext-badge { display: inline-grid; place-items: center; min-width: 46px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: 13px; font-family: 'JetBrains Mono', monospace; }
.pt-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--ink-3); }
.pt-pill .pt-dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.pt-pill.green { background: var(--green-soft); color: var(--green-ink); }
.pt-pill.gray { background: var(--surface-3); color: var(--ink-4); }
.pt-pill.amber { background: var(--amber-soft); color: var(--amber-ink); }
.pt-pill.red { background: var(--red-soft); color: var(--red-ink); }
/* acciones de fila */
.pt-row-actions { display: flex; gap: 6px; }
.pt-act-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-xs); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-3); cursor: pointer; transition: all .14s; }
.pt-act-btn svg { width: 17px; height: 17px; }
.pt-act-btn:hover { background: var(--surface-2); color: var(--ink-1); border-color: var(--line-3); }
.pt-act-btn.edit:hover { color: var(--amber); border-color: var(--amber); background: var(--amber-soft); }
.pt-act-btn.del:hover { color: var(--red); border-color: var(--red); background: var(--red-soft); }
/* paginación */
.pt-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; }
.pt-pg-btn { height: 38px; min-width: 38px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pt-pg-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.pt-pg-info { font-size: 13px; color: var(--ink-4); font-weight: 600; }
/* empty state */
.pt-empty { text-align: center; padding: 48px 20px; }
.pt-empty .pt-empty-ico { width: 64px; height: 64px; border-radius: 18px; background: var(--surface-3); color: var(--ink-4); display: grid; place-items: center; margin: 0 auto 16px; }
.pt-empty h4 { margin: 0 0 6px; font-size: 16px; color: var(--ink-1); font-weight: 700; }
.pt-empty p { margin: 0 auto; font-size: 14px; color: var(--ink-3); max-width: 340px; }
/* tabla → tarjetas en móvil */
@media (max-width: 720px) {
table.pt-tbl thead { display: none; }
table.pt-tbl, table.pt-tbl tbody { display: block; }
table.pt-tbl tr { display: block; border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 4px 14px; margin-bottom: 12px; box-shadow: var(--sh-1); }
table.pt-tbl td { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-1); text-align: right; }
table.pt-tbl td::before { content: attr(data-label); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); text-align: left; }
}
/* =========================================================================
13. CHIP DE SALDO (topbar) — batería SVG fiel al diseño (no PNG)
========================================================================= */
.pt-saldo { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px 0 13px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); text-decoration: none; }
.pt-saldo.ok { color: var(--green); }
.pt-saldo.low { color: var(--amber); }
/* Bateria horizontal rellena (identica al prototipo) */
.pt-bat { width: 34px; height: 17px; border: 1.8px solid currentColor; border-radius: 4px; position: relative; padding: 2px; flex: 0 0 auto; box-sizing: border-box; }
.pt-bat::after { content: ''; position: absolute; right: -4px; top: 50%; transform: translateY(-50%); width: 2.5px; height: 7px; background: currentColor; border-radius: 0 2px 2px 0; }
.pt-bat > i { display: block; height: 100%; background: currentColor; border-radius: 1.5px; }
.pt-saldo-txt { display: flex; flex-direction: column; line-height: 1.05; }
.pt-saldo-lbl { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.pt-saldo .css-balance-number { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; color: var(--ink-1); }
/* También aplica al saldo de distribuidor */
.pt-topbar .pt-saldo .css-balance-number { color: var(--ink-1); }
/* Anclajes respetan el alto del topbar pegajoso */
html { scroll-padding-top: calc(var(--pt-topbar-h) + 12px); }
/* =========================================================================
14. MODERNIZACIÓN GLOBAL DE FORMULARIOS/INPUTS LEGACY (dentro del shell)
Convierte los inputs underline de Material Dashboard en inputs "boxed"
modernos, sin reescribir cada vista. Scoped a .pt-content.
========================================================================= */
.pt-content .form-group { margin-bottom: 18px; }
.pt-content .bmd-label-floating,
.pt-content label.bmd-label-floating,
.pt-content .form-group > label,
.pt-content .bmd-label-static,
.pt-content label.bmd-label-static,
.pt-content .bmd-form-group > label {
position: static !important; transform: none !important;
font-size: 12.5px !important; font-weight: 600 !important; color: var(--ink-2) !important;
margin-bottom: 6px !important; line-height: 1.3 !important;
}
.pt-content .form-control,
.pt-content select.form-control,
.pt-content textarea.form-control,
.pt-content .bootstrap-select .dropdown-toggle {
border: 1px solid var(--line-2) !important;
border-radius: var(--r-sm) !important;
height: 44px; padding: 0 14px !important;
background: var(--surface) !important; color: var(--ink-1) !important;
background-image: none !important; box-shadow: none !important; font-size: 14px;
}
.pt-content textarea.form-control { height: auto; min-height: 90px; padding: 11px 14px !important; }
.pt-content .form-control::placeholder { color: var(--ink-4) !important; }
.pt-content .form-control:focus,
.pt-content select.form-control:focus,
.pt-content textarea.form-control:focus {
border-color: var(--accent) !important; box-shadow: var(--ring) !important; background: var(--surface) !important;
}
.pt-content .form-control:disabled, .pt-content .form-control[readonly] { background: var(--surface-2) !important; color: var(--ink-4) !important; }
/* selects nativos: flecha */
.pt-content select.form-control { appearance: none; -webkit-appearance: none; padding-right: 36px !important;
background-image: linear-gradient(45deg, transparent 50%, var(--ink-4) 50%), linear-gradient(135deg, var(--ink-4) 50%, transparent 50%) !important;
background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px !important;
background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; }
/* bootstrap-select (selectpicker .multi_Select): el WRAPPER lleva .form-control, así que
la regla de arriba lo boxeaba como input creando una caja-dentro-de-caja con el botón
→ el valor se cortaba/no se veía ("Planes Empresa"/"Empresa" del reporte de llamadas).
El wrapper debe ser SOLO contenedor; la caja real es el botón .dropdown-toggle. */
.pt-content .bootstrap-select.form-control {
height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important;
background: transparent !important; background-image: none !important; box-shadow: none !important; }
.pt-content .bootstrap-select > .dropdown-toggle {
display: flex !important; align-items: center; justify-content: space-between;
text-align: left !important; width: 100% !important; }
.pt-content .bootstrap-select .filter-option { text-align: left; }
.pt-content .bootstrap-select .filter-option-inner-inner {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-1); }
.pt-content .bootstrap-select .dropdown-toggle.bs-placeholder .filter-option-inner-inner { color: var(--ink-4); }
/* panel desplegable + items legibles en claro (el dark ya lo cubren las reglas de :root[data-theme=dark]) */
.pt-content .bootstrap-select .dropdown-menu { border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: var(--sh-3); padding: 6px; }
.pt-content .bootstrap-select .dropdown-item { color: var(--ink-1) !important; border-radius: 8px; padding: 8px 12px; }
.pt-content .bootstrap-select .dropdown-item:hover,
.pt-content .bootstrap-select .dropdown-item:focus { background: var(--surface-3) !important; color: var(--ink-1) !important; }
.pt-content .bootstrap-select .dropdown-item.selected.active { background: var(--surface-3) !important; color: var(--accent) !important; }
.pt-content .bootstrap-select .bs-searchbox .form-control { height: 38px; }
/* botones primarios legacy (además de section 8) */
.pt-content .btn.btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; border-radius: var(--r-sm) !important; box-shadow: var(--sh-accent); }
.pt-content .btn.btn-primary:hover { background: var(--accent-hover) !important; }
.pt-content .btn-round { border-radius: var(--r-pill) !important; }
/* tarjeta de contenido legacy → superficie + radios suaves */
.pt-content .card-body { color: var(--ink-2); }
.pt-content .card-title { color: var(--ink-1); }
.pt-content .card-category { color: var(--ink-3); }
/* checkbox/switch material conservan su comportamiento; solo color acento */
.pt-content .form-check-input:checked ~ .form-check-sign .check { background: var(--accent) !important; }
/* =========================================================================
15. DID EDITAR — horarios de atención (días checkpill + tabla limpia)
Estiliza el markup existente sin tocar los hooks JS de horarios.
========================================================================= */
.pt-content .dia_Selec.material-icons { color: var(--green) !important; font-size: 27px; vertical-align: middle; }
.pt-content .check_dia.material-icons { color: var(--line-3) !important; font-size: 27px; vertical-align: middle; }
.pt-content .dia_selec[type="checkbox"]:not(.elementHide) { /* checkbox crudo del template → checkpill */
-webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%;
background: var(--surface-3); border: none; cursor: pointer; display: inline-grid; place-items: center; vertical-align: middle; transition: all .15s;
}
.pt-content .dia_selec[type="checkbox"]:not(.elementHide):checked { background: var(--green); }
.pt-content .dia_selec[type="checkbox"]:not(.elementHide):checked::after { content: '✓'; color: #fff; font-size: 15px; font-weight: 800; }
.pt-content .table_horario { width: 100%; border-collapse: collapse; font-family: 'Inter', sans-serif; }
.pt-content .table_horario thead th { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); padding: 8px 8px 12px; border-bottom: 1px solid var(--line-2); text-align: center; white-space: nowrap; }
.pt-content .table_horario td { padding: 10px 8px; border-bottom: 1px solid var(--line-1); text-align: center; vertical-align: middle; color: var(--ink-2); }
.pt-content .table_horario tbody tr:hover { background: var(--surface-2); }
.pt-content .table_horario .type_time { text-align: center; min-width: 90px; }
.pt-content .table_horario .td-actions .material-icons { font-size: 20px; }
.pt-content .table_horario .btn { padding: 4px 8px; }
/* el toggle "Usar estos horarios..." / "CLI para salida" */
.pt-content .css-did-select-record-call { font-size: 13px !important; color: var(--ink-2) !important; }
.pt-did-edit { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.pt-did-edit .pt-page-h { margin-bottom: 16px; }
/* Colas asignar — filas de extensión (dual list) */
.pt-content .extension { border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 9px 12px; margin: 0 0 7px; background: var(--surface); transition: border-color .15s, background-color .15s; cursor: pointer; }
.pt-content .extension:hover { border-color: var(--accent); background: var(--surface-2); }
.pt-content .extension.css-extension-selected, .pt-content .extension.selected { border-color: var(--accent); background: var(--accent-soft); }
.pt-content .arrows_action .icons .fas { font-size: 26px; }
/* Ocultar el botón "Volver" legacy (la navegación la dan el sidebar + el header de cada vista) */
.pt-content .margin_btn_back { display: none !important; }
/* Reportes/calls — radios de filtro con acento */
.pt-content .form-check-radio .form-check-input:checked ~ .circle .check,
.pt-content .form-check .check { background-color: var(--accent) !important; }
.pt-content .form-check-label { color: var(--ink-2) !important; font-weight: 500; }
.pt-content .js-general-container-options .form-check-label,
.pt-content .js-calls-general-container .form-check-label { font-size: 13.5px; }
/* =========================================================================
16. PANEL OPERADOR — consola de extensiones (tarjetas en vivo)
El JS (companyUserPanel.js) clona/llena las tarjetas; aquí solo se estilizan.
========================================================================= */
.pt-content .container_real, .pt-content #js-parent-extensions { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }
.pt-content .nueva_extension, .pt-content #js-container-my-extension { padding: 0 !important; width: 210px; max-width: 100%; flex: 0 0 auto; margin: 0 !important; }
.pt-content .js-extension-panel-container.card, .pt-content .js-my-extension.card {
position: relative; width: 100%; background: var(--surface) !important; border: 1px solid var(--line-1) !important;
border-radius: var(--r-lg) !important; box-shadow: var(--sh-1) !important; padding: 20px 14px 16px !important; margin: 0 !important;
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .18s, border-color .18s;
}
.pt-content .js-extension-panel-container.card:hover { transform: translateY(-3px); box-shadow: var(--sh-2) !important; border-color: var(--accent); }
.pt-content .js-extension-panel-container .card-header, .pt-content .js-my-extension .card-header {
background: transparent !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; width: 100%;
display: flex !important; flex-direction: column; align-items: center; gap: 4px;
}
.pt-content .card-icon {
width: 64px; height: 64px; border-radius: 18px; display: grid !important; place-items: center;
margin: 0 auto !important; background: var(--surface-3) !important; box-shadow: none !important; padding: 0 !important;
}
.pt-content .card-icon.card-header-success, .pt-content .card-icon.bg-success { background: var(--green-soft) !important; }
.pt-content .card-icon.card-header-danger, .pt-content .card-icon.bg-danger { background: var(--red-soft) !important; }
.pt-content .card-icon.card-header-warning, .pt-content .card-icon.bg-warning { background: var(--amber-soft) !important; }
.pt-content .card-icon.card-header-info, .pt-content .card-icon.card-header-primary { background: var(--accent-soft) !important; }
.pt-content .css-img-extensions-operator-panel { width: 38px; height: 38px; object-fit: contain; }
.pt-content .js-extension-panel-container .card-title, .pt-content .js-my-extension .card-title {
font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 800; color: var(--ink-1) !important; margin: 6px 0 0 !important;
}
.pt-content .css-nav-name-operator-panel, .pt-content .js-operator-panel-name {
font-size: 13.5px; font-weight: 600; color: var(--ink-2) !important; margin: 0 !important; text-align: center !important; line-height: 1.3;
}
.pt-content .js-operator-panel-colas { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 5px; }
.pt-content .js-operator-panel-colas .badge { background: var(--accent-soft) !important; color: var(--accent-ink) !important; border-radius: 99px !important; padding: 3px 9px !important; font-size: 11px; font-weight: 600; }
.pt-content .css-panel-notification-icon { position: absolute; top: 10px; right: 10px; z-index: 3; box-shadow: var(--sh-1); width: 30px; height: 30px; }
.pt-content .css-icon-transfer-extension, .pt-content .css-icon-transfer-extension-destine, .pt-content .js-filter-icon-transfer-destine { color: var(--accent) !important; }
/* =========================================================================
17. ESTADÍSTICAS / REPORTES (dashboards con KPIs, gráficos y tablas)
Reestiliza card-stats / card-chart de Material Dashboard sin tocar el JS.
========================================================================= */
.pt-content .card.card-stats { background: var(--surface) !important; border: 1px solid var(--line-1) !important; border-radius: var(--r-lg) !important; box-shadow: var(--sh-1) !important; margin-bottom: 16px; }
.pt-content .card.card-stats .card-header.card-header-icon { background: transparent !important; box-shadow: none !important; padding: 18px 18px 4px !important; margin: 0 !important; display: flex; flex-direction: column; align-items: flex-start; }
.pt-content .card.card-stats .card-icon { width: 46px; height: 46px; border-radius: 13px; display: grid !important; place-items: center; margin: 0 0 10px !important; box-shadow: none !important; float: none !important; min-width: 46px; }
.pt-content .card.card-stats .card-icon .material-icons { font-size: 24px; margin: 0 !important; }
.pt-content .card-header-warning .card-icon { background: var(--amber-soft) !important; color: var(--amber) !important; }
.pt-content .card-header-info .card-icon { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.pt-content .card-header-success .card-icon { background: var(--green-soft) !important; color: var(--green-ink) !important; }
.pt-content .card-header-danger .card-icon { background: var(--red-soft) !important; color: var(--red-ink) !important; }
.pt-content .card-header-primary .card-icon { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.pt-content .card.card-stats .card-category { font-size: 12.5px; color: var(--ink-4) !important; margin: 0 !important; font-weight: 500; }
.pt-content .card.card-stats .card-title { font-size: 28px; font-weight: 800; color: var(--ink-1) !important; margin: 2px 0 0 !important; line-height: 1.05; letter-spacing: -.02em; }
.pt-content .card.card-stats .card-footer { border-top: 1px solid var(--line-1) !important; padding: 10px 18px !important; margin: 10px 0 0 !important; background: transparent !important; }
.pt-content .card.card-stats .card-footer .stats { font-size: 11.5px; color: var(--ink-4); display: flex; align-items: center; gap: 5px; }
.pt-content .card.card-stats .card-footer .material-icons { font-size: 15px; }
/* gráficos */
.pt-content .card.card-chart { background: var(--surface) !important; border: 1px solid var(--line-1) !important; border-radius: var(--r-lg) !important; box-shadow: var(--sh-1) !important; margin-bottom: 16px; }
.pt-content .card.card-chart .card-header { background: transparent !important; box-shadow: none !important; padding: 16px 16px 6px !important; margin: 0 !important; }
.pt-content .card.card-chart .card-header canvas { max-height: 230px; }
.pt-content .card.card-chart .card-body { padding: 4px 18px 6px !important; }
.pt-content .card.card-chart .card-title { font-size: 15px; font-weight: 700; color: var(--ink-1) !important; }
.pt-content .card.card-chart .card-footer { border-top: 1px solid var(--line-1) !important; padding: 10px 18px !important; background: transparent !important; }
.pt-content .card.card-chart .card-footer .stats { font-size: 11.5px; color: var(--ink-4); display: flex; align-items: center; gap: 5px; }
.pt-content .card.card-chart .card-footer .material-icons { font-size: 15px; }
/* filtros del dashboard */
.pt-stats-filters { margin-bottom: 18px; }
.pt-content .css-dashboard-filter-inputs, .pt-content .form-control-sm { height: 42px !important; border: 1px solid var(--line-2) !important; border-radius: var(--r-sm) !important; padding: 0 12px !important; background: var(--surface) !important; color: var(--ink-1) !important; font-size: 14px; }
.pt-content .css-dashboard-filter-inputs:focus { border-color: var(--accent) !important; box-shadow: var(--ring) !important; }
.pt-stats-filters .pt-field { min-width: 150px; flex: 1; }
.pt-stats-filters .pt-field label { font-size: 12px; font-weight: 600; color: var(--ink-3); }
/* =========================================================================
18. REPORTE DE LLAMADAS (calls.twig) — filtros, radios pill, tablas, export
Solo estilos; no se toca la lógica/hours del reporte.
========================================================================= */
/* Radios de tipo/opción → control segmentado tipo pill (usa :has) */
.pt-content .js-calls-general-container .form-check-radio { display: inline-block; margin: 0 4px 8px; padding: 0; }
.pt-content .js-calls-general-container .form-check-radio .form-check-label {
display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; margin: 0;
border: 1px solid var(--line-2); border-radius: var(--r-pill); cursor: pointer;
font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: var(--surface);
transition: all .15s;
}
.pt-content .js-calls-general-container .form-check-radio .form-check-label:hover { border-color: var(--line-3); background: var(--surface-2); }
.pt-content .js-calls-general-container .form-check-radio .form-check-label:has(input:checked) { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.pt-content .js-calls-general-container .form-check-radio .circle { display: none !important; }
.pt-content .js-calls-general-container .form-check-radio .js-container-to-hide-number-calls { background: var(--accent); color: #fff; border-radius: 99px; padding: 1px 7px; font-size: 11px; font-weight: 700; }
.pt-content .form-check-radio.disabled .form-check-label { opacity: .45; }
/* iconos de ordenamiento de columnas */
.pt-content .css-icon-call-report-order-fields { font-size: 0 !important; line-height: 0 !important; display: inline-block; width: 20px; height: 20px; vertical-align: middle; background-color: var(--accent); cursor: pointer; transition: background-color .12s, transform .12s; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat; }
.pt-content .css-icon-call-report-order-fields:hover { background-color: var(--accent-ink); }
.pt-content table thead th[data-th-type] { white-space: nowrap; }
/* iconos de export (Excel / grabaciones) como botones */
.pt-content .css-span-export-to-excel { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); transition: all .15s; }
.pt-content .css-span-export-to-excel:hover { border-color: var(--green); background: var(--green-soft); }
.pt-content .css-span-export-to-excel .fa-file-excel { color: var(--green) !important; font-size: 20px; }
.pt-content .css-span-download-consolidated-recordings:hover { border-color: var(--amber); background: var(--amber-soft); }
.pt-content .css-span-download-consolidated-recordings .fa-file-archive-o,
.pt-content .css-span-download-consolidated-recordings i { color: var(--amber) !important; font-size: 20px; }
/* card "Total llamadas" → KPI compacto */
.pt-content .js-hide-container-data .card .card-header.real-card-header-primary.text-center { background: var(--accent-soft) !important; }
.pt-content .js-hide-container-data .card .card-header.real-card-header-primary.text-center .card-title { color: var(--accent-ink) !important; }
.pt-content .js-records-number { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: var(--ink-1); }
/* la barra de filtros con respiro */
.pt-content .js-div-form-filters { padding-top: 8px; }
/* =========================================================================
19. MODALES — diseño nuevo (claro + oscuro) para todos los modales Bootstrap
========================================================================= */
.modal-content {
border: 1px solid var(--line-2) !important; border-radius: var(--r-lg) !important;
box-shadow: var(--sh-3) !important; background: var(--surface) !important; color: var(--ink-2);
font-family: 'Inter', system-ui, -apple-system, sans-serif; overflow: hidden;
}
.modal-content .modal-header { border-bottom: 1px solid var(--line-1) !important; padding: 18px 22px !important; align-items: center; }
.modal-content .modal-header .modal-title { font-size: 17px; font-weight: 700; color: var(--ink-1) !important; }
.modal-content .modal-header.modal_header_primary,
.modal-content .modal-header.real-card-header-primary { background: var(--accent-grad) !important; border-bottom: none !important; }
.modal-content .modal-header.modal_header_primary .modal-title,
.modal-content .modal-header.real-card-header-primary .modal-title { color: #fff !important; }
.modal-content .modal-header .close, .modal-content .close {
color: var(--ink-3) !important; opacity: 1 !important; text-shadow: none !important; font-size: 24px; font-weight: 400;
width: 34px; height: 34px; border-radius: var(--r-sm); transition: background-color .15s;
}
.modal-content .modal-header.modal_header_primary .close, .modal-content .modal-header.modal_header_primary .css-close-modal-icon { color: rgba(255,255,255,.9) !important; }
.modal-content .close:hover { background: var(--surface-3); }
.modal-content .modal-body { padding: 22px !important; color: var(--ink-2); }
.modal-content .modal-footer { border-top: 1px solid var(--line-1) !important; padding: 14px 22px !important; gap: 10px; }
.modal-content .modal-footer .btn { border-radius: var(--r-sm) !important; height: 42px; padding: 0 18px; font-weight: 600; }
.modal-content .modal-footer .btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; box-shadow: var(--sh-accent); }
.modal-content .modal-footer .btn-primary:hover { background: var(--accent-hover) !important; }
.modal-content .modal-body .form-control, .modal-content .form-control { border: 1px solid var(--line-2) !important; border-radius: var(--r-sm) !important; height: 44px; background: var(--surface) !important; color: var(--ink-1) !important; background-image: none !important; box-shadow: none !important; padding: 0 14px !important; }
.modal-content .form-control:focus { border-color: var(--accent) !important; box-shadow: var(--ring) !important; }
.modal-content .modal-body label, .modal-content .bmd-label-static, .modal-content .bmd-label-floating { position: static !important; transform: none !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--ink-2) !important; margin-bottom: 6px !important; }
.modal-content .table thead th { color: var(--accent-ink); font-weight: 700; text-transform: uppercase; font-size: 11px; border-bottom: 2px solid var(--line-2); }
.modal-content .table td { border-top-color: var(--line-1); color: var(--ink-2); }
.modal-backdrop.show { opacity: .55; }
:root[data-theme="dark"] .modal-backdrop.show { opacity: .7; }
/* =========================================================================
20. ASIGNAR COLAS — dual-list (disponibles ↔ asignadas por prioridad)
Preserva hooks JS: #extensiones, #colas_0/1/2, .extension(+id), .arrows,
.up/.down, .btnAsign/.btnRemove, .colaId, .contenedor_prioridad.
========================================================================= */
.pt-assign-wrap { max-width: 1320px; margin: 0 auto; padding: 0 4px; }
.pt-assign-grid { display: grid; grid-template-columns: 1fr 64px 1fr; gap: 16px; align-items: start; margin: 0; }
.pt-assign-col { padding: 0; overflow: hidden; }
.pt-assign-col .pt-card-head { padding: 16px 18px 12px; }
.pt-assign-list { padding: 12px 14px; min-height: 120px; display: flex; flex-direction: column; gap: 8px; }
.pt-assign-list:empty::after { content: 'Sin extensiones'; display: block; text-align: center; color: var(--ink-4); font-size: 12.5px; padding: 18px 0; }
/* fila de extensión (hook .extension) */
.pt-content .extension { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 9px 12px; margin: 0; background: var(--surface); transition: border-color .15s, background .15s, box-shadow .15s; cursor: grab; }
.pt-content .extension:hover { border-color: var(--accent); background: var(--surface-2); box-shadow: var(--sh-1); }
.pt-content .extension:active { cursor: grabbing; }
.pt-content .extension.css-extension-selected, .pt-content .extension.selected { border-color: var(--accent); background: var(--accent-soft); }
.pt-content .extension .pt-ext-row-main { display: flex; align-items: center; gap: 9px; min-width: 0; text-align: left; }
.pt-content .extension .pt-ext-num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.pt-content .extension .pt-ext-name { font-size: 13.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* flechas de prioridad dentro de la fila (hook .arrows/.up/.down) */
.pt-content .extension .arrows { display: flex; gap: 2px; flex: 0 0 auto; }
.pt-content .extension .arrows .material-icons { font-size: 18px; color: var(--ink-4); border-radius: 6px; padding: 2px; cursor: pointer; transition: background .12s, color .12s; }
.pt-content .extension .arrows .material-icons:hover { background: var(--surface-3); color: var(--accent); }
/* botones centrales de acción (hook .btnAsign/.btnRemove) */
.pt-content .arrows_action.pt-assign-actions { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; padding-top: 64px; }
.pt-content .pt-assign-actions .icons { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: transform .12s, box-shadow .15s; box-shadow: var(--sh-1); }
.pt-content .pt-assign-actions .icons svg { width: 20px; height: 20px; }
.pt-content .pt-assign-actions .btnAsign { background: var(--green-soft); color: var(--green); }
.pt-content .pt-assign-actions .btnRemove { background: var(--amber-soft); color: var(--amber); }
.pt-content .pt-assign-actions .icons:hover { transform: scale(1.08); box-shadow: var(--sh-2); }
/* secciones de prioridad (hook .contenedor_prioridad) */
.pt-content .contenedor_prioridad { margin: 0 0 4px; }
.pt-content .pt-prio-head { display: flex; align-items: center; gap: 9px; padding: 12px 16px 6px; }
.pt-content .pt-prio-head img { width: 22px !important; height: 22px; }
.pt-content .pt-prio-head b { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.pt-content .pt-prio-head .pt-prio-line { flex: 1; height: 1px; background: var(--line-1); }
@media (max-width: 900px) {
.pt-assign-grid { grid-template-columns: 1fr; }
.pt-content .arrows_action.pt-assign-actions { flex-direction: row; padding: 6px 0; }
}
/* =========================================================================
21. REPORTE DE LLAMADAS — celda de audio (reproducir / descargar)
Restyle de .con_audio (.js-play-audio btn-success + descarga btn-info)
con la paleta nueva. Solo CSS — conserva hooks JS de audio.
========================================================================= */
.pt-content .con_audio { display: inline-flex; align-items: center; gap: 6px; }
.pt-content .con_audio .btn { width: 34px; height: 34px; min-width: 34px; padding: 0 !important; margin: 0 !important; border-radius: 9px !important; display: inline-flex; align-items: center; justify-content: center; box-shadow: none !important; border: 1px solid transparent !important; transition: transform .12s, box-shadow .15s, background-color .12s, color .12s; }
.pt-content .con_audio .btn:hover { transform: translateY(-1px); box-shadow: var(--sh-1) !important; }
.pt-content .con_audio .btn .material-icons { font-size: 18px !important; margin: 0 !important; line-height: 1 !important; font-weight: normal; }
/* Reproducir (era btn-success) */
.pt-content .con_audio .js-play-audio.btn-success { background: var(--green-soft) !important; color: var(--green) !important; }
.pt-content .con_audio .js-play-audio.btn-success:hover { background: var(--green) !important; color: #fff !important; }
/* Descargar (era btn-info) */
.pt-content .con_audio .btn-info { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.pt-content .con_audio .btn-info:hover { background: var(--accent) !important; color: #fff !important; }
/* =========================================================================
22. DID EDIT — iconos nuevos sobre material-icons/fas (vía CSS mask)
Reemplaza visualmente los glyphs de la librería antigua por SVG nuevos
SIN tocar el JS (que regenera estos iconos dinámicamente). Conserva todos
los hooks (.dia_Selec/.check_dia, .JShorario*, .add_cli/.remove_cli).
Cubre empresa y distribuidor (mismas clases) + data-base.twig.
========================================================================= */
.pt-content .dia_Selec, .pt-content .check_dia,
.pt-content .add_cli, .pt-content .remove_cli,
.pt-content .JShorarioAdd .material-icons, .pt-content .JShorarioExAdd .material-icons,
.pt-content .JShorarioSaveAdd .material-icons, .pt-content .JShorarioSaveEdit .material-icons,
.pt-content .JShorarioExSaveAdd .material-icons, .pt-content .JShorarioExEditSave .material-icons,
.pt-content .JShorarioCancelAdd .material-icons, .pt-content .JShorarioExCancelAdd .material-icons,
.pt-content .JShorarioExCancelEdit .material-icons,
.pt-content .JShorarioCopy .fas, .pt-content .JShorarioCopy .material-icons,
.pt-content .JShorarioDelete .fas, .pt-content .JShorarioDelete .material-icons,
.pt-content .JShorarioExDelete .fas, .pt-content .JShorarioExDelete .material-icons {
font-size: 0 !important; line-height: 0 !important; display: inline-block; width: 22px; height: 22px; vertical-align: middle;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 20px 20px; mask-size: 20px 20px;
background-color: currentColor; transition: background-color .15s, transform .1s; cursor: pointer;
}
/* check-circle (toggles de día e IVR fuera de horario) */
.pt-content .dia_Selec, .pt-content .check_dia {
width: 24px; height: 24px; -webkit-mask-size: 22px 22px; mask-size: 22px 22px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.5 2.5 5.5-6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.5 2.5 5.5-6'/%3E%3C/svg%3E");
}
.pt-content .check_dia { background-color: var(--ink-5) !important; }
.pt-content .dia_Selec { background-color: var(--green) !important; }
.pt-content .dia_Selec:hover, .pt-content .check_dia:hover { transform: scale(1.12); }
/* plus / minus (CLI add-remove + añadir horario/excepción) */
.pt-content .add_cli, .pt-content .JShorarioAdd .material-icons, .pt-content .JShorarioExAdd .material-icons {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.pt-content .remove_cli {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.pt-content .add_cli { background-color: var(--green) !important; }
.pt-content .remove_cli { background-color: var(--red) !important; }
.pt-content .JShorarioAdd .material-icons, .pt-content .JShorarioExAdd .material-icons { background-color: #fff !important; margin-right: 4px; }
/* save (guardar) */
.pt-content .JShorarioSaveAdd .material-icons, .pt-content .JShorarioSaveEdit .material-icons,
.pt-content .JShorarioExSaveAdd .material-icons, .pt-content .JShorarioExEditSave .material-icons {
background-color: var(--green) !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z'/%3E%3Cpath d='M17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z'/%3E%3Cpath d='M17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E");
}
/* close (cancelar) */
.pt-content .JShorarioCancelAdd .material-icons, .pt-content .JShorarioExCancelAdd .material-icons, .pt-content .JShorarioExCancelEdit .material-icons {
background-color: var(--red) !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
/* trash (eliminar) */
.pt-content .JShorarioDelete .fas, .pt-content .JShorarioDelete .material-icons,
.pt-content .JShorarioExDelete .fas, .pt-content .JShorarioExDelete .material-icons {
background-color: var(--red) !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E");
}
/* copy (clonar) */
.pt-content .JShorarioCopy .fas, .pt-content .JShorarioCopy .material-icons {
background-color: var(--amber) !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}
/* Topbar empresa — botón de recarga (batería ámbar, paleta nueva) */
.pt-topbar .pt-recarga-btn, .pt-recarga-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--amber); background: var(--amber-soft); margin-right: 8px; transition: background-color .15s, color .15s, transform .12s; }
.pt-topbar .pt-recarga-btn:hover, .pt-recarga-btn:hover { background: var(--amber); color: #fff; transform: translateY(-1px); }
/* Utilidad para SVG inline que reemplazan iconos de la librería antigua */
.pt-ic { vertical-align: middle; display: inline-block; }
svg.pt-ic { width: 20px; height: 20px; }
/* =========================================================================
23. PAGOS / RECARGA (payments-pay) — tarjetas de monto seleccionables
Conserva hooks: .js-payment-form-amounts, .js-input-history-payment,
name=payment-value, .js-element-custom-value, .js-payment-custom-value,
.js-payments-btn-pay.
========================================================================= */
.pt-pay-wrap { max-width: 680px; margin: 0 auto; padding: 4px; }
.pt-pay-card { padding: 0; overflow: hidden; }
.pt-pay-hero { display: flex; align-items: center; gap: 14px; padding: 22px 24px; background: linear-gradient(135deg, var(--accent), var(--accent-ink)); color: #fff; }
.pt-pay-hero-ic { width: 48px; height: 48px; min-width: 48px; border-radius: 14px; background: rgba(255,255,255,.18); display: grid; place-items: center; }
.pt-pay-hero-ic svg { width: 26px; height: 26px; }
.pt-pay-hero h3 { margin: 0; font-size: 18px; font-weight: 700; color: #fff; }
.pt-pay-hero p { margin: 2px 0 0; font-size: 13px; opacity: .85; }
.pt-pay-body { padding: 20px 24px 4px; }
.pt-pay-lead { font-size: 13.5px; color: var(--ink-3); margin: 0 0 14px; }
.pt-pay-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pt-pay-opt { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 15px 16px 15px 46px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; margin: 0; }
.pt-pay-opt:hover { border-color: var(--accent); background: var(--surface-2); }
.pt-pay-radio { position: absolute; opacity: 0; pointer-events: none; }
.pt-pay-check { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); transition: border-color .15s, background-color .15s, box-shadow .15s; }
.pt-pay-opt:has(.pt-pay-radio:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.pt-pay-opt:has(.pt-pay-radio:checked) .pt-pay-check { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.pt-pay-amount { font-size: 16px; font-weight: 700; color: var(--ink-1); }
.pt-pay-cur { font-size: 11px; font-weight: 600; color: var(--ink-4); margin-right: 5px; }
.pt-pay-date { font-size: 12px; color: var(--ink-4); }
.pt-pay-custom { margin: 16px 0 4px; }
.pt-pay-custom label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: block; margin-bottom: 6px; }
.pt-pay-foot { padding: 18px 24px 24px; }
.pt-pay-foot .pt-btn { width: 100%; justify-content: center; height: 46px; font-size: 15px; }
@media (max-width: 560px) { .pt-pay-grid { grid-template-columns: 1fr; } }
/* Login — ojo mostrar/ocultar contraseña (js-see togglea fa-eye/fa-eye-slash) */
.js-see { display: inline-block; width: 20px; height: 20px; font-size: 0 !important; background-color: var(--ink-4); cursor: pointer; vertical-align: middle; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 20px; mask-size: 20px; transition: background-color .12s; }
.js-see:hover { background-color: var(--accent); }
.js-see.fa-eye-slash { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.2A9 9 0 0 1 12 4c6.5 0 10 7 10 7a13 13 0 0 1-2 2.9M6.1 6.1A13 13 0 0 0 2 11s3.5 7 10 7a9 9 0 0 0 4-.9M1 1l22 22'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.2A9 9 0 0 1 12 4c6.5 0 10 7 10 7a13 13 0 0 1-2 2.9M6.1 6.1A13 13 0 0 0 2 11s3.5 7 10 7a9 9 0 0 0 4-.9M1 1l22 22'/%3E%3C/svg%3E"); }
.js-see.fa-eye { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }