/* Estilos específicos del Dealer Portal (login + recursos internos).
   El diseño base compartido vive en ../../assets/css/main.css y site.css. */

.portal-card {
	max-width: 26rem;
}

/* Utilidades Tailwind que faltan en el main.css precompilado (login del
   Dealer Portal): aviso de error y el link "Apply to join our network". */
.border-red-200 { border-color: #fecaca; }
.bg-red-50 { background-color: #fef2f2; }
.text-red-700 { color: #b91c1c; }
.hover\:underline:hover { text-decoration: underline; }

/* Falta como utilidad Tailwind compilada: borde en el naranja de marca
   (usado en la nota del equipo de ventas de las páginas de recursos). */
.border-accent {
	border-color: var(--color-accent);
}

/* Hero de recursos del portal (Diagonal Bracing, etc.): entrada animada
   (fade + rise, reutiliza @keyframes heroRise de site.css) y la píldora de
   precio con brillo pulsante + levantamiento al pasar el mouse — pedido
   explícito porque el diseño estático se veía plano. */
.db-hero-eyebrow,
.db-hero-title,
.db-hero-sub {
	animation: heroRise 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.db-hero-eyebrow { animation-delay: 0.05s; }
.db-hero-title   { animation-delay: 0.15s; }
.db-hero-sub     { animation-delay: 0.28s; }

/* Píldora de precio: medidas fijas en CSS propio (no utilidades Tailwind
   adivinadas) para que el texto SIEMPRE tenga aire respecto al borde
   redondeado, sin importar qué clases haya o no en el main.css
   precompilado. */
.db-price-pill {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 1.5rem;
	row-gap: 0.35rem;
	border-radius: 0.65rem;
	background: var(--color-accent);
	padding: 1.15rem 2.75rem;
	box-shadow: 0 14px 30px -12px rgba(242, 106, 33, 0.55);
	cursor: default;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
	animation:
		heroRise 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 0.42s both,
		dbPricePulse 2.6s ease-in-out 1.2s infinite;
}
.db-price-pill-amount {
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}
.db-price-pill-label {
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff;
	text-align: left;
	white-space: nowrap;
}
.db-price-pill:hover {
	transform: translateY(-4px) scale(1.05);
	background: var(--color-accent-hover);
	box-shadow: 0 20px 42px -14px rgba(242, 106, 33, 0.85);
	animation-play-state: paused, paused;
}
@keyframes dbPricePulse {
	0%, 100% { box-shadow: 0 14px 30px -12px rgba(242, 106, 33, 0.55); }
	50%      { box-shadow: 0 18px 42px -10px rgba(242, 106, 33, 0.85); }
}
@media (prefers-reduced-motion: reduce) {
	.db-hero-eyebrow,
	.db-hero-title,
	.db-hero-sub,
	.db-price-pill {
		animation: none !important;
	}
}

/* Utilidades de Tailwind que las páginas de recursos del portal necesitan
   pero que NO estaban en el set precompilado de main.css (ese archivo solo
   incluye las clases que ya se usaban en el resto del sitio). Agregarlas acá
   evita que el layout se rompa en silencio por una clase "fantasma". */
.italic { font-style: italic; }
.items-start { align-items: flex-start; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.max-w-4xl { max-width: 56rem; }
.max-w-6xl { max-width: 72rem; }
.mt-5 { margin-top: 1.25rem; }
.gap-14 { gap: 3.5rem; }
.py-14 { padding-block: 3.5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pr-4 { padding-right: 1rem; }
.py-8 { padding-block: 2rem; }
@media (min-width: 40rem) {
	.sm\:p-8 { padding: 2rem; }
}
@media (min-width: 48rem) {
	.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- AZ Header (tabla de precios de headers) ---- */
.db-header-note {
	border-radius: 0.65rem;
	border: 1px solid var(--color-accent);
	background: rgba(242, 106, 33, 0.08);
	padding: 1.25rem 1.5rem;
	animation: heroRise 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both;
}
.db-header-note-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: #fff;
}
.db-header-note-body {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--color-blue-100);
}

.db-header-list {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}
.db-header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	border-radius: 0.75rem;
	border: 1px solid var(--color-gray-200);
	background: #171717; /* superficie de tarjeta oscura del sitio (misma que .bg-white pisado en site.css) — var(--color-white) NO sirve acá: sigue siendo #fff puro, site.css solo redefine la clase .bg-white, no la variable. */
	padding: 1.25rem 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	animation: heroRise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.db-header-row:hover {
	transform: translateY(-3px);
	border-color: var(--color-accent);
	box-shadow: 0 14px 30px -16px rgba(242, 106, 33, 0.55);
}
.db-header-row:nth-child(1) { animation-delay: 0.05s; }
.db-header-row:nth-child(2) { animation-delay: 0.11s; }
.db-header-row:nth-child(3) { animation-delay: 0.17s; }
.db-header-row:nth-child(4) { animation-delay: 0.23s; }
.db-header-row:nth-child(5) { animation-delay: 0.29s; }
.db-header-row:nth-child(6) { animation-delay: 0.35s; }
.db-header-row-label {
	flex: 0 0 9rem;
}
.db-header-row-range {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--color-dark);
}
.db-header-row-load {
	margin-top: 0.15rem;
	font-size: 0.78rem;
	color: var(--color-gray-500);
}
.db-header-row-bar {
	flex: 1 1 12rem;
	min-width: 8rem;
}
.db-header-row-price {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
}
.db-header-row-amount {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--color-accent);
	white-space: nowrap;
}
.db-header-row-amount span {
	margin-left: 0.15rem;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--color-gray-500);
}
.db-header-row-height {
	margin-top: 0.15rem;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--color-gray-500);
}
@media (max-width: 40rem) {
	.db-header-row { flex-direction: column; align-items: stretch; text-align: center; }
	.db-header-row-price { margin-left: 0; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
	.db-header-note,
	.db-header-row {
		animation: none !important;
	}
	.db-header-row:hover {
		transform: none;
	}
}

/* ---- welcome.html: imágenes de recursos del dealer, enmarcadas ---- */
.portal-gallery {
	position: relative;
	background-image: radial-gradient(60% 55% at 50% 0%, rgba(242, 106, 33, 0.1), transparent 70%);
}
.portal-gallery-pair {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media (min-width: 640px) { .portal-gallery-pair { grid-template-columns: repeat(2, 1fr); } }
.portal-image-label {
	margin-bottom: 1rem;
	text-align: center;
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--color-accent);
}
.portal-image-card {
	border-radius: 1rem;
	border: 1px solid var(--color-gray-200);
	background: #171717;
	padding: 1.5rem;
	box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.65);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	animation: heroRise 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.portal-image-card:nth-child(1) { animation-delay: 0.05s; }
.portal-image-card:nth-child(2) { animation-delay: 0.12s; }
.portal-image-card:nth-child(3) { animation-delay: 0.19s; }
.portal-image-card:nth-child(4) { animation-delay: 0.26s; }
.portal-image-card:hover {
	transform: translateY(-6px);
	border-color: rgba(242, 106, 33, 0.45);
	box-shadow: 0 26px 50px -18px rgba(242, 106, 33, 0.35);
}
.portal-image-frame {
	overflow: hidden;
	border-radius: 0.65rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.portal-image-card img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.5s ease;
}
.portal-image-card:hover img {
	transform: scale(1.025);
}
@media (prefers-reduced-motion: reduce) {
	.portal-image-card {
		animation: none !important;
		transition: none;
	}
	.portal-image-card:hover { transform: none; }
	.portal-image-card img { transition: none; }
	.portal-image-card:hover img { transform: none; }
}

/* ---- Insulation ---- */
.ins-tiers {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media (min-width: 1024px) { .ins-tiers { grid-template-columns: repeat(2, 1fr); } }
.ins-badge {
	display: inline-flex;
	align-items: center;
	border-radius: 9999px;
	padding: 0.35rem 0.9rem;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
	background: var(--color-accent);
	white-space: nowrap;
}
.ins-tier:nth-child(2) .ins-badge {
	background: var(--color-sun);
	color: #171717;
}
.ins-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
}
.ins-price-amount {
	font-size: 2.25rem;
	font-weight: 800;
	color: var(--color-accent);
}
.ins-price-unit {
	margin-left: 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--color-gray-500);
}
.ins-formula {
	border-radius: 0.6rem;
	border: 1px solid var(--color-gray-200);
	background: #171717;
	padding: 0.9rem 1.1rem;
}
.ins-formula-title {
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-accent);
}
.ins-formula-line {
	margin-top: 0.35rem;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--color-gray-500);
}

/* ---- Available Color ---- */
.color-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem;
}
@media (min-width: 640px) { .color-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .color-grid { grid-template-columns: repeat(5, 1fr); } }
.color-swatch {
	aspect-ratio: 4 / 3;
	border-radius: 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 3px, transparent 3px 22px, rgba(0, 0, 0, 0.12) 22px 23px, transparent 23px 44px);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 8px 20px -12px rgba(0, 0, 0, 0.6);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.color-card:hover .color-swatch {
	transform: translateY(-4px);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 16px 30px -14px rgba(0, 0, 0, 0.75);
}
@media (prefers-reduced-motion: reduce) {
	.dealer-resource-card,
	.color-swatch {
		transition: none;
	}
}

/* ---- Admin (dealers/portal/admin.php): reemplazar imágenes del portal ---- */
.admin-image-card {
	display: flex;
	flex-direction: column;
	border-radius: 1rem;
	border: 1px solid var(--color-gray-200);
	background: #171717;
	padding: 1.5rem;
	box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.65);
}
.admin-upload-form {
	margin-top: 1.1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}
.admin-upload-form input[type="file"] {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.78rem;
	color: var(--color-gray-500);
}
.admin-upload-btn {
	border-radius: 0.5rem;
	background: var(--color-accent);
	padding: 0.5rem 1.1rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: #fff;
	border: none;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.admin-upload-btn:hover {
	opacity: 0.9;
}
.admin-flash {
	border-radius: 0.6rem;
	padding: 0.85rem 1.1rem;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
}
.admin-flash--ok {
	border: 1px solid rgba(52, 199, 89, 0.4);
	background: rgba(52, 199, 89, 0.12);
	color: #4ade80;
}
.admin-flash--error {
	border: 1px solid rgba(242, 106, 33, 0.4);
	background: rgba(242, 106, 33, 0.12);
	color: var(--color-accent);
}
.admin-image-card--new {
	border-style: dashed;
	border-color: var(--color-gray-200);
}
.admin-field-label {
	flex: 1 1 100%;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-gray-500);
}
.admin-upload-form input[type="text"] {
	flex: 1 1 100%;
	min-width: 0;
	border-radius: 0.4rem;
	border: 1px solid var(--color-gray-200);
	background: #0d0d0d;
	padding: 0.5rem 0.75rem;
	font-size: 0.85rem;
	color: #fff;
}
.admin-upload-form input[type="text"]:focus {
	outline: none;
	border-color: var(--color-accent);
}
.admin-file-chip,
.portal-file-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: 0.65rem;
	border: 1px dashed var(--color-gray-200);
	padding: 1.5rem 1rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-accent);
	text-align: center;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.admin-file-chip:hover,
.portal-file-chip:hover {
	border-color: var(--color-accent);
	background: rgba(242, 106, 33, 0.08);
}