/* =========================================================================
 * V4 — OVERRIDES PROPIOS (NO los toca el maquetador)
 * =========================================================================
 *
 * Este archivo es NUESTRO, no del maquetador. Vive en la RAÍZ de
 * assets/themes/V4/ (hermano de css/ js/ img/) a propósito: el workflow de
 * sincronización del maquetador re-copia/espeja `webcrestanevada/css` →
 * `assets/themes/V4/css`, así que cualquier parche dentro de `css/` (incl.
 * `crestanevada-scss/main.css`) se PIERDE en la siguiente entrega. Aquí no.
 *
 * Se carga en themes/V4/header.php DESPUÉS de main.css y grid.css, por lo que
 * sus reglas ganan a igualdad de especificidad.
 *
 * REGLA: cada override lleva un comentario con el PORQUÉ. Si algún día el
 * maquetador corrige el origen, se borra el bloque correspondiente de aquí.
 * ------------------------------------------------------------------------- */

/* --- Botones renderizados como <a> -------------------------------------- *
 * El maquetador usa <button class="btn-*"> y nosotros, por lógica (enlaces a
 * URLs reales), usamos <a class="btn-*">. Las clases .btn-red/.btn-white/
 * .btn-green/.btn-black aplican `transform: skewX(-5deg)` y `padding`, pero
 * las TRANSFORMACIONES CSS NO se aplican a elementos inline, y el <a> es inline
 * por defecto (el <button> es inline-block). Resultado: el <a> sale sin sesgar
 * y con el padding mal. Forzando inline-block, el <a> se ve idéntico al <button>.
 * (Ej.: "Solicitar más información" en /conocenos/preguntas-frecuentes-...)    */
a.btn-red,
a.btn-white,
a.btn-green,
a.btn-black {
	display: inline-block;
	text-align: center;
}

/* --- Input con borde (clase reutilizable) -------------------------------- *
 * El reset global de main.css pone `border:0` a los <input>, así que por defecto
 * no tienen borde. Esta clase da el "look caja" estándar (borde #e7e7e7 + radius
 * + padding + ancho completo) a cualquier <input>/<textarea> que la lleve, para
 * poder reutilizarla en otros formularios. NO tocamos la `.input` del maquetador
 * (buscador), que usa otro borde y sin radius.
 * El maquetador además no incluyó campo mensaje en .contact, por eso el <textarea>
 * tampoco venía estilado; aquí queda cubierto por esta misma clase.             */
.input-bordered {
	width: 100%;
	padding: 1rem;
	border: 1px solid #e7e7e7;
	border-radius: 8px;
	font-family: "Exo", sans-serif;
	font-size: 1.6rem;
}
textarea.input-bordered {
	min-height: 80px;
	resize: vertical;
}

/* --- Validación de campos (réplica de la lógica .required/.error de v3) ---- *
 * revisar_formu() (JS inline en pages/contacto.php) añade .error al wrapper
 * .required cuando el campo es inválido. Aquí lo pintamos en rojo y mostramos
 * el .mensaje_error. Equivale al form_style.css de v3.                         */
.contact .mensaje_error {
	display: none;
	color: #E62439;
	font-size: 1.3rem;
	font-style: italic;
}
.contact .required.error .mensaje_error {
	display: block;
}
.contact .required.error input,
.contact .required.error textarea {
	border: 1px solid #E62439;
	box-shadow: 0 0 4px rgba(230, 36, 57, 0.5);
}
.contact .required.error label {
	color: #E62439;
}

/* --- Vídeo responsivo 16:9 ----------------------------------------------- *
 * El maquetador no definió .video-responsive, pero las vistas V4 que embeben
 * YouTube la usan (noticias/blog.php y ofertastrabajo/ofertaDetail.php). Sin esto
 * el <iframe> sale con tamaño fijo/0. Wrapper clásico de ratio fijo.            */
.video-responsive {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}
.video-responsive iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Aviso de resultado del envío (éxito / error de red). Clase compartida por
 * los formularios .contact (contacto y la inscripción a ofertas de trabajo). */
.contact .form-feedback {
	margin-top: 1.5rem;
	padding: 1rem 1.5rem;
	border-radius: 8px;
	font-size: 1.5rem;
}
.contact .form-feedback.success {
	background: #e6f5e1;
	color: #2f7a12;
}
.contact .form-feedback.error {
	background: #fde8ea;
	color: #E62439;
}

/* --- Textos SEO de pie del listado de coches (.seo-pie) -------------------- *
 * Estos textos se cargan desde las vistas v3 y coches/parts/textos_seo.php les
 * QUITA todas las clases/estilos (preg_replace), así que llegan como etiquetas
 * "desnudas". Como `html,body { font-size:62.5% }` (1rem=10px) y sólo p/span/h*
 * tienen 1.6rem explícito, las <ul>/<li> (y cualquier texto suelto) heredan los
 * 10px del body y salen minúsculos. Reponemos aquí el tamaño y el aspecto de
 * lista, y el color rojo de los enlaces (en v3 era la clase .rojo, ya eliminada).
 * Todo acotado a .seo-pie para no afectar a otros bloques.                      */
.seo-pie ul,
.seo-pie ol,
.seo-pie li {
	font-size: 1.6rem;
	line-height: 1.5;
}
.seo-pie ul,
.seo-pie ol {
	list-style: disc;
	padding-left: 2rem;
}
.seo-pie li {
	margin-bottom: 0.5rem;
}
/* Enlaces del bloque SEO en rojo de marca (equivalente a la clase .rojo de v3). */
.seo-pie a {
	color: #E62439;
}
.seo-pie a:hover {
	text-decoration: underline;
}

/* --- Parrilla de imágenes SEO (tarjetas "vehiculo_shop" de v3) ------------- *
 * Algunos textos SEO incluyen una rejilla de tarjetas:
 *   <div>(contenedor) > <article> > <a> > <div>(imagen) > <div> > <img>
 *                                        > <div>(datos) > <p><span>nombre</span></p>
 * En v3 el contenedor era flex (.flex_wrap_centrado) y cada <article> era
 * .vehiculo_shop (33% + sombra). El strip de textos_seo.php elimina esas clases,
 * así que las imágenes (width:100%) salían apiladas a tamaño completo. Reponemos
 * la rejilla anclando por <article> (único dentro de .seo-pie) y por el contenedor
 * con :has(> article). Réplica de .vehiculo_shop / .vehiculo_shop_imagen de v3.   */
.seo-pie div:has(> article) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.6rem;
	margin-top: 3rem;
}
.seo-pie article {
	width: calc(33.333% - 1.6rem);
	background: #fff;
	box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.16);
	border-radius: 3px;
	overflow: hidden;
	position: relative;
}
.seo-pie article a {
	display: block;
	color: inherit; /* anula el rojo de .seo-pie a para las tarjetas */
}
.seo-pie article a:hover {
	text-decoration: none;
}
.seo-pie article img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.39, 0.58, 0.57, 1);
}
.seo-pie article:hover img {
	transform: scale(1.1);
}
.seo-pie article p {
	text-align: center;
	padding: 1rem;
	margin: 0;
}
.seo-pie article p span {
	font-size: 1.4rem;
	color: #555;
}
@media screen and (max-width: 767px) {
	.seo-pie article {
		width: 100%;
	}
	.seo-pie article img {
		height: 200px;
	}
}

/* --- Validación de los forms de la ficha de vehículo ----------------------- *
 * #form-info-vehiculo (coches/parts/sidebar_resumen.php) y #form-te-llamamos
 * (coches/parts/contacto.php) replican el patrón .required/.error del form de
 * contacto: el JS marca .error en cada .required inválido y aquí lo pintamos
 * (campo en rojo, label/checkbox en rojo y se muestra el .mensaje_error).
 * Acotado a esos ids para no tocar otros formularios.                          */
#form-info-vehiculo .required,
#form-te-llamamos .required {
	position: relative;
}
#form-info-vehiculo .required > input[type="text"],
#form-info-vehiculo .required > input[type="tel"],
#form-te-llamamos .required > input[type="tel"] {
	width: 100%;
}
#form-info-vehiculo .mensaje_error,
#form-te-llamamos .mensaje_error {
	display: none;
	color: #E62439;
	font-size: 1.3rem;
	font-style: italic;
}
#form-info-vehiculo .required.error .mensaje_error,
#form-te-llamamos .required.error .mensaje_error {
	display: block;
}
#form-info-vehiculo .required.error input,
#form-info-vehiculo .required.error textarea,
#form-te-llamamos .required.error input,
#form-te-llamamos .required.error textarea {
	border: 1px solid #E62439;
	box-shadow: 0 0 4px rgba(230, 36, 57, 0.5);
}
#form-info-vehiculo .required.error input[type="checkbox"],
#form-te-llamamos .required.error input[type="checkbox"] {
	outline: 2px solid #E62439;
	outline-offset: 1px;
}
#form-info-vehiculo .required.error label,
#form-te-llamamos .required.error label {
	color: #E62439;
}

/* Carruseles de iconos de la home (tipos / categorías / modelos): el <a> del maquetador
   es display:inline y su caja no cubre el icono+texto, dejando "huecos" dentro del <li>
   donde el click no cae en ningún enlace (parece que "no hace nada"). Lo pasamos a bloque
   para que toda la tarjeta sea clicable. (El click final lo resuelve además el workaround
   de pointer-capture de bxSlider en themes/V4/footer.php.) */
.carousel-types a,
.carousel-categories a,
.carousel-models a {
	display: block;
}

/* Tarjetas de coche (.selection / .carousel_selection: home "coches destacados" y "similares"
   de la ficha). La <img> de .card-image es position:absolute, así que el <a> que la envuelve
   colapsaba a 0x0 y la FOTO no navegaba al pulsarla (sólo el título y "Ver detalles"). Hacemos
   que el <a> cubra el área de la imagen (la <img> sigue posicionándose igual dentro de él). */
.selection .card-image {
	position: relative;
}
.selection .card-image > a {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* REGRESIÓN del maquetador (entrega "Nueva maquetación", 2026-06-06): al refactorizar
   `.card-actions` a `.card-actions button { margin-left:12px }` perdió el `text-align:right`
   que tenía antes, dejando los botones fav/share alineados a la IZQUIERDA. La regla sigue
   (muerta) en `css/main.css` legacy, que nadie carga. La restauramos aquí tal cual estaba.
   Si el maquetador la repone en su SCSS, este bloque se puede borrar. */
.card-actions {
	text-align: right;
	margin-right: 5px;
	margin-bottom: 5px;
}