/* Sitio principal (SITE = main): portada y páginas corporativas de Vepark.
   Los colores van en variables: cambiar la marca es tocar :root. */

:root {
  --vp-primario: #b52a24;        /* rojo ChargeThor (logo) */
  --vp-primario-oscuro: #861d18;
  --vp-primario-rgb: 181, 42, 36;         /* los mismos colores, para rgba() */
  --vp-primario-oscuro-rgb: 134, 29, 24;
  --vp-acento: #2f3b44;          /* grafito */
  --vp-acento-oscuro: #1f282e;
  --vp-fondo-alterno: #f3f6f8;
  --vp-texto: #2b3640;
  --vp-texto-suave: #5d6b77;
  --vp-borde: #dde4ea;
  --vp-fuente-titulos: 'Poppins', system-ui, sans-serif;
  --vp-fuente-texto: 'Open Sans', system-ui, sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 140px; }
body { font-family: var(--vp-fuente-texto); color: var(--vp-texto); background: #fff; }
/* Las animaciones AOS (fade-left/right) dejan las columnas desplazadas fuera de la pantalla hasta que se ven: sin esto,
   en móvil la página se ensancha y lo fijo (el widget de la Ventanilla, abajo a la derecha) cae fuera. «clip», no
   «hidden»: no rompe position: sticky. */
html, body { overflow-x: clip; }
h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: var(--vp-fuente-titulos); }

/* ── Botones ─────────────────────────────────────────────── */
.btn-acento { background: var(--vp-acento); border-color: var(--vp-acento); color: #fff; }
.btn-acento:hover, .btn-acento:focus { background: var(--vp-acento-oscuro); border-color: var(--vp-acento-oscuro); color: #fff; }
.btn-primario { background: var(--vp-primario); border-color: var(--vp-primario); color: #fff; }
.btn-primario:hover { background: var(--vp-primario-oscuro); border-color: var(--vp-primario-oscuro); color: #fff; }
.btn-outline-primario { border: 2px solid var(--vp-primario); color: var(--vp-primario); }
.btn-outline-primario:hover { background: var(--vp-primario); color: #fff; }

/* ── Cabecera: topbar + menú ─────────────────────────────── */
.topbar { background: var(--vp-primario-oscuro); color: rgba(255,255,255,.85); font-size: .85rem; min-height: 40px; padding: 6px 0; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: #fff; }

.site-nav { background: #fff; box-shadow: 0 2px 12px rgba(134, 29, 24,.08); padding: .6rem 0; }
.site-nav .navbar-brand { color: var(--vp-primario); font-weight: 700; font-size: 1.5rem; }
.site-nav .nav-link { color: var(--vp-texto); font-weight: 500; padding: .5rem .9rem !important; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus { color: var(--vp-acento); }
.site-nav .dropdown-menu { border: 0; box-shadow: 0 8px 24px rgba(134, 29, 24,.12); border-radius: .5rem; }
.site-nav .dropdown-item:active { background: var(--vp-primario); }

.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 8px; background: var(--vp-primario); color: #fff; font-size: 1.1rem; }
footer .brand-mark { background: var(--vp-acento); }

/* ── Hero / carrusel ─────────────────────────────────────── */
/* Fondo de plano: cuadrícula fina sobre degradado, como un plano de ordenación. */
.hero-portada {
  color: #fff;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(135deg, var(--vp-primario-oscuro) 0%, var(--vp-primario) 60%, #d0453c 100%);
}
.hero-fila { min-height: 520px; padding: 4.5rem 0 5rem; }
.hero-etiqueta { display: inline-block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 50rem; padding: .3rem .9rem; margin-bottom: 1.25rem; }
.hero-titulo { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; line-height: 1.15; margin-bottom: 1.25rem; }
.hero-texto { font-size: 1.15rem; color: rgba(255,255,255,.85); max-width: 38rem; margin-bottom: 2rem; }
.hero-icono { width: 260px; height: 260px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.35); font-size: 7rem; color: rgba(255,255,255,.9); }
.hero-portada .carousel-control-prev, .hero-portada .carousel-control-next { width: 5%; }
.hero-portada .carousel-indicators { margin-bottom: 1.5rem; }

/* ── Secciones ───────────────────────────────────────────── */
.seccion { padding: 80px 0; }
.seccion-alterna { background: var(--vp-fondo-alterno); }
.seccion-oscura { background: var(--vp-primario); color: rgba(255,255,255,.9); }
.seccion-oscura h2 { color: #fff; }
.seccion-titulo { text-align: center; margin-bottom: 3rem; }
.seccion-titulo h2 { font-weight: 700; font-size: 2rem; color: var(--vp-primario); position: relative; padding-bottom: .75rem; margin-bottom: 1rem; }
.seccion-titulo h2::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 60px; height: 3px; margin-left: -30px; background: var(--vp-acento); }
.seccion-titulo.text-start h2::after { left: 0; margin-left: 0; }
.seccion-titulo p { color: var(--vp-texto-suave); margin: 0 auto; max-width: 46rem; }
.seccion-oscura .seccion-titulo h2 { color: #fff; }

.tarjeta { background: #fff; border: 1px solid var(--vp-borde); border-radius: .75rem; padding: 1.75rem; transition: transform .2s, box-shadow .2s; }
.tarjeta:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(134, 29, 24,.1); }
.tarjeta p { color: var(--vp-texto-suave); }
.tarjeta-icono { width: 52px; height: 52px; border-radius: .6rem; display: flex; align-items: center; justify-content: center;
  background: rgba(181, 42, 36,.1); color: var(--vp-primario); font-size: 1.5rem; margin-bottom: 1rem; }

.paso-icono { font-size: 2.5rem; color: var(--vp-acento); margin-bottom: .5rem; }
.paso p { color: var(--vp-texto-suave); }

.ficha { display: block; background: #fff; border: 1px solid var(--vp-borde); border-radius: .75rem; overflow: hidden; color: var(--vp-texto); }
.ficha-cabecera { display: flex; justify-content: space-between; align-items: flex-start; padding: 1rem 1.25rem; min-height: 110px; color: #fff; font-size: 2rem;
  background:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--vp-primario); }
.ficha-invitacion { border: 2px dashed var(--vp-borde); background: transparent; color: var(--vp-texto-suave); display: flex; align-items: center; justify-content: center; }
.ficha-invitacion:hover { border-color: var(--vp-acento); color: var(--vp-acento); }

.tramite { display: flex; gap: 1rem; background: #fff; border: 1px solid var(--vp-borde); border-radius: .75rem; padding: 1.25rem; }
.tramite > .bi { font-size: 1.6rem; color: var(--vp-primario); }
.tramite p { color: var(--vp-texto-suave); }

.lista-check { list-style: none; padding: 0; }
.lista-check li { position: relative; padding-left: 1.75rem; margin-bottom: .6rem; }
.lista-check li::before { content: '\F26E'; font-family: 'bootstrap-icons'; position: absolute; left: 0; top: -.05rem; color: var(--vp-acento); font-size: 1.15rem; }

.aviso-vacio { border: 2px dashed var(--vp-borde); border-radius: .75rem; padding: 3rem 2rem; text-align: center; color: var(--vp-texto-suave); }
.aviso-vacio .bi { font-size: 2.5rem; display: block; margin-bottom: .75rem; }
.seccion-oscura .aviso-vacio { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.8); }

/* ── Precios ─────────────────────────────────────────────── */
.plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--vp-borde); border-radius: .75rem; padding: 2rem; }
.plan-destacado { border: 2px solid var(--vp-acento); box-shadow: 0 12px 32px rgba(47, 59, 68,.15); }
.plan-cinta { position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%); background: var(--vp-acento); color: #fff;
  font-size: .75rem; font-weight: 600; border-radius: 50rem; padding: .25rem .9rem; }
.plan-precio { font-family: var(--vp-fuente-titulos); font-size: 1.75rem; font-weight: 700; color: var(--vp-primario); }

.avatar { width: 96px; height: 96px; border-radius: 50%; background: var(--vp-primario); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--vp-fuente-titulos); font-size: 1.75rem; font-weight: 600; }

.cta-final { background: linear-gradient(135deg, var(--vp-acento) 0%, var(--vp-acento-oscuro) 100%); color: #fff; }

/* ── Pie ─────────────────────────────────────────────────── */
footer { background: var(--vp-primario-oscuro); color: rgba(255,255,255,.75); }
footer hr { border-color: rgba(255,255,255,.2); }
.pie-titulo { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 1rem; }
.pie-enlaces li { margin-bottom: .45rem; }
.pie-enlaces a { color: rgba(255,255,255,.75); text-decoration: none; }
.pie-enlaces a:hover { color: var(--vp-acento); }

/* ── Volver arriba ───────────────────────────────────────── */
.scroll-top { position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; background: var(--vp-acento); color: #fff;
  font-size: 1.6rem; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all .3s; z-index: 1030; text-decoration: none; }
.scroll-top.activo { opacity: 1; visibility: visible; }
.scroll-top:hover { color: #fff; background: var(--vp-acento-oscuro); }

@media (max-width: 575.98px) {
  .seccion { padding: 56px 0; }
  .hero-fila { min-height: 460px; padding: 3rem 0 4rem; }
  .hero-portada .carousel-control-prev, .hero-portada .carousel-control-next { display: none; }
}

/* ── Barra de búsqueda (nav3) ────────────────────────────── */
.barra-busqueda { background: var(--vp-fondo-alterno); border-top: 1px solid var(--vp-borde); border-bottom: 1px solid var(--vp-borde); padding: .6rem 0; }
.buscador { position: relative; max-width: 860px; margin: 0 auto; }
.buscador .buscador-tipo { flex: 0 0 auto; width: auto; max-width: 9.5rem; background-color: #fff; }
.buscador .form-control:focus, .buscador .form-select:focus { border-color: var(--vp-primario); box-shadow: 0 0 0 .2rem rgba(181, 42, 36,.15); }
.buscador-sugerencias { position: absolute; left: 0; right: 0; top: 100%; z-index: 1040; margin-top: 4px;
  box-shadow: 0 12px 28px rgba(134, 29, 24,.15); max-height: 22rem; overflow-y: auto; }
.buscador-sugerencias .list-group-item.active { background: var(--vp-primario); border-color: var(--vp-primario); }
.buscador-sugerencias .list-group-item.active .text-secondary { color: rgba(255,255,255,.8) !important; }
.grupo-resultados { color: var(--vp-primario); border-bottom: 2px solid var(--vp-borde); padding-bottom: .5rem; margin-bottom: 1rem; }
@media (max-width: 575.98px) {
  .buscador .buscador-tipo { max-width: 7rem; font-size: .9rem; }
}

/* ── Bootstrap con los colores de cada web ───────────────────
   Páginas de las plantillas (.sitio-plantilla) y de las webs (.sitio-web): el «primary» de
   Bootstrap pasa a ser el color principal de la web (webs.datos_generales.color_primario, que
   llega por /w/<ruta>/tema como --web-primario[-rgb|-oscuro]); en el sitio principal, el de
   Vepark. Las clases ya traen el azul escrito en sus variables (--bs-btn-bg…), por eso se
   redefinen componente a componente. El acento (color_secundario) va al botón «Ventanilla». */
.sitio-plantilla, .sitio-web {
  --pl-primario: var(--web-primario, var(--vp-primario));
  --pl-primario-rgb: var(--web-primario-rgb, var(--vp-primario-rgb));
  --pl-primario-oscuro: var(--web-primario-oscuro, var(--vp-primario-oscuro));
  --pl-acento: var(--web-acento, var(--vp-acento));
  --pl-acento-oscuro: var(--web-acento-oscuro, var(--vp-acento-oscuro));
  --bs-primary: var(--pl-primario);
  --bs-primary-rgb: var(--pl-primario-rgb);
  --bs-primary-text-emphasis: var(--pl-primario-oscuro);
  --bs-primary-bg-subtle: rgba(var(--pl-primario-rgb), .1);
  --bs-primary-border-subtle: rgba(var(--pl-primario-rgb), .35);
  --bs-link-color: var(--pl-primario);
  --bs-link-color-rgb: var(--pl-primario-rgb);
  --bs-link-hover-color: var(--pl-primario-oscuro);
  --bs-link-hover-color-rgb: var(--web-primario-oscuro-rgb, var(--vp-primario-oscuro-rgb));
  --bs-focus-ring-color: rgba(var(--pl-primario-rgb), .25);
  --vp-accent: var(--pl-primario);
}
:is(.sitio-plantilla, .sitio-web) .btn-primary {
  --bs-btn-bg: var(--pl-primario); --bs-btn-border-color: var(--pl-primario);
  --bs-btn-hover-bg: var(--pl-primario-oscuro); --bs-btn-hover-border-color: var(--pl-primario-oscuro);
  --bs-btn-active-bg: var(--pl-primario-oscuro); --bs-btn-active-border-color: var(--pl-primario-oscuro);
  --bs-btn-disabled-bg: var(--pl-primario); --bs-btn-disabled-border-color: var(--pl-primario);
  --bs-btn-focus-shadow-rgb: var(--pl-primario-rgb);
}
:is(.sitio-plantilla, .sitio-web) .btn-outline-primary {
  --bs-btn-color: var(--pl-primario); --bs-btn-border-color: var(--pl-primario);
  --bs-btn-hover-bg: var(--pl-primario); --bs-btn-hover-border-color: var(--pl-primario);
  --bs-btn-active-bg: var(--pl-primario); --bs-btn-active-border-color: var(--pl-primario);
  --bs-btn-disabled-color: var(--pl-primario); --bs-btn-disabled-border-color: var(--pl-primario);
  --bs-btn-focus-shadow-rgb: var(--pl-primario-rgb);
}
:is(.sitio-plantilla, .sitio-web) .btn-link { --bs-btn-color: var(--pl-primario); --bs-btn-hover-color: var(--pl-primario-oscuro); --bs-btn-active-color: var(--pl-primario-oscuro); }
:is(.sitio-plantilla, .sitio-web) .nav { --bs-nav-link-color: var(--pl-primario); --bs-nav-link-hover-color: var(--pl-primario-oscuro); }
:is(.sitio-plantilla, .sitio-web) .nav-pills { --bs-nav-pills-link-active-bg: var(--pl-primario); }
:is(.sitio-plantilla, .sitio-web) .nav-underline .nav-link.active { color: var(--pl-primario); }
:is(.sitio-plantilla, .sitio-web) .navbar { --bs-navbar-active-color: var(--pl-primario); --bs-navbar-hover-color: var(--pl-primario); }
:is(.sitio-plantilla, .sitio-web) .dropdown-menu { --bs-dropdown-link-active-bg: var(--pl-primario); }
:is(.sitio-plantilla, .sitio-web) .pagination {
  --bs-pagination-color: var(--pl-primario); --bs-pagination-hover-color: var(--pl-primario-oscuro);
  --bs-pagination-focus-color: var(--pl-primario-oscuro); --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--pl-primario-rgb), .25);
  --bs-pagination-active-bg: var(--pl-primario); --bs-pagination-active-border-color: var(--pl-primario);
}
:is(.sitio-plantilla, .sitio-web) .list-group { --bs-list-group-active-bg: var(--pl-primario); --bs-list-group-active-border-color: var(--pl-primario); }
:is(.sitio-plantilla, .sitio-web) .progress { --bs-progress-bar-bg: var(--pl-primario); }
:is(.sitio-plantilla, .sitio-web) .form-check-input:checked { background-color: var(--pl-primario); border-color: var(--pl-primario); }
:is(.sitio-plantilla, .sitio-web) :is(.form-control, .form-select, .form-check-input):focus { border-color: rgba(var(--pl-primario-rgb), .5); box-shadow: 0 0 0 .25rem rgba(var(--pl-primario-rgb), .25); }
/* Acento: el botón «Ventanilla» de la barra (plantillas, .au-cta) */
:is(.sitio-plantilla, .sitio-web) .au-navbar .au-cta { color: var(--pl-acento); }
:is(.sitio-plantilla, .sitio-web) .au-navbar .au-cta:hover, :is(.sitio-plantilla, .sitio-web) .au-navbar .au-cta.show { color: var(--pl-acento-oscuro); }

/* Cabecera de las plantillas con el aspecto de la portada (.topbar y .site-nav), en los colores
   de la web. Si la web elige fondo de cabecera, /w/<ruta>/tema lo pisa (va después y con !important). */
:is(.sitio-plantilla, .sitio-web) .au-topbar { background: var(--pl-primario-oscuro); color: rgba(255,255,255,.85); border-bottom: 0 !important;
  --bs-secondary-color: rgba(255,255,255,.85); --bs-tertiary-color: rgba(255,255,255,.6); }
:is(.sitio-plantilla, .sitio-web) .au-topbar a:not(.dropdown-item) { color: rgba(255,255,255,.85); text-decoration: none; }
:is(.sitio-plantilla, .sitio-web) .au-topbar a:not(.dropdown-item):hover { color: #fff; }
:is(.sitio-plantilla, .sitio-web) .au-topbar .au-topsearch { border: 0; --bs-secondary-color: rgba(33,37,41,.75); --bs-body-color: #212529; }
:is(.sitio-plantilla, .sitio-web) .au-navbar { box-shadow: 0 2px 12px rgba(134, 29, 24,.08); border-bottom: 0 !important; padding: .6rem 0; }
:is(.sitio-plantilla, .sitio-web) .au-navbar .navbar-brand .fw-semibold { color: var(--pl-primario); font-weight: 700 !important; font-family: var(--vp-fuente-titulos); }
:is(.sitio-plantilla, .sitio-web) .au-navbar .au-logo { background: var(--pl-primario); color: #fff; }
:is(.sitio-plantilla, .sitio-web) .au-navbar .nav-link:not(.au-cta) { color: var(--vp-texto); font-weight: 500; }
:is(.sitio-plantilla, .sitio-web) .au-navbar .nav-link:hover, :is(.sitio-plantilla, .sitio-web) .au-navbar .nav-link:focus,
:is(.sitio-plantilla, .sitio-web) .au-navbar .nav-link.show { color: var(--pl-acento); }
:is(.sitio-plantilla, .sitio-web) .au-navbar .nav-link.active { color: var(--pl-primario); box-shadow: inset 0 -2px 0 var(--pl-acento); }
:is(.sitio-plantilla, .sitio-web) :is(.au-navbar, .au-topbar) .dropdown-menu { border: 0; box-shadow: 0 8px 24px rgba(134, 29, 24,.12); border-radius: .5rem; }
:is(.sitio-plantilla, .sitio-web) .au-navbar .dropdown-item:hover .au-dd-icon { color: var(--pl-acento); }


/* «Ver como» (118): barra fija mientras un superadm ve la aplicación como una cuenta de demostración */
.ver-como-barra { position: sticky; top: 0; z-index: 1100; display: flex; align-items: center; gap: .6rem; padding: .45rem 1rem; background: #6f42c1; color: #fff; font-size: .9rem; }
.ver-como-barra .ver-como-rol { opacity: .85; margin-left: .35rem; font-size: .82rem; }

/* Texto con saltos de línea (mensajes del ayuntamiento al interesado, 119) */
.texto-lineas { white-space: pre-wrap; }

/* Menú del usuario (comun/menu-usuario.php): con muchas webs, se desplaza (la CSP no admite style="") */
.menu-usuario-lista { max-height: 70vh; overflow-y: auto; }

/* Logo de ChargeThor (assets/img/chargethor-logo.jpg, fondo blanco): en un círculo blanco para
   que valga sobre cualquier fondo. */
.brand-logo { width: 40px; height: 40px; border-radius: 50%; background: #fff; object-fit: contain; flex: 0 0 auto; }
footer .brand-logo, .web-pie .brand-logo { width: 36px; height: 36px; }