/* 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).
   -------------------------------------------------------------------------- */
.butAction, .butActionNew, .butActionDelete, .butActionRefused {
	border-radius: 6px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.3px;
	box-shadow: none;
	text-transform: uppercase;
}

.butAction:hover, .butActionNew:hover {
	filter: brightness(0.90);
	box-shadow: none;
}

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


/* --------------------------------------------------------------------------
   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;
}


/* --------------------------------------------------------------------------
   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;
}

.butActionLogin {
	border-radius: 6px;
	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;
}