/**
 * plugins/themes/favetPro/styles/favet-icons.css
 *
 * Sección 18 del tema FAVET Pro: sistema de íconos e insignias.
 * Se imprime DESPUÉS de favet-pro.css (FavetProThemePlugin::init la registra
 * a continuación, con la misma prioridad "late"), así que sus reglas ganan a
 * las de las secciones anteriores cuando comparten especificidad. Va en un
 * archivo aparte para que favet-pro.css (8000 líneas) no siga creciendo y
 * para poder revisar el sistema de íconos de una sola vez.
 *
 * Sprite: images/favet-icons.svg (generado por scratchpad/icons/gen.py).
 * Este CSS lo arma scratchpad/icons/apply_css.py a partir de icons.css
 * (base) + los contextos del tema (18.1) + los pseudo-elementos (18.2).
 *
 * Índice: 18.0 .favet-ico / .favet-badge · 18.1 contextos del tema ·
 * 18.2 pseudo-elementos con el mismo glifo (buscador, correo de contacto,
 * "Leer el PDF", medalla de Patrocinadores) · 18.3 reducción de movimiento.
 */
/* =========================================================================
   18. Sistema de íconos e insignias (.favet-ico / .favet-badge)
   =========================================================================
   Sprite propio: images/favet-icons.svg (símbolos favet-i-<nombre>, glifos
   sólidos y redondeados en dos tonos). Uso en las plantillas:

     <svg class="favet-ico favet-ico--sm" aria-hidden="true" focusable="false">
       <use href="{$baseUrl}/plugins/themes/favetPro/images/favet-icons.svg#favet-i-paw"></use>
     </svg>

   Tonos: el tono principal hereda el color del texto (fill: currentColor);
   el secundario (.favet-i-b dentro del sprite) toma --favet-ico-2, que se
   hereda a través del <use>. El tono 2 siempre va ENCIMA del tono 1, así que
   funciona como calado: en una insignia debe parecerse al fondo de la
   insignia; sobre texto rojo, el rosa suave da un detalle sutil.

   Tamaños: --xs 16 · --sm 20 · (base) 24 · --lg 32 · --xl 48.
   Insignias: círculo con degradado suave y sombra; --soft (rosa, glifo rojo),
   --solid (rojo, glifo blanco), --dark (tinta, glifo blanco con detalle rojo),
   --white (blanco, glifo rojo: para paneles rojos), --glass (translúcida
   sobre rojo). Tamaños de insignia: --sm 36 · (base) 44 · --lg 56 · --xl 76.
   ------------------------------------------------------------------------- */
.favet-ico {
	--favet-ico-2: var(--favet-red-soft);
	display: inline-block;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	fill: currentColor;
	vertical-align: middle;
	overflow: visible;
	pointer-events: none;
}

.favet-ico--xs { width: 16px; height: 16px; }
.favet-ico--sm { width: 20px; height: 20px; }
.favet-ico--lg { width: 32px; height: 32px; }
.favet-ico--xl { width: 48px; height: 48px; }

/* Glifo blanco sobre rojo (botones primarios, barra roja, tarjetas rojas):
   el calado toma el rojo FAVET */
.favet-ico--inverse,
.favet-btn--primary .favet-ico,
.favet-btn--outline:hover .favet-ico,
.favet-btn--outline:focus .favet-ico,
.favet-card__placeholder .favet-ico,
.favet-archive__placeholder .favet-ico,
.favet-hero .favet-ico,
.favet-cta .favet-ico,
.favet-article__more .favet-ico {
	--favet-ico-2: var(--favet-red);
}

/* Botón claro sobre rojo: glifo rojo, calado rosa (el valor base) */
.favet-btn--light .favet-ico {
	--favet-ico-2: var(--favet-red-soft);
}

/* --- Insignias ---------------------------------------------------------- */
.favet-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	box-sizing: border-box;
	color: var(--favet-red);
	background:
		radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 55%),
		linear-gradient(150deg, #FFF6F6 0%, var(--favet-red-soft) 55%, var(--favet-red-tint) 100%);
	box-shadow:
		inset 0 0 0 1px rgba(179, 40, 45, 0.12),
		0 1px 2px rgba(35, 39, 43, 0.06),
		0 10px 20px -10px rgba(179, 40, 45, 0.45);
	vertical-align: middle;
}

.favet-badge .favet-ico {
	--favet-ico-2: var(--favet-white);
	width: 24px;
	height: 24px;
}

.favet-badge--sm { width: 36px; height: 36px; }
.favet-badge--sm .favet-ico { width: 20px; height: 20px; }
.favet-badge--lg { width: 56px; height: 56px; }
.favet-badge--lg .favet-ico { width: 32px; height: 32px; }
.favet-badge--xl { width: 76px; height: 76px; }
.favet-badge--xl .favet-ico { width: 40px; height: 40px; }

.favet-badge--solid {
	color: var(--favet-white);
	background:
		radial-gradient(120% 120% at 30% 15%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%),
		linear-gradient(150deg, #C63A3F 0%, var(--favet-red) 50%, var(--favet-red-dark) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 1px 2px rgba(35, 39, 43, 0.08),
		0 12px 24px -10px rgba(179, 40, 45, 0.7);
}

.favet-badge--solid .favet-ico {
	--favet-ico-2: var(--favet-red);
}

.favet-badge--dark {
	color: var(--favet-white);
	background:
		radial-gradient(120% 120% at 30% 15%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
		linear-gradient(150deg, #3B4046 0%, var(--favet-ink) 55%, var(--favet-footer-2) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		0 1px 2px rgba(35, 39, 43, 0.1),
		0 12px 24px -10px rgba(35, 39, 43, 0.6);
}

.favet-badge--dark .favet-ico {
	--favet-ico-2: var(--favet-red);
}

.favet-badge--white {
	color: var(--favet-red);
	background:
		radial-gradient(120% 120% at 30% 20%, #FFFFFF, rgba(255, 255, 255, 0) 60%),
		linear-gradient(150deg, #FFFFFF 0%, #FFF3F3 100%);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.12),
		0 10px 22px -10px rgba(0, 0, 0, 0.5);
}

.favet-badge--white .favet-ico {
	--favet-ico-2: var(--favet-red-soft);
}

.favet-badge--glass {
	color: var(--favet-white);
	background:
		radial-gradient(120% 120% at 30% 15%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
		rgba(255, 255, 255, 0.12);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.28),
		0 8px 18px -10px rgba(0, 0, 0, 0.45);
}

.favet-badge--glass .favet-ico {
	--favet-ico-2: rgba(120, 26, 30, 0.85);
}

/* --- 18.1 Contextos del tema: tamaños heredados de las clases previas -------
   Las clases de ícono anteriores (.favet-btn__icon, .favet-link__icon...) se
   conservan en las plantillas para no perder sus transiciones; aquí solo se
   fija el tamaño que tenían, porque .favet-ico (24px) se declara después. */
.favet-btn__icon.favet-ico,
.favet-auth__submit-icon.favet-ico,
.favet-auth__message-icon.favet-ico { width: 20px; height: 20px; }

.favet-link__icon.favet-ico,
.favet-auth__hint-icon.favet-ico,
.favet-auth__after-icon.favet-ico,
.favet-ann-full__back .favet-btn__icon.favet-ico { width: 18px; height: 18px; }

.favet-auth__switch-icon.favet-ico { width: 16px; height: 16px; }

.favet-card__placeholder-icon.favet-ico { width: 54px; height: 54px; }
.favet-archive__placeholder-icon.favet-ico { width: 44px; height: 44px; }

/* Portada: huella en el chip del hero (sustituye al punto) */
.favet-hero__kicker .favet-hero__kicker-ico {
	--favet-ico-2: var(--favet-red-dark);
	width: 18px;
	height: 18px;
	color: #FFD5D7;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

/* Pilares: la insignia flota un poco al pasar el cursor */
.favet-pillar__icon.favet-badge {
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease;
}

.favet-pillar:hover .favet-pillar__icon.favet-badge {
	transform: translateY(-3px) rotate(-6deg);
	box-shadow:
		inset 0 0 0 1px rgba(179, 40, 45, 0.14),
		0 2px 4px rgba(35, 39, 43, 0.06),
		0 16px 26px -12px rgba(179, 40, 45, 0.55);
}

/* Botón "Enviar mi caso" del menú: insignia pequeña con la huella */
.favet-nav-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 50%;
	background:
		radial-gradient(120% 120% at 30% 15%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%),
		linear-gradient(150deg, #C63A3F, var(--favet-red-dark));
	color: var(--favet-white);
	box-shadow: 0 4px 10px -4px rgba(142, 31, 35, 0.7);
	box-sizing: border-box;
}

.favet-nav-cta__icon .favet-ico {
	--favet-ico-2: var(--favet-red);
	width: 18px;
	height: 18px;
}

@media (max-width: 991.98px) {
	.pkp_site_nav_menu .pkp_navigation_primary > li.favet-nav-cta .favet-nav-cta__icon {
		width: 32px;
		height: 32px;
		background:
			radial-gradient(120% 120% at 30% 20%, #FFFFFF, rgba(255, 255, 255, 0) 60%),
			linear-gradient(150deg, #FFFFFF, #FFE9EA);
		color: var(--favet-red);
		box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.35);
	}

	.pkp_site_nav_menu .pkp_navigation_primary > li.favet-nav-cta .favet-nav-cta__icon .favet-ico {
		--favet-ico-2: var(--favet-white);
		width: 20px;
		height: 20px;
	}
}

/* Pie: correo y redes (glifos blancos sobre gris oscuro; el calado toma el fondo) */
.favet-footer__mail .favet-ico {
	--favet-ico-2: var(--favet-footer);
	width: 20px;
	height: 20px;
	color: #F5B7BA;
}

.favet-footer__social .favet-ico {
	--favet-ico-2: #2A2E32;
	width: 22px;
	height: 22px;
}

.pkp_structure_page .favet-footer__social a:hover .favet-ico,
.pkp_structure_page .favet-footer__social a:focus .favet-ico {
	--favet-ico-2: var(--favet-red);
}

/* Registro / ingreso: beneficios como insignias translúcidas sobre el panel rojo */
.favet-auth__benefit-icon.favet-badge {
	border: 0;
}

.favet-auth__benefit:hover .favet-auth__benefit-icon.favet-badge {
	background:
		radial-gradient(120% 120% at 30% 15%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%),
		rgba(255, 255, 255, 0.2);
}

/* "¡Tu cuenta está lista!": check grande y pasos con ícono */
.favet-regdone__check .favet-ico {
	--favet-ico-2: var(--favet-red);
	width: 40px;
	height: 40px;
}

.favet-regdone__num.favet-badge {
	width: 40px;
	height: 40px;
}

.favet-regdone__num.favet-badge .favet-ico {
	width: 22px;
	height: 22px;
}

/* Artículo: cabecera de la ficha "Compartir", WhatsApp y copiar */
.favet-article__card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
}

.obj_article_details.favet-article .entry_details .favet-article__card-head .favet-article__card-label {
	margin: 0;
}

.favet-share__whatsapp .favet-ico {
	--favet-ico-2: #0B6B60;
	width: 22px;
	height: 22px;
}

.pkp_structure_page .favet-share__whatsapp:hover .favet-ico,
.pkp_structure_page .favet-share__whatsapp:focus .favet-ico {
	--favet-ico-2: #075E54;
}

.favet-share__copy .favet-ico {
	width: 18px;
	height: 18px;
}

.pkp_structure_page .favet-share__copy:hover .favet-ico,
.pkp_structure_page .favet-share__copy:focus .favet-ico {
	--favet-ico-2: var(--favet-red);
}

.pkp_structure_page .favet-share__copy.is-copied .favet-ico {
	--favet-ico-2: var(--favet-ink);
}

/* Número: iconitos en las fichas (publicado, contenido, DOI) */
.obj_issue_toc.favet-issue .favet-issue__fact-label {
	display: flex;
	align-items: center;
	gap: 6px;
}

.favet-issue__fact-label .favet-ico {
	width: 15px;
	height: 15px;
	color: var(--favet-red);
}

/* Aviso completo: campana sobre la cabecera rosa */
.favet-ann-full__badge {
	position: relative;
	z-index: 1;
	margin: 0 0 14px;
}

/* Directrices: insignia del aviso "necesitas una cuenta" */
.favet-c-notice__icon.favet-badge {
	border-radius: 50%;
}

/* --- 18.2 Pseudo-elementos que dibujan íconos: mismos glifos sólidos --------
   (buscador, correo de contacto, "Leer el PDF" y la medalla de Patrocinadores) */
.page_search .search_input::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B3282D' d='M2.8 10.4 a7.6 7.6 0 1 0 15.2 0 a7.6 7.6 0 1 0 -15.2 0 Z'/%3E%3Cpath fill='%23B3282D' d='M15 17.4 L19.6 22 A1.7 1.7 0 0 0 22 19.6 L17.4 15 A1.7 1.7 0 0 0 15 17.4 Z'/%3E%3Cpath fill='%23FBEDEE' d='M5.8 10.4 a4.6 4.6 0 1 0 9.2 0 a4.6 4.6 0 1 0 -9.2 0 Z'/%3E%3C/svg%3E");
}

.page_search .submit button::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M2.8 10.4 a7.6 7.6 0 1 0 15.2 0 a7.6 7.6 0 1 0 -15.2 0 Z'/%3E%3Cpath fill='%23FFFFFF' d='M15 17.4 L19.6 22 A1.7 1.7 0 0 0 22 19.6 L17.4 15 A1.7 1.7 0 0 0 15 17.4 Z'/%3E%3Cpath fill='%23B3282D' d='M5.8 10.4 a4.6 4.6 0 1 0 9.2 0 a4.6 4.6 0 1 0 -9.2 0 Z'/%3E%3C/svg%3E");
}

.pkp_structure_page .page_contact .contact .email a::before {
	-webkit-mask: none;
	mask: none;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B3282D' d='M5.2 4.4 h13.6 a3.2 3.2 0 0 1 3.2 3.2 v8.8 a3.2 3.2 0 0 1 -3.2 3.2 h-13.6 a3.2 3.2 0 0 1 -3.2 -3.2 v-8.8 a3.2 3.2 0 0 1 3.2 -3.2 Z'/%3E%3Cpath fill='%23FFFFFF' d='M4.27 9.1 L11.37 14.1 A1.1 1.1 0 0 0 12.63 12.3 L5.53 7.3 A1.1 1.1 0 0 0 4.27 9.1 Z M12.63 14.1 L19.73 9.1 A1.1 1.1 0 0 0 18.47 7.3 L11.37 12.3 A1.1 1.1 0 0 0 12.63 14.1 Z'/%3E%3C/svg%3E");
	background-size: 18px 18px;
	background-position: center;
	background-repeat: no-repeat;
}

.pkp_structure_page .page_contact .contact .email a:hover::before,
.pkp_structure_page .page_contact .contact .email a:focus::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M5.2 4.4 h13.6 a3.2 3.2 0 0 1 3.2 3.2 v8.8 a3.2 3.2 0 0 1 -3.2 3.2 h-13.6 a3.2 3.2 0 0 1 -3.2 -3.2 v-8.8 a3.2 3.2 0 0 1 3.2 -3.2 Z'/%3E%3Cpath fill='%23B3282D' d='M4.27 9.1 L11.37 14.1 A1.1 1.1 0 0 0 12.63 12.3 L5.53 7.3 A1.1 1.1 0 0 0 4.27 9.1 Z M12.63 14.1 L19.73 9.1 A1.1 1.1 0 0 0 18.47 7.3 L11.37 12.3 A1.1 1.1 0 0 0 12.63 14.1 Z'/%3E%3C/svg%3E");
}

.pkp_structure_page .favet-article__galley--primary .obj_galley_link::after {
	-webkit-mask: none;
	mask: none;
	width: 22px;
	height: 22px;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M7 2.5h6.6L19 7.9v11.6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-15a2 2 0 0 1 2-2z'/%3E%3Cpath fill='%23B3282D' d='M13.6 2.5v4.4c0 .6.4 1 1 1H19z'/%3E%3Cpath fill='%23B3282D' d='M8.5 13.5 h7 a1 1 0 0 1 1 1 v2 a1 1 0 0 1 -1 1 h-7 a1 1 0 0 1 -1 -1 v-2 a1 1 0 0 1 1 -1 Z'/%3E%3C/svg%3E");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.pkp_structure_page .favet-article__galley--primary .obj_galley_link:hover::after,
.pkp_structure_page .favet-article__galley--primary .obj_galley_link:focus::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M7 2.5h6.6L19 7.9v11.6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-15a2 2 0 0 1 2-2z'/%3E%3Cpath fill='%238E1F23' d='M13.6 2.5v4.4c0 .6.4 1 1 1H19z'/%3E%3Cpath fill='%238E1F23' d='M8.5 13.5 h7 a1 1 0 0 1 1 1 v2 a1 1 0 0 1 -1 1 h-7 a1 1 0 0 1 -1 -1 v-2 a1 1 0 0 1 1 -1 Z'/%3E%3C/svg%3E");
}

body:not(.pkp_page_index) .pkp_structure_sidebar .block_custom::before {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: transparent;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B3282D' d='M6.6 2.2h4.6c.4 0 .7.3.7.7v.1l-1.6 5.6c-.1.4-.5.6-.9.5L5.9 7.8c-.4-.1-.6-.5-.5-.9l.5-4.1c0-.3.4-.6.7-.6z'/%3E%3Cpath fill='%23B3282D' d='M17.4 2.2h-4.6c-.4 0-.7.3-.7.7v.1l1.6 5.6c.1.4.5.6.9.5l3.5-1.3c.4-.1.6-.5.5-.9l-.5-4.1c0-.3-.4-.6-.7-.6z'/%3E%3Cpath fill='%23B3282D' d='M5.2 15.2 a6.8 6.8 0 1 0 13.6 0 a6.8 6.8 0 1 0 -13.6 0 Z'/%3E%3Cpath fill='%23FFFFFF' d='M7.2 15.2 a4.8 4.8 0 1 0 9.6 0 a4.8 4.8 0 1 0 -9.6 0 Z'/%3E%3Cpath fill='%23B3282D' d='M12 12.35 L12.83 14.21 L14.85 14.42 L13.34 15.79 L13.76 17.78 L12 16.76 L10.24 17.78 L10.66 15.79 L9.15 14.42 L11.17 14.21 Z'/%3E%3C/svg%3E"),
		radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 55%),
		linear-gradient(150deg, #FFF6F6 0%, var(--favet-red-soft) 55%, var(--favet-red-tint) 100%);
	background-size: 26px 26px, 100% 100%, 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow:
		inset 0 0 0 1px rgba(179, 40, 45, 0.12),
		0 1px 2px rgba(35, 39, 43, 0.06),
		0 10px 20px -10px rgba(179, 40, 45, 0.45);
}

/* --- 18.3 Reducción de movimiento -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.favet-pillar:hover .favet-pillar__icon.favet-badge {
		transform: none;
	}
}
