/* ═══════════════════════════════════════════════════
   Calculadora de Hipoteca — Estilos
   Autor: Carlos Mancilla · carlosmancilla.com
   ═══════════════════════════════════════════════════ */

/* ── Reset interno ────────────────────────────────── */
.calchip-wrapper *,
.calchip-wrapper *::before,
.calchip-wrapper *::after {
	box-sizing: border-box;
}

/* ── Contenedor principal ─────────────────────────── */
.calchip-wrapper {
	background:    #171311;
	color:         #f9f8f6;
	font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size:     15px;
	line-height:   1.5;
	padding:       36px 32px;
	border-radius: 14px;
	max-width:     620px;
	margin:        0 auto;
}

/* ── Datos personales ─────────────────────────────── */
.calchip-personal {
	margin-bottom: 32px;
}

.calchip-personal-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 14px;
}

@media (max-width: 600px) {
	.calchip-personal-grid {
		grid-template-columns: 1fr;
	}
}

.calchip-pfield label {
	display:       block;
	font-size:     13px;
	color:         #c4bfbb;
	margin-bottom: 6px;
	font-weight:   500;
}

.calchip-pfield input {
	width:         100%;
	background:    #231f1c;
	border:        1px solid #3b3330;
	color:         #f9f8f6;
	padding:       10px 13px;
	border-radius: 7px;
	font-size:     14px;
	outline:       none;
	transition:    border-color 0.2s;
}

.calchip-pfield input:focus {
	border-color: #f9a410;
}

.calchip-pfield input::placeholder {
	color: #6b6460;
}

/* ── Grupo de campo con slider ────────────────────── */
.calchip-fgroup {
	margin-bottom: 28px;
}

.calchip-fheader {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   10px;
}

.calchip-flabel {
	font-size:   15px;
	color:       #f9f8f6;
	font-weight: 400;
}

/* ── Caja de valor con +/- ────────────────────────── */
.calchip-valbox {
	display:       flex;
	align-items:   center;
	background:    #231f1c;
	border:        1px solid #3b3330;
	border-radius: 7px;
	overflow:      hidden;
}

.calchip-valbox--narrow {
	/* para plazo y tasa */
}

/* Botones +/- dentro del valbox */
.calchip-vbtn {
	background:      transparent;
	border:          none;
	color:           #f9f8f6;
	font-size:       20px;
	width:           38px;
	height:          42px;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	transition:      background 0.18s, color 0.18s;
	line-height:     1;
}

.calchip-vbtn:hover {
	background: #f9a410;
	color:      #171311;
}

/* Input editable dentro del valbox */
.calchip-vinput {
	background:  transparent;
	border:      none;
	color:       #f9f8f6;
	font-size:   15px;
	font-weight: 700;
	text-align:  right;
	width:       80px;
	outline:     none;
	padding:     0 2px;
	min-width:   0;
}

.calchip-vinput--center {
	text-align: center;
	width:      52px;
}

/* Quitar flechas del input number nativo */
.calchip-vinput::-webkit-outer-spin-button,
.calchip-vinput::-webkit-inner-spin-button { -webkit-appearance: none; }
.calchip-vinput[type="number"] { -moz-appearance: textfield; }

.calchip-unit {
	color:       #c4bfbb;
	font-size:   14px;
	font-weight: 400;
	padding:     0 4px 0 0;
	flex-shrink: 0;
}

.calchip-pct {
	color:       #f9a410;
	font-size:   14px;
	font-weight: 700;
	min-width:   38px;
	text-align:  center;
	flex-shrink: 0;
}

/* ── Slider ───────────────────────────────────────── */
.calchip-strack {
	padding: 6px 0;
}

.calchip-slider {
	-webkit-appearance: none;
	appearance:         none;
	width:              100%;
	height:             5px;
	border-radius:      5px;
	background:         #3b3330;
	outline:            none;
	cursor:             pointer;
	display:            block;
}

/* Thumb – Chrome / Safari */
.calchip-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance:         none;
	width:              22px;
	height:             22px;
	border-radius:      50%;
	background:         #f9a410;
	cursor:             pointer;
	box-shadow:         0 2px 8px rgba(249, 164, 16, 0.45);
	transition:         transform 0.15s;
}

.calchip-slider::-webkit-slider-thumb:hover {
	transform: scale(1.15);
}

/* Thumb – Firefox */
.calchip-slider::-moz-range-thumb {
	width:        22px;
	height:       22px;
	border-radius: 50%;
	background:   #f9a410;
	border:       none;
	cursor:       pointer;
	box-shadow:   0 2px 8px rgba(249, 164, 16, 0.45);
	transition:   transform 0.15s;
}

.calchip-slider::-moz-range-thumb:hover {
	transform: scale(1.15);
}

/* Track progress – Firefox */
.calchip-slider::-moz-range-progress {
	background:    #f9a410;
	border-radius: 5px;
	height:        5px;
}

/* ── Tipo de interés ──────────────────────────────── */
.calchip-interes-group {
	margin-bottom: 30px;
}

.calchip-interes-row {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	flex-wrap:       wrap;
	gap:             14px;
}

/* Radios personalizados */
.calchip-radios {
	display: flex;
	gap:     20px;
}

.calchip-radio {
	display:     flex;
	align-items: center;
	gap:         8px;
	cursor:      pointer;
	font-size:   15px;
	user-select: none;
}

.calchip-radio input[type="radio"] {
	display: none;
}

.calchip-radio-dot {
	width:        18px;
	height:       18px;
	border-radius: 50%;
	border:       2px solid #6b6460;
	display:      inline-flex;
	align-items:  center;
	justify-content: center;
	flex-shrink:  0;
	transition:   border-color 0.2s;
}

.calchip-radio-dot::after {
	content:       '';
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    #f9a410;
	opacity:       0;
	transition:    opacity 0.2s;
}

.calchip-radio input[type="radio"]:checked ~ .calchip-radio-dot {
	border-color: #f9a410;
}

.calchip-radio input[type="radio"]:checked ~ .calchip-radio-dot::after {
	opacity: 1;
}


/* ── Info icon ────────────────────────────────────── */
.calchip-iinfo {
	background:    transparent;
	border:        1.5px solid #6b6460;
	border-radius: 50%;
	color:         #c4bfbb;
	font-size:     11px;
	font-style:    italic;
	font-family:   Georgia, serif;
	width:         18px;
	height:        18px;
	line-height:   1;
	cursor:        pointer;
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	vertical-align: middle;
	margin-left:   4px;
	padding:       0;
	transition:    background 0.2s, border-color 0.2s, color 0.2s;
}

.calchip-iinfo:hover {
	background:    #f9a410;
	border-color:  #f9a410;
	color:         #171311;
}

/* ── Errores ──────────────────────────────────────── */
.calchip-errors {
	background:    rgba(220, 60, 60, 0.12);
	border:        1px solid rgba(220, 60, 60, 0.35);
	border-radius: 7px;
	color:         #f87474;
	padding:       12px 16px;
	font-size:     14px;
	margin-bottom: 16px;
	line-height:   1.6;
}

/* ── Botón calcular ───────────────────────────────── */
.calchip-btn-calc {
	display:        block;
	width:          100%;
	padding:        16px;
	background:     #f9a410;
	color:          #171311;
	border:         none;
	border-radius:  9px;
	font-size:      16px;
	font-weight:    700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	cursor:         pointer;
	margin-top:     4px;
	transition:     opacity 0.2s, transform 0.15s;
}

.calchip-btn-calc:hover {
	opacity: 0.9;
}

.calchip-btn-calc:active {
	transform: scale(0.98);
}

/* ── Resultados ───────────────────────────────────── */
.calchip-results {
	margin-top:  28px;
	border-top:  1px solid #3b3330;
	padding-top: 24px;
}

.calchip-saludo {
	font-size:     14px;
	color:         #c4bfbb;
	font-style:    italic;
	margin-bottom: 18px;
	line-height:   1.6;
}

.calchip-saludo strong {
	color:       #f9a410;
	font-style:  normal;
}

.calchip-rrow {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	padding:         12px 0;
	border-bottom:   1px solid #231f1c;
	font-size:       15px;
	color:           #c4bfbb;
}

.calchip-rval {
	color:      #f9f8f6;
	text-align: right;
}

.calchip-rhint {
	display:    block;
	margin-top: 2px;
	font-size:  11px;
	color:      #8a847f;
	font-style: italic;
	max-width:  260px;
	line-height: 1.4;
}

.calchip-rrow--total {
	color: #f9f8f6;
}

.calchip-rrow--total .calchip-rval {
	font-weight: 600;
}

.calchip-rrow--prestamo {
	color: #f9f8f6;
}

.calchip-rrow--prestamo .calchip-rval {
	font-size:   17px;
	font-weight: 700;
}

.calchip-rrow--cuota {
	border-bottom: none;
	padding-top:   14px;
}

.calchip-rrow--cuota span:first-child {
	font-size:   15px;
	font-weight: 700;
	color:       #f9f8f6;
}

.calchip-cuota-val {
	font-size:   26px;
	font-weight: 700;
	color:       #f9a410;
}