/*
Theme Name: Autoasistencia 2026
Theme URI: https://autoasistencia.com.py
Description: Tema de bloques del sitio público de Autoasistencia
Author: Juan Bosco Mayorga Granizo
Author URI: https://autoasistencia.com.py
Version: 2.0.2
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: autoasistencia-2026
Tags: full-site-editing, block-patterns, block-styles, style-variations, custom-colors, custom-logo, editor-style, wide-blocks, blog, accessibility-ready
*/

/* Lo que theme.json no puede expresar. Colores siempre desde la paleta. */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
}

/* Foco visible y del color de la marca en todo lo que se puede tocar. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-4);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Encabezado fijo.
 * Un grupo "fijo" dentro de la parte de plantilla no puede quedarse
 * arriba (su contenedor mide lo mismo que él), así que el que se fija
 * es el <header> que lo contiene.
 * ------------------------------------------------------------------ */
.wp-site-blocks>header.wp-block-template-part:has(> .is-position-sticky) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

@media screen and (max-width: 600px) {

	/* En celulares la barra de administración no queda fija. */
	.wp-site-blocks>header.wp-block-template-part:has(> .is-position-sticky) {
		top: 0;
	}
}

/* ---------------------------------------------------------------------
 * Pie pegado al contenido: sin la franja del color de fondo entre la
 * última sección y un pie oscuro. Las plantillas ya dejan su propio aire
 * abajo; en las páginas de secciones, si la última no es a todo el ancho,
 * se agrega acá.
 * ------------------------------------------------------------------ */
.wp-site-blocks>footer.wp-block-template-part {
	margin-block-start: 0;
}

.aa-main-secciones .wp-block-post-content> :last-child:not(.alignfull) {
	margin-block-end: var(--wp--preset--spacing--60);
}

/* ---------------------------------------------------------------------
 * Menú: el enlace "Emergencia" que agrega el plugin va como botón.
 * ------------------------------------------------------------------ */
.wp-block-navigation .av-menu-emergency>.wp-block-navigation-item__content {
	padding: 0.45em 1.05em;
	border-radius: 999px;
	background-color: var(--wp--preset--color--danger);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.wp-block-navigation .av-menu-emergency>.wp-block-navigation-item__content:hover,
.wp-block-navigation .av-menu-emergency>.wp-block-navigation-item__content:focus {
	color: #fff;
	text-decoration: none;
	filter: brightness(1.08);
}

/* ---------------------------------------------------------------------
 * Resaltado de palabras (herramienta "Resaltar"): sin el amarillo del
 * navegador cuando no se eligió un fondo. Si se eligió, su estilo en línea
 * manda.
 * ------------------------------------------------------------------ */
mark.has-inline-color {
	background-color: transparent;
}

/* ---------------------------------------------------------------------
 * Botones con color propio: al pasar el mouse se tiñen con su texto
 * (aclaran los oscuros y oscurecen los claros).
 * ------------------------------------------------------------------ */
.wp-block-button__link.has-background:hover,
.wp-block-button__link.has-background:focus-visible {
	box-shadow: inset 0 0 0 999px color-mix(in srgb, currentColor 12%, transparent);
}

/* ---------------------------------------------------------------------
 * Tienda (carrito, pago, carrito lateral y Mi cuenta): el botón principal
 * va lleno, en el azul de la marca. El botón global (blanco con texto
 * azul) está pensado para las secciones de color; sobre el fondo claro de
 * estas pantallas "Finalizar compra" y "Realizar el pedido" parecían un
 * campo más.
 * ------------------------------------------------------------------ */
:is(.wc-block-cart, .wc-block-checkout, .wc-block-mini-cart__drawer) .wc-block-components-button.contained:not(.is-link) {
	background-color: var(--wp--preset--color--accent-1);
	color: #fff;
}

/* En Mi cuenta también van los botones de las secciones del plugin (Mis
   servicios, Mis vehículos…), que no llevan la clase de botón del tema:
   acá reciben la forma completa, no sólo el color. */
.woocommerce-account .woocommerce :is(a.button, button.button, input.button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding: 0.7em 1.4em;
	border: 0;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--accent-1);
	color: #fff;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

:is(.wc-block-cart, .wc-block-checkout, .wc-block-mini-cart__drawer) .wc-block-components-button.contained:not(.is-link):is(:hover, :focus-visible),
.woocommerce-account .woocommerce :is(a.button, button.button, input.button):is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--accent-2);
	color: #fff;
}

/* Pedidos de Mi cuenta: botones chicos (con el tamaño global no entraban en
   la columna); sólo "Pagar" va lleno, "Ver" y "Cancelar" van con borde. */
.woocommerce-account .woocommerce-orders-table .button {
	margin: 0.2em 0.35em 0.2em 0;
	padding: 0.5em 1.05em;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.woocommerce-account .woocommerce-orders-table .button:not(.pay) {
	background-color: transparent;
	box-shadow: inset 0 0 0 1.5px currentColor;
	color: var(--wp--preset--color--accent-1);
}

.woocommerce-account .woocommerce-orders-table .button:not(.pay):is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--accent-1);
	box-shadow: none;
	color: #fff;
}

/* ---------------------------------------------------------------------
 * Tarjetas: leve elevación al pasar el mouse si tienen un enlace.
 * ------------------------------------------------------------------ */
:where(.is-style-tarjeta, .is-style-tarjeta-oscura):has(a) {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

:where(.is-style-tarjeta, .is-style-tarjeta-oscura):has(a):hover {
	transform: translateY(-3px);
}

/* Tarjetas del blog: la imagen ocupa el ancho y respeta el redondeo. */
.wp-block-post-template :where(.is-style-tarjeta) {
	overflow: hidden;
}

/* ---------------------------------------------------------------------
 * Cifras grandes: sin saltos de línea entre el número y su unidad.
 * ------------------------------------------------------------------ */
.is-style-cifra {
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	:where(.is-style-tarjeta, .is-style-tarjeta-oscura):has(a) {
		transition: none;
	}

	:where(.is-style-tarjeta, .is-style-tarjeta-oscura):has(a):hover {
		transform: none;
	}
}