/* ============================================================================ 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-footer, :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); } /* El .card-footer de formularios (crear/editar) no debe llevar sombra propia ni borde claro en dark */ :root[data-theme="dark"] .card-footer { box-shadow: none !important; border-top-color: var(--line-1) !important; } :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...). ========================================================================= */ /* IMPORTANTE: NO usar position:fixed aquí. El tiene filter:brightness(1) (main.css), y un filter en un ancestro lo convierte en bloque contenedor de los position:fixed → el login se posicionaba contra el body (alto 0, porque su único hijo estaba fuera de flujo) y colapsaba a 0px = PANTALLA EN BLANCO. Con min-height:100vh en flujo normal esto no ocurre. */ body.css-login-page { filter: none !important; } .pt-login { min-height: 100vh; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; background: var(--brand-grad); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } .pt-login * { box-sizing: border-box; } /* Login minimalista: solo el formulario centrado (se oculta el panel de marca) */ .pt-login .pt-login-aside { display: none !important; } /* glow suave sobre el gradiente para dar profundidad */ .pt-login::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(60% 55% at 50% 30%, rgba(255,255,255,.20), transparent 70%); } .pt-login .pt-login-main { z-index: 1; } /* ---- 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: 420px; background: var(--surface); border: 1px solid var(--line-1); border-radius: 22px; box-shadow: 0 30px 80px rgba(8, 20, 40, .34); padding: 40px 36px 34px; } /* neutralizar el card de Material Dashboard — en el split el formulario va directo sobre el fondo (sin caja), igual que en el diseño. */ .pt-login .card, .pt-login .card-login { background: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; } .pt-login .card-header { background: transparent !important; box-shadow: none !important; padding: 0 0 18px !important; text-align: center !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-2); 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 { background: var(--surface); } .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; } .pt-login .pt-lc-brand { display: flex; } } /* ---- r43: etiquetas de campo, recordarme, ayuda, marca móvil y recuperación ---- */ /* wordmark del logo (tile + texto) */ .pt-wm { font-weight: 800; letter-spacing: -.02em; font-size: 19px; line-height: 1; white-space: nowrap; } .pt-login .pt-login-aside .la-top .pt-wm span { color: #fff !important; } /* etiqueta sobre cada campo */ .pt-login .pt-field { margin-bottom: 16px; } .pt-login .pt-field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 0 2px 7px; } /* marca dentro del card (siempre visible: el icono de Planta Telefónica arriba de "Iniciar sesión") */ .pt-login .pt-lc-brand { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 22px; } /* logo del login (a pedido: la mitad del tamaño anterior). */ .pt-login .pt-lc-brand { margin-bottom: 24px; flex-wrap: wrap; } .pt-login .pt-lc-brand img { width: 100%; max-width: 180px; height: auto; max-height: 170px; object-fit: contain; } .pt-login .pt-lc-brand svg { width: 60px; height: 60px; } .pt-login .pt-lc-brand .pt-wm { font-size: 22px; width: 100%; text-align: center; } /* fila: recordarme (izq) + ¿olvidaste tu contraseña? (der) */ .pt-login .pt-lc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 2px 20px; } .pt-login .pt-remember { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 13px; color: var(--ink-2); font-weight: 500; margin: 0; } .pt-login .pt-remember input { position: absolute; opacity: 0; width: 0; height: 0; } .pt-login .pt-rem-box { width: 18px; height: 18px; border-radius: 5px; border: 1.6px solid var(--line-3); background: var(--surface); display: inline-grid; place-items: center; flex: 0 0 auto; transition: border-color .15s; } .pt-login .pt-rem-box::after { content: ''; width: 9px; height: 9px; border-radius: 2px; background: var(--accent); transform: scale(0); transition: transform .15s; } .pt-login .pt-remember input:checked + .pt-rem-box { border-color: var(--accent); } .pt-login .pt-remember input:checked + .pt-rem-box::after { transform: scale(1); } .pt-login .pt-remember input:focus-visible + .pt-rem-box { box-shadow: var(--ring); } /* #emailHelp dentro de la fila → en línea a la derecha (anula el bloque centrado) */ .pt-login .pt-lc-row #emailHelp { display: inline; margin: 0; text-align: right; font-size: 13px; } /* botón INGRESAR: alinear texto + icono */ .pt-login .css-btn-login-into { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .pt-login .css-btn-login-into svg { flex: 0 0 auto; } /* línea de ayuda / soporte */ .pt-login .pt-lc-help { text-align: center; margin-top: 20px; font-size: 13px; color: var(--ink-4); } .pt-login .pt-lc-support { color: var(--accent-ink); font-weight: 600; cursor: pointer; } .pt-login .pt-lc-support:hover { text-decoration: underline; } /* recuperar contraseña: título alineado + acciones */ .pt-login .div-help .pt-lc-title { text-align: left; } .pt-login .pt-help-actions { display: flex; gap: 10px; margin-top: 10px; } .pt-login .pt-help-actions .jsSubmitEmail { flex: 1; height: 48px; border-radius: var(--r-sm); margin: 0; background: var(--accent) !important; color: #fff !important; border: none !important; font-weight: 700; letter-spacing: .02em; text-transform: none; box-shadow: var(--sh-accent); } .pt-login .pt-help-actions .jsSubmitEmail:hover { background: var(--accent-hover) !important; } .pt-login .pt-help-actions .jsCancelEmail { flex: 0 0 auto; height: 48px; border-radius: var(--r-sm); margin: 0; padding: 0 22px; background: transparent !important; color: var(--ink-3) !important; border: 1px solid var(--line-2) !important; font-weight: 600; text-transform: none; } .pt-login .pt-help-actions .jsCancelEmail:hover { background: var(--surface-2) !important; color: var(--ink-1) !important; } /* ========================================================================= 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); } /* Alinear el contenido (card) con el encabezado pt-page-h (mismo ancho 1320px centrado): evita que el título "Reportes de llamadas…" quede flotando/afuera del card cuando el contenido va en .container (1140) o .container-fluid (full). Cubre las vistas que aún no migraron a .pt-page. */ .content.pt-did-edit > .container, .content.pt-did-edit > .container-fluid { max-width: 1320px; margin-left: auto; margin-right: auto; } /* Toggle icono play/stop de audios: el JS conmuta el atributo playing="si|no" en .JSaudioPlay */ .JSaudioPlay .js-ic-stop { display: none; } .JSaudioPlay[playing="si"] .js-ic-play { display: none; } .JSaudioPlay[playing="si"] .js-ic-stop { display: inline-block !important; } .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; } /* variante horizontal del tile (hub tipo Configuraciones — como el mtile.line del diseño): icono a la izq, texto, y chevron a la der. El color del icono lo pone cada tile inline. */ .pt-mtile.line { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; } .pt-mtile.line .pt-mt-ico { width: 46px; height: 46px; border-radius: 12px; box-shadow: none; background: var(--surface-3); color: var(--ink-3); } .pt-mtile.line .pt-mt-ico svg { width: 24px; height: 24px; } .pt-mtile.line .pt-mt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pt-mtile.line .pt-mt-name { font-size: 15px; } .pt-mtile.line .pt-mt-desc { margin-top: 0; } .pt-mtile.line .pt-mt-chev { margin-left: auto; color: var(--ink-4); flex: 0 0 auto; transition: transform .16s, color .16s; } .pt-mtile.line:hover .pt-mt-chev { transform: translateX(2px); color: var(--accent); } @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; } } /* Icono "llamadas perdidas": el legacy (empresa/main.css) lo dejaba position:absolute; top:-5px; z-index:100 con fondo rojo (badge del navbar viejo), y en la topbar del rediseño flotaba ENCIMA del toggle de tema. Lo devolvemos al flujo normal como icono inline (el color rojo ya lo pone la regla .pt-topbar .css-notification-icon-i). */ .pt-topbar .css-notification-icon-span { position: static !important; top: auto !important; right: auto !important; left: auto !important; z-index: auto !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; display: inline-flex; align-items: center; vertical-align: middle; margin-right: 6px; } /* ---- 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); } /* text-white heredado de los headers azules viejos: dentro del header limpio quedaba invisible (blanco sobre claro) */ .pt-card-head .text-white { color: var(--ink-1) !important; } /* Cabecera de card con título de módulo (pt-page-h fusionado dentro del card) + acciones a la derecha */ .pt-card-head.pt-head-flex { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .pt-card-head.pt-head-flex h3 { font-size: clamp(21px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } .pt-card-head.pt-head-flex p { font-size: 14px; margin-top: 6px; } .pt-card-head.pt-head-flex .pt-ph-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* Segmentado (Registro de llamadas / Llamadas en curso) — envuelve radios reales */ .pt-segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line-1); border-radius: 10px; padding: 3px; gap: 3px; } .pt-segmented .pt-seg-item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; cursor: pointer; color: var(--ink-3); font-weight: 600; font-size: 13px; margin: 0; transition: background-color .15s, color .15s; white-space: nowrap; } .pt-segmented .pt-seg-item input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .pt-segmented .pt-seg-item svg { width: 16px; height: 16px; } .pt-segmented .pt-seg-item:hover { color: var(--ink-1); } .pt-segmented .pt-seg-item:has(input:checked) { background: var(--surface); color: var(--accent); box-shadow: var(--sh-1); } .pt-segmented .pt-seg-item.disabled { opacity: .5; pointer-events: none; } /* Pestañas con conteo (Entrantes / con Costo / Salientes / Extensiones) */ .pt-calltabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line-1); margin: 4px 0 8px; } .pt-calltabs .pt-calltab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; cursor: pointer; color: var(--ink-3); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; margin: 0 0 -1px; transition: color .15s, border-color .15s; white-space: nowrap; } .pt-calltabs .pt-calltab input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .pt-calltabs .pt-calltab svg { width: 18px; height: 18px; } .pt-calltabs .pt-calltab:hover { color: var(--ink-1); } .pt-calltabs .pt-calltab:has(input:checked) { color: var(--accent); border-bottom-color: var(--accent); } .pt-calltabs .pt-calltab.disabled { opacity: .45; pointer-events: none; } .pt-calltabs .pt-calltab-count { background: var(--surface-3); color: var(--ink-2); border-radius: 20px; padding: 1px 8px; font-size: 12px; font-weight: 700; line-height: 1.5; } .pt-calltabs .pt-calltab:has(input:checked) .pt-calltab-count { background: var(--accent-soft); color: var(--accent); } /* ── Toasts modernos (bootstrap-notify: validationMessageSuccess/Error/Warning) ── */ [data-notify="container"].alert { width: auto !important; max-width: 400px; min-width: 300px; padding: 15px 40px 15px 50px !important; border: 1px solid var(--line-1) !important; border-radius: 14px !important; background: var(--surface) !important; color: var(--ink-1) !important; box-shadow: 0 18px 44px rgba(15, 23, 42, .26) !important; } [data-notify="container"].alert [data-notify="title"] { font-weight: 700; font-size: 13px; } [data-notify="container"].alert [data-notify="message"] { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; } /* icono como SVG por CSS mask (no depende de la fuente material-icons) */ [data-notify="container"].alert > [data-notify="icon"] { position: absolute; left: 15px; top: 16px; width: 22px; height: 22px; font-size: 0 !important; color: transparent !important; overflow: hidden; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 22px 22px; mask-size: 22px 22px; } [data-notify="container"].alert-success { border-left: 3px solid var(--green) !important; } [data-notify="container"].alert-success > [data-notify="icon"] { background-color: var(--green); -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='10'/%3E%3Cpath d='m8 12 3 3 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='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); } [data-notify="container"].alert-danger { border-left: 3px solid var(--red) !important; } [data-notify="container"].alert-danger > [data-notify="icon"] { background-color: var(--red); -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='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 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='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E"); } [data-notify="container"].alert-warning { border-left: 3px solid var(--amber) !important; } [data-notify="container"].alert-warning > [data-notify="icon"] { background-color: var(--amber); -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%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%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%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); } [data-notify="container"].alert-info { border-left: 3px solid var(--accent) !important; } [data-notify="container"].alert-info > [data-notify="icon"] { background-color: var(--accent); -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='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%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='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); } [data-notify="container"].alert [data-notify="dismiss"] { position: absolute !important; right: 8px; top: 8px; width: 24px !important; height: 24px !important; padding: 0 !important; min-width: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; opacity: .5; cursor: pointer; } [data-notify="container"].alert [data-notify="dismiss"]:hover { opacity: 1; } [data-notify="container"].alert [data-notify="dismiss"] .material-icons { font-size: 0 !important; color: transparent !important; } [data-notify="container"].alert [data-notify="dismiss"]::after { content: ""; position: absolute; inset: 4px; background-color: var(--ink-3); -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.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/16px 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.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/16px no-repeat; } [data-notify="container"].alert [data-notify="progressbar"] { height: 3px !important; margin: 10px 0 0 !important; background: var(--line-1) !important; border-radius: 3px; overflow: hidden; } [data-notify="container"].alert .progress-bar { border-radius: 3px; } [data-notify="container"].alert-success .progress-bar { background-color: var(--green) !important; } [data-notify="container"].alert-danger .progress-bar { background-color: var(--red) !important; } [data-notify="container"].alert-warning .progress-bar { background-color: var(--amber) !important; } [data-notify="container"].alert-info .progress-bar { background-color: var(--accent) !important; } [data-notify="container"].alert.animated { animation-duration: .35s; } /* 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-3); 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 !important; padding: 0 14px !important; background: var(--surface) !important; color: var(--ink-1) !important; background-image: none !important; box-shadow: none !important; font-size: 14px; } /* (FIX ALTURA/ALINEACIÓN SELECTS) — CAUSA REAL del "el select queda unos px más arriba/abajo": Material Dashboard fija `select.form-control:not([size]):not([multiple]) { height: calc(2.4375rem + 2px) }` (~41px) con MÁS especificidad que el height:44px de arriba (que iba SIN !important) → los inputs medían 44px pero los selects ~41px (3px menos) y por eso nunca alineaban. Con !important en el height los selects miden exactamente lo mismo que los inputs. Aplica a select nativo y al botón del selectpicker (bootstrap-select). El textarea se re-declara con height auto !important para que su multilínea no herede los 44px. */ .pt-content input.form-control, .pt-content select.form-control, .pt-content .bootstrap-select > .dropdown-toggle { height: 44px !important; line-height: normal !important; vertical-align: middle; } .pt-content textarea.form-control { height: auto !important; min-height: 90px; padding: 11px 14px !important; } /* Selects SIN .form-control (clase .select suelta o llevan la clase .select_diseno_1 (main.css:740) = `position:relative; bottom:5.7px` → SUBEN el select 5.7px (y .select_diseno_3 hasta 14px). Y el label lleva .css-extensions-selects-frm (empresa/main.css:307) = `margin-top:-21px`. Son hacks calibrados para los labels flotantes viejos; con el rediseño (labels estáticos + cajas 44px) descuadran el select respecto a los inputs. Se neutralizan en el shell. */ .pt-content .select_diseno, .pt-content .select_diseno_1, .pt-content .select_diseno_2, .pt-content .select_diseno_3, .pt-content .JScriterio { position: static !important; bottom: auto !important; top: auto !important; } .pt-content .css-extensions-selects-frm { margin-top: 0 !important; } /* Nota: .corregir_bottom (main.css:225, bottom:4.9px) es MISMO tipo de hack pero se usa SOLO en el módulo POS/Pídalo (pedidos*.twig) → NO se toca (regla del proyecto). */ /* Clases legacy "alinear input con select/textarea" (compensaban con margin/padding el layout viejo, donde el select era más alto). Con el rediseño (cajas 44px + reseteo de geometría) SOBRAN y descuadran → se neutralizan en el shell. Mismo caso que select_diseno_*. css-align-with-select tenía padding-top:33px (main.css:658, NO era "clase muerta" como creía una nota vieja). */ .pt-content .css-align-input-with-select, .pt-content .css-align-input-with-textarea, .pt-content .css-align-input-in-select-chat-bot { margin-top: 0 !important; margin-bottom: 6px !important; } .pt-content .css-align-with-select { padding-top: 0 !important; padding-bottom: 0 !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); } /* (FIX ALINEACIÓN SELECTS) el .filter-option de bootstrap-select es position:absolute; top:0; height:100% con padding-top HEREDADO del botón. Como el rediseño puso padding:0 14px en el botón, el padding-top heredado = 0 → el texto quedaba pegado ARRIBA (descuadrado vs los inputs). El align-items del botón no lo centra porque el .filter-option está en position:absolute. Se centra verticalmente el propio .filter-option (ya es height:100%). */ .pt-content .bootstrap-select .dropdown-toggle .filter-option { display: flex; align-items: center; padding-top: 0 !important; padding-bottom: 0 !important; } /* 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-3); 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; } /* (ALINEACIÓN DE CAMPOS — solución de RAÍZ, "top-based", SIN flexbox, SIN :has, SIN tocar `display`). Historial: r37-r42 usaban `flex-end` en la columna y fallaba porque (a) exigía `display:flex`, que DES-ocultaba las columnas `.elementHide` (su !important está roto en main.css) obligando a excluirlas → esas quedaban sin alinear; y (b) dependía de que Bootstrap dejara todas las columnas a igual alto. Aquí NO se altera `display`: se RESETEA la geometría de cada campo para que todos arranquen igual desde el tope de su columna: · columna → margin-top / padding-top = 0 (mata mt-2 / mt-3 inconsistentes) · wrapper (bmd-form-group | form-group) → margin 0 0 16px, padding-top 0 · label → block, 1 línea de alto ESTABLE (min-height + nowrap), margen fijo · control → 44px (fijado arriba en §14) ⇒ todo control queda a la MISMA Y —sea input o select— sin importar el tipo de wrapper (form-group vs bmd-form-group), el mt de la columna, ni que el select lleve select_diseno_*. Las columnas ocultas SIGUEN ocultas (no se toca su display → no hay que excluirlas). Ese era el patrón "Canales/Tiempo arriba vs Sígueme/Timbrar abajo". */ .pt-content form .row > [class*="col-"], .pt-content form .form-row > [class*="col-"] { margin-top: 0 !important; padding-top: 0 !important; } .pt-content form .row > [class*="col-"] > .bmd-form-group, .pt-content form .row > [class*="col-"] > .form-group, .pt-content form .form-row > [class*="col-"] > .bmd-form-group, .pt-content form .form-row > [class*="col-"] > .form-group { margin: 0 0 16px !important; padding-top: 0 !important; min-height: 0 !important; } .pt-content form .bmd-form-group > label, .pt-content form .form-group > label { display: block !important; margin: 0 0 6px !important; padding: 0 !important; min-height: 17px; line-height: 1.3; font-size: 12.5px !important; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* el control nunca aporta margen propio que descuadre */ .pt-content form .bmd-form-group > .form-control, .pt-content form .form-group > .form-control, .pt-content form .bmd-form-group > select, .pt-content form .form-group > select { margin: 0 !important; } /* toolbar (fuera de

): el search va en inline-block. */ .pt-content .pt-searchbox .bmd-form-group { display: block; } /* ═══ r49: COBERTURA DE CAMPOS SIN ═══════════════════════════════════ El reset de arriba exige ; pero MUCHAS vistas NO tienen (IVR editar, ruta, direct-did, distributors, did-create de distribuidor, refills, info, filtros de reportes/stats…) o usan campos "pelados" (label+control directos en la col) o wrappers mixtos → quedaban descuadrados. Se generaliza el mismo modelo SIN exigir . ADITIVO (no anula las reglas r48) y con degradación elegante: solo la regla de la COLUMNA usa :has() (estándar en navegadores actuales) para tocar únicamente columnas con control; las de wrapper y label NO usan :has(), así que la geometría se homologa aunque :has() no existiera. */ /* 1) columna que contiene un control → sin margen/padding superior (mata mt-2/3/4/5) */ .pt-content .row > [class*="col-"]:has(.form-control), .pt-content .row > [class*="col-"]:has(select), .pt-content .form-row > [class*="col-"]:has(.form-control), .pt-content .form-row > [class*="col-"]:has(select) { margin-top: 0 !important; padding-top: 0 !important; } /* 2) wrapper de campo directo en la col (con o sin ) → margen homogéneo */ .pt-content .row > [class*="col-"] > .bmd-form-group, .pt-content .row > [class*="col-"] > .form-group, .pt-content .form-row > [class*="col-"] > .bmd-form-group, .pt-content .form-row > [class*="col-"] > .form-group { margin: 0 0 16px !important; padding-top: 0 !important; min-height: 0 !important; } /* 3) label "pelado" directo en la col (IVR, ruta, direct-did, refills, info…) → geometría fija de 1 línea, para que su control arranque a la misma Y que el select hermano. Excluye labels de check/toggle (no son de campo). */ .pt-content .row > [class*="col-"] > label:not(.form-check-label):not(.css-did-select-record-call), .pt-content .form-row > [class*="col-"] > label:not(.form-check-label):not(.css-did-select-record-call) { display: block; margin: 0 0 6px !important; padding: 0; min-height: 17px; line-height: 1.3; font-size: 12.5px !important; font-weight: 600; color: var(--ink-2); } .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; } /* (FIX ALINEACIÓN INPUTS↔SELECTS EN FILTROS) — patrón "Origen". En las filas de filtros (.js-div-form-filters, wrapper común de calls/sms/ campaign-report/report-destinations en los 3 roles) unas columnas traían mt-2/mt-3 (inputs) y otras no (selects) → los campos quedaban a distinta altura. Se unifica el margen superior de TODA columna que contenga un .form-control (input o select) y se homologan sus etiquetas, para que inputs y selects alineen. (css-align-with-select era una clase MUERTA.) El :has ya se usa en §18; excluye las columnas de conteo/export (sin form-control). */ .pt-content .js-div-form-filters .row > [class*="col-"]:has(.form-control) { margin-top: 12px !important; } .pt-content .js-div-form-filters .row > [class*="col-"] > label, .pt-content .js-div-form-filters .row > [class*="col-"] > .form-group > label { font-size: 12.5px !important; font-weight: 600 !important; margin-bottom: 6px !important; line-height: 1.3 !important; } /* ========================================================================= 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); } /* (FIX X BLANCA) el span .css-close-modal-icon traía en main.css legacy background:white + border-radius:50% (un círculo blanco). En el header primario el × es blanco → blanco-sobre-blanco = se veía un "punto blanco". Se le quita el fondo/círculo; el color del × ya lo dan las reglas de arriba. */ .modal-content .css-close-modal-icon, .modal-header .css-close-modal-icon { background: transparent !important; padding: 0 !important; border-radius: 0 !important; font-weight: 400 !important; } .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; } /* Centrado del SVG inline dentro de botones FAB / just-icon: el tema Material solo centra .material-icons/.fa (con position:absolute), no los del rediseño, y el line-height:41px heredado de .btn-fab los desplazaba verticalmente dentro del círculo. Replicamos aquí ese centrado para el SVG. */ .btn.btn-fab .pt-ic, .btn.btn-just-icon .pt-ic { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ========================================================================= 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); } /* ========================================================================= Tarifas de llamadas (plan-llamadas, admin/distribuidor): normaliza los dos paneles transfer-list al estilo de tabla del rediseño SIN tocar DOM/JS (planCrud.js usa .css-plan-*/.js-plan-*/.list-group-item + .hide()/.show()). Arregla: (a) el texto del encabezado azul salía oscuro (lo pintaba .main-panel .table td{color:var(--ink-2)}); (b) las filas se renderizaban como bloques Material (.list-group-item) en vez de filas de tabla. ========================================================================= */ /* Encabezado azul → celdas tipo th del rediseño (blancas, mayúsculas) */ .real-card-header-primary .table { margin: 0; } .real-card-header-primary .table td { color: #fff !important; font-weight: 700; text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; border: none !important; padding: 8px 12px; vertical-align: middle; } .real-card-header-primary .table td select { text-transform: none; font-weight: 400; } /* Filas → FLEX. Robusto para los DOS markups: admin usa , distribuidor usa

(ambos comparten .css-plan-li-destinations). Se evita forzar display:table porque en distribuidor colapsaría los en una sola celda. Sin !important en display → sobrevive al .show()/.hide() de jQuery (que guarda/restaura el display inline vacío). */ .css-ul-plan-containers { display: block; width: 100%; margin: 0; padding: 0; list-style: none; } .css-plan-li-destinations { display: flex; align-items: center; gap: 10px; border: 0 !important; border-bottom: 1px solid var(--line-1) !important; border-radius: 0 !important; background: transparent; margin: 0; padding: 9px 12px; width: 100%; } .css-plan-li-destinations:hover { background: var(--surface-2); } .css-plan-li-destinations > td, .css-plan-li-destinations > span { border: 0 !important; padding: 0; color: var(--ink-2); font-size: 14px; } /* columna de texto (nombre + costo) crece y reparte; distribuidor: .js-plan-li-text */ .css-plan-li-destinations > td { flex: 1 1 0; min-width: 0; padding: 0 6px; } .css-plan-li-destinations > .js-plan-li-text { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* flecha y campo de valor no crecen */ .css-plan-li-destinations > .css-plan-arrow-selection, .css-plan-li-destinations > .js-plan-li-price { flex: 0 0 auto; } .css-plan-arrow-selection { color: var(--accent); cursor: pointer; } .css-plan-price { max-width: 120px; } .prefijos_list { color: var(--ink-3); font-weight: 600; } /* ========================================================================= 2X. FIXES DOC "CAMBIOS INTERFAZ PLANTA TELEFONICA" (2026-07-02) Fugas de modo oscuro, controles nativos y widgets de terceros que no heredan los tokens. Solo CSS; no toca PHP/JS. Ver planta-rediseno-interfaz-doc. ========================================================================= */ /* (H3,H4) input[type=number]: los spin-buttons nativos se tiñen con el acento del navegador (flechas "rosadas") y desentonan. Se neutralizan (el usuario escribe el valor); elimina el color mismatch en toda la app. */ .pt-content input[type="number"], .modal-content input[type="number"], .swal2-popup input[type="number"] { -moz-appearance: textfield; } .pt-content input[type="number"]::-webkit-outer-spin-button, .pt-content input[type="number"]::-webkit-inner-spin-button, .modal-content input[type="number"]::-webkit-outer-spin-button, .modal-content input[type="number"]::-webkit-inner-spin-button, .swal2-popup input[type="number"]::-webkit-outer-spin-button, .swal2-popup input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } /* (H2) SweetAlert2 — la librería trae fondo claro + texto gris fijos; en modo oscuro el popup quedaba claro con etiquetas ilegibles. Se lleva a los tokens. Cubre TODOS los popups (login, confirmaciones, credenciales SIP...). */ :root[data-theme="dark"] .swal2-popup { background: var(--surface) !important; color: var(--ink-1) !important; border: 1px solid var(--line-2); } :root[data-theme="dark"] .swal2-title, :root[data-theme="dark"] .swal2-content, :root[data-theme="dark"] .swal2-html-container { color: var(--ink-1) !important; } :root[data-theme="dark"] .swal2-popup .table { color: var(--ink-2); } :root[data-theme="dark"] .swal2-popup .table td, :root[data-theme="dark"] .swal2-popup .table th { border-top-color: var(--line-1) !important; color: var(--ink-2); } :root[data-theme="dark"] .swal2-popup .table-hover tbody tr:hover { background: var(--surface-2) !important; } /* etiquetas de credenciales SIP: antes solo font-weight:bold (sin color) → gris tenue de la librería. Se les da token, legible en claro y oscuro. */ .css-info-data-extension { color: var(--ink-1) !important; } /* botón "copiar" de cada credencial (lo inserta el JS del modal) */ .css-cred-copy { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-3); border-radius: 6px; padding: 3px 9px; margin-left: 10px; cursor: pointer; font-size: 12px; font-weight: 600; vertical-align: middle; transition: all .14s; } .css-cred-copy:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); } .css-cred-copy.copied { border-color: var(--green); color: var(--green-ink); background: var(--green-soft); } /* (H3) bootstrap-tagsinput (campo "IP Válidas"): el plugin fija background:#fff → caja blanca que rompe el oscuro. Se boxea como los demás inputs y se tema. */ .pt-content .bootstrap-tagsinput { width: 100%; min-height: 44px; padding: 6px 10px !important; border: 1px solid var(--line-2) !important; border-radius: var(--r-sm) !important; background: var(--surface) !important; box-shadow: none !important; color: var(--ink-1); } .pt-content .bootstrap-tagsinput input { color: var(--ink-1); background: transparent; border: none; } .pt-content .bootstrap-tagsinput .tag { background: var(--accent-soft) !important; color: var(--accent-ink) !important; border-radius: 6px; padding: 3px 8px; font-size: 13px; font-weight: 600; margin: 2px 3px 2px 0; display: inline-block; } :root[data-theme="dark"] .pt-content .bootstrap-tagsinput { background: var(--surface-2) !important; } /* (H1) Login: en oscuro la regla global :root[data-theme=dark] .input-group-text (surface-3) le ganaba por especificidad a la del login y rellenaba las cajas de los iconos → recuadro que no combina. Se restaura el fondo transparente. */ :root[data-theme="dark"] .pt-login .input-group-text { background: transparent !important; background-color: transparent !important; border: none !important; color: var(--ink-4) !important; } /* (H6) Modal "Audios" (y todos): la × de cerrar se veía descentrada (punto) en el botón 34x34. Se centra el glifo. El color ya lo cubre §19. */ .modal-content .modal-header .close, .modal-content .close { display: inline-flex !important; align-items: center; justify-content: center; line-height: 1; } /* (H8) Crear Plan: prefijos larguísimos "5411,5412,..." sin puntos de corte se desbordaban de la fila del transfer-list. Se permite wrap. */ .css-plan-li-destinations > .js-plan-li-text { flex-wrap: wrap; } .css-plan-li-destinations .prefijos_list { min-width: 0; overflow-wrap: anywhere; word-break: break-word; } /* (H7) Panel Operador: nombres en minúscula → capitalizados; etiqueta de estado VISIBLE (antes el estado solo vivía en el alt del icono y el title/tooltip). */ .pt-content .js-operator-panel-name { text-transform: capitalize; } .pt-content .pt-op-status { display: inline-flex; align-items: center; gap: 6px; margin: 8px auto 2px; padding: 3px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; background: var(--surface-3); color: var(--ink-3); } .pt-content .pt-op-status::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: currentColor; flex: 0 0 auto; } .pt-content .pt-op-status[data-state="enabled"] { background: var(--green-soft); color: var(--green-ink); } .pt-content .pt-op-status[data-state="busy"] { background: var(--amber-soft); color: var(--amber-ink); } .pt-content .pt-op-status[data-state="ring"] { background: var(--accent-soft); color: var(--accent-ink); } .pt-content .pt-op-status[data-state="disabled"] { background: var(--surface-3); color: var(--ink-4); } /* barra de resumen (total / disponibles / ocupados / desconectados) */ .pt-op-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 20px; } .pt-op-summary .pt-op-sum-item { display: flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); } .pt-op-summary .pt-op-sum-dot { width: 9px; height: 9px; border-radius: 99px; flex: 0 0 auto; } .pt-op-summary .pt-op-sum-item.green .pt-op-sum-dot { background: var(--green); } .pt-op-summary .pt-op-sum-item.amber .pt-op-sum-dot { background: var(--amber); } .pt-op-summary .pt-op-sum-item.gray .pt-op-sum-dot { background: var(--ink-4); } .pt-op-summary .pt-op-sum-item.blue .pt-op-sum-dot { background: var(--accent); } .pt-op-summary .pt-op-sum-num { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 18px; color: var(--ink-1); line-height: 1; } .pt-op-summary .pt-op-sum-lbl { font-size: 11px; font-weight: 600; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; } .pt-op-summary .pt-op-sum-txt { display: flex; flex-direction: column; gap: 2px; } .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"); } /* ═══════════════════════════════════════════════════════════════════ QA · "Análisis Interfaz Planta Telefónica" (v2) · r61 Correcciones puntuales conservando el lenguaje visual actual. ═══════════════════════════════════════════════════════════════════ */ /* ── QA 02 · Colas → Asignar Extensiones: flechas SIEMPRE centradas. companyNumBlock.js llama elementShow('btnAsign') -> fuerza `display:block` inline y anula el `place-items:center` del grid, descentrando el SVG. Centrado con position:absolute => inmune a cualquier display inline. */ .pt-content .pt-assign-actions .icons { position: relative; } .pt-content .pt-assign-actions .icons svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; } /* ── QA 03 · Estadísticas: 4 tarjetas de indicadores con igual altura. La diferencia la causa la descripción de "Productividad" (2 líneas); reservamos alto para 2 líneas => todas las tarjetas quedan alineadas. */ .pt-content .card.card-stats .card-footer .stats { min-height: 42px; } /* ── QA 06 · Campañas (SMS): banda de encabezado/filtros de la tabla de contactos (NOMBRE/CÉDULA/TELÉFONO) que quedaba clara en modo oscuro. */ :root[data-theme="dark"] .css-campaign-thead th, :root[data-theme="dark"] .css-db-th-structure th { background: var(--surface-2); color: var(--ink-2); } :root[data-theme="dark"] .js-campaign-fields-area .form-control, :root[data-theme="dark"] .js-campaign-field-value { background: var(--surface-2) !important; color: var(--ink-1) !important; border-color: var(--line-2) !important; } :root[data-theme="dark"] .js-campaign-fields-area .form-control::placeholder, :root[data-theme="dark"] .js-campaign-field-value::placeholder { color: var(--ink-4); } :root[data-theme="dark"] .js-campaign-control-total-row label, :root[data-theme="dark"] .js-campaign-field-name { color: var(--ink-3); } /* ── QA 07 · Campañas (Audio): título en una sola línea + selects sin truncar ("Español" no debe quedar como "Espa"). */ .pt-content .title_div_messaje { white-space: nowrap; } .pt-content .contenedor_type_audio_call { flex-wrap: wrap; } .pt-content .contenedor_type_audio_call > [class*="col-"] { min-width: 132px; } .pt-content .contenedor_type_audio_call .form-control { width: 100%; } /* ── QA 07 · Campañas (Audio/SMS): cajas de editor y área de prueba en modo oscuro (antes quedaban blancas). */ :root[data-theme="dark"] .note-editor.note-frame, :root[data-theme="dark"] .note-editor .note-editing-area, :root[data-theme="dark"] .note-editor .note-editable, :root[data-theme="dark"] .note-editor .note-toolbar, :root[data-theme="dark"] .note-editor .note-statusbar { background: var(--surface-2) !important; color: var(--ink-1) !important; border-color: var(--line-2) !important; } :root[data-theme="dark"] .css-campaign-preview-body, :root[data-theme="dark"] .div_pre_view .card-body, :root[data-theme="dark"] .css-campaign-div-preview-area, :root[data-theme="dark"] .css-campaign-content-preview { background: var(--surface-2) !important; color: var(--ink-1) !important; } :root[data-theme="dark"] .css-campaign-preview-body .form-control { background: var(--surface-3) !important; color: var(--ink-1) !important; border-color: var(--line-2) !important; } /* ── QA 07 · Campañas: estándar de color de acción. El botón Eliminar del toolbar de campañas va en ROJO (agregar y los demás se conservan azul). */ .pt-content .js-campaign-btn-delete.btn-twitter { background-color: var(--red) !important; } .pt-content .js-campaign-btn-delete.btn-twitter:hover, .pt-content .js-campaign-btn-delete.btn-twitter:focus, .pt-content .js-campaign-btn-delete.btn-twitter:active { background-color: var(--red-ink) !important; } /* ── Campañas (SMS): dropdown "Variables" (plugin nugget del Summernote, clase .dropdown-nugget) y botones del toolbar aparecían claros en oscuro. */ :root[data-theme="dark"] .note-editor .note-dropdown-menu, :root[data-theme="dark"] .dropdown-nugget { background: var(--surface-2) !important; color: var(--ink-1) !important; border-color: var(--line-2) !important; } :root[data-theme="dark"] .note-editor .note-dropdown-menu a, :root[data-theme="dark"] .note-editor .note-dropdown-item, :root[data-theme="dark"] .dropdown-nugget a, :root[data-theme="dark"] .dropdown-nugget li > * { color: var(--ink-1) !important; } :root[data-theme="dark"] .note-editor .note-dropdown-menu a:hover, :root[data-theme="dark"] .note-editor .note-dropdown-item:hover, :root[data-theme="dark"] .dropdown-nugget a:hover { background: var(--surface-3) !important; } :root[data-theme="dark"] .note-editor .note-btn { background: var(--surface-3) !important; color: var(--ink-1) !important; border-color: var(--line-2) !important; } /* ── Campañas: la fila superior (Nombre / Número telefónico / Colas / Fecha) NO está dentro de un , así que el reset de geometría de formularios (que alinea input↔select) no la alcanzaba. Se replica aquí anclado al contenedor de campaña. */ .pt-content .js-campaign-div-sms-container > .row > [class*="col-"] { margin-top: 0 !important; padding-top: 0 !important; } .pt-content .js-campaign-div-sms-container > .row > [class*="col-"] > .form-group, .pt-content .js-campaign-div-sms-container > .row > [class*="col-"] > .bmd-form-group { margin-top: 0 !important; padding-top: 0 !important; } /* Fecha: su form-group externo + el bmd-form-group que el JS inyecta anidado metían un desfase vertical del label -> se neutraliza el offset superior de toda la cadena. */ .pt-content .js-real-div-schedule-date, .pt-content .js-real-div-schedule-date > .js-div-select-date, .pt-content .js-real-div-schedule-date > .js-div-select-date > .form-group, .pt-content .js-real-div-schedule-date > .js-div-input-date { margin-top: 0 !important; padding-top: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════════ QA · "Cambios QA — Planta Telefónica" (Administrador + Distribuidor) · r68 Revisión de handoff 2026-07-16. Correcciones puntuales conservando el lenguaje visual del rediseño. Solo CSS (los cambios de texto/markup y de PHP van en sus vistas/controladores). Agrupado por los patrones del documento QA. ═══════════════════════════════════════════════════════════════════════════ */ /* ── PATRÓN 2 · Simetría de iconos en las pantallas "hub" ───────────────────── Destinos, DID Directos, Reportes, Estadísticas y Configuraciones (admin y distribuidor) NO migraron a .pt-mtile: siguen usando la grilla legacy .css-general-content-dashboard > .row > .css-img-zoom-efect > .card-dashboard, con PNGs de distinto tamaño, subtítulos que envuelven a distinto nº de líneas y centrado por ml-auto/mr-auto (con 1 icono quedaba pegado a un lado). Se homologan: grupo centrado, tarjetas de igual alto, icono de tamaño fijo, subtítulo a 2 líneas reservadas. Cubre ADM-01/12/20/22 y DIS-07/09/16. */ .css-general-content-dashboard .row { justify-content: center; } .css-general-content-dashboard .row > [class*="col-"] { margin-left: 0 !important; margin-right: 0 !important; float: none; display: flex; } .css-general-content-dashboard .css-img-zoom-efect > a { display: flex; width: 100%; text-decoration: none; } .css-general-content-dashboard .card-dashboard { width: 100%; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px 14px; margin: 0; background: var(--surface); border: 1px solid var(--line-1); border-radius: var(--r-lg); box-shadow: var(--sh-1); transition: transform .16s, box-shadow .18s, border-color .18s; } .css-general-content-dashboard .css-img-zoom-efect:hover .card-dashboard { box-shadow: var(--sh-2); border-color: var(--line-2); } .css-general-content-dashboard .card-dashboard img { width: 58px !important; height: 58px !important; object-fit: contain; margin: 0 auto !important; display: block; } .css-general-content-dashboard .card-dashboard br { display: none; } /* statistics.twig inyecta un
*/ .css-general-content-dashboard .card-dashboard-subtitle { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 40px; margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-1); line-height: 1.25; } /* ── PATRÓN 1 · Ritmo vertical uniforme en formularios CRUD (admin/distribuidor) Estos forms usan .form-row/.row de columnas col-md-* que envuelven en varias líneas y cuyo ÚNICO espaciado entre líneas eran clases mt-5/mt-4 inconsistentes (unas filas con mt, otras sin). El reset r48/r49 las anula para alinear input↔select, pero los campos "pelados" (label+control DIRECTOS en la columna, sin .form-group) quedaban sin separación entre filas → "etiquetas pegadas a los inputs de la fila anterior" (QA ADM-02/04/06/08/14/15/17/19). Se repone un margen inferior uniforme SOLO en columnas de campo pelado: las que tienen .form-group ya reciben su margen del reset, así que NO se tocan (sin doble espacio → no altera los formularios de empresa ya aprobados). */ /* PATRÓN "inputs pegados" — SALTO DE LÍNEA entre filas envueltas usando ROW-GAP en el contenedor flex. Es lo más robusto: NO depende de la estructura de cada campo (input, select, selectpicker, input-group, form-group) → funciona en Crear Servidor, Crear DID, Distribuidor, etc. donde muchos campos col-md-* envuelven en varias líneas. */ .pt-content .form-row:has(.form-control), .pt-content .form-row:has(select), .pt-content .form-row:has(textarea), .pt-content form .row:has(.form-control), .pt-content form .row:has(select), .pt-content .content .row:has(> [class*="col-"] .form-control), .pt-content .content .row:has(> [class*="col-"] select), .pt-content .content .row:has(> [class*="col-"] .bootstrap-select) { row-gap: 24px; } /* ── PATRÓN 3 · Icono "Exportar" alineado con Desde/Hasta en reportes ────────── En calls/sms (admin y distribuidor) la columna de Exportar va en la MISMA fila que Desde/Hasta, pero —a diferencia de ellas— no tiene .form-control, así que el reset de filtros (§18) NO le aplica el margin-top:12px que sí empuja a las columnas de fecha; además trae style="margin-top:-7px" inline y un . Resultado: el icono quedaba ~19px más arriba. Se iguala su margen superior al de las fechas y se homologa su label. Cubre ADM-21/26 y DIS-08/14. */ /* Exportar alineado con Desde/Hasta por FLUJO NATURAL: el bloque replica la estructura del campo de fecha → col con el mismo margin-top que §18 (12px) + un "label" INVISIBLE que reserva el mismo alto que "Desde"/"Hasta" + el icono con el mismo mt-1. Así el icono cae a la misma Y que los inputs. La palabra "Exportar:" se oculta con visibility (NO display:none: al ocultarla del todo el icono subía y se desalineaba, justo lo que reportó el usuario). */ .pt-content .js-div-form-filters .js-container-icon-excel-export { margin-top: 12px !important; } .pt-content .js-container-icon-excel-export > label { visibility: hidden !important; display: block !important; margin: 0 0 6px !important; min-height: 17px; font-size: 12.5px; line-height: 1.3; padding: 0; } .pt-content .js-container-icon-excel-export .css-span-export-to-excel { display: flex !important; align-items: center; justify-content: center; margin-left: auto; margin-top: 4px; } /* ═══ Iconos de ACCIONES consistentes (estilo de Destinos = botones .pt-act-btn) ═══ Muchas vistas usan aún el patrón viejo .td-actions > .icons (o > a.btn) con iconos sueltos de colores. Se homologan a botones cuadrados con borde e icono gris, hover por acción (editar→ámbar, ver→azul, eliminar→rojo), igual que el listado de Destinos. Scope .pt-content → NO afecta Pídalo (usa su propia base pidalo/_base, fuera de .pt-content). */ .pt-content .td-actions { white-space: nowrap; } .pt-content .td-actions > .icons, .pt-content .td-actions > a.btn, .pt-content .td-actions > .btn.btn-sm { display: inline-grid !important; place-items: center; width: 34px; height: 34px; min-width: 34px; padding: 0 !important; margin: 0 4px 0 0 !important; border: 1px solid var(--line-2) !important; border-radius: var(--r-xs) !important; background: var(--surface) !important; color: var(--ink-3) !important; box-shadow: none !important; vertical-align: middle !important; cursor: pointer; transition: background-color .14s, border-color .14s, color .14s; } .pt-content .td-actions > .icons > a { display: grid; place-items: center; width: 100%; height: 100%; color: inherit !important; padding: 0 !important; margin: 0 !important; } .pt-content .td-actions > .icons svg, .pt-content .td-actions > a.btn svg, .pt-content .td-actions > .btn svg { width: 17px !important; height: 17px !important; margin: 0 !important; } .pt-content .td-actions > .icons .text-danger, .pt-content .td-actions > .icons .text-info, .pt-content .td-actions > .icons .text-success, .pt-content .td-actions > .icons .text-primary, .pt-content .td-actions > .icons .text-warning { color: inherit !important; } .pt-content .td-actions > .icons .ripple-container { display: none !important; } /* iconos de acción font-awesome → MISMOS SVG de referencia (editar/eliminar/ver) por máscara CSS, para que sean IGUALES en todas las vistas (empresa, distribuidor y admin). Los fa-eye de contraseña NO se tocan (están en input-groups, no en td-actions). */ .pt-content .td-actions .fa-edit, .pt-content .td-actions .fa-pencil, .pt-content .td-actions .fa-pencil-alt, .pt-content .td-actions .fa-trash, .pt-content .td-actions .fa-trash-alt, .pt-content .td-actions .fa-trash-o, .pt-content .td-actions .fa-remove, .pt-content .td-actions .fa-times-circle, .pt-content .td-actions .fa-eye { font-size: 0 !important; line-height: 0 !important; display: inline-block !important; vertical-align: middle; width: 17px; height: 17px; color: inherit !important; background-color: currentColor !important; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 17px 17px; mask-size: 17px 17px; } /* editar → pencil (M12 20h9…) */ .pt-content .td-actions .fa-edit, .pt-content .td-actions .fa-pencil, .pt-content .td-actions .fa-pencil-alt { -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='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%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='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); } /* eliminar → trash (M3 6h18…) */ .pt-content .td-actions .fa-trash, .pt-content .td-actions .fa-trash-alt, .pt-content .td-actions .fa-trash-o, .pt-content .td-actions .fa-remove, .pt-content .td-actions .fa-times-circle { -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"); } /* ver → eye (M2 12s3.5-7…) */ .pt-content .td-actions .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"); } /* hover base (suave) */ .pt-content .td-actions > .icons:hover, .pt-content .td-actions > a.btn:hover, .pt-content .td-actions > .btn.btn-sm:hover { background: var(--surface-2) !important; border-color: var(--line-3) !important; color: var(--ink-1) !important; } /* ver → azul */ .pt-content .td-actions > .icons:has(a[href*="ver"]):hover, .pt-content .td-actions > .icons:has(.text-info):hover, .pt-content .td-actions > a.btn[href*="ver"]:hover { color: var(--accent) !important; border-color: var(--accent) !important; background: var(--accent-soft) !important; } /* editar → ámbar */ .pt-content .td-actions > .icons:has(a[href*="edit"]):hover, .pt-content .td-actions > a.btn[href*="edit"]:hover, .pt-content .td-actions > a.btn-success:hover { color: var(--amber) !important; border-color: var(--amber) !important; background: var(--amber-soft) !important; } /* eliminar → rojo */ .pt-content .td-actions > .icons[class*="delete"]:hover, .pt-content .td-actions > .icons[class*="Delete"]:hover, .pt-content .td-actions > .icons[class*="remove"]:hover, .pt-content .td-actions > .icons:has(.text-danger):hover, .pt-content .td-actions > a.btn-danger:hover { color: var(--red) !important; border-color: var(--red) !important; background: var(--red-soft) !important; } /* ── PATRÓN 5 · Valores que se salen del contenedor ─────────────────────────── (a) ADM-13 · badge "Tipo": .pt-pill tenía alto fijo y sin control de wrap → "Planta Telefónica" saltaba a 2 líneas y desbordaba. Se permite crecer a lo ancho en una línea. Se definen además .blue y .accent (usadas en did-directos y que no existían). */ .pt-pill { height: auto; min-height: 24px; padding-top: 3px; padding-bottom: 3px; white-space: nowrap; line-height: 1.25; } .pt-pill.blue { background: var(--blue-soft); color: var(--blue-ink); } .pt-pill.accent { background: var(--accent-soft); color: var(--accent-ink); } /* (b) ADM-03 · Admin: el nombre largo del DESTINO (celda propia) se montaba sobre el COSTO. Se trunca con ellipsis dentro de su celda. */ .css-plan-li-destinations > td .css-plan-span-destine-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* (c) DIS-01/DIS-02 · Distribuidor: la tarjeta "Destinos Seleccionados" traía width:30rem inline y se salía de su columna (el valor del costo quedaba fuera del borde). Se ajusta al ancho de la columna. */ .pt-content [class*="col-"] > .card.card-nav-tabs { width: 100% !important; max-width: 100%; } .css-plan-li-destinations > .js-plan-li-text { min-width: 0; } /* ── ADM-29 / DIS-18 · Cambiar contraseña: FUSIONAR el input con el ojito en UNA sola caja (como el login), en vez de dos cajas separadas que se veían raras. El .input-group es la caja (borde + radio + foco), el input va transparente/sin borde por dentro, y el ojito queda adentro a la derecha. */ .pt-content .input-group:has(.MostrarPassword), .pt-content .input-group:has(.MostrarPasswordRepeit) { display: flex; align-items: center; width: 100%; flex-wrap: nowrap; margin: 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; } .pt-content .input-group:has(.MostrarPassword):focus-within, .pt-content .input-group:has(.MostrarPasswordRepeit):focus-within { border-color: var(--accent) !important; box-shadow: var(--ring) !important; } .pt-content .input-group:has(.MostrarPassword) > .form-control, .pt-content .input-group:has(.MostrarPasswordRepeit) > .form-control { border: none !important; background: transparent !important; box-shadow: none !important; height: 44px; flex: 1 1 auto; width: auto; margin: 0; } .pt-content .input-group:has(.MostrarPassword) .input-group-append, .pt-content .input-group:has(.MostrarPasswordRepeit) .input-group-append { display: flex; align-items: center; margin: 0; border: none; background: transparent; } .pt-content .input-group-append .MostrarPassword, .pt-content .input-group-append .MostrarPasswordRepeit { margin: 0 12px 0 4px !important; color: var(--ink-4); cursor: pointer; } .pt-content .input-group-append .MostrarPassword:hover, .pt-content .input-group-append .MostrarPasswordRepeit:hover { color: var(--accent); } /* ── DIS-06 · Reasignar DID: los inline style="margin-top:-4px" (label) y "margin-top:13px" (input) son hacks del label flotante viejo que descuadran con el rediseño (labels ya estáticos). Se neutralizan por su valor exacto. */ .pt-content .bmd-form-group > label[style*="margin-top: -4px"], .pt-content .bmd-form-group > .form-control[style*="margin-top: 13px"] { margin-top: 0 !important; } /* ── ADM-10 · Tarjeta "Total Empresas": título centrado como el valor (el header flex lo dejaba a la izquierda). */ .js-hide-container-company-report .row.mt-4 .pt-card .pt-card-head { justify-content: center; text-align: center; } /* ── ADM-11 · Listado de Empresas (14 columnas): la dirección se partía en muchas líneas y las columnas quedaban apretadas. Se fuerzan filas de una sola línea y se truncan las columnas de texto largo (Dirección/Email) con ellipsis (la tabla la llena companyCrud.js). */ .js-table-companies tbody td { white-space: nowrap; max-width: 210px; overflow: hidden; text-overflow: ellipsis; } .js-table-companies thead th { white-space: nowrap; } /* ── PATRÓN 4 · Recuadros de filtro simétricos en Estadísticas ──────────────── En estadísticas (entrantes/salientes, admin y distribuidor) las fechas usan inputs boxed .css-dashboard-filter-inputs (42px) pero Filtros/Empresas/Colas son selectpicker (Filtros con data-style="btn btn-link") que salían SIN recuadro y a distinta altura. Se homologan a la misma caja de 42px. Cubre ADM-23/24 y DIS-10/11. */ .pt-content .css-dashboard-filter-inputs, .pt-content .form-control-sm { height: 42px !important; } .pt-content .row.mt-5 .bootstrap-select { width: 100% !important; } .pt-content .row.mt-5 .bootstrap-select > .dropdown-toggle, .pt-content .row.mt-5 .bootstrap-select > .dropdown-toggle.btn-link { height: 42px !important; padding: 0 30px 0 12px !important; border: 1px solid var(--line-2) !important; border-radius: var(--r-sm) !important; background: var(--surface) !important; color: var(--ink-1) !important; display: flex !important; align-items: center; box-shadow: none !important; font-weight: 500; } /* las columnas de filtro de estadísticas: mismo ancho mínimo y control al 100% para simetría */ .pt-content .row.mt-5:has(.css-dashboard-filter-inputs) > [class*="col-"] .form-group, .pt-content .row.mt-5:has(.css-dashboard-filter-inputs) > [class*="col-"] .bmd-form-group { width: 100%; } /* columnas de filtro de estadísticas: ancho consistente + separación vertical → no quedan "pegados" y apilan bien en pantallas chicas (5 en md+, 3 en sm, 2 en xs). */ .pt-content .row.mt-5:has(.css-dashboard-filter-inputs) { row-gap: 16px; } @media (min-width: 768px) { .pt-content .row.mt-5:has(.css-dashboard-filter-inputs) > [class*="col-"] { flex: 0 0 20%; max-width: 20%; } } @media (min-width: 576px) and (max-width: 767.98px) { .pt-content .row.mt-5:has(.css-dashboard-filter-inputs) > [class*="col-"] { flex: 0 0 33.3333%; max-width: 33.3333%; } } @media (max-width: 575.98px) { .pt-content .row.mt-5:has(.css-dashboard-filter-inputs) > [class*="col-"] { flex: 0 0 50%; max-width: 50%; } } /* ── PATRÓN 6 · Tarjetas de total SMS simétricas (ADM-27 / DIS-15) ──────────── "Total SMS" es un pt-card limpio pero "Total Valor ($)" traía header azul (real-card-header-primary). Se homologa "Total Valor" al estilo pt-card limpio (vía su clase única .valor_total) y se centra el título de "Total SMS". */ .pt-content .valor_total > .card { background: var(--surface) !important; border: 1px solid var(--line-1) !important; border-radius: var(--r-lg) !important; box-shadow: var(--sh-1) !important; overflow: hidden; } .pt-content .valor_total > .card > .card-header.real-card-header-primary { background: var(--surface) !important; background-image: none !important; border-bottom: 1px solid var(--line-1) !important; box-shadow: none !important; border-radius: 0 !important; } .pt-content .valor_total > .card .card-title { color: var(--ink-1) !important; font-size: 16px; font-weight: 700; } /* Tarjeta de total: encabezado LIMPIO y centrado (el .pt-head-flex es para headers de página —align-items:flex-end + space-between— y dejaba un hueco/"salto de línea" sobre el título). */ .pt-content .row:has(.valor_total) .pt-card-head { display: block !important; text-align: center; padding: 14px 18px 12px; } .pt-content .row:has(.valor_total) .pt-card-head > div { display: block; margin: 0; } .pt-content .row:has(.valor_total) .pt-card-head h3 { margin: 0; } /* misma altura y arranque (top) para que NO quede "uno más abajo" */ .pt-content .row:has(.valor_total) { align-items: stretch; } .pt-content .row:has(.valor_total) > [class*="col-"] { display: flex; } .pt-content .row:has(.valor_total) > [class*="col-"] > .pt-card { width: 100%; } /* ═══════════════════════════════════════════════════════════════════════════ FEEDBACK QA EN VIVO (2026-07-16, revisión 1×1 del usuario) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Distribuidor Crear/Editar/Ver: FUERA los iconos decorativos de Usuario/Contraseña/ Confirmar → el input queda a ancho completo, del mismo tamaño que "Nombre" = simetría. */ .pt-content .js-distributor-frm-create .input-group-prepend, .pt-content .js-distributor-frm-update .input-group-prepend, .pt-content .js-distributor-frm-view .input-group-prepend { display: none !important; } .pt-content .js-distributor-frm-create .input-group, .pt-content .js-distributor-frm-update .input-group, .pt-content .js-distributor-frm-view .input-group { display: block; width: 100%; } .pt-content .js-distributor-frm-create .input-group > .form-control, .pt-content .js-distributor-frm-update .input-group > .form-control, .pt-content .js-distributor-frm-view .input-group > .form-control { width: 100% !important; border-radius: var(--r-sm) !important; } /* ──
suelto entre label y control (patrón legacy): baja el campo respecto a los que no lo llevan (p.ej. el select "Distribuidor" quedaba más abajo que "Tipo" en Reportes → Transacciones). Con los labels ya display:block, ese
sobra → se oculta. */ .pt-content .form-row > [class*="col-"] > br, .pt-content .row > [class*="col-"] > br { display: none; } /* ── Planes (tablas de tarifas): el nombre y los prefijos largos apretaban las columnas ("se pegan"). Se truncan ambos con ellipsis y se dan proporciones: nombre y prefijos crecen; costo, flecha y valor no. (Admin usa ; el distribuidor ya se ajustó por ancho.) */ .css-plan-li-destinations .prefijos_list { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; overflow-wrap: normal; } /* RESPONSIVE (petición del usuario) — las tablas de tarifas NO se colapsan: columnas de ancho fijo/mínimo y el cuerpo hace SCROLL horizontal cuando no caben (como .table-responsive). */ .pt-content .card.card-nav-tabs .css-ul-plan-containers { display: block; width: 100%; overflow-x: auto; } .pt-content .card.card-nav-tabs .container-fluid { overflow-x: visible; padding-left: 0; padding-right: 0; } .css-plan-li-destinations { width: max-content; min-width: 100%; flex-wrap: nowrap; } .css-plan-li-destinations > td { flex: 0 0 auto; } .css-plan-li-destinations > td.td_prefijos { flex: 0 0 130px; } .css-plan-li-destinations > td:has(.css-plan-span-destine-name) { flex: 1 0 180px; } .css-plan-li-destinations > td:has(.js-plan-li-text) { flex: 0 0 auto; min-width: 82px; white-space: nowrap; } .css-plan-li-destinations > td:has(.css-plan-arrow-selection) { flex: 0 0 42px; text-align: center; } .css-plan-li-destinations > td:has(.js-plan-li-price) { flex: 0 0 132px; } /* Distribuidor: los planes usan spans (no ) → equivalente responsive para que quede IGUAL que el admin (columnas que no se colapsan + scroll horizontal del cuerpo). */ .css-plan-li-destinations > .js-plan-li-text { flex: 1 1 190px; min-width: 180px; } .css-plan-li-destinations > .css-plan-arrow-selection { flex: 0 0 42px; text-align: center; } .css-plan-li-destinations > .js-plan-li-price { flex: 0 0 132px; } /* FIX overflow costo del plan (SMS/Llamadas): `.css-plan-span` traía un hack legacy `position:relative; left:50%` (distribuidor/main.css) que empujaba el "$ valor" ~50% a la derecha → se salía del recuadro. Lo devolvemos al flujo normal. */ .css-plan-li-destinations .css-plan-span { position: static !important; left: auto !important; } /* ═══ Botones +/− (agregar/quitar prefijo o teléfono) → estilo de acción .pt-act-btn ═══ Vistas: destino-edit/create, destino-sms-edit/create (admin) + cliente-create/edit (empresa). Eran (icono suelto). Los igualamos al estilo estandarizado de "Destinos" (botón bordeado 34px). Cubre también las filas que destinoCrud.js clona desde el contenedor oculto. Verde para agregar, rojo para quitar. */ .pt-content .addPhone.icons, .pt-content .removePhone.icons { width: 34px; height: 34px; display: inline-grid; place-items: center; margin-top: 4px; border-radius: var(--r-xs); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-3) !important; cursor: pointer; transition: all .14s; vertical-align: middle; } .pt-content .addPhone.icons svg, .pt-content .removePhone.icons svg { width: 17px !important; height: 17px !important; margin: 0 !important; } .pt-content .addPhone.icons:hover { color: var(--green) !important; border-color: var(--green); background: var(--green-soft); } .pt-content .removePhone.icons:hover { color: var(--red) !important; border-color: var(--red); background: var(--red-soft); }