/* Here, the content of the common custom CSS defined into Home - Setup - Display - CSS*/
/* ==========================================================================
   CCMedios - CSS personalizado para Dolibarr 23.0.3, tema md
   Destino: Configuración - Entorno - Tema y colores - campo CSS
            (constante MAIN_IHM_CUSTOM_CSS, pantalla admin/ihm.php)

   IMPORTANTE - por qué está escrito así:
   El campo CSS de Dolibarr se guarda pasando por GETPOST(..., 'restricthtml'),
   que sanea el contenido como si fuera HTML. Por eso aquí NO se usan los
   caracteres  mayor-que, menor-que, comillas dobles ni ampersand: se emplean
   solo selectores de descendencia y comillas simples. Si añades reglas
   nuevas, respeta esa norma o Dolibarr puede alterarlas al guardar.

   Los COLORES no van aquí: se configuran en los campos de esa misma pantalla
   (ver documento adjunto). Este archivo contiene solo lo que no tiene ajuste
   nativo.

   SI TODAVÍA NO HAS SUBIDO LA FUENTE (paso 3): borra el bloque @font-face de
   abajo antes de pegar esto. Si lo dejas apuntando a un archivo que no existe,
   el navegador pedirá un 404 en cada carga. Sin ese bloque todo funciona igual,
   con Segoe UI en lugar de Inter.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TIPOGRAFÍA
   Inter autoalojada. Un único archivo variable cubre del peso 100 al 900.

   El ZIP oficial de Inter trae el archivo en 'web/InterVariable.woff2', no en
   la raíz. En el servidor debe quedar exactamente así:
       htdocs/custom/ccmedios/fonts/InterVariable.woff2
       htdocs/custom/ccmedios/fonts/LICENSE.txt
   El resto del ZIP no se usa y no debe quedarse en el servidor.

   La familia se activa además con la constante THEME_FONT_FAMILY = Inter,
   de modo que si el archivo no estuviera disponible el sistema cae a
   Segoe UI y nada se rompe.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/dolibarr/htdocs/custom/ccmedios/fonts/InterVariable.woff2') format('woff2');
}

body,
input, select, textarea, button,
td, th, p, a, span, div.tabBar, .butAction {
	font-family: 'Inter', -apple-system, 'Segoe UI', roboto, arial, sans-serif;
}

body {
	-webkit-font-smoothing: antialiased;
}

/* Cifras de ancho fijo en las tablas: importes, stocks y coordenadas quedan
   alineados en columna. En una plataforma llena de números se nota mucho.
   Solo en celdas, no en el texto general. */
.tagtable td, .tagtable th,
table.liste td, table.liste th {
	font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   2. CABECERAS DE TABLA Y DE PANEL
   El fondo y el color de texto se fijan en Visualización. Aquí solo el peso
   y el filete de acento, que no tienen ajuste.
   -------------------------------------------------------------------------- */
tr.liste_titre th,
tr.liste_titre td,
th.liste_titre,
div.liste_titre {
	font-weight: 600;
	letter-spacing: 0.1px;
}

/* Filete de acento bajo la cabecera.
   El tema trae aquí un gris fijo, border-bottom 1px solid #aaa
   (style.css.php:5167), que no depende de ningún ajuste. Hay que
   sobrescribirlo. Lleva !important porque una regla del propio tema
   fuerza borde blanco cuando la cabecera es el primer tr de la tabla
   (style.css.php:5171). El color se toma de la variable del tema, que
   hereda del menú superior: así no hay que repetir el azul aquí. */
tr.liste_titre th,
tr.liste_titre td,
th.liste_titre {
	border-bottom: 2px solid var(--colortopbordertitle1) !important;
}

/* Cabecera de los paneles del tablero: el azul pasa de bloque a filete. */
tr.liste_titre.box_titre td {
	box-shadow: inset 3px 0 0 var(--colortopbordertitle1);
}

/* Fila de filtros: separada visualmente de la cabecera. */
tr.liste_titre_filter td {
	background-color: #f8fafc;
	border-bottom: 1px solid #e3e8ef;
}
tr.liste_titre_filter input.flat,
tr.liste_titre_filter select.flat {
	border: 1px solid #dbe2ea;
	border-radius: 4px;
	background-color: #ffffff;
}


/* --------------------------------------------------------------------------
   3. MENÚ SUPERIOR
   -------------------------------------------------------------------------- */
div.tmenu li.tmenu a.tmenuimage:hover,
ul.tmenu li.tmenu:hover {
	background-color: rgba(255, 255, 255, 0.10);
	border-radius: 6px 6px 0 0;
}

.mainmenuaspan {
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.2px;
}


/* --------------------------------------------------------------------------
   4. MENÚ IZQUIERDO

   Dolibarr genera cada entrada así:

       div.menu_contenu  [nbsp de sangrado]  a.vsmenu ... /a  br  /div

   Dos detalles del núcleo condicionan todo lo que se puede hacer aquí:

   a) La sangría de los niveles 2 y siguientes son entidades nbsp sueltas
      impresas DENTRO de .menu_contenu y ANTES del enlace
      (eldy.lib.php:1003-1008).
   b) Cada entrada se cierra con un br suelto (eldy.lib.php:1102-1105).

   Poner el enlace en display block rompe las dos cosas: los nbsp pasan a
   formar su propia línea encima del enlace y el br añade otra debajo. Por eso
   aparecían huecos justo en las entradas de segundo nivel de Contabilidad,
   Comercial, Proyectos, Terceros y Agenda.

   Por tanto el enlace se deja EN LÍNEA, como espera el tema, y el relleno y el
   resaltado se llevan al contenedor, que ya es de bloque. Así el nbsp comparte
   línea con el enlace y además vuelve a sangrar de verdad.
   -------------------------------------------------------------------------- */
.vmenu .menu_titre {
	font-weight: 600;
	font-size: 13.5px;
}

.vmenu .menu_contenu br {
	display: none;
}

.vmenu .menu_contenu {
	padding: 5px 10px 5px 12px;
	line-height: 1.45;
	border-left: 2px solid transparent;
	border-radius: 0 4px 4px 0;
}

.vmenu .menu_contenu:hover {
	background-color: #f2f6fc;
	border-left-color: #00469e;
}

.vmenu .menu_contenu a {
	font-size: 13.5px;
	font-weight: 400;
}

.vmenu .menu_contenu a:hover {
	color: #00469e;
	text-decoration: none;
}

/* Nota: no hay resaltado de la entrada activa. Dolibarr 23 no marca con
   ninguna clase el submenú de la página en la que estás: todos los enlaces
   salen como a.vsmenu a secas (eldy.lib.php:1092). Lo comprobé buscando en
   todo htdocs. La maqueta lo enseñaba y no era realizable. */


/* --------------------------------------------------------------------------
   5. BOTONES DE ACCIÓN
   El color del botón principal se fija en Visualización. Aquí la forma y el
   botón de borrado, que en Dolibarr sí tiene clase propia (butActionDelete).
   -------------------------------------------------------------------------- */
/* Opción P2: botones en píldora azul clara, a juego con los estados.

   AVISO PARA EL FUTURO: con este bloque, el campo 'Color del botón de acción'
   de Tema y colores deja de mandar sobre estos botones, porque aquí se fija el
   fondo directamente. Si algún día quieres volver al botón sólido, borra este
   bloque y ese campo vuelve a gobernar.

   El hover sí rellena en sólido: es lo que mantiene claro que el elemento se
   pulsa, sin cambiar el aspecto en reposo. */
.butAction, .butActionNew, .butActionDelete, .butActionRefused {
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.3px;
	box-shadow: none;
	text-transform: uppercase;
	padding: 8px 20px;
}

.butAction, .butActionNew {
	background: #e8f0fb;
	color: #00469e !important;
	border: 1px solid #cfe0f5;
}

.butAction:hover, .butActionNew:hover {
	background: #00469e;
	color: #ffffff !important;
	border-color: #00469e;
	filter: none;
	box-shadow: none;
}

/* Borrado: acción destructiva, en rojo. */
.tabsAction .butActionDelete,
div.tabsAction .butActionDelete {
	background: #fef3f2;
	color: #b42318 !important;
	border: 1px solid #f0c2bd;
}
.tabsAction .butActionDelete:hover,
div.tabsAction .butActionDelete:hover {
	background: #b42318;
	color: #ffffff !important;
	border-color: #b42318;
	filter: none;
}


/* --------------------------------------------------------------------------
   5-bis. BOTONES DE FORMULARIO: CREAR, ANULAR, GUARDAR...

   Son los de las pantallas de alta y edición, y usan la clase .button, NO
   .butAction. Por eso se quedaron con el aspecto viejo cuando cambiamos los
   otros.

   El tema los pinta con un degradado azul fijo, de #0088cc a #0044cc
   (btn.inc.php:211-223), y ese degradado NO depende de ningún ajuste: no hay
   campo en Tema y colores que los gobierne. Solo se pueden cambiar por CSS.
   Hay que anular el background-image además del background-color, o el
   degradado sigue tapando el fondo nuevo.
   -------------------------------------------------------------------------- */
.button {
	background-color: #e8f0fb;
	background-image: none;
	color: #00469e !important;
	border: 1px solid #cfe0f5;
	border-radius: 999px;
	text-shadow: none;
	box-shadow: none;
	font-weight: 600;
	padding: 6px 18px;
}

.button:hover {
	background-color: #00469e;
	background-image: none;
	color: #ffffff !important;
	border-color: #00469e;
}

/* Anular no debe parecer la acción principal. El tema no le da regla propia,
   así que hereda de .button y sale idéntico a Crear: mismo azul, mismo peso.
   Se pasa a gris neutro. */
.button.button-cancel {
	background-color: #ffffff;
	background-image: none;
	color: #5b6b7f !important;
	border-color: #cbd5e1;
}

.button.button-cancel:hover {
	background-color: #f1f5f9;
	color: #14304f !important;
	border-color: #94a3b8;
}

.button:disabled,
.button:disabled:hover {
	background-color: #f1f5f9;
	background-image: none;
	color: #94a3b8 !important;
	border-color: #e3e8ef;
	cursor: not-allowed;
}


/* --------------------------------------------------------------------------
   6. PESTAÑAS DE FICHA
   -------------------------------------------------------------------------- */
div.tabs a.tab.tabactive,
a.tabactive {
	box-shadow: inset 0 2px 0 var(--colorbackhmenu1);
	font-weight: 600;
}


/* --------------------------------------------------------------------------
   6-bis. TARJETAS DE CIFRAS DEL PANEL DE INICIO
   El cuadrado del icono lo pinta --colorboxiconbg, que el tema fija en #eee
   sin ningún ajuste asociado (style.css.php:452). Un gris neutro al lado del
   azul corporativo queda apagado. Se sustituye por el azul claro de la paleta.
   Va sobre :root y funciona porque el CSS personalizado se carga después de la
   hoja del tema (main.inc.php:1843 y 1903).
   Los iconos conservan su color por módulo: son la única pista de color que
   distingue una tarjeta de otra.
   -------------------------------------------------------------------------- */
:root {
	--colorboxiconbg: #eaf1fb;
}


/* --------------------------------------------------------------------------
   6-ter. ESTADOS 'OK' EN PÍLDORA CLARA  (opción D, a prueba)

   El tema genera cada estado con color y fondo en !important
   (badges.inc.php:304-312), así que hay que repetir el !important para poder
   sobrescribirlo.

   No es un estilo ajeno a la plataforma: Dolibarr ya pinta así los estados 4b
   y 7, con fondo blanco, texto verde y borde verde (badges.inc.php:279-293).
   Esto acerca el estado 4 a lo que ya hacen sus hermanos.

   Se excluyen los puntos redondos de los paneles del tablero con :not, porque
   ahí no hay texto y en claro se volverían casi invisibles.

   PARA VOLVER A LA OPCIÓN B (verde vivo con texto oscuro), cambia solo estos
   dos valores:  background-color: #2ecc71   y   color: #0b3d20
   -------------------------------------------------------------------------- */
.badge-status4:not(.badge-dot),
.badge-status4:not(.badge-dot):hover,
.badge-status11:not(.badge-dot),
.badge-status11:not(.badge-dot):hover,
.badge-success:not(.badge-dot) {
	background-color: #e7f6ed !important;
	color: #1c7c43 !important;
	border-color: #bfe3cd !important;
}

/* Forma de píldora para todos los estados, para que el verde claro no sea
   además el único con una forma distinta. Si prefieres mantener las esquinas
   rectas del tema, borra esta regla. */
.badge-status:not(.badge-dot) {
	border-radius: 999px;
}

/* Etiquetas de categoría en píldora también.
   Solo la FORMA: el color de fondo lo pone Dolibarr en un style en línea a
   partir de llx_categorie.color (html.form.class.php:10228), y ese color es un
   dato de cada categoría, no del tema. Si se pisara desde aquí, todas las
   categorías se verían iguales y se perdería justo su utilidad. */
.select2-search-choice-dolibarr.noborderoncategories {
	border-radius: 999px;
}


/* --------------------------------------------------------------------------
   7. TABLAS Y PANELES: densidad y relieve
   -------------------------------------------------------------------------- */
.tagtable td, .tagtable th {
	font-size: 13px;
	padding: 6px 10px;
}

.box, .boxdiv, div.divboxtable {
	border-radius: 8px;
	border: 1px solid #e3e8ef;
	box-shadow: 0 1px 3px rgba(16, 36, 64, 0.07);
}

/* Título de área: 'PRODUCTOS (53)', 'ÁREA FACTURACIÓN Y PAGOS'... */
.div_titre, .titre {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
}

/* Etiquetas de campo en las fichas: gris frío legible. */
.tableforfield td.titlefield,
table.tableforfield td.titlefield {
	color: #5b6b7f;
	font-weight: 500;
}


/* --------------------------------------------------------------------------
   8. PANTALLA DE ACCESO
   El fondo se sube desde Visualización (MAIN_LOGIN_BACKGROUND).
   Aquí solo la tarjeta de acceso.
   -------------------------------------------------------------------------- */
.bodylogin .login_table,
div.login_table {
	border-radius: 12px;
	box-shadow: 0 14px 40px rgba(8, 32, 68, 0.20);
	padding: 26px 30px;
}

/* Rótulo de empresa sobre la tarjeta. El tema lo fija en gris claro CON
   !important (style.css.php:3610), así que la única forma de ganarle es repetir
   el !important. Sobre el fondo oscuro anterior ese gris funcionaba; sobre el
   fondo azul claro nuevo se pierde por completo. */
.bodylogin .login_table_title,
.bodylogin a.login_table_title {
	color: #14304f !important;
	font-weight: 600;
	letter-spacing: 0.6px;
}

/* Enlaces secundarios del acceso: '¿Olvidó su contraseña?' y 'Volver a la
   página de conexión'. El tema los deja en #888 !important
   (style.css.php:3846), que sobre blanco da 3,5:1, por debajo del mínimo de
   4,5:1. Y además son enlaces: deben parecerlo. */
.bodylogin .alogin,
.bodylogin .alogin:hover,
.bodylogin .aloginpasswordforgotten {
	color: #00469e !important;
}

.bodylogin input.flat {
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background-color: #ffffff;
	padding: 8px 10px;
}

/* El botón de acceso se queda SÓLIDO a propósito, solo en forma de píldora.
   En esa pantalla no hay estados con los que confundirse y es la única acción
   posible: debe pesar. */
.butActionLogin {
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

/* El fondo amarillento de usuario y contraseña no lo pone Dolibarr: es el
   autorrelleno de Chrome, que pinta los campos recordados y gana a cualquier
   background-color. El único modo de taparlo es una sombra interior sólida.
   OPCIONAL: si prefieres conservar el aviso visual de que Chrome ha rellenado
   el campo, borra este bloque. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	box-shadow: 0 0 0 1000px #ffffff inset;
	-webkit-text-fill-color: #1f2937;
	caret-color: #1f2937;
}