/* ============================================================================
   TEMA DEL CLIENTE — e-distribución (www.edistribucion.com)
   Extraído de su web el 2026-07-16:
   - Azul corporativo #0441BD (títulos, botones, enlaces, pie)
   - Barra superior blanca de 54px con logo a color
   - CTAs en píldora azul con texto blanco
   - Tipografía RoobertENEL (propietaria de Enel) → se usa su pila de
     respaldo declarada: Calibri, Tahoma, Helvetica...
   ========================================================================== */

:root {
	/* Colores principales */
	--color-cabecera:        #ffffff;
	--color-cabecera-texto:  #111111;
	--color-pie:             #0441bd;
	--color-pie-texto:       #ffffff;
	--color-fondo:           #ffffff;
	--color-texto:           #0a0a0a;
	--color-titulos:         #0441bd;
	--color-acento:          #0441bd;

	/* Botón principal */
	--color-boton:           #0441bd;
	--color-boton-texto:     #ffffff;

	/* Botón de enviar del chat */
	--color-boton-enviar:    #0441bd;

	/* Paneles de la videollamada (grises claros, estilo limpio de su web) */
	--color-panel:           #f4f4f4;
	--color-panel-chat:      #eaeaea;

	/* Tipografía (pila de respaldo de RoobertENEL, sin la fuente propietaria) */
	--fuente-principal:      Calibri, 'Myriad Pro', Tahoma, Geneva, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--fuente-titulos:        Calibri, 'Myriad Pro', Tahoma, Geneva, 'Helvetica Neue', Helvetica, Arial, sans-serif;

	/* Cabecera blanca de 54px total como la suya (37 + padding x2 + borde),
	   logo renderizado a 26px de alto (igual que en su barra) */
	--cabecera-alto:         37px;
	--logo-alto:             26px;
}

/* ----------------------------------------------------------------------------
   Ajustes específicos de e-distribución
--------------------------------------------------------------------------- */

/* Cabecera blanca sobre fondo blanco: línea de separación sutil */
.cabecera {
	border-bottom: 1px solid #e5e5e5;
}

/* Texto base como el suyo: 18px con peso ligero (Calibri Light) */
body {
	font-size: 18px;
	font-weight: 300;
}

/* Título como sus encabezados de sección: 40px, peso 400, fluido en móvil */
.secciones h1 {
	font-weight: 400;
	font-size: clamp(26px, 5vw, 40px);
}

/* Hover de los botones de marca, como el "Accede" de su web:
   el fondo pasa a blanco y el texto al azul, con borde azul.
   El borde va también en el estado normal para que el botón no cambie
   de tamaño al pasar el ratón. */
.aceptarbtn,
.buttonOff,
#conversejs .chatbox .sendXMPPMessage .send-button {
	border: 2px solid #0441bd;
	box-sizing: border-box;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.aceptarbtn:hover,
.buttonOff:hover,
#conversejs .chatbox .sendXMPPMessage .send-button:hover {
	background-color: #ffffff !important;
	color: #0441bd !important;
}

/* --- Pie en tres columnas, como el de su web -------------------------------
   Razón social a la izquierda, logo de SVIsual centrado e "Información legal"
   a la derecha. El texto y el enlace salen de config/cliente.php. */
.pie {
	flex-wrap: wrap;
	gap: 10px clamp(14px, 3vw, 32px);
	padding: 14px clamp(16px, 3vw, 34px);
	height: auto;
	min-height: 105px;
	box-sizing: border-box;
}

/* Los dos textos ocupan la mitad del hueco libre cada uno (flex-basis 0), así
   el logo queda centrado de verdad aunque un texto sea mucho más largo que el
   otro. Si dejan de caber en una línea, el flex-wrap los baja solo: no hace
   falta ninguna media query. */
.pie-copyright,
.pie-legal {
	flex: 1 1 0;
	white-space: nowrap;
	color: var(--color-pie-texto);
	font-size: clamp(13px, 1.4vw, 15px);
	font-weight: 300;
}

.pie-copyright {
	text-align: left;
}

.pie-legal {
	text-align: right;
}

.pie-logo {
	flex: 0 0 auto;
}

.pie-legal a {
	color: var(--color-pie-texto);
	text-decoration: none;
}

.pie-legal a:hover {
	text-decoration: underline;
}