/**
 * roca-calculadoras.css
 *
 * Estilos de las calculadoras de precio.
 * Diseñados para funcionar sin depender del theme.
 * Prefijo: .roca- para evitar conflictos.
 *
 * @package Roca_Calculadoras
 */

/* ──────────────────────────────────────────────────────────
   VARIABLES
────────────────────────────────────────────────────────── */

:root {
	--roca-calc-primary:        rgb(9,58,96);  /* Azul corporativo */
	--roca-calc-primary-light:  rgb(13,84,138);
	--roca-calc-accent:         rgb(9,58,96);  /* Azul corporativo */
	--roca-calc-bg:             #f8f9fa;
	--roca-calc-bg-card:        #ffffff;
	--roca-calc-border:         #dee2e6;
	--roca-calc-border-radius:  8px;
	--roca-calc-text:           #212529;
	--roca-calc-text-muted:     #6c757d;
	--roca-calc-highlight-bg:   #eef3f8;
	--roca-calc-highlight-border: rgb(9,58,96);
	--roca-calc-input-border:   #ced4da;
	--roca-calc-input-focus:    rgb(9,58,96);
	--roca-calc-shadow:         0 2px 8px rgba(0, 0, 0, 0.08);
	--roca-calc-font-size-base: 0.95rem;
	--roca-calc-font-size-sm:   0.82rem;
	--roca-calc-font-size-lg:   1.05rem;
	--roca-calc-spacing:        1rem;
}

/* ──────────────────────────────────────────────────────────
   WRAPPER PRINCIPAL
────────────────────────────────────────────────────────── */

.roca-calculadoras {
	display:         grid;
	grid-template-columns: 1fr 1fr;
	gap:             1.25rem;
	margin:          2rem 0 1.5rem;
	padding:         0;
	box-sizing:      border-box;
}

/* Mensaje "sin precio neto" */
.roca-calculadoras--sin-neto {
	display: block;
}

/* ──────────────────────────────────────────────────────────
   TARJETA DE CALCULADORA
────────────────────────────────────────────────────────── */

.roca-calc {
	background:    var(--roca-calc-bg-card);
	border:        1px solid var(--roca-calc-border);
	border-radius: var(--roca-calc-border-radius);
	padding:       1.25rem;
	box-shadow:    var(--roca-calc-shadow);
	display:       flex;
	flex-direction: column;
	gap:           0.65rem;
	box-sizing:    border-box;
}

/* Acento de color en el borde superior */
.roca-calc--descuento {
	border-top: 3px solid var(--roca-calc-primary);
}

.roca-calc--ganancia {
	border-top: 3px solid var(--roca-calc-accent);
}

/* ──────────────────────────────────────────────────────────
   TÍTULO
────────────────────────────────────────────────────────── */

.roca-calc__title {
	font-size:   var(--roca-calc-font-size-lg);
	font-weight: 700;
	color:       var(--roca-calc-text);
	margin:      0 0 0.5rem;
	padding:     0;
	line-height: 1.3;
	border:      none;
	background:  none;
}

.roca-calc--descuento .roca-calc__title {
	color: var(--roca-calc-primary);
}

.roca-calc--ganancia .roca-calc__title {
	color: var(--roca-calc-accent);
}

/* ──────────────────────────────────────────────────────────
   FILAS
────────────────────────────────────────────────────────── */

.roca-calc__row {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             0.5rem;
	font-size:       var(--roca-calc-font-size-base);
	flex-wrap:       wrap;
}

.roca-calc__row--input {
	align-items: center;
}

/* Fila resaltada (resultado final) */
.roca-calc__row--highlight {
	background:    var(--roca-calc-highlight-bg);
	border:        1px solid var(--roca-calc-highlight-border);
	border-radius: 5px;
	padding:       0.5rem 0.75rem;
	margin-top:    0.25rem;
}

/* ──────────────────────────────────────────────────────────
   LABELS Y VALORES
────────────────────────────────────────────────────────── */

.roca-calc__label {
	color:       var(--roca-calc-text-muted);
	font-size:   var(--roca-calc-font-size-sm);
	font-weight: 500;
	flex:        1 1 55%;
}

.roca-calc__value {
	font-weight:  700;
	color:        var(--roca-calc-text);
	font-size:    var(--roca-calc-font-size-base);
	text-align:   right;
	flex:         1 1 40%;
	white-space:  nowrap;
}

/* Colores específicos de valores */
.roca-calc__value--descuento {
	color: var(--roca-calc-primary-light);
}

.roca-calc__value--neto,
.roca-calc__value--venta {
	color:     var(--roca-calc-primary);
	font-size: 1.1rem;
}

.roca-calc__value--ganancia {
	color: #27ae60;
}

/* ──────────────────────────────────────────────────────────
   INPUTS
────────────────────────────────────────────────────────── */

.roca-calc__input-wrap {
	display:     flex;
	align-items: center;
	gap:         0.35rem;
	flex:        1 1 40%;
	justify-content: flex-end;
}

.roca-calc__input {
	width:         80px;
	padding:       0.35rem 0.5rem;
	border:        1px solid var(--roca-calc-input-border);
	border-radius: 5px;
	font-size:     var(--roca-calc-font-size-base);
	text-align:    right;
	background:    #fff;
	color:         var(--roca-calc-text);
	transition:    border-color 0.2s, box-shadow 0.2s;
	/* Eliminar flechas en Chrome */
	-moz-appearance: textfield;
}

.roca-calc__input::-webkit-outer-spin-button,
.roca-calc__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.roca-calc__input:focus {
	outline:      none;
	border-color: var(--roca-calc-input-focus);
	box-shadow:   0 0 0 3px rgba(192, 57, 43, 0.15);
}

.roca-calc__unit {
	color:     var(--roca-calc-text-muted);
	font-size: var(--roca-calc-font-size-sm);
	font-weight: 600;
	min-width: 16px;
}

/* ──────────────────────────────────────────────────────────
   NOTA DE BASE (calculadora 2)
────────────────────────────────────────────────────────── */

.roca-calc__base-nota {
	font-size:    var(--roca-calc-font-size-sm);
	color:        var(--roca-calc-text-muted);
	font-style:   italic;
	margin-top:   -0.4rem;
	margin-bottom: 0.2rem;
}

/* ──────────────────────────────────────────────────────────
   DISCLAIMER LEGAL
────────────────────────────────────────────────────────── */

.roca-calc__disclaimer {
	grid-column: 1 / -1;    /* Ocupa ambas columnas */
	font-size:   var(--roca-calc-font-size-sm);
	color:       var(--roca-calc-text-muted);
	text-align:  center;
	margin:      0.25rem 0 0;
	padding:     0;
	font-style:  italic;
}

/* ──────────────────────────────────────────────────────────
   MENSAJE SIN PRECIO NETO
────────────────────────────────────────────────────────── */

.roca-calc__no-price {
	font-size:     var(--roca-calc-font-size-sm);
	color:         var(--roca-calc-text-muted);
	font-style:    italic;
	border:        1px dashed var(--roca-calc-border);
	border-radius: var(--roca-calc-border-radius);
	padding:       0.75rem 1rem;
	text-align:    center;
	margin:        1rem 0;
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────────────────────── */

/* Tablet: columnas más angostas o apiladas */
@media ( max-width: 768px ) {
	.roca-calculadoras {
		grid-template-columns: 1fr;
	}

	.roca-calc__disclaimer {
		grid-column: 1;
	}
}

/* Mobile: ajustes finos */
@media ( max-width: 480px ) {
	.roca-calc {
		padding: 1rem 0.85rem;
	}

	.roca-calc__row {
		flex-direction: column;
		align-items:    flex-start;
	}

	.roca-calc__row--input {
		flex-direction: row;
		align-items:    center;
	}

	.roca-calc__value {
		text-align: left;
	}

	.roca-calc__input-wrap {
		justify-content: flex-start;
	}
}