/* ============================================================================ SISTEMA DE DISEÑO — ENLACES PROFESIONALES enlaces-brand.css · Capa de aplicación (retrofit sobre la app real) ---------------------------------------------------------------------------- Afinada a la plantilla ACTUAL de la plataforma (MaterialPro / Monster Admin): .topbar · .left-sidebar · #sidebarnav · .sidebar-link · .page-wrapper · .card · .btn-circle · .table · .footer · gráfico Morris (#sales_history). Instala DESPUÉS del CSS del template (después de /app/dist/css/style.css). NO cambia HTML ni JS. Copia también tokens.css junto a este archivo. ← al final del ============================================================================ */ @import url('tokens.css'); /* ---- Base --------------------------------------------------------------- */ body{ font-family:var(--ep-font) !important; color:var(--ep-ink); background:var(--ep-paper); } h1,h2,h3,h4,h5,.card-title,.user-name{ font-family:var(--ep-font) !important; letter-spacing:var(--ep-tracking-tight); } a{ color:var(--ep-blue-300); } a:hover{ color:var(--ep-blue-700); } ::selection{ background:var(--ep-cyan); color:#fff; } .preloader .lds-ripple div{ border-color:var(--ep-blue) !important; } /* ============================================================ TOPBAR (barra superior + logo) ============================================================ */ .topbar, .topbar .navbar-header, .topbar .top-navbar, .topbar .navbar-collapse{ background:linear-gradient(90deg,#0E4B7E 0%,#124F84 50%,#1668A8 100%) !important; } .topbar .navbar-brand b img.light-logo{ filter:none; } .topbar .nav-link, .topbar .sl-icon-menu, .topbar .nav-toggler i, .topbar .topbartoggler i{ color:#fff !important; } /* ============================================================ SIDEBAR IZQUIERDA ============================================================ */ .left-sidebar, .sidebar-nav{ background:linear-gradient(180deg,#0E4B7E 0%,#124F84 55%,#0F456F 100%) !important; } .left-sidebar{ border-right:none !important; } /* Perfil de usuario */ .user-profile .user-name{ color:#fff !important; font-weight:600; } .user-profile .user-pic{ width:44px; height:44px; border-radius:var(--ep-r-md); background:var(--ep-cyan); position:relative; } /* Enlaces del menú */ #sidebarnav .sidebar-item .sidebar-link{ color:rgba(255,255,255,.80) !important; border-radius:12px; margin:2px 12px; padding:11px 13px; font-weight:500; transition:background var(--ep-dur-base) var(--ep-ease), color var(--ep-dur-base) var(--ep-ease); } #sidebarnav .sidebar-item .sidebar-link i{ color:rgba(255,255,255,.72) !important; } #sidebarnav .sidebar-item .sidebar-link:hover{ background:rgba(255,255,255,.10) !important; color:#fff !important; } #sidebarnav .sidebar-item .sidebar-link:hover i{ color:#fff !important; } /* Ítem activo / seleccionado */ #sidebarnav > .sidebar-item.selected > .sidebar-link, #sidebarnav .sidebar-item.active > .sidebar-link, #sidebarnav .sidebar-link.active{ background:rgba(255,255,255,.16) !important; color:#fff !important; font-weight:700; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); } #sidebarnav .sidebar-item.selected > .sidebar-link i, #sidebarnav .sidebar-link.active i{ color:#fff !important; } /* Submenús (Archivos Planos, Planes, Membresías, Informes, Grabaciones) */ #sidebarnav .first-level .sidebar-link{ color:rgba(255,255,255,.68) !important; margin:2px 12px 2px 20px; font-size:13.5px; } #sidebarnav .first-level .sidebar-link:hover{ color:#fff !important; } #sidebarnav .has-arrow::after{ border-color:rgba(255,255,255,.6) !important; } /* ============================================================ PAGE WRAPPER + CARDS ============================================================ */ .page-wrapper{ background:var(--ep-paper) !important; } .card{ background:var(--ep-surface) !important; border:1px solid var(--ep-line) !important; border-radius:var(--ep-r-lg) !important; box-shadow:var(--ep-shadow-sm) !important; transition:transform var(--ep-dur-base) var(--ep-ease), box-shadow var(--ep-dur-base) var(--ep-ease), border-color var(--ep-dur-base) var(--ep-ease); } .card:hover{ transform:translateY(-3px); box-shadow:var(--ep-shadow-md) !important; border-color:rgba(30,134,199,.32) !important; } /* KPIs en .card-group: conservar esquinas redondeadas y separación */ .card-group{ gap:18px; } .card-group > .card{ border-radius:var(--ep-r-lg) !important; } .card-title{ font-weight:700; color:var(--ep-ink); } .card-subtitle{ color:var(--ep-ink-3) !important; } /* Íconos circulares de los KPI (Numero de llamadas, video, costos…) */ .card .btn-circle.bg-danger{ background:var(--ep-coral) !important; box-shadow:none; } .card .btn-circle.btn-info{ background:var(--ep-blue) !important; } .card .btn-circle.bg-infod{ background:var(--ep-blue-700) !important; } .card .btn-circle.bg-warning{ background:var(--ep-amber) !important; } .card .btn-circle i{ color:#fff !important; } /* Cifra grande del KPI en mono */ .card-body h2.font-light{ font-family:var(--ep-font-mono) !important; font-weight:600 !important; color:var(--ep-ink) !important; letter-spacing:0; } /* ============================================================ TABLAS (Usuarios nuevos, Ventas diarias, DataTables) ============================================================ */ .table{ color:var(--ep-ink); } .table thead th{ background:#F7F5F0 !important; border-bottom:none !important; text-transform:uppercase; font-size:11px; letter-spacing:.06em; color:var(--ep-ink-3) !important; font-weight:600; } .table td{ border-top:1px solid var(--ep-line) !important; vertical-align:middle; } .table tbody tr{ transition:background var(--ep-dur-fast) var(--ep-ease); } .table tbody tr:hover{ background:rgba(30,134,199,.05) !important; } .table td i.ti-user{ color:var(--ep-blue-300) !important; margin-right:6px; } .table td i.ti-shopping-cart{ color:var(--ep-green) !important; margin-right:6px; } /* Cifras de las tablas del dashboard */ #cant_user h3{ font-family:var(--ep-font-mono) !important; font-weight:600; color:var(--ep-ink); } #ventas_diarias h3{ font-family:var(--ep-font-mono) !important; font-weight:600; color:var(--ep-green) !important; } /* Leyenda del gráfico Morris */ .dl .text-info{ color:var(--ep-blue-300) !important; } .dl .text-danger{ color:var(--ep-coral) !important; } /* ============================================================ BOTONES ============================================================ */ .btn{ border-radius:var(--ep-r-pill); font-weight:600; letter-spacing:.01em; transition:transform var(--ep-dur-fast) var(--ep-ease), box-shadow var(--ep-dur-base) var(--ep-ease), background var(--ep-dur-base) var(--ep-ease); } .btn:hover{ transform:translateY(-1px); } .btn:active{ transform:translateY(0); } .btn-circle{ border-radius:var(--ep-r-pill); } /* mantiene el círculo */ .btn-primary{ background:linear-gradient(120deg,var(--ep-blue),var(--ep-blue-300)) !important; border-color:transparent !important; color:#fff !important; box-shadow:var(--ep-shadow-brand); } .btn-primary:hover{ background:var(--ep-blue-300) !important; } .btn-success{ background:linear-gradient(120deg,var(--ep-green),var(--ep-green-300)) !important; border-color:transparent !important; color:#fff !important; } .btn-danger{ background:var(--ep-coral) !important; border-color:transparent !important; color:#fff !important; } .btn-danger:hover{ background:var(--ep-coral-700) !important; } .btn-info{ background:var(--ep-blue) !important; border-color:transparent !important; color:#fff !important; } .btn-warning{ background:var(--ep-amber) !important; border-color:transparent !important; color:#3a2a06 !important; } .btn-outline-primary{ color:var(--ep-blue) !important; border-color:var(--ep-blue) !important; } .btn-outline-primary:hover{ background:var(--ep-cyan-100) !important; color:var(--ep-blue) !important; } /* Botones de exportación DataTables (CSV/Excel/PDF) */ .dt-buttons .btn, .buttons-csv, .buttons-excel, .buttons-pdf, .buttons-print, .buttons-colvis{ background:#EFF4F7 !important; color:var(--ep-blue) !important; border:none !important; font-weight:600; border-radius:var(--ep-r-sm) !important; } /* ============================================================ FORMULARIOS + SELECT2 ============================================================ */ .form-control, .form-select, .custom-select, textarea, input[type="text"], input[type="password"], input[type="email"], input[type="number"]{ border-radius:var(--ep-r-sm) !important; border:1.5px solid #E1E7EA !important; background:#F7F9FA !important; color:var(--ep-ink); font-family:var(--ep-font); } .form-control:focus, .form-select:focus, textarea:focus, input:focus{ border-color:var(--ep-blue-300) !important; box-shadow:0 0 0 4px rgba(30,134,199,.14) !important; background:#fff !important; outline:none; } .select2-container--default .select2-selection--single{ border:1.5px solid #E1E7EA !important; border-radius:var(--ep-r-sm) !important; height:auto !important; padding:6px 8px; background:#F7F9FA; } .select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--ep-blue) !important; } /* ============================================================ BADGES / CHIPS / ESTADOS ============================================================ */ .badge{ border-radius:var(--ep-r-pill); font-weight:600; padding:.38em .8em; } .badge-success, .badge.bg-success, .label-success{ background:var(--ep-green-100) !important; color:var(--ep-green) !important; } .badge-primary, .badge.bg-primary, .label-info{ background:var(--ep-cyan-100) !important; color:var(--ep-blue) !important; } .badge-danger, .badge.bg-danger, .label-danger{ background:var(--ep-coral-100) !important; color:var(--ep-coral-700) !important; } .badge-warning, .badge.bg-warning, .label-warning{ background:var(--ep-amber-100) !important; color:#B9822A !important; } /* Calificación por estrellas (rating.js / Font Awesome) */ .fa-star.checked, .rating .active i, .stars .fas.fa-star{ color:var(--ep-amber) !important; } /* ============================================================ FOOTER ============================================================ */ .footer{ background:transparent !important; color:var(--ep-ink-3) !important; border-top:1px solid var(--ep-line); font-size:13px; } .footer a{ color:var(--ep-blue-300) !important; font-weight:600; } /* ============================================================ LOGIN (/enlaces_app/login) Estructura real: .login_form > .row · .col-md-7.mobile (imagen izq) · .col-md-5 (imagen der + formulario) · .legen_login legend · .btn-login El panel izquierdo pasa de foto a degradado de marca; el derecho a blanco. El contenido de marca (logo + titular) se inyecta como .ep-login-hero dentro de .col-md-7.mobile — ver SKILL.md §Login. ============================================================ */ .login_form{ background:var(--ep-surface) !important; } .login_form > .row{ min-height:100vh !important; margin:0; } /* Panel izquierdo: de foto a degradado azul de marca */ .login_form .col-md-7.mobile{ background:linear-gradient(150deg,#0E4B7E 0%,#1668A8 55%,#1E86C7 100%) !important; min-height:100vh !important; position:relative; overflow:hidden; display:flex !important; flex-direction:column; justify-content:space-between; padding:56px 52px !important; } .login_form .col-md-7.mobile::before{ /* glow decorativo */ content:""; position:absolute; width:380px; height:380px; border-radius:50%; background:rgba(41,173,226,.30); filter:blur(14px); top:-130px; right:-90px; pointer-events:none; } .login_form .col-md-7.mobile::after{ /* aro decorativo */ content:""; position:absolute; width:220px; height:220px; border-radius:50%; border:2px solid rgba(255,255,255,.14); bottom:70px; left:-70px; pointer-events:none; } /* Contenido de marca inyectado (ver SKILL.md) */ .ep-login-hero{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:space-between; height:100%; color:#fff; } .ep-login-brand{ display:flex; align-items:center; gap:13px; } .ep-login-brand svg{ width:46px; height:46px; flex-shrink:0; } .ep-login-brand b{ font-family:var(--ep-font); font-weight:700; font-size:19px; display:block; line-height:1.05; } .ep-login-brand i{ font-family:var(--ep-font); font-style:italic; font-size:19px; color:rgba(255,255,255,.85); } .ep-login-copy{ max-width:460px; } .ep-login-copy .ep-eyebrow{ color:rgba(255,255,255,.72); } .ep-login-copy h1{ font-family:var(--ep-font); font-weight:700; font-size:42px; line-height:1.08; letter-spacing:-.02em; color:#fff !important; margin:14px 0 0; } .ep-login-copy p{ font-size:16px; line-height:1.6; color:rgba(255,255,255,.82); margin-top:16px; } .ep-login-sign{ font-size:13px; color:rgba(255,255,255,.68); } .ep-login-sign b{ color:#fff; } /* Panel derecho: de imagen a superficie blanca */ .login_form .col-md-5{ background:var(--ep-surface) !important; display:flex; flex-direction:column; justify-content:center; padding-top:0 !important; } .login_form .col-md-5 .container{ width:100%; } /* .col-md-10 envuelve #recoverform (display:none) pero, al ser .col-md-5 un flex column, hereda flex-basis:83.333% de Bootstrap resuelto contra la altura del contenedor (~630px invisibles) y descentra el formulario. */ .login_form .col-md-5 > .col-md-10{ flex:0 0 auto !important; max-width:none !important; min-height:0 !important; } /* Título del formulario */ .login_form h2{ font-family:var(--ep-font) !important; font-weight:700; letter-spacing:-.02em; color:var(--ep-ink) !important; } .login_form .text-center[style*="4798e8"]{ color:var(--ep-ink) !important; } /* Campos con legend (fieldset .legen_login) */ .legen_login{ border:1.5px solid #DCE3E7; border-radius:var(--ep-r-md); padding:6px 14px 12px; margin:0; background:#F7F9FA; transition:border-color var(--ep-dur-base) var(--ep-ease), box-shadow var(--ep-dur-base) var(--ep-ease); } .legen_login legend{ float:none; width:auto; font-family:var(--ep-font); font-size:12.5px; font-weight:600; color:var(--ep-ink-2); margin:0; padding:0 4px; } .legen_login:focus-within{ border-color:var(--ep-blue-300); box-shadow:0 0 0 4px rgba(30,134,199,.14); background:#fff; } .login_form .form-control-lg{ border:none !important; background:transparent !important; box-shadow:none !important; padding:6px 4px !important; font-family:var(--ep-font); font-size:15px; color:var(--ep-ink); } .login_form .form-control-lg:focus{ box-shadow:none !important; } .login_form .input-group{ display:block; } /* Botón Ingresar / Recuperar */ .btn-login{ background:linear-gradient(120deg,var(--ep-blue),var(--ep-blue-300)) !important; color:#fff !important; border:none !important; border-radius:var(--ep-r-pill) !important; font-family:var(--ep-font); font-weight:700; font-size:15px; padding:14px !important; box-shadow:var(--ep-shadow-brand); transition:transform var(--ep-dur-fast) var(--ep-ease), background var(--ep-dur-base) var(--ep-ease); } .btn-login:hover{ transform:translateY(-1px); background:var(--ep-blue-300) !important; } .login_form a.text-info, .login_form a.text-dark{ color:var(--ep-blue-300) !important; font-weight:500; } .login_form a.text-info b{ color:var(--ep-blue) !important; } /* En móvil el panel de marca se oculta (media query original) y el formulario ocupa todo */ @media (max-width:600px){ .login_form .col-md-5{ padding:40px 22px !important; min-height:100vh; } } /* ============================================================ HOME USUARIO (/enlaces_app · video consulta) Tarjetas de color .card.bg-info / .card.bg-infod (con .text-white), barra de saldo .saldo/.view_saldo, tabla "Resumen de Cuenta", modal de recarga #get_saldo. ============================================================ */ /* Tarjeta de saldo (hero) — de bg-info a degradado de marca */ .card.bg-info{ background:linear-gradient(140deg,#0E4B7E,#1668A8 60%,#1E86C7) !important; border:none !important; box-shadow:0 12px 30px rgba(15,72,120,.26) !important; } /* Resto de tarjetas de resumen — azul profundo sólido */ .card.bg-infod{ background:#0E4B7E !important; border:none !important; box-shadow:var(--ep-shadow-sm) !important; } /* Texto e íconos blancos legibles sobre las tarjetas de color */ .card.bg-info .card-body, .card.bg-infod .card-body, .card.bg-info h2, .card.bg-info h4, .card.bg-info span, .card.bg-infod h2, .card.bg-infod h4, .card.bg-infod span, .card.bg-info .display-6 i, .card.bg-infod .display-6 i{ color:#fff !important; } /* Cifras de las tarjetas en mono */ .card.bg-info h2.font-medium, .card.bg-infod h2.font-medium, .card.bg-info .btnsaldo, .card.bg-infod .btnsaldo{ font-family:var(--ep-font-mono) !important; font-weight:600 !important; } /* Ícono grande dentro de la tarjeta */ .card.bg-info .display-6, .card.bg-infod .display-6{ background:rgba(255,255,255,.14); border-radius:var(--ep-r-md); width:52px; height:52px; display:flex; align-items:center; justify-content:center; } /* Barra de saldo en el topbar */ .saldo, .saldo:hover{ color:#fff !important; font-weight:500; } .view_saldo{ font-family:var(--ep-font-mono); font-weight:600; margin-left:6px; background:rgba(255,255,255,.14); padding:2px 10px; border-radius:var(--ep-r-pill); } .navbar .btn-success{ margin-left:12px; } /* Etiqueta "Resumen de Cuenta" */ .page-wrapper label{ font-weight:600; color:var(--ep-ink); font-size:14px; } /* Modal de recarga (y modales en general) */ .modal-content{ border:none !important; border-radius:var(--ep-r-lg) !important; box-shadow:var(--ep-shadow-lg) !important; overflow:hidden; } .modal-header{ border-bottom:1px solid var(--ep-line) !important; background:var(--ep-surface); } .modal-title{ font-family:var(--ep-font); font-weight:700; color:var(--ep-ink); } .modal-header .close{ color:var(--ep-ink-3); text-shadow:none; opacity:1; } .modal-footer{ border-top:1px solid var(--ep-line) !important; } .jumbotron{ border-radius:var(--ep-r-md) !important; } /* ============================================================ LISTADO DE PROFESIONALES (/enlaces_app/profesionales/all_profesionales) .profile (tarjeta), .member-thumb (foto), .stars-container, .btnllamar (telefónica), .video_agend (video), .vertical_separate. ============================================================ */ .profile{ background:var(--ep-surface) !important; border:1px solid var(--ep-line) !important; border-radius:var(--ep-r-lg) !important; box-shadow:var(--ep-shadow-sm) !important; transition:transform var(--ep-dur-base) var(--ep-ease), box-shadow var(--ep-dur-base) var(--ep-ease), border-color var(--ep-dur-base) var(--ep-ease); } .profile:hover{ transform:translateY(-3px); box-shadow:var(--ep-shadow-md) !important; border-color:rgba(30,134,199,.3) !important; } .profile h3{ font-size:15px; font-weight:700; color:var(--ep-ink); letter-spacing:0; } .profile a{ color:var(--ep-blue); font-weight:700; } .member-thumb img, .thumb-lg img.rounded-circle{ border-radius:var(--ep-r-lg) !important; border:3px solid #fff; box-shadow:0 4px 14px rgba(22,38,45,.14); object-fit:cover; } .vertical_separate{ width:1px; background:var(--ep-line); height:100%; margin:0 auto; } /* Estrellas de calificación */ .stars-container{ display:inline-flex; gap:3px; justify-content:center; width:100%; } .stars-container .star-icon, .far.fa-star.star-icon{ color:#D8D2C6 !important; } .stars-container .fas.fa-star, .star-icon.fas, .fa-star.checked{ color:var(--ep-amber) !important; } .rating-text{ text-align:center; font-size:12.5px; color:var(--ep-ink-3); margin-top:4px; } .rating-text .average-rating{ font-family:var(--ep-font-mono); font-weight:600; color:var(--ep-amber); } /* Botones de acción del profesional (por función, no por color bootstrap) */ .btnllamar, .btnllamar.btn-info{ background:var(--ep-blue) !important; color:#fff !important; } .btnllamar:hover{ background:var(--ep-blue-300) !important; } .btn-warning.video_agend, .video_agend{ background:var(--ep-coral) !important; color:#fff !important; } .btn-warning.video_agend:hover, .video_agend:hover{ background:var(--ep-coral-700) !important; } .btn-rounded{ border-radius:var(--ep-r-pill) !important; } /* ---- Buscador + pastillas de filtro (listado_profe.twig) ---- */ .profesionales-toolbar{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:14px !important; margin-bottom:20px !important; } .profesionales-buscador{ position:relative !important; flex:1 1 320px !important; min-width:260px !important; } .profesionales-buscador i{ position:absolute !important; left:16px !important; top:50% !important; transform:translateY(-50%) !important; color:var(--ep-ink-3) !important; font-size:14px !important; pointer-events:none !important; } .profesionales-buscador__input{ padding-left:40px !important; border-radius:var(--ep-r-pill) !important; } .profesionales-pastillas{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; } .profesionales-pastilla{ border:1px solid var(--ep-line) !important; background:var(--ep-surface) !important; color:var(--ep-ink) !important; cursor:pointer !important; font-family:var(--ep-font) !important; font-weight:600 !important; transition:background var(--ep-dur-base) var(--ep-ease), color var(--ep-dur-base) var(--ep-ease), border-color var(--ep-dur-base) var(--ep-ease); } .profesionales-pastilla--activa{ background:var(--ep-blue) !important; color:#fff !important; border-color:var(--ep-blue) !important; } /* ---- Grid de 2 columnas de tarjetas de profesionales ---- */ .profesionales-grid{ display:grid !important; grid-template-columns:repeat(2, 1fr) !important; gap:18px !important; } #profesionales-grid-wrapper.profesionales-grid-wrapper--cargando{ opacity:.5; pointer-events:none; transition:opacity var(--ep-dur-base) var(--ep-ease); } .profesionales-grid__vacio{ grid-column:1 / -1; text-align:center; padding:40px 20px; color:var(--ep-ink-3) !important; } .profile-card{ background:var(--ep-surface) !important; border:1px solid var(--ep-line) !important; border-radius:var(--ep-r-lg) !important; box-shadow:var(--ep-shadow-sm) !important; padding:18px !important; display:flex !important; flex-direction:column !important; gap:12px !important; transition:transform var(--ep-dur-base) var(--ep-ease), box-shadow var(--ep-dur-base) var(--ep-ease), border-color var(--ep-dur-base) var(--ep-ease); } .profile-card:hover{ transform:translateY(-3px); box-shadow:var(--ep-shadow-md) !important; border-color:rgba(30,134,199,.3) !important; } .profile-card__header{ display:flex !important; gap:12px !important; align-items:flex-start !important; } .profile-card__avatar{ width:56px !important; height:56px !important; border-radius:var(--ep-r-md) !important; object-fit:cover !important; flex-shrink:0 !important; border:3px solid #fff !important; box-shadow:0 4px 14px rgba(22,38,45,.14); } .profile-card__avatar--iniciales{ width:56px !important; height:56px !important; font-size:19px !important; } .profile-card__identidad{ min-width:0 !important; flex:1 !important; } .profile-card__nombre{ display:block !important; font-weight:700 !important; color:var(--ep-blue) !important; font-size:15px !important; } .profile-card__profesion{ margin:2px 0 6px !important; font-size:13px !important; color:var(--ep-ink-3) !important; } .profile-card__habilidades{ font-size:13px !important; color:var(--ep-ink) !important; line-height:1.4 !important; margin:0 !important; } .profile-card__precios{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; padding:10px 0 !important; border-top:1px solid var(--ep-line) !important; border-bottom:1px solid var(--ep-line) !important; } .profile-card__precio{ display:flex !important; flex-direction:column !important; gap:2px !important; } .profile-card__precio-label{ font-size:11.5px !important; color:var(--ep-ink-3) !important; } .profile-card__precio-valor{ font-family:var(--ep-font-mono) !important; font-weight:700 !important; color:var(--ep-ink) !important; } .profile-card__acciones{ display:flex !important; gap:8px !important; align-items:center !important; } .profile-card__acciones .ep-btn{ flex:1 !important; font-size:13px !important; padding:10px 14px !important; } /* Ver perfil: fila completa debajo de los botones de acción, con texto visible */ .profile-card__ver-perfil{ display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; width:100% !important; padding:10px 14px !important; font-size:13px !important; font-weight:600 !important; background:var(--ep-cyan-100) !important; color:var(--ep-blue) !important; box-shadow:none !important; } .profile-card__ver-perfil:hover{ background:var(--ep-blue) !important; color:#fff !important; } @media (max-width: 860px){ .profesionales-grid{ grid-template-columns:1fr !important; } .profesionales-toolbar{ flex-direction:column !important; align-items:stretch !important; } } /* ============================================================ LISTADO DE USUARIOS (admin) · DataTables #listausuarios .table-striped .table-bordered + controles DataTables. ============================================================ */ .table-bordered, .table-bordered td, .table-bordered th{ border-color:var(--ep-line) !important; } .table-striped tbody tr:nth-of-type(odd){ background:#FBFAF7 !important; } .table-striped tbody tr:hover{ background:rgba(30,134,199,.05) !important; } /* Controles de DataTables */ .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select{ border:1.5px solid #E1E7EA !important; border-radius:var(--ep-r-sm) !important; background:#F7F9FA !important; font-family:var(--ep-font); padding:6px 10px; } .dataTables_wrapper .dataTables_filter input:focus{ outline:none; border-color:var(--ep-blue-300) !important; box-shadow:0 0 0 4px rgba(30,134,199,.14) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button{ border-radius:var(--ep-r-sm) !important; border:none !important; color:var(--ep-blue) !important; padding:6px 12px; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{ background:var(--ep-blue) !important; color:#fff !important; border:none !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background:var(--ep-cyan-100) !important; color:var(--ep-blue) !important; border:none !important; } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label{ color:var(--ep-ink-2); font-size:13px; } /* ============================================================ SCROLLBARS ============================================================ */ ::-webkit-scrollbar{ width:9px; height:9px; } ::-webkit-scrollbar-thumb{ background:rgba(22,38,45,.18); border-radius:9px; }