/**
 * Estilos de la parte pública.
 *
 * Todo cuelga de .ini-dep- para no pisar nada del theme.
 */

.ini-dep-aviso {
	margin: 1rem 0 1.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid rgba(90, 255, 253, 0.25);
	border-radius: 12px;
	background: rgba(90, 255, 253, 0.06);
}

.ini-dep-aviso__texto {
	margin: 0;
	font-size: .95rem;
	line-height: 1.6;
}

.ini-dep-aviso__nota {
	margin: .5rem 0 0;
	font-size: .8rem;
	opacity: .75;
}

/*
 * Desglose dentro de la ventana (modal) del curso.
 *
 * La ventana es blanca, pero la web es oscura y sus reglas generales ponen el
 * texto en claro. Por eso aquí los colores van con !important y con un
 * selector fuerte: si no, el desglose sale blanco sobre blanco.
 */
.ini-dep-aviso.ini-dep-aviso--modal,
#ini-product-modal .ini-dep-aviso--modal {
	margin: 14px 0 !important;
	padding: 14px 16px !important;
	border: 1px solid #cfe6e6 !important;
	border-radius: 12px !important;
	background: #f4fbfb !important;
	color: #173b44 !important;
	-webkit-text-fill-color: #173b44 !important;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
}

.ini-dep-aviso--modal .ini-dep-desglose__fila {
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 !important;
	padding: 5px 0 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
}

.ini-dep-aviso.ini-dep-aviso--modal .ini-dep-desglose__etiqueta,
#ini-product-modal .ini-dep-aviso--modal .ini-dep-desglose__etiqueta {
	color: #46585c !important;
	-webkit-text-fill-color: #46585c !important;
	font-weight: 500 !important;
	opacity: 1 !important;
}

.ini-dep-aviso.ini-dep-aviso--modal .ini-dep-desglose__importe,
.ini-dep-aviso.ini-dep-aviso--modal .ini-dep-desglose__importe *,
#ini-product-modal .ini-dep-aviso--modal .ini-dep-desglose__importe,
#ini-product-modal .ini-dep-aviso--modal .ini-dep-desglose__importe * {
	white-space: nowrap;
	font-weight: 600 !important;
	color: #173b44 !important;
	-webkit-text-fill-color: #173b44 !important;
	opacity: 1 !important;
}

.ini-dep-aviso--modal .ini-dep-desglose__fila--hoy {
	margin: 4px 0 !important;
	padding: 9px 0 !important;
	border-top: 1px solid #cfe6e6;
	border-bottom: 1px solid #cfe6e6;
	font-size: 15px !important;
}

.ini-dep-aviso.ini-dep-aviso--modal .ini-dep-desglose__fila--hoy .ini-dep-desglose__etiqueta,
#ini-product-modal .ini-dep-aviso--modal .ini-dep-desglose__fila--hoy .ini-dep-desglose__etiqueta {
	color: #173b44 !important;
	-webkit-text-fill-color: #173b44 !important;
	font-weight: 700 !important;
}

.ini-dep-aviso.ini-dep-aviso--modal .ini-dep-desglose__fila--hoy .ini-dep-desglose__importe,
.ini-dep-aviso.ini-dep-aviso--modal .ini-dep-desglose__fila--hoy .ini-dep-desglose__importe *,
#ini-product-modal .ini-dep-aviso--modal .ini-dep-desglose__fila--hoy .ini-dep-desglose__importe,
#ini-product-modal .ini-dep-aviso--modal .ini-dep-desglose__fila--hoy .ini-dep-desglose__importe * {
	font-size: 18px !important;
	font-weight: 700 !important;
}

.ini-dep-aviso.ini-dep-aviso--modal .ini-dep-aviso__nota,
#ini-product-modal .ini-dep-aviso--modal .ini-dep-aviso__nota {
	margin: 8px 0 0 !important;
	padding: 0 !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: #46585c !important;
	-webkit-text-fill-color: #46585c !important;
	opacity: 1 !important;
}

.ini-dep-resumen {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
}

.ini-dep-resumen h2 {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
}

.ini-dep-resumen p {
	margin: 0 0 .75rem;
}

.ini-dep-resumen p:last-child {
	margin-bottom: 0;
}

.woocommerce tr.ini-dep-pendiente th,
.woocommerce tr.ini-dep-pendiente td {
	border-top: 1px dashed rgba(128, 128, 128, 0.35);
}

.woocommerce tr.ini-dep-pendiente small {
	display: inline-block;
	margin-top: .25rem;
	opacity: .75;
	font-size: .78em;
	line-height: 1.4;
}