/* Here, the content of the common custom CSS defined into Home - Setup - Display - CSS*/
.aversion {display:none;} .user-body {display:none;} :root { --inputbordercolor: rgb(38,60,92); --colorbackhmenu1: rgb(38,60,92); --colorbackbody: rgb(255,255,255); --colortextbackhmenu: #FFFFFF; --colortextlink:#263c5c; } .divadvancedsearchfieldcompinput, div.tabBar input, div.tabBar input.flat, div.tabBar textarea, div.tabBar textarea.flat, div.tabBar form.flat select, div.tabBar select, div.tabBar select.flat, div.tabBar .dataTables_length label select { border: solid 1px rgb(38,60,92); padding: 12px; } /* ================================================================= VERSIÓN FINAL v1 - MODERNIZACIÓN COMPLETA (POR IDOO) ================================================================= */ /* ================================================================= 1-6. ESTILOS GENERALES, FICHA, PESTAÑAS, BOTONES, MENÚ ================================================================= */ body { background: linear-gradient(135deg, #f5f7fa 0%, #e0eafc 100%) !important; font-family: Arial, sans-serif; } .fiche { border-radius: 16px !important; border: none !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important; padding: 25px !important; margin-top: 20px !important; background-color: #ffffff !important; } .fiche .fichetitre { background: none !important; border-bottom: 2px solid #eee !important; padding-bottom: 15px !important; margin-bottom: 20px !important; } .tabs { border-bottom: none !important; } .tabs a, .tabs span { border: none !important; border-radius: 8px !important; padding: 10px 15px !important; margin-right: 5px !important; background-color: #f0f4f8 !important; color: #555 !important; transition: all 0.3s ease; border-top: none !important; } .tabs a.tabactive, .tabs span.tabactive, .tabs a.selected, div.tabBar > a.selected, .tab.tabactive a { background-color: #5E83BA !important; color: #ffffff !important; font-weight: bold; border-top: none !important; box-shadow: 0 2px 5px rgba(94, 131, 186, 0.3); } .tabs a:not(.tabactive):hover { background-color: #dbe4f0 !important; color: #333 !important; } textarea { background-color: #fdfdff !important; border: 1px solid #e0e0e0 !important; border-radius: 12px !important; padding: 15px !important; font-family: 'Courier New', Courier, monospace !important; font-size: 14px !important; box-shadow: none !important; transition: border-color 0.3s, box-shadow 0.3s; } textarea:focus { outline: none; border-color: #5E83BA !important; box-shadow: 0 0 0 3px rgba(94, 131, 186, 0.2) !important; } .button, input[type="submit"], input[type="button"], a.butAction, a.butActionDelete, span.butActionDelete, #action-clone { border: none !important; border-radius: 50px !important; padding: 12px 25px !important; font-weight: bold !important; cursor: pointer; transition: all 0.3s ease !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); text-decoration: none !important; display: inline-block; vertical-align: middle; } .button, input[type="submit"], a.butAction, #action-clone { background-color: #5E83BA !important; color: #ffffff !important; } .button:hover, input[type="submit"]:hover, a.butAction:hover, #action-clone:hover { background-color: #4A6B9A !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); color: #ffffff !important; } input[type="button"].button, .button.butActionRefused, .box .button { background-color: #f0f0f0 !important; color: #555 !important; border: 1px solid #ddd !important; } input[type="button"].button:hover, .button.butActionRefused:hover, .box .button:hover { background-color: #e0e0e0 !important; border-color: #ccc !important; } a.butActionDelete, .butActionRefused, span.butActionDelete { background-color: #dc3545 !important; color: #ffffff !important;} a.butActionDelete:hover, .butActionRefused:hover, span.butActionDelete:hover { background-color: #c82333 !important; color: #ffffff !important;} .divButAction { text-align: center; padding-top: 10px; } #mainmenua_left { background-color: #f8f9fa !important; border-right: 1px solid #e9ecef !important; } /* ================================================================= 7. TABLAS Y LISTAS ================================================================= */ .div-table-responsive, .div-table-responsive-no-min { background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px !important; margin-top: 20px; overflow: hidden; } .liste_titre_filter { background-color: transparent !important; border: none !important; padding: 0 0 20px 0 !important; margin-bottom: 0 !important; } .tagtable, .liste { width: 100% !important; border-collapse: collapse !important; border-style: hidden !important; background-color: transparent !important; } .tagtable .liste_titre th, .liste .liste_titre th { text-align: left !important; padding: 15px 10px !important; font-weight: bold !important; color: #5E83BA !important; border-bottom: 2px solid #dee2e6 !important; background: none !important; font-size: 13px; } .tagtable tr.oddeven, .liste tr.oddeven { background-color: #ffffff !important; border-bottom: 1px solid #e9ecef !important; transition: background-color 0.2s ease; } .tagtable tr.oddeven:last-child, .liste tr.oddeven:last-child { border-bottom: none !important; } .tagtable tr.oddeven td, .liste tr.oddeven td { padding: 10px 5px !important; vertical-align: middle !important; } .tagtable tr.oddeven:hover, .liste tr.oddeven:hover { background-color: #eff6ff !important; } .liste_total td { background-color: #e9ecef !important; font-weight: bold !important; color: #343a40 !important; border-top: 2px solid #dee2e6 !important; padding: 15px 10px !important; } .statusref { border-radius: 50px !important; padding: 5px 12px !important; font-size: 12px !important; font-weight: bold !important; text-align: center; color: #fff; min-width: 80px; display: inline-block; } .status0 { background-color: #6c757d !important; color: #ffffff !important; } .status1 { background-color: #ffc107 !important; color: #3d3301 !important; } .status4, .status6 { background-color: #28a745 !important; color: #ffffff !important; } .status-1, .status5 { background-color: #dc3545 !important; color: #ffffff !important; } /* ================================================================= 8. CAJAS DE CONTENIDO ================================================================= */ .box { background-color: #ffffff !important; border: 1px solid #e9ecef !important; border-radius: 12px !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important; margin-top: 25px !important; overflow: hidden; box-sizing: border-box !important; } .box_titre, .box .titre { background: none !important; border-bottom: 1px solid #eee !important; padding: 15px 20px !important; font-size: 14px !important; font-weight: bold !important; color: #5E83BA !important; } /* ================================================================= 9. LAYOUT DE COLUMNAS ================================================================= */ .fichecenter, .twocolumns { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; } div.fichehalfleft, div.fichehalfright { flex-basis: 49% !important; width: 49% !important; float: none !important; box-sizing: border-box !important; margin: 0 !important; } .fichecenter > .twocolumns { flex-basis: 100% !important; width: 100% !important; } td.right { color: #343a40 !important; font-weight: 500; } .tabBar .badge, .tabs .badge, .badge.nbtab { color: #5E83BA !important; background-color: #ffffff !important; font-weight: bold !important; } /* ================================================================= 10. ESTILOS PARA ELEMENTOS ESPECÍFICOS (Select2, etc.) ================================================================= */ .select2-container--default .select2-selection--single { background-color: #f7f7f7 !important; border: 1px solid #e0e0e0 !important; border-radius: 12px !important; height: 40px !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px !important; padding-left: 15px !important; color: #333 !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px !important; right: 5px !important; } .select2-dropdown { border-radius: 12px !important; border: 1px solid #e0e0e0 !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important; } .fiche .tabBar .badge-status { border-radius: 50px !important; padding: 6px 15px !important; font-size: 14px !important; font-weight: bold !important; } .fiche .tabBar .badge-status0 { background-color: #6c757d !important; color: #ffffff !important; } .fiche .tabBar .badge-status1 { background-color: #ffc107 !important; color: #3d3301 !important; } .fiche .tabBar .badge-status4, .fiche .tabBar .badge-status6 { background-color: #28a745 !important; color: #ffffff !important; } .fiche .tabBar .badge-status-1, .fiche .tabBar .badge-status5 { background-color: #dc3545 !important; color: #ffffff !important; } .table-fiche-title { border-bottom: 1px solid #eee !important; margin-top: 0px; padding-bottom: 10px; } .table-fiche-title .titre { font-size: 14px !important; font-weight: bold !important; color: #5E83BA !important; } .table-fiche-title + .div-table-responsive-no-min { margin-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top: none !important; } .urllink input[type="text"] { width: calc(100% - 40px) !important; padding: 12px 15px !important; border: 1px solid #e0e0e0 !important; background-color: #f7f7f7 !important; border-radius: 12px !important; font-size: 14px; color: #333 !important; box-shadow: none !important; display: inline-block; vertical-align: middle; } .urllink a { padding: 10px; vertical-align: middle; } /* ================================================================= 11. ÍCONOS DEL MENÚ SUPERIOR ================================================================= */ #id-top .mainmenu span.fas { font-weight: 400 !important; font-size: 1.3em !important; } #id-top .tmenusel .mainmenu span.fas { font-weight: 900 !important; } #id-top #mainmenutd_menu .mainmenu span.fas { font-weight: 400 !important; } /* ================================================================= 12. MENÚ LATERAL ================================================================= */ .vmenu { padding: 15px 10px !important; } .blockvmenu { margin-bottom: 10px !important; border-bottom: 1px solid #e9ecef; padding-bottom: 10px; } .blockvmenulast { border-bottom: none; } .menu_titre a.vmenu { font-weight: bold !important; color: #343a40 !important; font-size: 1em !important; padding: 8px 10px !important; display: flex; align-items: center; margin-bottom: 5px; } .menu_titre a.vmenu .fas { font-size: 1.1em; margin-right: 8px; width: 20px; text-align: center; } .menu_contenu { /* V4 CORRECCIÓN: Usamos Flexbox para la alineación vertical perfecta */ display: flex !important; align-items: center !important; margin: 0 0 2px 0 !important; /* Espacio solo abajo */ padding: 0 !important; border-radius: 6px; transition: background-color 0.2s ease-in-out; } /* Ocultamos el que causa el espacio extra */ .menu_contenu > br { display: none !important; } .menu_contenu a.vsmenu { flex-grow: 1; /* El enlace ocupa todo el espacio disponible */ padding: 9px 15px !important; color: #495057 !important; text-decoration: none !important; font-size: 0.9em; display: inline-block !important; /* Cambiamos a inline-block */ } .menu_contenu:hover { background-color: #e9ecef !important; } .menu_contenu:hover a.vsmenu { color: #000 !important; } .menu_contenu.active, .menu_contenu_sel { background-color: #5E83BA !important; box-shadow: 0 4px 12px rgba(94, 131, 186, 0.4); } .menu_contenu.active a.vsmenu, .menu_contenu_sel a.vsmenu { color: #ffffff !important; font-weight: bold !important; } /* ================================================================= 13. NUEVO: ESTILO PARA GRÁFICAS Y WIDGETS DEL DASHBOARD ================================================================= */ .box, .boxstats { background-color: #ffffff !important; border: 1px solid #e9ecef !important; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07) !important; margin-top: 25px !important; overflow: hidden; box-sizing: border-box !important; } /* Títulos de las cajas de gráficas */ .box_titre, .box .titre, .liste_titre { background: none !important; border-bottom: 1px solid #eee !important; padding: 15px 20px !important; font-size: 14px !important; font-weight: bold !important; color: #5E83BA !important; } /* --- Estilos específicos para las gráficas --- */ /* Centramos la gráfica y le damos algo de aire */ .dolgraphchart { padding: 20px; } /* Mejoramos la leyenda de la gráfica (Chart.js) */ .chartjs-legend ul { padding-left: 15px !important; } .chartjs-legend li { color: #495057 !important; font-size: 13px !important; } /* Hacemos que los cuadraditos de color de la leyenda sean redondeados */ .chartjs-legend li span { border-radius: 4px !important; } /* --- Barra de resumen debajo de la gráfica (ej. "Número total de terceros") --- */ .boxstats .liste_total td { background-color: #f8f9fa !important; /* Un gris muy claro */ font-weight: bold !important; color: #343a40 !important; border-top: 1px solid #e9ecef !important; padding: 15px 20px !important; } /* Contenedores de los KPIs superiores (Facturas, Proyectos, etc.) */ .box-flex-container { gap: 15px !important; /* Espacio entre las tarjetas de KPI */ } .box-flex { border-radius: 12px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07) !important; border: 1px solid #e9ecef !important; padding: 15px !important; } /* Esta regla apunta a la 'caja' que contiene la pestaña activa y elimina el borde superior que causa la barra azul. */ .tab.tabactive, .tabsElemActive { border: none !important; border-top: none !important; } /* ================================================================= 15. RESPONSIVIDAD PARA MÓVILES (Adaptación de Columnas) ================================================================= */ @media (max-width: 768px) { /* --- Columnas --- */ /* Cuando la pantalla es estrecha, hacemos que cada columna ocupe el 100% del ancho */ div.fichehalfleft, div.fichehalfright { flex-basis: 100% !important; width: 100% !important; margin-bottom: 20px !important; /* Añadimos espacio entre las cajas apiladas */ } /* --- Tarjeta Principal --- */ /* Reducimos el padding en la tarjeta principal para dar más espacio al contenido */ .fiche { padding: 15px !important; } /* --- Botones --- */ /* Hacemos los botones un poco más pequeños en móvil */ .button, input[type="submit"], input[type="button"], a.butAction, a.butActionDelete { padding: 10px 20px !important; font-size: 14px !important; } /* --- Tablas --- */ /* Reducimos el tamaño del texto y el padding en las celdas para que quepa más información */ .tagtable tr.oddeven td, .liste tr.oddeven td, .tagtable .liste_titre th, .liste .liste_titre th { padding: 12px 8px !important; font-size: 13px; } /* --- Menú lateral --- */ /* En móvil, Dolibarr oculta el menú, pero si apareciera, reducimos el texto */ .menu_contenu a.vsmenu { font-size: 0.85em; } } @media (max-width: 768px) { /* --- Columnas --- */ div.fichehalfleft, div.fichehalfright { flex-basis: 100% !important; width: 100% !important; margin-bottom: 20px !important; } /* --- Tarjeta Principal --- */ .fiche { padding: 15px !important; } /* --- Botones --- */ .button, input[type="submit"], input[type="button"], a.butAction, a.butActionDelete { padding: 10px 20px !important; font-size: 14px !important; } /* --- Tablas --- */ .tagtable tr.oddeven td, .liste tr.oddeven td, .tagtable .liste_titre th, .liste .liste_titre th { padding: 12px 8px !important; font-size: 13px; } /* --- Menú lateral --- */ .menu_contenu a.vsmenu { font-size: 0.85em; } /* --- Iconos del Menú Superior (Móvil) --- */ /* Reducimos el tamaño de los íconos en la barra superior para que no se vean tan grandes */ #id-top .mainmenu span.fas { font-size: 1.1em !important; line-height: 1 !important; } #id-top .tmenucenter { padding: 8px 4px !important; } }