/* ============================================================
   DDO SISTEMA C — NEUTRALIZADOR
   Astra y WooCommerce meten redondeos, sombras, botones celestes
   y contenedores propios. El Sistema C no tiene una sola esquina
   redondeada ni una sola sombra: bordes de 1px y nada mas.
   Este archivo apaga todo eso. Va DESPUES de la capa de diseno.
   ============================================================ */

/* --- Cabecera y pie de Astra: los reemplazamos por los nuestros --- */
.site-header,
.ast-above-header,
.ast-below-header,
.main-header-bar,
.site-footer,
.ast-small-footer,
#ast-mobile-header {
	display: none !important;
}

/* El boton azul de "volver arriba" tambien es de Astra, y estaba
   flotando encima del pie: al llegar al final de la pagina se le
   sentaba justo sobre el ultimo enlace de las redes y lo tapaba.

   Ademas es el ultimo pedazo de Astra que quedaba a la vista: azul
   redondeado, en un sitio donde no hay una sola esquina redondeada.
   El mockup no lo tiene. Si algun dia queremos uno, se dibuja con el
   lenguaje del sistema, no con el de otro tema. */
#ast-scroll-top {
	display: none !important;
}

/* --- Contenedores: que respeten el ancho del Sistema C --- */
#page,
#content,
.site-content,
.ast-container,
.ast-container-fluid {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	background: transparent;
	box-shadow: none;
}

#primary,
.entry-content,
.ast-article-single,
.ast-article-post {
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border: 0;
}

/* --- Sin redondeos, sin sombras, en ningun lado --- */
.woocommerce *,
.woocommerce-page *,
#content input,
#content select,
#content textarea,
#content button,
.ast-button,
.button,
.wp-block-button__link {
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

/* Excepciones: los circulos del sistema si son circulos. */
.sigla,
.stock::before,
.utils .cont,
.gracias .marca-ok,
.marca-ok {
	border-radius: 999px !important;
}
.utils .cont {
	box-shadow: 0 0 0 2px var(--papel) !important;
}

/* --- Botones de Woo con el lenguaje del sistema --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
	border: 1px solid var(--tinta);
	background: var(--tinta);
	color: var(--papel);
	padding: 12px 20px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: #000;
	border-color: #000;
	color: var(--papel);
}

/* --- Campos de formulario --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	border: 1px solid var(--linea);
	background: var(--papel);
	font-family: var(--sans);
	font-size: 14px;
	padding: 10px 12px;
	height: auto;
	min-height: 42px;
}

.woocommerce form .form-row label {
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris2);
}

/* --- Avisos de Woo con el borde del sistema --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 0;
	border: 1px solid var(--linea);
	background: var(--sutil);
	color: var(--gris);
	font-size: 12.5px;
	padding: 12px 14px 12px 40px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--oro);
	top: 12px;
	left: 14px;
}
.woocommerce-message {
	border-color: var(--oro);
	background: var(--oro-suave);
}

/* --- Tipografia de Astra: que no pise la del sistema --- */
body,
.entry-content p,
.ast-single-post .entry-content p {
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.6;
	color: var(--tinta);
}

/* --- Barra de admin: que no tape la cabecera pegajosa --- */
body.admin-bar .cab {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .cab {
		top: 46px;
	}
}

/* ============================================================
   LA CUENTA: DOS MAQUETACIONES PELEANDO POR LOS MISMOS DOS
   ELEMENTOS
   ------------------------------------------------------------
   WooCommerce trae su propia hoja de maquetacion, y ahi adentro
   dice esto:

     .woocommerce-account .woocommerce-MyAccount-navigation
         { float: left;  width: 30% }
     .woocommerce-account .woocommerce-MyAccount-content
         { float: right; width: 68% }

   O sea que arma la cuenta con dos columnas flotadas, que es
   como se hacia en 2013. El Sistema C la arma con una grilla de
   `200px 1fr`, y las dos cosas caian sobre los mismos dos
   elementos.

   El resultado, medido en staging: la grilla daba bien sus
   columnas —200px y 968px— y adentro de cada una WooCommerce
   volvia a repartir por porcentaje. El menu terminaba con
   **60px de ancho** (el 30% de 200) y los enlaces se le salian
   por el costado. Eso era lo "rarito" del lado izquierdo.

   No se toca la grilla ni se le pelea con anchos: se le saca a
   WooCommerce el flotado y el porcentaje, y los dos elementos
   vuelven al flujo normal. La grilla, que es la unica que tiene
   que mandar, hace el resto.

   Las clases de WooCommerce se conservan a proposito: hay
   plugins y guiones suyos que las buscan. Lo que se apaga es su
   maquetacion, no su nombre.

   El `body` adelante no es adorno: sin el, esta regla pesa
   exactamente lo mismo que la de WooCommerce y quien gana pasa a
   depender del orden en que se impriman las hojas. Ya nos paso
   una vez con el boton de favoritos; no se repite.
   ============================================================ */
/* ------------------------------------------------------------
   Y NO ES SOLO EL MENU.

   WooCommerce reparte TODA la cuenta con el mismo sistema de
   flotados y porcentajes: la pareja menu/contenido, y adentro
   las columnas `col2-set` que usa la pantalla de direcciones,
   donde cada tarjeta se lleva su `float: left; width: 48%`.

   Ahi pasaba lo mismo: nuestra grilla daba dos columnas y,
   adentro de cada una, WooCommerce volvia a sacar su 48%. Las
   tarjetas quedaban de 227px, flotando sueltas y a distinta
   altura.

   En vez de ir corrigiendo pantalla por pantalla, se le apaga la
   maquetacion a todo el sistema de columnas de una vez. Es una
   regla, no siete parches, y la proxima pantalla que use
   `col2-set` ya nace bien.

   OJO CON EL ALCANCE: esto vale SOLO dentro de la cuenta. El
   checkout usa el mismo `col2-set` y ahi la maquetacion es otra;
   no se toca.
   ------------------------------------------------------------ */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .col2-set,
body.woocommerce-account .col2-set .col-1,
body.woocommerce-account .col2-set .col-2,
body.woocommerce-account .u-columns,
body.woocommerce-account .u-column1,
body.woocommerce-account .u-column2 {
	float: none;
	width: auto;
	margin: 0;
}

/* Y con los flotados se va tambien su limpiador.
   `col2-set` trae dos pseudo-elementos que existen SOLO para
   cerrar los flotados. Sin flotados no limpian nada, pero
   adentro de una grilla dejan de ser invisibles: cuentan como
   dos celdas. Por eso las dos direcciones salian cruzadas, una
   arriba a la derecha y la otra abajo a la izquierda. */
body.woocommerce-account .col2-set::before,
body.woocommerce-account .col2-set::after,
body.woocommerce-account .u-columns::before,
body.woocommerce-account .u-columns::after {
	content: none;
}

/* Cada direccion venia como tres cajas encajadas: la tarjeta, el
   titulo con su recuadro y relleno, y el domicilio con OTRO
   recuadro adentro. Se sacan las dos de adentro; el aspecto de la
   tarjeta se lo da el tema, en style.css.

   Los selectores son largos a proposito: los de WooCommerce
   pesan tres clases, asi que con menos que esto no ganan. */
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title,
body.woocommerce-account .woocommerce-Addresses address {
	border: 0;
	padding: 0;
	margin: 0;
	background: none;
}

/* La tabla de pedidos vive dentro de un panel sin relleno, asi
   que el margen de abajo que Astra le pone a toda <table> se veia
   como una franja blanca colgando adentro del recuadro. */
.panel .tabla {
	margin: 0;
}

/* ------------------------------------------------------------
   LOS FORMULARIOS DE ENTRAR Y REGISTRARSE

   WooCommerce le pone a `form.login` y `form.register` su propio
   recuadro con relleno y margen. Como en el Sistema C esos
   formularios ya viven adentro de un panel, quedaba una caja
   dibujada adentro de otra.

   El panel es el recuadro. El formulario, no.
   ------------------------------------------------------------ */
body.woocommerce-account form.login,
body.woocommerce-account form.register {
	border: 0;
	padding: 0;
	margin: 0;
}