/*
* plazatio_v2.css
* Etapa 2: Actualización y armonización del diseño
* Aplicar DESPUÉS de content.css y content_extra.css en _header.php
*
* INSTRUCCIONES DE INSTALACIÓN:
* 1. Copiar este archivo a /var/www/html/static/style/css/plazatio_v2.css
* 2. Añadir en _header.php, justo después de la línea de content_extra.css:
*
* 3. Aplicar los cambios de _header.php descritos al final de este archivo
*/
/* =============================================================================
* 1. TIPOGRAFÍA — Armonización con ctaa.net / ecuv-ctaa.com / cpdalicante.com
* Fuente: Forma DJR Text (Adobe Fonts / Typekit, kit zbl0feb)
* INSTRUCCIÓN ADICIONAL: añadir en _header.php, dentro de , antes del
* cierre :
*
* ============================================================================= */
body,
html {
font-family: "forma-djr-text", Arial, sans-serif;
font-weight: 400;
font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
font-family: "forma-djr-text", Arial, sans-serif;
font-weight: 500;
}
h2 { font-size: 20px; font-weight: 500; line-height: 34px; }
h3 { font-size: 15px; font-weight: 500; line-height: 20px; }
h4 { font-size: 15px; font-weight: 500; line-height: 18px; }
.box-grey1,
.box-grey1-margin {
font-family: "forma-djr-text", Arial, sans-serif;
font-weight: 400;
}
/* Nav y botones con la misma fuente */
.nav ul li a,
.btn,
input,
select,
textarea,
label {
font-family: "forma-djr-text", Arial, sans-serif;
}
/* =============================================================================
* 2 + 3. MENÚ PRINCIPAL — Fuente más grande y centrado en todo el ancho
* ============================================================================= */
/* La barra de nav ocupa todo el ancho disponible del container */
.nav {
font-size: 14px; /* antes: 13px */
height: 40px;
}
/* Los li se distribuyen uniformemente en todo el ancho */
.nav ul {
display: flex;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.nav ul li {
flex: 1;
display: flex !important;
float: none !important;
justify-content: center;
align-items: center;
border-right: 1px dotted #eee;
position: relative;
}
.nav ul li:first-child {
border-left: 1px dotted #eee;
}
/* El enlace principal de cada elemento ocupa todo el li */
.nav ul li > a:first-child {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 8px;
text-align: center;
font-size: 14px;
font-weight: 500;
}
/* Submenús: posición absoluta para no afectar el flex */
.nav ul li ul.with-nav-content {
position: absolute;
top: 40px;
left: 0;
z-index: 999;
}
/* =============================================================================
* 4. BOTÓN "IDENTIFICARSE" → "INICIAR SESIÓN"
* (El cambio de texto se hace en _header.php, ver instrucciones al final)
* Aquí solo ajustamos el estilo si hace falta
* ============================================================================= */
.login a {
font-family: "forma-djr-text", Arial, sans-serif;
font-weight: 500;
font-size: 13px;
}
/* Estilo del botón "Iniciar sesión" similar a las otras webs del CTAA */
.login a,
.header .login a {
background: none;
border: 1px solid #00aca0;
border-radius: 3px;
color: #00aca0;
padding: 4px 12px;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.login a:hover,
.header .login a:hover {
background: #00aca0;
color: #fff;
}
/* =============================================================================
* 7. CABECERA MÁS ALTA — Agrandar logos de Plazatio y CSCAE
* ============================================================================= */
/* Aumentar altura total de la cabecera */
.header {
height: 100px !important; /* antes: 81px */
}
/* El spacer que evita que el contenido quede bajo el header fixed */
div[style*="height:81px"] {
height: 100px !important;
}
/* Zona del header (logos + buscador) */
.header header {
height: 60px !important; /* antes: 41px */
}
/* Logo Plazatio: más grande y centrado verticalmente */
.header header h1 {
top: 10px !important; /* antes: 5px */
}
.header header h1 img {
height: 42px !important; /* antes implícito, ~28px */
width: auto !important;
}
/* Logo CSCAE: más grande */
.header header .logo {
width: 155px !important; /* antes: 130px */
height: 31px !important; /* antes: 26px */
top: 12px !important; /* reposicionar verticalmente */
left: 215px !important; /* ajustar por el logo Plazatio más grande */
}
/* Buscador: centrar verticalmente en la nueva altura */
.header header form {
margin-top: 16px !important; /* antes: 6px */
}
/* =============================================================================
* 8. LAYOUT CABECERA — Logos a la izquierda, buscador e "Iniciar sesión" a la derecha
* usando todo el ancho disponible
* ============================================================================= */
/* El container de la cabecera usa todo el ancho */
.container-fluid.header .container {
width: 100%;
max-width: 100%;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
.header header {
display: flex;
align-items: center;
width: 100%;
position: relative;
}
/* Logos agrupados a la izquierda */
.header header h1 {
position: relative !important;
top: auto !important;
left: auto !important;
flex-shrink: 0;
margin: 0;
margin-right: 12px;
}
.header header .logo {
position: relative !important;
top: auto !important;
left: auto !important;
flex-shrink: 0;
margin-right: 0;
}
/* Spacer que empuja buscador y login a la derecha */
.header header form.form-inline {
margin-left: auto !important;
margin-top: 0 !important;
float: none !important;
flex-shrink: 0;
}
/* Select de provincia: pegado al buscador */
.header header form[style*="margin-right"] {
float: none !important;
flex-shrink: 0;
margin-top: 0 !important;
}
/* Login: a la derecha del todo */
.header .login,
.header .login-user,
.header .login-bullets {
flex-shrink: 0;
margin-left: 12px;
margin-top: 0;
float: none !important;
}
/* Input de búsqueda: un poco más ancho */
.header header form .input-search {
width: 160px !important; /* antes: 90px */
font-size: 13px !important;
}
/* =============================================================================
* 5 + 6. RESPONSIVE MÓVIL — Media queries + menú hamburguesa
* Bootstrap 2 solo llega a tablet (~768px). Añadimos soporte móvil completo.
* ============================================================================= */
/* ---- Breakpoint tablet ancho (≤992px) ---- */
@media (max-width: 992px) {
.header header .input-search {
width: 120px !important;
}
.nav ul li > a:first-child {
font-size: 13px;
padding: 0 5px;
}
}
/* ---- Breakpoint móvil (≤768px) ---- */
@media (max-width: 768px) {
/* Cabecera: altura adaptada */
.header {
height: auto !important;
min-height: 56px !important;
padding-bottom: 0 !important;
}
div[style*="height:81px"],
div[style*="height:100px"] {
height: 56px !important;
}
.header header {
height: 56px !important;
flex-wrap: wrap;
padding: 0 12px;
}
/* Logo Plazatio más pequeño en móvil */
.header header h1 img {
height: 28px !important;
}
/* Logo CSCAE: ocultar en móvil para ahorrar espacio */
.header header .logo {
display: none !important;
}
/* Buscador: ocultar en móvil (se puede desplegar desde el menú) */
.header header form.form-inline,
.header header form[style*="margin-right"] {
display: none !important;
}
/* Login/usuario: visible pero compacto */
.header .login {
margin-left: auto;
}
.header .login a {
font-size: 12px;
padding: 3px 8px;
}
/* Login de usuario logueado: ocultar textos, solo avatar */
.header .login-user .login-info > a:first-child span,
.header .login-user .login-info strong {
display: none;
}
/* ---- MENÚ HAMBURGUESA ---- */
/* Botón hamburguesa: aparece solo en móvil */
.nav-hamburger-btn {
display: flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-left: 8px;
background: none;
border: none;
cursor: pointer;
padding: 0;
flex-shrink: 0;
}
/* Las 3 líneas del icono hamburguesa */
.nav-hamburger-btn span,
.nav-hamburger-btn span::before,
.nav-hamburger-btn span::after {
display: block;
width: 22px;
height: 2px;
background: #333;
border-radius: 2px;
position: relative;
transition: all 0.25s ease;
}
.nav-hamburger-btn span::before,
.nav-hamburger-btn span::after {
content: '';
position: absolute;
left: 0;
}
.nav-hamburger-btn span::before { top: -7px; }
.nav-hamburger-btn span::after { top: 7px; }
/* Estado abierto: cruz */
.nav-hamburger-btn.is-open span { background: transparent; }
.nav-hamburger-btn.is-open span::before { transform: rotate(45deg); top: 0; }
.nav-hamburger-btn.is-open span::after { transform: rotate(-45deg); top: 0; }
/* Menú principal: colapsado por defecto */
.nav {
height: auto !important;
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease;
background: #fff;
border-top: 1px solid #eee;
box-shadow: 0 4px 8px rgba(0,0,0,0.07);
}
/* Menú abierto */
.nav.nav-open {
max-height: 600px;
}
.nav ul {
flex-direction: column;
width: 100%;
}
.nav ul li {
flex: none !important;
width: 100%;
border-right: none !important;
border-left: none !important;
border-bottom: 1px solid #f0f0f0;
justify-content: flex-start !important;
}
.nav ul li:first-child {
border-left: none !important;
}
.nav ul li > a:first-child {
justify-content: flex-start !important;
padding: 0 20px !important;
height: 46px !important;
line-height: 46px !important;
font-size: 14px !important;
width: 100%;
}
/* Submenús en móvil */
.nav ul li ul.with-nav-content {
position: static;
width: 100%;
box-shadow: none;
background: #f8f8f8;
}
/* Buscador dentro del menú móvil */
.nav-mobile-search {
display: block !important;
padding: 12px 16px;
border-bottom: 1px solid #f0f0f0;
}
.nav-mobile-search .input-search {
width: calc(100% - 44px) !important;
font-size: 14px !important;
height: 36px !important;
padding-left: 10px !important;
}
}
/* El botón hamburguesa está oculto por defecto en escritorio */
.nav-hamburger-btn {
display: none;
}
/* El buscador móvil está oculto por defecto */
.nav-mobile-search {
display: none;
}
/* =============================================================================
* AJUSTES v2.1 — Un solo contenedor, menú al ancho de columna central
* ============================================================================= */
/* Eliminar el fondo gris/sombra del header — todo blanco */
.header {
background: #fff !important;
background-image: none !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
/* El container-fluid no añade padding lateral */
.container-fluid.header.fixed {
padding: 0 !important;
}
/* El .container interior centraliza todo como la columna de contenido */
.container-fluid.header.fixed .container {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Header y nav comparten el mismo .container — unificar en columna flex vertical */
.container-fluid.header.fixed .container {
display: flex !important;
flex-direction: column !important;
width: 940px !important; /* ancho del .container de Bootstrap 2 */
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Header interno: fila horizontal con logos + elementos derecha */
.container-fluid.header.fixed .container header {
display: flex !important;
align-items: center !important;
height: 60px !important;
position: static !important;
width: 100% !important;
}
/* El nav ocupa exactamente el ancho del container (igual que el contenido) */
.container-fluid.header.fixed .container .nav {
width: 100% !important;
border-top: 1px solid #f0f0f0 !important;
}
/* Altura total del header ajustada (60px header + 40px nav) */
.header {
height: 100px !important;
}
/* Logos a la izquierda */
.container-fluid.header.fixed .container header h1 {
position: static !important;
top: auto !important;
left: auto !important;
margin: 0 10px 0 0 !important;
flex-shrink: 0 !important;
line-height: 1 !important;
}
.container-fluid.header.fixed .container header h1 img {
height: 38px !important;
width: auto !important;
display: block !important;
}
.container-fluid.header.fixed .container header .logo {
position: static !important;
top: auto !important;
left: auto !important;
width: 140px !important;
height: auto !important;
flex-shrink: 0 !important;
display: block !important;
}
/* Spacer empuja buscador y login a la derecha */
.container-fluid.header.fixed .container header form.form-inline {
margin-left: auto !important;
float: none !important;
margin-top: 0 !important;
display: flex !important;
align-items: center !important;
}
/* Select provincia */
.container-fluid.header.fixed .container header form[style*="margin-right"] {
float: none !important;
margin: 0 0 0 8px !important;
flex-shrink: 0 !important;
}
/* Login */
.container-fluid.header.fixed .container header .login,
.container-fluid.header.fixed .container header .login-user,
.container-fluid.header.fixed .container header .login-bullets {
float: none !important;
margin-left: 12px !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
}
.login-bullets {
padding-left: 0 !important;
}
/* =============================================================================
* AJUSTES v2.2 — Logo más pequeño, menú sin recortes, layout todo el ancho
* ============================================================================= */
/* Logo Plazatio al 75% */
.container-fluid.header.fixed .container header h1 img {
height: 28px !important;
}
/* Logo CSCAE proporcional */
.container-fluid.header.fixed .container header .logo {
width: 110px !important;
}
/* El .container del header ocupa TODO el ancho de la ventana,
no el ancho fijo de 940px de Bootstrap */
.container-fluid.header.fixed .container {
width: 100% !important;
max-width: 100% !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
/* El nav también ocupa todo el ancho */
.container-fluid.header.fixed .container .nav {
width: 100% !important;
}
/* Evitar que los items del menú se corten — permitir que el texto respire */
.nav ul li > a:first-child {
padding: 0 4px !important;
font-size: 13px !important;
white-space: nowrap !important;
}
/* El li de "Necesito un arquitecto" tiene clase .service — darle más flex */
.nav ul li.service {
flex: 1.4 !important;
}
/* =============================================================================
* AJUSTES v2.3 — Bordes menú invisibles + "Necesito un arquitecto" más ancho
* ============================================================================= */
/* Eliminar todos los bordes entre items del menú */
.nav ul li,
.nav ul li:first-child {
border-right: none !important;
border-left: none !important;
}
/* "Necesito un arquitecto" necesita más espacio */
.nav ul li.service {
flex: 2 !important;
}
/* CPDAlicante también algo más de espacio */
.nav ul li:last-child {
flex: 1.3 !important;
}
/* =============================================================================
* AJUSTES v2.4 — Menú al ancho exacto del container principal (940px Bootstrap)
* ============================================================================= */
/* El container del header iguala exactamente al container del contenido */
.container-fluid.header.fixed .container {
width: 940px !important;
max-width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* "Necesito un arquitecto" — flex 2 para que quepa sin recortes */
.nav ul li.service {
flex: 2 !important;
}
/* Resto de items: flex 1 uniforme */
.nav ul > li {
flex: 1 !important;
}
.nav ul li.service {
flex: 1.8 !important;
}
/* =============================================================================
* AJUSTES v2.5 — Fuente menú +2px, logos pegados izquierda, login pegado derecha
* ============================================================================= */
/* Fuente menú principal +2px (de 13px a 15px) */
.nav ul li > a:first-child {
font-size: 15px !important;
}
/* Logos pegados al margen izquierdo — sin padding izquierdo en el container */
.container-fluid.header.fixed .container {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* El nav conserva su padding lateral para que el texto no toque el borde */
.container-fluid.header.fixed .container .nav ul li > a:first-child {
padding: 0 6px !important;
}
/* Login empujado al extremo derecho */
.container-fluid.header.fixed .container header {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* El buscador y provincia se quedan donde están (margin-left: auto los empuja) */
/* El login va al final sin margen extra */
.container-fluid.header.fixed .container header .login {
margin-left: 16px !important;
margin-right: 0 !important;
}
/* =============================================================================
* AJUSTES v2.6 — Header full-width: logos izq absoluto, login der absoluto
* Menú centrado en 940px como el contenido
* ============================================================================= */
/* La franja del header ocupa todo el ancho */
.container-fluid.header.fixed {
padding: 0 !important;
}
/* El container del header es full-width para la fila de logos */
.container-fluid.header.fixed .container {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* La fila de logos/login ocupa todo el ancho con padding lateral mínimo */
.container-fluid.header.fixed .container header {
padding-left: 16px !important;
padding-right: 16px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* El nav se centra en 940px igual que el contenido */
.container-fluid.header.fixed .container .nav {
width: 940px !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* =============================================================================
* AJUSTES v2.7 — Header 3 zonas: logos izq | buscador centrado | login der
* ============================================================================= */
/* Header como grid de 3 columnas iguales */
.container-fluid.header.fixed .container header {
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
align-items: center !important;
padding-left: 16px !important;
padding-right: 16px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Zona izquierda: logos */
.container-fluid.header.fixed .container header h1 {
grid-column: 1 !important;
justify-self: start !important;
}
.container-fluid.header.fixed .container header .logo {
grid-column: 1 !important;
justify-self: start !important;
margin-left: 10px !important;
}
/* Zona central: buscador + selector provincia */
.container-fluid.header.fixed .container header form.form-inline {
grid-column: 2 !important;
margin-left: 0 !important;
justify-self: center !important;
}
.container-fluid.header.fixed .container header form[style*="margin-right"] {
grid-column: 2 !important;
justify-self: center !important;
margin: 0 0 0 8px !important;
}
/* Zona derecha: login pegado al borde */
.container-fluid.header.fixed .container header .login,
.container-fluid.header.fixed .container header .login-user,
.container-fluid.header.fixed .container header .login-bullets {
grid-column: 3 !important;
justify-self: end !important;
margin-left: 0 !important;
}
/* =============================================================================
* AJUSTES v2.8 — Logos con aire, buscador+provincia juntos y centrados
* ============================================================================= */
/* Aire superior a los logos */
.container-fluid.header.fixed .container header h1 {
margin-top: 8px !important;
}
.container-fluid.header.fixed .container header .logo {
margin-top: 8px !important;
}
/* Buscador y provincia: forzar que vayan juntos en zona central */
.container-fluid.header.fixed .container header form.form-inline {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: center !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
}
.container-fluid.header.fixed .container header form[style*="margin-right"] {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: center !important;
margin: 0 0 0 8px !important;
display: flex !important;
align-items: center !important;
}
/* =============================================================================
* AJUSTES v2.9 — Fix submenús, wrapper buscador, login centrado
* ============================================================================= */
/* FIX CRÍTICO: quitar el :hover que despliega submenús — lo maneja el JS original */
.nav ul li > ul.with-nav-content {
display: none !important;
}
/* El JS original añade clase .open o usa show() — respetar ese comportamiento */
.nav ul li.open > ul.with-nav-content,
.nav ul li > ul.with-nav-content.open {
display: block !important;
}
/* Wrapper buscador+provincia: juntos en zona central */
.header-search-wrapper {
grid-column: 2 !important;
grid-row: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.header-search-wrapper form {
grid-column: unset !important;
grid-row: unset !important;
margin: 0 !important;
float: none !important;
}
/* Login centrado verticalmente */
.container-fluid.header.fixed .container header .login {
align-self: center !important;
margin-top: 0 !important;
}
/* =============================================================================
* AJUSTES v2.10 — Login más arriba, CSCAE más grande
* ============================================================================= */
/* Login: subir un poco */
.container-fluid.header.fixed .container header .login {
align-self: flex-start !important;
margin-top: 12px !important;
}
/* Logo CSCAE un pelín más grande */
.container-fluid.header.fixed .container header .logo {
width: 130px !important;
}
/* =============================================================================
* AJUSTES v2.11 — Buscador -5px, login a media altura
* ============================================================================= */
/* Buscador y provincia: bajar 5px */
.header-search-wrapper {
margin-top: 5px !important;
}
/* Login: centrado verticalmente en los 60px del header */
.container-fluid.header.fixed .container header .login {
align-self: center !important;
margin-top: 0 !important;
}
/* =============================================================================
* AJUSTES v2.12 — Buscador +5px más abajo, login +10px más arriba
* ============================================================================= */
.header-search-wrapper {
margin-top: 10px !important;
}
.container-fluid.header.fixed .container header .login {
align-self: flex-start !important;
margin-top: 10px !important;
}
/* =============================================================================
* AJUSTES v2.13 — Login centrado verticalmente en el header completo
* ============================================================================= */
.container-fluid.header.fixed .container header .login {
align-self: center !important;
margin-top: 0 !important;
grid-row: 1 !important;
grid-column: 3 !important;
}
/* =============================================================================
* AJUSTES v2.14 — Login a la misma altura que el buscador
* ============================================================================= */
.container-fluid.header.fixed .container header .login {
align-self: flex-start !important;
margin-top: 10px !important;
}
/* =============================================================================
* AJUSTES v2.15 — "Proyectos" mismo color que el resto, flex uniforme en menú
* ============================================================================= */
/* Todos los enlaces del menú mismo color azul-verdoso */
.nav ul li a {
color: #00968c !important;
}
/* El elemento selected (activo) en negro, como estaba */
.nav ul li.selected a {
color: #000000 !important;
}
/* Flex uniforme para todos — quitar el flex extra de .service y :last-child */
.nav ul > li {
flex: 1 !important;
}
.nav ul li.service {
flex: 1 !important;
}
.nav ul li:last-child {
flex: 1 !important;
}
/* =============================================================================
* AJUSTES v2.16 — Color correcto en menú: azul-verdoso normal, gris en hover
* ============================================================================= */
/* Color base: azul-verdoso igual que el resto */
.nav ul li a {
color: #00968c !important;
}
/* Hover: gris oscuro */
.nav ul li a:hover {
color: #333 !important;
}
/* Elemento activo: negro */
.nav ul li.selected a {
color: #000000 !important;
}
/* my-plazatio: blanco sobre fondo verde */
.nav ul li.my-plazatio a {
color: #fff !important;
}
/* =============================================================================
* AJUSTES v2.17 — .with-nav mismo color azul-verdoso que el resto
* ============================================================================= */
.nav ul li.with-nav > a:first-child {
color: #00968c !important;
}
.nav ul li.with-nav > a:first-child:hover {
color: #333 !important;
}
/* =============================================================================
* AJUSTES v2.18 — Restaurar submenús: dejar que el JS gestione el display
* ============================================================================= */
/* Quitar el !important que bloqueaba el slideDown del JS */
.nav ul li > ul.with-nav-content {
display: none;
}
.nav ul li.open > ul.with-nav-content,
.nav ul li > ul.with-nav-content.open {
display: block;
}
/* =============================================================================
* AJUSTES v2.19 — Quitar línea separadora sobre menú, login -10px
* ============================================================================= */
/* Quitar línea separadora entre header y nav */
.container-fluid.header.fixed .container .nav {
border-top: none !important;
}
/* Login 10px más abajo */
.container-fluid.header.fixed .container header .login {
margin-top: 20px !important;
}
/* =============================================================================
* AJUSTES v2.20 — Logo CSCAE subir 10px
* ============================================================================= */
.container-fluid.header.fixed .container header .logo {
margin-top: -10px !important;
}