/*
 * Los enlaces de texto, en azul legible.
 *
 * LO QUE PASABA, dicho por el cliente el 27/10/2026: "los enlaces salen
 * amarillos y no se leen". Tenia razon, y bastante mas de lo que parece: el
 * amarillo de la marca es #ffdd0d y sobre blanco da un contraste de 1,35:1.
 * La norma de accesibilidad (WCAG 2.1 AA) pide 4,5:1 para texto normal. O
 * sea que no es que se lea mal, es que no se lee: a plena luz, en un movil,
 * un enlace amarillo sobre blanco es un hueco en blanco.
 *
 * DE DONDE SALE. No es nuestro CSS ni Elementor: lo pone el tema, que pinta
 * con el color de la marca unos cuantos enlaces de texto. Lo dijo el propio
 * navegador (scripts/pdf/enlaces.js, que pregunta por el protocolo de
 * depuracion que regla gana en cada enlace). La gorda es esta:
 *
 *   urna/css/template.css
 *     .woocommerce .woocommerce-MyAccount-content
 *       a:not(.woocommerce-button):not(.vendor-dashboard) { color: var(--tb-theme-color) }
 *
 * Esa sola barre TODA la cuenta del cliente: "Cerrar sesion", "pedidos
 * recientes", "direcciones de envio y facturacion", "editar tu contrasena",
 * "Ver el ranking del rebano", y tambien el panel del sheeper, que vive
 * dentro de la misma caja. Medido en dev: 1,35:1 en las cinco.
 *
 * QUE COLOR. #0d53b3. Da 7,23:1 sobre blanco y 6,63:1 sobre el gris #f5f5f5
 * que el tema usa de fondo en varias cajas, asi que pasa AA de sobra en las
 * dos. Y aun sobre el amarillo de la marca da 5,37:1, que importa porque hay
 * paneles con fondo amarillo donde puede caer un enlace. Es de la familia del
 * azul marino de la casa (--tb-theme-color-second, #171a3f), asi que no
 * parece un color de otra tienda.
 *
 * QUE NO SE TOCA, que es la mitad del encargo: los botones, la cabecera, el
 * menu, el pie, los precios y los fondos amarillos de la marca. Por eso aqui
 * no hay ni un `a { color: ... }` general: se va regla por regla contra las
 * del tema que pintan ENLACES DE TEXTO, y nada mas. Un `a` global habria
 * tenido que pelearse luego con cada boton.
 *
 * EL SUBRAYADO al pasar por encima es lo unico que se anade de cosecha
 * propia: el tema no subraya nunca, y el color por si solo no basta para
 * saber que algo es un enlace (WCAG 1.4.1). Solo en hover, para no cambiar
 * el aspecto de la tienda.
 *
 * Tema hijo, como manda la regla 1: no se toca ni una linea del tema.
 */

:root {
	/* Azul de enlace, y el mismo mas oscuro para el hover. */
	--sb-enlace: #0d53b3;
	--sb-enlace-hover: #072f6b;
}

/* --- la cuenta del cliente, que es donde estaba el problema ----------- */

/*
 * Se repite el `:not()` del tema a proposito: sin el, este selector pesaria
 * menos que el suyo y no ganaria. Y se le anade el `.sb-` de los nuestros y
 * los botones de WooCommerce, para no pintar de azul lo que es un boton.
 */
.woocommerce .woocommerce-MyAccount-content a:not(.woocommerce-button):not(.vendor-dashboard):not(.button):not([class*="sb-boton"]):not([class*="compartir"]):not([class*="cta"]) {
	color: var(--sb-enlace);
}

.woocommerce .woocommerce-MyAccount-content a:not(.woocommerce-button):not(.vendor-dashboard):not(.button):not([class*="sb-boton"]):not([class*="compartir"]):not([class*="cta"]):hover,
.woocommerce .woocommerce-MyAccount-content a:not(.woocommerce-button):not(.vendor-dashboard):not(.button):not([class*="sb-boton"]):not([class*="compartir"]):not([class*="cta"]):focus {
	color: var(--sb-enlace-hover);
	text-decoration: underline;
}

/* --- la miga de pan --------------------------------------------------- */

/*
 * "Inicio / Tienda / ..." arriba de cada pagina. En reposo es negro y se lee
 * bien, pero al pasar el raton se volvia amarillo sobre el gris #f5f5f5 de su
 * franja: 1,23:1, el peor contraste de toda la tienda. Justo lo que no debe
 * pasar, porque es el gesto de "me voy a mirar donde estoy".
 *
 * Solo se cambia el hover: el negro de reposo se queda como esta.
 */
.tbay-breadscrumb .breadcrumb li a:hover,
.tbay-breadscrumb .breadcrumb li a:focus,
.tbay-woocommerce-breadcrumb a:hover,
.tbay-woocommerce-breadcrumb a:focus {
	color: var(--sb-enlace);
	text-decoration: underline;
}

/* --- entrar y crear cuenta -------------------------------------------- */

/* "Olvidaste la contrasena" era amarillo sobre blanco tambien. */
.woocommerce form.login .lost_password a,
.woocommerce form.register .lost_password a,
#custom-register a.text-link,
#custom-login a.text-link,
#custom-register .vendor-register a,
.create-account-question .create-account-button {
	color: var(--sb-enlace);
}

.woocommerce form.login .lost_password a:hover,
.woocommerce form.register .lost_password a:hover,
#custom-register a.text-link:hover,
#custom-login a.text-link:hover,
.create-account-question .create-account-button:hover {
	color: var(--sb-enlace-hover);
	text-decoration: underline;
}

/*
 * La pestana "Crear cuenta" cuando esta apagada: el tema la pinta #bbb sobre
 * blanco, 1,92:1. No era amarilla, asi que no es el fallo que conto el
 * cliente, pero es el peor contraste que quedaba en pantalla y es la pestana
 * por la que entra todo cliente nuevo.
 *
 * Se deja gris, no azul: en azul parecería la pestana activa y el que entra
 * no sabría cual esta mirando. #595959 da 7,0:1 y sigue leyendose como
 * "esta es la otra".
 */
.u-columns .nav-tabs li a {
	color: #595959;
}

/*
 * Y el mismo par de pestanas fuera de `.u-columns`.
 *
 * El formulario de entrar sale tambien en la caja de la pagina de apuntarse y
 * en el ancho de celular de casi cualquier pagina, y ahi NO cuelga de
 * `.u-columns`, asi que la regla de arriba no llegaba. Medido a 390 px:
 * la pestana activa salia con el amarillo de la marca sobre blanco (1,35:1)
 * y la apagada en #888 (3,25:1). Dos pestanas que no se leen, en todas las
 * paginas, solo en el telefono: por eso no se habian visto.
 *
 * La activa en azul marino para que se distinga de la apagada por algo mas
 * que el color: es la que manda.
 *
 * Esto alcanza tambien a las pestanas de la ficha de producto
 * ("Descripcion", "Especificaciones"), que estaban en 3,54:1. Es el mismo
 * defecto y la misma cura.
 */
ul.nav-tabs li a {
	color: #595959;
}

ul.nav-tabs li.active a,
ul.nav-tabs li.active a:hover,
ul.nav-tabs li.active a:focus {
	color: #171a3f;
}

/*
 * Y las mismas dos pestanas dentro de la ventana de entrar del tema.
 *
 * Esa ventana (`#custom-login-wrapper`) es la que se abre al tocar el icono
 * de la cuenta en el telefono. Sus pestanas llevan el peso de un `id` mas
 * cuatro clases, asi que la regla de arriba no les llegaba ni de lejos; hay
 * que repetir el selector del tema para empatarle y ganarle por orden.
 *
 * Tal como venia: la activa con el amarillo de la marca sobre blanco
 * (1,35:1) y la apagada en #888 (3,25:1).
 */
#custom-login-wrapper .modal-content .modal-body .nav-tabs li a {
	color: #595959;
}

#custom-login-wrapper .modal-content .modal-body .nav-tabs li.active a,
#custom-login-wrapper .modal-content .modal-body .nav-tabs li.active a:hover,
#custom-login-wrapper .modal-content .modal-body .nav-tabs li.active a:focus {
	color: #171a3f;
}

/*
 * Y las pestanas de la ficha de producto: "Descripcion", "Especificaciones",
 * "Envios", "Valoraciones". El tema las pinta #888 sobre el gris #f5f5f5 de
 * su franja: 3,25:1. La activa ya la pone en negro, asi que solo hay que
 * subir las apagadas.
 *
 * Hace falta repetir el selector largo del tema
 * (`.woocommerce div.product #woocommerce-tabs ul.tabs li > a`): el de
 * `ul.nav-tabs` de mas arriba pesa menos y no llegaba.
 */
.woocommerce div.product #woocommerce-tabs ul.tabs li > a,
.woocommerce div.product .woocommerce-tabs ul.tabs li > a {
	color: #595959;
}

/*
 * Los dos ultimos grises de la ficha de producto, que son enlaces de texto y
 * no botones, asi que el repaso de botones no los veia:
 *
 *  - la barra pegajosa de secciones ("Descripcion", "Especificaciones",
 *    "Productos relacionados", "(0 opiniones)"): #888 sobre blanco, 3,54:1.
 *    No es el menu de la tienda -- eso no se toca --, es la navegacion
 *    interna de la propia ficha.
 *  - "Prev" / "Siguiente" para saltar de producto: #888 sobre el gris
 *    #f5f5f5 de su franja, 3,25:1.
 *
 * #595959 deja el primero en 7,0:1 y el segundo en 6,42:1, y los dos siguen
 * siendo gris discreto: no compiten con el precio ni con el boton de
 * comprar, que es para lo que el tema los habia puesto tan claros.
 */
#sticky-menu-bar li a,
.tbay-breadscrumb .product-nav-icon .img-link {
	color: #595959;
}

/* --- carrito y pedidos ------------------------------------------------ */

/*
 * El nombre del producto en la tabla del carrito y de cada pedido, y el
 * "calcular envio". Son enlaces de texto, no botones.
 */
.woocommerce .shop_table .product-name > a,
.cart-collaterals .shipping-calculator-button {
	color: var(--sb-enlace);
}

.woocommerce .shop_table .product-name > a:hover,
.cart-collaterals .shipping-calculator-button:hover {
	color: var(--sb-enlace-hover);
	text-decoration: underline;
}

/*
 * Y el enlace a las condiciones de venta en la pantalla de pagar. Este
 * importa mas que los otros: es el texto legal que el cliente tiene que
 * poder leer antes de aceptar, y era amarillo sobre blanco.
 */
.woocommerce-checkout-payment .place-order .woocommerce-terms-and-conditions-wrapper a {
	color: var(--sb-enlace);
	text-decoration: underline;
}

.woocommerce-checkout-payment .place-order .woocommerce-terms-and-conditions-wrapper a:hover {
	color: var(--sb-enlace-hover);
}

/* --- texto corrido y comentarios -------------------------------------- */

/*
 * Las entradas del blog todavia no tienen contenido propio, pero el dia que
 * el cliente escriba una, el autor, la categoria y el "Responder" de los
 * comentarios saldrian en amarillo. Se arregla ahora, que son dos reglas.
 */
.entry-meta-list .entry-author a,
.entry-single .entry-category a,
.post-area .entry-meta a,
.post .entry-category.type-2 a,
.style-grid .post .entry-category a,
.related-posts .post .entry-category a,
.wpb_text_column a,
#comments .comment-reply-link,
#comments .comment-edit-link {
	color: var(--sb-enlace);
}

.entry-meta-list .entry-author a:hover,
.entry-single .entry-category a:hover,
.post-area .entry-meta a:hover,
.post .entry-category.type-2 a:hover,
.wpb_text_column a:hover,
#comments .comment-reply-link:hover,
#comments .comment-edit-link:hover {
	color: var(--sb-enlace-hover);
	text-decoration: underline;
}

/* --- nuestras paginas ------------------------------------------------- */

/*
 * Las de los sheepers y la lana son de Elementor con nuestro HTML dentro, y
 * ahi los enlaces de texto heredan del tema. Se excluyen los nuestros que
 * son botones (.sb-sheepers-cta, .sb-boton...), que llevan fondo amarillo y
 * texto negro y estan bien como estan.
 */
.sb-sheepers p a:not([class]),
.sb-sheepers li a:not([class]),
.sb-sheepers__texto a,
.sb-lana p a:not([class]),
.sb-lana li a:not([class]) {
	color: var(--sb-enlace);
}

.sb-sheepers p a:not([class]):hover,
.sb-sheepers li a:not([class]):hover,
.sb-sheepers__texto a:hover,
.sb-lana p a:not([class]):hover,
.sb-lana li a:not([class]):hover {
	color: var(--sb-enlace-hover);
	text-decoration: underline;
}

/*
 * Excepcion: dentro de una caja de fondo azul oscuro (el "hero" de los
 * sheepers, la insignia de la lana) un enlace azul no se veria. Ahi se queda
 * el amarillo de la marca, que sobre azul marino contrasta de sobra.
 *
 * OJO AL `:not(...)`, QUE COSTO UN FALLO EN LA TIENDA. La primera version de
 * esta regla decia solo `.sb-sheepers-hero a`, y dentro de ese hero vive el
 * boton "Unete gratis", que es un `<a class="sb-sheepers-cta">` con FONDO
 * amarillo. O sea: le puso letra amarilla sobre fondo amarillo, 1,00:1, un
 * boton sin texto. Subio a la tienda el 27/10/2026 y lo vio el cliente.
 *
 * La leccion, y por eso esta escrito asi: una regla de color de enlace jamas
 * debe alcanzar algo que lleve su propio fondo. Un boton no es un enlace de
 * texto aunque sea una etiqueta `<a>`.
 */
.sb-sheepers-hero a:not([class*="cta"]):not([class*="boton"]):not([class*="button"]):not([class*="compartir"]),
.sb-lana__saldo a:not([class*="cta"]):not([class*="boton"]):not([class*="button"]):not([class*="compartir"]),
.sb-lana-insignia a:not([class*="cta"]):not([class*="boton"]):not([class*="button"]):not([class*="compartir"]) {
	color: var(--sb-lana-amarillo, #ffd200);
}

/* --- el boton de "Pagina anterior" del tema ---------------------------- */

/*
 * Gris #888 sobre la franja #f5f5f5: 3,25:1. Sale en todas las paginas de la
 * cuenta, arriba a la derecha. No es amarillo, asi que no era el fallo que
 * conto el cliente, pero es un boton que no se lee y entra en el mismo
 * repaso. #595959 da 6,42:1 y sigue siendo gris discreto.
 */
.urna-back-btn,
.urna-back-btn:hover,
.urna-back-btn:focus {
	color: #595959;
}