@charset "UTF-8"; /* ========================================================================= DECASA THEME · capa moderna sobre BeyondAdmin (Bootstrap 3.3.1) ------------------------------------------------------------------------- Se carga DESPUES de beyond.min.css y del skin decasa-navy.css. Reglas prefijadas con `html` para ganarle en especificidad a las reglas `.clase` de Beyond sin recurrir a !important salvo donde Beyond lo usa. REGLA DE ORO: esta hoja NO toca display, width, height ni text-align. Las vistas traen 813 estilos en linea que dependen de esas propiedades. Indice 1. Tokens 2. Base 3. Navbar 4. Sidebar 5. Page header 6. Widget 7. Tablas + DataTables 8. Botones 9. Formularios + Select2 10. Modales 11. KPI / databox 12. Badges, alerts, toastr 13. Componentes nuevos (.dc-*) 14. Login 15. Responsivo ========================================================================= */ /* ------------------------------------------------------------------------- 1. TOKENS ------------------------------------------------------------------------- */ /* Paleta de marca tomada del logotipo /images/papp500.png: cian #00ADEF (simbolo) grafito #3A3A3C (wordmark "productividapp") El cian puro solo alcanza 2.5:1 sobre blanco, asi que NO se usa como fondo de boton ni como color de texto: para eso va --dc-primary (#0077A8, 5.0:1 con texto blanco). El cian queda para acentos, focus, bordes activos y superficies oscuras, donde si contrasta. */ :root{ --dc-brand:#00ADEF; --dc-brand-ink:#3A3A3C; --dc-primary:#0077A8; --dc-primary-hover:#00648F; --dc-primary-soft:#E2F5FD; --dc-accent:#00ADEF; --dc-accent-soft:#E2F5FD; --dc-navbar:#3A3A3C; --dc-sidebar:#2E2E30; --dc-sidebar-hover:#3D3D41; --dc-sidebar-text:#A9AAB0; --dc-sidebar-active:#FFFFFF; --dc-bg:#F4F6F8; --dc-surface:#FFFFFF; --dc-surface-alt:#FAFBFC; --dc-border:#DDE1E6; --dc-border-strong:#C3C8CF; --dc-text:#22262B; --dc-text-muted:#64707B; --dc-text-faint:#949CA5; --dc-success:#2E9E6B; --dc-success-soft:#E7F5EE; --dc-warning:#D98E04; --dc-warning-soft:#FDF4E3; --dc-danger:#D14343; --dc-danger-soft:#FBECEC; --dc-info:#0077A8; --dc-info-soft:#E2F5FD; --dc-radius-sm:6px; --dc-radius:8px; --dc-radius-lg:12px; --dc-radius-pill:999px; --dc-shadow-sm:0 1px 2px rgba(16,32,56,.06); --dc-shadow-md:0 1px 2px rgba(16,32,56,.05), 0 4px 14px rgba(16,32,56,.07); --dc-shadow-lg:0 2px 4px rgba(16,32,56,.06), 0 12px 32px rgba(16,32,56,.13); --dc-focus:rgba(0,173,239,.32); --dc-trans:.15s ease; } html[data-tema="dark"]{ --dc-brand:#00ADEF; --dc-brand-ink:#3A3A3C; --dc-primary:#00ADEF; --dc-primary-hover:#33BFF3; --dc-primary-soft:#102C3A; --dc-accent:#33BFF3; --dc-accent-soft:#0F2733; --dc-navbar:#232326; --dc-sidebar:#1B1B1D; --dc-sidebar-hover:#2A2A2E; --dc-sidebar-text:#9A9BA2; --dc-bg:#141416; --dc-surface:#1D1D20; --dc-surface-alt:#232327; --dc-border:#303035; --dc-border-strong:#434349; --dc-text:#E9EAEC; --dc-text-muted:#9A9BA2; --dc-text-faint:#6E6F76; --dc-success-soft:#12291F; --dc-warning-soft:#2B2113; --dc-danger-soft:#2E1A1A; --dc-info-soft:#0F2733; --dc-shadow-sm:0 1px 2px rgba(0,0,0,.3); --dc-shadow-md:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.35); --dc-shadow-lg:0 2px 4px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.5); --dc-focus:rgba(0,173,239,.42); } /* ------------------------------------------------------------------------- 2. BASE ------------------------------------------------------------------------- */ /* El fondo se declara tambien en : si la pagina resulta mas alta que el contenido pintado, el lienzo toma el color de html y no el blanco de Bootstrap. Nota historica: gralTables.js calculaba el scrollY de las DataTables a partir del alto de .page-container; ya no lo hace (mide el viewport), pero jsTablesGral.js sigue dependiendo de el. */ html{ background-color:var(--dc-bg); /* Garantiza que el color de fondo cubra el viewport aunque la pagina sea corta. Se pone en y NO en .page-container, cuya altura todavia alimenta el scrollY de las DataTables que usan jsTablesGral.js. */ min-height:100vh; } html .main-container, html .page-container{ background-color:transparent; } html body{ background-color:var(--dc-bg); /* Beyond deja body{float:left;min-height:100%}, y ese 100% no resuelve contra nada porque html no tiene altura fija: el body se queda en la altura de su contenido. Donde termina la caja de html el lienzo se pinta BLANCO, y en modo oscuro se ve como una franja clara al pie de cualquier pantalla corta. Medido: 169 filas blancas en /admin/personal/getinfo. Con el body cubriendo el viewport la franja desaparece. */ min-height:100vh; color:var(--dc-text); font-family:'Open Sans','Segoe UI',system-ui,-apple-system,sans-serif; font-size:13px; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } html .main-container{ background-color:var(--dc-bg); } html a{ color:var(--dc-accent); } html a:hover,html a:focus{ color:var(--dc-primary-hover); } html hr{ border-top-color:var(--dc-border); } /* Foco visible y consistente en toda la app */ html a:focus-visible, html .btn:focus-visible, html .form-control:focus-visible, html button:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--dc-focus); border-radius:var(--dc-radius-sm); } /* Scrollbars discretas */ html ::-webkit-scrollbar{ width:10px; height:10px; } html ::-webkit-scrollbar-track{ background:transparent; } html ::-webkit-scrollbar-thumb{ background:var(--dc-border-strong); border-radius:var(--dc-radius-pill); border:2px solid var(--dc-bg); } html ::-webkit-scrollbar-thumb:hover{ background:var(--dc-text-faint); } /* Beyond pinta el spinner de carga */ html .loading-container .loader{ border-top-color:var(--dc-accent) !important; } /* ------------------------------------------------------------------------- 3. NAVBAR Se pinta en navy para que forme una sola pieza con el sidebar. Razon de fondo: el logo de DECASA es un lockup vertical (globo sobre palabra, 1806x1187) y a 30px de alto sobre blanco resulta ilegible; sobre navy se invierte a blanco y se lee. Ademas el hamburguesa de Beyond viene forzado a #fff con especificidad alta, asi que sobre blanco desaparecia. ------------------------------------------------------------------------- */ html .navbar, html .navbar .navbar-inner, html .navbar.navbar-fixed-top .navbar-inner{ background:var(--dc-navbar) !important; background-image:none !important; border:0; box-shadow:0 1px 3px rgba(11,18,32,.20); } html .navbar .navbar-brand{ padding:0; } /* papp500.png apila el simbolo (y 0-408) sobre el wordmark (y 467-530). En una barra de 45px el lockup completo dejaria la palabra en 4px, ilegible, asi que object-fit recorta el PNG al simbolo y el wordmark se compone como texto. La razon 33x30 con object-position:top corta justo debajo del simbolo: 33px de ancho -> 38.9px de alto natural, y el simbolo termina en 30px. */ html .navbar .navbar-brand small{ display:flex; align-items:center; gap:9px; margin-left:6px; /* Beyond fija .navbar-brand{height:45px}; sin esta altura el lockup de 30px se pega al borde superior de la barra en vez de centrarse. */ height:45px; font-size:0; } html .navbar .navbar-brand small img{ height:30px !important; width:33px !important; margin:0; object-fit:cover; object-position:top center; /* El simbolo es cian + grafito; sobre la barra grafito la mitad oscura desapareceria, asi que va en blanco solido */ filter:brightness(0) invert(1); opacity:.97; } html .navbar .navbar-brand .dc-brand-word{ color:#fff; font-size:16px; font-weight:700; letter-spacing:-.02em; line-height:1; } /* Beyond colapsa el ancho de la barra de marca a 50px por debajo de 768px; ahi solo cabe el simbolo */ @media (max-width:767px){ html .navbar .navbar-brand .dc-brand-word{ display:none; } } /* Boton de colapso del sidebar (Beyond lo posiciona en left:189px) */ html .navbar .sidebar-collapse{ background:transparent !important; border:0; box-shadow:none !important; } html .navbar .sidebar-collapse .collapse-icon{ color:rgba(255,255,255,.65); transition:color var(--dc-trans); } html .navbar .sidebar-collapse:hover{ box-shadow:none !important; } html .navbar .sidebar-collapse:hover .collapse-icon{ color:#fff; } /* Area de cuenta */ html .navbar .navbar-account .account-area > li > a{ color:rgba(255,255,255,.88); transition:background-color var(--dc-trans); } html .navbar .navbar-account .account-area > li > a:hover, html .navbar .navbar-account .account-area > li.open > a{ background-color:rgba(255,255,255,.10); } html .navbar .navbar-account .account-area .profile span{ color:#fff; font-weight:600; } html .navbar .navbar-account .avatar{ border-radius:var(--dc-radius-pill); overflow:hidden; } html .navbar .navbar-account .avatar img{ border-color:rgba(255,255,255,.35); } html .dropdown-menu{ background-color:var(--dc-surface); border:1px solid var(--dc-border); border-radius:var(--dc-radius); box-shadow:var(--dc-shadow-lg); padding:6px 0; } html .dropdown-menu > li > a{ color:var(--dc-text); padding:7px 14px; transition:background-color var(--dc-trans); } html .dropdown-menu > li > a:hover, html .dropdown-menu > li > a:focus{ background-color:var(--dc-accent-soft); color:var(--dc-primary); } html .dropdown-menu .divider{ background-color:var(--dc-border); } html .dropdown-login-area .username a, html .dropdown-login-area .email a{ color:var(--dc-text-muted); } html .dropdown-login-area .dropdown-footer a{ color:var(--dc-danger); font-weight:600; } /* Switch de tema claro/oscuro (lo inyecta decasa-theme.js) */ html .dc-tema-toggle{ background:none; border:0; cursor:pointer; height:45px; padding:0 14px; color:rgba(255,255,255,.65); font-size:15px; transition:color var(--dc-trans), background-color var(--dc-trans); } html .dc-tema-toggle:hover{ color:#fff; background-color:rgba(255,255,255,.10); } /* ------------------------------------------------------------------------- 4. SIDEBAR Beyond pinta el fondo con .page-sidebar:before (pseudo fijo de 219px). ------------------------------------------------------------------------- */ html .page-sidebar:before, html .page-sidebar.sidebar-fixed:before{ background-color:var(--dc-sidebar); box-shadow:none; } html .page-sidebar .sidebar-menu a{ color:var(--dc-sidebar-text); transition:color var(--dc-trans), background-color var(--dc-trans); } html .page-sidebar .sidebar-menu a:hover{ color:var(--dc-sidebar-active); } html .page-sidebar .sidebar-menu > li > a{ border-top:1px solid rgba(255,255,255,.045); } html .page-sidebar .sidebar-menu > li:last-child > a{ border-bottom:1px solid rgba(255,255,255,.045); } html .page-sidebar .sidebar-menu > li > a:hover{ background-color:var(--dc-sidebar-hover); border-color:rgba(255,255,255,.045); } html .page-sidebar .sidebar-menu a .menu-icon{ color:var(--dc-sidebar-text); opacity:.8; } html .page-sidebar .sidebar-menu a:hover .menu-icon{ opacity:1; } html .page-sidebar .sidebar-menu a .menu-expand{ color:var(--dc-sidebar-text); opacity:.6; } /* Barra indicadora de 4px a la izquierda */ html .page-sidebar .sidebar-menu li:before{ background-color:var(--dc-accent); } html .page-sidebar .sidebar-menu li:not(.open):hover:before{ background-color:var(--dc-accent); } html .page-sidebar .sidebar-menu li.open{ background-color:transparent; } html .page-sidebar .sidebar-menu li.open > a{ color:var(--dc-sidebar-active); } html .page-sidebar .sidebar-menu li.active > a{ background-color:var(--dc-sidebar-hover); color:var(--dc-sidebar-active); font-weight:600; } html .page-sidebar .sidebar-menu li.active > a .menu-icon{ color:var(--dc-accent); opacity:1; } /* Submenu */ html .page-sidebar .sidebar-menu > li > .submenu{ background-color:rgba(0,0,0,.22); box-shadow:none; } html .page-sidebar .sidebar-menu .submenu > li > a{ color:var(--dc-sidebar-text); font-size:12.5px; } html .page-sidebar .sidebar-menu .submenu > li > a:hover{ color:var(--dc-sidebar-active); background-color:rgba(255,255,255,.05); } html .page-sidebar .sidebar-menu .submenu > li.active > a{ color:var(--dc-sidebar-active); background-color:rgba(255,255,255,.07); font-weight:600; } /* --- Sidebar colapsado (.menu-compact) ------------------------------------- Al colapsar, Beyond NO encoge el menu: convierte .menu-text y .submenu en paneles flotantes con fondo BLANCO (#ffffff) y casi blanco (#fbfbfb), y pone el hover de los items tambien en blanco. Con el sidebar oscuro eso dejaba el texto de los submenus en --dc-sidebar-text (#A9AAB0) sobre blanco, ilegible, y el del modulo activo en blanco sobre blanco, invisible. Se pintan oscuros para que el desplegable siga al resto del sidebar. */ html .page-sidebar.menu-compact .sidebar-menu > li > a .menu-text, html .page-sidebar.menu-compact .sidebar-menu > li > a.menu-dropdown > .menu-text{ background-color:var(--dc-sidebar-hover); color:var(--dc-sidebar-active); border-bottom:1px solid rgba(255,255,255,.08); box-shadow:var(--dc-shadow-lg); font-weight:600; } html .page-sidebar.menu-compact .sidebar-menu > li > .submenu{ background:var(--dc-sidebar-hover); border-left:0; box-shadow:var(--dc-shadow-lg); } html .page-sidebar.menu-compact .sidebar-menu > li > .submenu li > a{ color:var(--dc-sidebar-text); } /* Beyond pone estos hover en #ffffff */ html .page-sidebar.menu-compact .sidebar-menu > li > a:hover, html .page-sidebar.menu-compact .sidebar-menu > li > .submenu li:hover{ background-color:rgba(255,255,255,.08); } html .page-sidebar.menu-compact .sidebar-menu > li > .submenu li:hover > a, html .page-sidebar.menu-compact .sidebar-menu > li > .submenu li.active > a{ color:var(--dc-sidebar-active); } /* El icono del modulo activo tambien se veia blanco sobre el panel blanco */ html .page-sidebar.menu-compact .sidebar-menu > li.active > a{ background-color:var(--dc-sidebar-hover); } /* Beyond pone color:#262626 en el hover del item, pensado para el panel blanco. Sobre el panel oscuro seria texto oscuro sobre oscuro. */ html .page-sidebar.menu-compact .sidebar-menu > li:hover > a, html .page-sidebar.menu-compact .sidebar-menu > li:hover > a > .menu-text{ color:var(--dc-sidebar-active); } /* Chatbar */ html .page-chatbar{ background-color:var(--dc-surface); border-left:1px solid var(--dc-border); } html .page-chatbar .contacts-list .contact:hover{ background-color:var(--dc-surface-alt); } html .page-chatbar .contact-name{ color:var(--dc-text); font-weight:600; } /* ------------------------------------------------------------------------- 5. PAGE HEADER Beyond lo trae como barra de 40px con degradado SVG en base64. ------------------------------------------------------------------------- */ /* Encabezado homologado. En 46 vistas el titulo se mudo a la cabecera de la tarjeta y este bloque desaparecio; las 8 que quedan no tienen tarjeta donde ponerlo (los tableros, un par de detalles), asi que aqui el .page-header se dibuja EXACTAMENTE como un .widget-header: misma altura, mismo tipo, titulo y subtitulo en un solo renglon y las acciones a la derecha. */ html .page-header{ align-items:center; background:var(--dc-surface) !important; background-image:none !important; border:1px solid var(--dc-border); border-bottom:1px solid var(--dc-border); border-radius:var(--dc-radius-lg); box-shadow:var(--dc-shadow-sm); display:flex; flex-wrap:wrap; gap:8px 16px; height:auto; margin:0 0 16px 0; min-height:0; padding:12px 18px; } html .page-header .header-title{ flex:1 1 auto; min-width:0; } html .page-header .header-title h1{ color:var(--dc-text); display:inline; font-size:13px; font-weight:600; letter-spacing:0; line-height:1.35; margin:0; } html .page-header .header-buttons, html .page-header > .pull-right{ align-items:center; display:flex; float:none; gap:8px; margin-left:auto; } /* El subtitulo. Se acota a los dos sitios donde de verdad esta: hermano del h1 (62 vistas) o dentro del h1 (location/units/index). Antes la regla decia solo ".header-title small" y eso alcanzaba tambien a los de las leyendas que van pegados a un — «Ult. Posicion», «Actividades», «Historico» — y al volverlos bloque se apilaban uno por renglon encima del mapa. Fuera de esos dos casos el se queda en linea. */ /* El subtitulo va en el mismo renglon que el titulo, separado por un punto medio, igual que en la cabecera de tarjeta. */ html .page-header .header-title > small, html .page-header .header-title > h1 > small{ color:var(--dc-text-muted); display:inline; font-size:12.5px; font-weight:400; } html .page-header .header-title > small:before{ color:var(--dc-text-faint); content:"\00b7"; margin:0 6px; } /* Leyendas de iconos dentro del encabezado (3 vistas): icono + etiqueta en el mismo renglon, sin que se corten entre si. */ html .page-header .header-title img + small{ color:var(--dc-text-muted); display:inline; font-size:11.5px; margin-right:14px; vertical-align:middle; white-space:nowrap; } html .page-header .header-title img{ vertical-align:middle; } /* Beyond trae .page-body{background:#eeeeee;padding:5px 20px 24px}. Se vuelve transparente y se le quita el padding lateral, que si no se sumaria al de .page-content y dejaria 40px en las 120 vistas que usan .page-body. */ html .page-body{ background:transparent; padding:0 0 28px 0; } /* Ancho util. Ojo: .container-fluid de Bootstrap trae 15px de padding lateral, pero Beyond ya lo anula con .main-container{padding:0}, asi que ahi no hay nada que recuperar y sacar .page-container con margenes negativos solo lo empuja fuera del viewport. Los 15px NO son negociables: todo .row de Bootstrap 3 trae margin:0 -15px y los recupera del padding del padre. Con 12px el .row (y con el la vista entera) se sale 3px por cada lado y aparece scroll horizontal. Medido en 40 de las 73 vistas con formulario. */ html .page-content{ padding:0 15px; } /* ------------------------------------------------------------------------- 6. WIDGET (la tarjeta del template: .widget > .widget-header + .widget-body) Beyond le pone sombra dura por separado al header y al body. Aqui se fusionan en una sola tarjeta con elevacion suave. ------------------------------------------------------------------------- */ html .widget{ background-color:var(--dc-surface); border:1px solid var(--dc-border); border-radius:var(--dc-radius); box-shadow:var(--dc-shadow-md); margin:0 0 20px 0; overflow:hidden; } html .widget.flat{ box-shadow:none; } html .widget-header{ box-shadow:none !important; border:0; border-bottom:1px solid var(--dc-border); color:var(--dc-text); min-height:46px; padding-left:16px; padding-right:8px; } /* El fondo neutro solo va en los headers sin color propio: si se aplicara a todos, el !important le ganaba a .bg-warning / .bg-blue / ... y dejaba en blanco los encabezados de colores (los tableros de estatus de ruta). */ html .widget-header:not([class*="bg-"]){ background:var(--dc-surface) !important; background-image:none !important; } html .widget-header > .widget-caption{ color:var(--dc-text); font-size:13px; font-weight:600 !important; letter-spacing:.01em; line-height:45px; } html .widget-header > .widget-icon{ color:var(--dc-text-muted); line-height:45px; font-size:14px; } html .widget-header .widget-buttons{ line-height:45px; height:46px; } html .widget-header .widget-buttons > a{ color:var(--dc-text-faint); transition:color var(--dc-trans); } html .widget-header .widget-buttons > a:hover{ color:var(--dc-primary); } /* La franja de acento: Beyond la declara en 3px blanca y el skin la colorea. Se adelgaza a 2px para que no domine la tarjeta. */ html .widget-header.bordered-bottom{ border-bottom-width:2px; } html .widget-header.bordered-left{ border-left-width:3px; } /* Encabezados de color solido (.widget-header.bg-blue, .bg-warning, ...) */ html .widget-header[class*="bg-"]{ border-bottom:0; } html .widget-header[class*="bg-"] > .widget-caption, html .widget-header[class*="bg-"] i{ color:#fff; } html .widget-header[class*="bg-"] .widget-buttons > a{ color:rgba(255,255,255,.75); } html .widget-header[class*="bg-"] .widget-buttons > a:hover{ color:#fff; } html .widget-body{ background-color:var(--dc-surface); box-shadow:none !important; border:0; color:var(--dc-text); padding:14px; } html .widget-body.no-padding{ padding:0; } /* La barra de acciones arriba de las tablas */ html .table-toolbar{ padding:0 0 14px 0; border:0; background:none; } /* ------------------------------------------------------------------------- 7. TABLAS + DATATABLES ------------------------------------------------------------------------- */ html .table{ background-color:transparent; color:var(--dc-text); font-size:12.5px; margin-bottom:0; } html .table > thead > tr > th{ background-color:var(--dc-surface-alt); color:var(--dc-text-muted); font-size:11px; font-weight:600; letter-spacing:.045em; text-transform:uppercase; /* 9px y no 12: el padding lateral se paga en CADA columna y las tablas de esta app llegan a 13, asi que aqui se recupera mas ancho que en los margenes de la pagina. */ padding:11px 9px; border-top:0; border-bottom:1px solid var(--dc-border); vertical-align:middle; white-space:nowrap; } html .table > tbody > tr > td{ padding:9px 9px; border-top:1px solid var(--dc-border); color:var(--dc-text); vertical-align:middle; } html .table > tbody > tr:first-child > td{ border-top:0; } /* Beyond/Bootstrap pintan striped y hover con grises que chocan con el tema */ html .table-striped > tbody > tr:nth-of-type(odd), html .table-striped > tbody > tr:nth-of-type(odd) > td{ background-color:var(--dc-surface-alt); } html .table-hover > tbody > tr:hover, html .table-hover > tbody > tr:hover > td{ background-color:var(--dc-accent-soft); } html .table-bordered, html .table-bordered > thead > tr > th, html .table-bordered > tbody > tr > td{ border-color:var(--dc-border); } /* Sin bordes verticales: la retícula completa es lo que mas envejece una tabla. Se conserva solo la horizontal. */ html .widget-body > .table-bordered, html .widget-body > .table-responsive > .table-bordered, html .dc-table-card .table-bordered{ border-left:0; border-right:0; border-top:0; } html .widget-body > .table-bordered > thead > tr > th, html .widget-body > .table-bordered > tbody > tr > td, html .widget-body > .table-responsive > .table-bordered > thead > tr > th, html .widget-body > .table-responsive > .table-bordered > tbody > tr > td, html .dc-table-card .table-bordered > thead > tr > th, html .dc-table-card .table-bordered > tbody > tr > td{ border-left:0; border-right:0; } /* --- DataTables --- */ html .dataTables_wrapper{ color:var(--dc-text-muted); } html .dataTables_wrapper .dataTables_filter input{ background-color:var(--dc-surface); border:1px solid var(--dc-border); border-radius:var(--dc-radius-sm); color:var(--dc-text); padding:6px 10px; transition:border-color var(--dc-trans), box-shadow var(--dc-trans); } html .dataTables_wrapper .dataTables_filter input:focus{ border-color:var(--dc-accent); box-shadow:0 0 0 3px var(--dc-focus); outline:none; } html .dataTables_wrapper .dataTables_info, html .dataTables_wrapper .dataTables_paginate{ color:var(--dc-text-muted); font-size:12px; padding-top:12px; } html .dataTables_wrapper .DTTTFooter{ border-top:1px solid var(--dc-border); margin-top:4px; } html .dataTables_scrollHead, html .dataTables_scrollHead .dataTables_scrollHeadInner table > thead > tr > th{ background-color:var(--dc-surface-alt); } html table.dataTable thead .sorting, html table.dataTable thead .sorting_asc, html table.dataTable thead .sorting_desc{ cursor:pointer; } html .DTTT_button, html .DTTT.btn-group a{ background:var(--dc-surface) !important; border:1px solid var(--dc-border) !important; border-radius:var(--dc-radius-sm) !important; color:var(--dc-text-muted) !important; box-shadow:none !important; } html .DTTT_button:hover, html .DTTT.btn-group a:hover{ border-color:var(--dc-accent) !important; color:var(--dc-primary) !important; } html .pagination > li > a, html .pagination > li > span{ background-color:var(--dc-surface); border-color:var(--dc-border); color:var(--dc-text-muted); } html .pagination > li > a:hover{ background-color:var(--dc-accent-soft); border-color:var(--dc-border); color:var(--dc-primary); } /* ------------------------------------------------------------------------- 8. BOTONES Beyond: border-radius 2px + sombra dura. Aqui: 6px, altura 34, foco claro. ------------------------------------------------------------------------- */ html .btn{ border-radius:var(--dc-radius-sm); box-shadow:none; font-size:13px; font-weight:600; line-height:1.4; padding:7px 15px; border:1px solid transparent; transition:background-color var(--dc-trans), border-color var(--dc-trans), color var(--dc-trans), box-shadow var(--dc-trans); } html .btn:hover{ box-shadow:var(--dc-shadow-sm); } html .btn:active, html .btn.active{ box-shadow:inset 0 2px 4px rgba(0,0,0,.12); } html .btn:focus, html .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--dc-focus); } html .btn-sm,html .btn-xs{ border-radius:var(--dc-radius-sm); } html .btn-sm{ padding:5px 11px; font-size:12px; } html .btn-xs{ padding:3px 8px; font-size:11px; } html .btn.icon-only{ padding-left:0; padding-right:0; } html .btn-circle{ border-radius:var(--dc-radius-pill); } /* .shiny es el brillo de gradiente del template */ html .btn.shiny{ background-image:none !important; } /* Boton neutro: en Beyond es un gris sucio */ html .btn-default, html .btn.default{ background-color:var(--dc-surface) !important; background-image:none !important; border-color:var(--dc-border) !important; color:var(--dc-text) !important; } html .btn-default:hover, html .btn.default:hover{ background-color:var(--dc-surface-alt) !important; border-color:var(--dc-border-strong) !important; } /* Las variantes de color: se quita el degradado y se fija el hex del tema */ html .btn-primary{ background-color:var(--dc-primary) !important; background-image:none !important; } html .btn-primary:hover{ background-color:var(--dc-primary-hover) !important; } html .btn-info{ background-color:var(--dc-info) !important; background-image:none !important; } html .btn-info:hover{ background-color:#1F6FD8 !important; } html .btn-success{ background-color:var(--dc-success) !important; background-image:none !important; } html .btn-success:hover{ background-color:#25835A !important; } html .btn-warning{ background-color:var(--dc-warning) !important; background-image:none !important; } html .btn-warning:hover{ background-color:#BC7A03 !important; } html .btn-danger{ background-color:var(--dc-danger) !important; background-image:none !important; } html .btn-danger:hover{ background-color:#B63636 !important; } html .btn-primary,html .btn-info,html .btn-success, html .btn-warning,html .btn-danger{ color:#fff !important; } html .btn-group > .btn:first-child{ border-top-left-radius:var(--dc-radius-sm); border-bottom-left-radius:var(--dc-radius-sm); } html .btn-group > .btn:last-child{ border-top-right-radius:var(--dc-radius-sm); border-bottom-right-radius:var(--dc-radius-sm); } /* ------------------------------------------------------------------------- 9. FORMULARIOS + SELECT2 Ojo: .chzn-select (161 usos) lo inicializa Select2 3.4.5, no Chosen, y el CSS de Select2 viene compilado DENTRO de beyond.css. ------------------------------------------------------------------------- */ html .form-control{ background-color:var(--dc-surface); border:1px solid var(--dc-border); border-radius:var(--dc-radius-sm); box-shadow:none; color:var(--dc-text); font-size:13px; height:36px; padding:7px 11px; transition:border-color var(--dc-trans), box-shadow var(--dc-trans); } html textarea.form-control{ height:auto; } html .form-control:focus{ border-color:var(--dc-accent); box-shadow:0 0 0 3px var(--dc-focus); outline:none; /* beyond.min.css trae .form-control:focus{background-color:#fff;color:#262626}; sin estas dos lineas el campo enfocado se pone blanco en modo oscuro. */ background-color:var(--dc-surface); color:var(--dc-text); } html .form-control[readonly]{ background-color:var(--dc-surface-alt); } html .form-control[disabled], html fieldset[disabled] .form-control{ background-color:var(--dc-surface-alt); color:var(--dc-text-faint); cursor:not-allowed; } html .form-control::-webkit-input-placeholder{ color:var(--dc-text-faint); } html .form-control::placeholder{ color:var(--dc-text-faint); } html .control-label, html label{ color:var(--dc-text); font-size:12.5px; font-weight:600; } html .help-block{ color:var(--dc-text-muted); font-size:11.5px; } html .input-group-addon{ background-color:var(--dc-surface-alt); border-color:var(--dc-border); color:var(--dc-text-muted); border-radius:var(--dc-radius-sm); } /* Estados de bootstrapValidator */ html .has-error .form-control{ border-color:var(--dc-danger); } html .has-error .form-control:focus{ box-shadow:0 0 0 3px rgba(209,67,67,.25); } html .has-error .control-label, html .has-error .help-block{ color:var(--dc-danger); } html .has-success .form-control{ border-color:var(--dc-success); } html .has-success .control-label{ color:var(--dc-success); } /* Select2 3.4.5 */ html .select2-container .select2-choice, html .select2-container-multi .select2-choices{ background-image:none !important; background-color:var(--dc-surface) !important; border:1px solid var(--dc-border) !important; border-radius:var(--dc-radius-sm) !important; box-shadow:none !important; color:var(--dc-text) !important; height:36px; line-height:34px; } html .select2-container .select2-choice > .select2-chosen{ color:var(--dc-text); line-height:34px; } html .select2-container .select2-choice .select2-arrow{ background:none !important; background-image:none !important; border-left:1px solid var(--dc-border) !important; border-radius:0 var(--dc-radius-sm) var(--dc-radius-sm) 0; } /* Deshabilitado: la regla de arriba fija el fondo con !important, asi que sin esto un select2 sobre un sin clase. 39 etiquetas original que Select2 deja escondido y los de seleccion multiple, que no son un control de una linea. */ html select:not([multiple]):not([size]):not(.select2-offscreen){ background-color:var(--dc-surface); border:1px solid var(--dc-border); border-radius:var(--dc-radius-sm); box-shadow:none; color:var(--dc-text); font-size:13px; height:36px; padding:6px 10px; transition:border-color var(--dc-trans), box-shadow var(--dc-trans); } html select:not([multiple]):not([size]):not(.select2-offscreen):focus{ border-color:var(--dc-accent); box-shadow:0 0 0 3px var(--dc-focus); outline:none; } /* Dentro de la columna del campo ocupa el ancho completo, igual que los input */ html .form-horizontal .form-group > div[class*="col-"] > select:not([multiple]):not([size]):not(.select2-offscreen){ width:100%; } /* 17.4b Barras de filtro (.form-inline). Las 40 vistas que la usan son barras de busqueda (39 llevan optReg=search). El problema: Bootstrap le pone .form-control{width:auto} a todo lo que vive dentro de .form-inline, pero aqui el .form-group ademas carga una clase de columna (col-md-1, col-md-2, col-md-3 — 164 casos). El input se dibuja con el ancho de su contenido, mas ancho que la columna que lo contiene, y se monta sobre el campo siguiente: 45px de traslape medidos entre las dos fechas de validacion/consignas. En vez de pelear con la rejilla, la fila pasa a flex: los campos se reparten el ancho, nunca se encinan y bajan de renglon cuando no caben. */ html .form-inline .row{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; margin-left:0; margin-right:0; } html .form-inline .row > .form-group{ float:none; width:auto; /* min-width:0 es lo que permite que un item flex se encoja por debajo de su contenido; sin el, un nativo de la columna Tipo. */ html .dc-visitas .select2-container{ display:block; max-width:100%; } /* Visita ya iniciada por el repartidor: no se puede editar */ html .dc-visitas > tbody > tr.is-bloqueada > td{ background-color:var(--dc-surface-alt); } /* 21.4 Rango de horas: dos controles y la flecha, en un solo renglon */ .dc-rango{ display:flex; align-items:center; gap:6px; } html .dc-rango > .form-control{ /* flex:1 1 0 con min-width:0 reparte el ancho de la celda entre las dos horas; sin el min-width el ancho intrinseco del input (el `size` por omision de HTML) impide que se encojan y "08:30" sale cortado. */ flex:1 1 0; min-width:0; padding-left:6px; padding-right:6px; text-align:center; } .dc-rango-sep{ color:var(--dc-text-faint); flex:0 0 auto; font-size:11px; } /* 21.5 Dos controles apilados en una misma celda (contacto y telefono) */ .dc-stack{ display:flex; flex-direction:column; gap:6px; } /* 21.6 Numero de renglon: lo recalcula refreshVisitas() al agregar o quitar */ .dc-visitas .dc-num{ display:inline-block; } /* .step-content conserva su relleno de 24px en cualquier ancho, asi que el margen negativo no cambia: solo se aprieta el relleno de la franja. */ @media (max-width:767px){ html .step-content > form > .dc-form-actions, html .step-content > .dc-form-actions{ margin:20px -24px -22px; padding:14px 24px; } } /* ------------------------------------------------------------------------- 16. RESPONSIVO ------------------------------------------------------------------------- */ @media (max-width:991px){ html .page-content{ padding:0 15px; } .dc-login{ flex-direction:column; min-height:100vh; } .dc-login-brand{ flex:0 0 auto; padding:26px 24px; } .dc-login-brand h2{ font-size:20px; margin-bottom:0; } .dc-login-logo{ max-width:140px; } .dc-login-brand p,.dc-login-legal,.dc-login-brand:after{ display:none; } .dc-login-form{ flex:1 1 auto; padding:32px 24px; } } @media (max-width:991px){ /* Rejillas anidadas como .col-sm-10 > .col-xs-8.no-padding dejan al boton mas ancho que su columna y la vista entera se sale (dates/main/getlocation ya lo hacia antes del tema). Dejando que la etiqueta salte de renglon el boton se encoge hasta caber. */ html .btn{ white-space:normal; max-width:100%; } } @media (max-width:767px){ html .page-header{ padding-top:16px; } html .page-header .header-title h1{ font-size:17px; } html .widget-body{ padding:13px; } .dc-filterbar-row{ gap:10px; } .dc-field{ flex:1 1 100%; } .dc-kpi-value{ font-size:24px; } /* Las tablas anchas deben desplazarse dentro de su tarjeta, nunca la pagina */ html .table-responsive, .dc-table-card .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; } } /* Impresion */ @media print{ html body{ background:#fff; } html .navbar,html .page-sidebar,html .page-chatbar, html .widget-buttons,html .table-toolbar,html .dc-filterbar{ display:none !important; } html .page-content{ margin-left:0 !important; padding:0; } html .widget{ border:1px solid #ccc; box-shadow:none; break-inside:avoid; } }