/**
 * Estilos de la calculadora TIR + componentes base compartidos por las demás
 * calculadoras (cards, segmentados, inputs, candados, tooltip). Los TOKENS de
 * color viven en blocks/shared/cin-core.css (D17): cambiar la paleta de todas
 * las calculadoras = editar solo ese archivo.
 */
.cin-calc {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--cin-text); background: var(--cin-s0);
	max-width: 760px; margin: 0 auto; padding: 20px 16px 40px;
	line-height: 1.5; font-variant-numeric: tabular-nums;
	border-radius: 12px;
}
.cin-calc *, .cin-calc *::before, .cin-calc *::after { box-sizing: border-box; }

/* ⚠️ Imprescindible: el atributo [hidden] se apoya en la regla
   `[hidden]{display:none}` de la hoja del NAVEGADOR, que pierde contra
   cualquier `display` declarado por el autor (.cin-field{display:flex},
   .cin-card{display:block}…). Sin esta regla, todo el `el.hidden = true`
   de view.js no oculta nada y se ven campos que no corresponden al
   escenario (p. ej. "País de la inversión" estando en Colombia). */
.cin-calc [hidden], .cin-calc [hidden][style] { display: none !important; }

.cin-h1 { font-size: 20px; font-weight: 600; margin: 0 0 2px; }
.cin-sub { font-size: 13px; color: var(--cin-text2); margin: 0 0 14px; }
.cin-aviso-rol {
	font-size: 12.5px; color: var(--cin-text2); background: var(--cin-s1);
	border-radius: var(--cin-radius); padding: 8px 12px; margin: 0 0 16px;
}
.cin-card {
	background: var(--cin-s2); border: 1px solid var(--cin-border);
	border-radius: 12px; padding: 16px 20px; margin-bottom: 16px;
}
.cin-card-accent { border-color: var(--cin-accent); }
.cin-card-title { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.cin-grid { display: grid; gap: 16px 18px; }
.cin-g-auto { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.cin-row { display: flex; gap: 18px; flex-wrap: wrap; }
.cin-field { display: flex; flex-direction: column; min-width: 0; }
.cin-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 320px; margin-bottom: 6px; }

/* min-height (no height) para que los inputs de una fila queden alineados
   aunque las etiquetas ocupen distinto número de líneas.

   ⚠️ Antes era `height: 40px` + `overflow: hidden`, y eso DECAPITABA texto: a
   12,5px con line-height 1,3 (16,25px por línea) en 40px caben 2 líneas
   exactas, y como la fila alinea a flex-end la tercera se desborda hacia
   ARRIBA — el recorte se comía la PRIMERA línea, no la última. Pasó en
   ganancia ("Retención practicada…", 2026-08-09) y en notarial ("¿El dinero
   irá a cuenta AFC…", 2026-08-10, 9px perdidos), y cada vez se parcheó a mano
   en la hoja hija. Con min-height la intención original se conserva para las
   etiquetas de 1-2 líneas —que son casi todas— y solo crece la que de verdad
   no cabe: crecer siempre es mejor que decapitar.
   Para una pregunta larga, la solución de fondo NO es dejarla en 3 líneas sino
   sacarla de la celda estrecha con .cin-field--ancho (abajo).
   GOTCHA de medición: `scrollHeight` NO detecta este recorte, porque el
   desbordamiento va hacia el block-start. Hay que comparar el `top` de la
   etiqueta contra el `top` de su fila. */
.cin-flabel-row {
	display: flex; align-items: flex-end; justify-content: space-between;
	min-height: 40px; margin-bottom: 4px; gap: 8px;
}
/* overflow-wrap: el overflow:hidden anterior también recortaba en HORIZONTAL y
   tapaba el problema; sin él, una palabra larga e irrompible (varias etiquetas
   se generan en vivo desde view.js o desde términos de taxonomía que edita el
   admin) se pintaría encima de la columna vecina. */
.cin-flabel { font-size: 12.5px; color: var(--cin-text2); line-height: 1.3; overflow-wrap: anywhere; }
/* Campo a lo ancho de la card: saca una pregunta larga de la celda estrecha
   del grid auto-fit (~165-200px) y evita la tercera línea de raíz, sin
   desalinear el input respecto a sus hermanos de fila. */
.cin-field--ancho { grid-column: 1 / -1; }
.cin-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cin-text2); cursor: pointer; }

.cin-calc input, .cin-calc select {
	font-family: inherit; font-size: 13px; color: var(--cin-text);
	background: var(--cin-s2); border: 1px solid var(--cin-border);
	border-radius: var(--cin-radius); height: 36px; padding: 0 9px; width: 100%; margin: 0;
}
.cin-calc input:focus, .cin-calc select:focus { outline: 2px solid var(--cin-accent); outline-offset: -1px; }
.cin-calc input:disabled { background: var(--cin-s1); color: var(--cin-muted); cursor: not-allowed; }
.cin-calc input[type=checkbox] { width: auto; height: auto; accent-color: var(--cin-accent); }

.cin-seg { display: inline-flex; border: 1px solid var(--cin-border); border-radius: var(--cin-radius); overflow: hidden; }
.cin-seg button {
	border: none; background: transparent; color: var(--cin-text);
	font-family: inherit; font-size: 12px; padding: 8px 12px; cursor: pointer;
}
.cin-seg button.cin-on { background: var(--cin-bg-accent); color: var(--cin-link); }
.cin-wfull { display: flex; } .cin-wfull button { flex: 1; }
/* Bloqueado para público: se ve completo pero no responde al clic. */
.cin-seg.cin-locked button, .cin-seg button.cin-lockedbtn { cursor: not-allowed; }
.cin-seg.cin-locked button:not(.cin-on), .cin-seg button.cin-lockedbtn:not(.cin-on) { color: var(--cin-muted); }

/* Candado dibujado en CSS: arco (::before) + cuerpo (::after). */
.cin-lock {
	display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px; border-radius: 50%;
	border: 1px solid var(--cin-border-strong); background: var(--cin-s1);
	color: var(--cin-muted); cursor: help; position: relative; flex-shrink: 0;
}
.cin-lock::before {
	content: ""; position: absolute; left: 50%; transform: translateX(-50%);
	top: 3px; width: 6px; height: 5px;
	border: 1.5px solid currentColor; border-bottom: 0; border-radius: 3px 3px 0 0;
}
.cin-lock::after {
	content: ""; position: absolute; left: 50%; transform: translateX(-50%);
	bottom: 3px; width: 10px; height: 7px; background: currentColor; border-radius: 2px;
}
/* El texto vive en el DOM pero se pinta en #cin-gtip (position:fixed) para que
   no lo recorte el overflow:hidden de .cin-seg (.cin-flabel-row ya no recorta
   desde 2026-08-10, pero .cin-seg sí y la razón sigue en pie). */
.cin-lock .cin-tip { display: none; }
/* Placa (i) informativa (integración notarial 2026-08-05): misma geometría
   del candado, con el texto oculto — lo muestra el tooltip global. */
.cin-calc .cin-info {
	width: 18px; height: 18px; min-width: 18px; border-radius: 50%; position: relative;
	display: inline-flex; align-items: center; justify-content: center; cursor: help;
	background: var(--cin-bg-accent); color: var(--cin-link);
	font-size: 11px; font-weight: 700; font-style: normal;
}
.cin-calc .cin-info .cin-tip { display: none; }
#cin-gtip {
	position: fixed; z-index: 9999; background: #221f19; color: #fffdf8;
	font-size: 11px; padding: 6px 8px; border-radius: 6px; max-width: 230px;
	text-align: center; line-height: 1.4; pointer-events: none;
	opacity: 0; transition: opacity .12s; transform: translate(-50%, -100%);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#cin-gtip.cin-on { opacity: 1; }
#cin-gtip.cin-below { transform: translate(-50%, 0); }

.cin-hint { font-size: 11px; color: var(--cin-muted); margin: 5px 0 0; }
.cin-err { font-size: 11px; color: var(--cin-danger); margin: 4px 0 0; }
.cin-softbox { padding: 10px 12px; background: var(--cin-s1); border-radius: var(--cin-radius); }
.cin-divider { border-top: 1px solid var(--cin-border); padding-top: 12px; margin-top: 4px; }
.cin-badge { font-size: 12px; color: var(--cin-text2); background: var(--cin-s1); padding: 6px 10px; border-radius: var(--cin-radius); }
.cin-btn {
	border: 1px solid var(--cin-border-strong); background: transparent; color: var(--cin-text);
	border-radius: var(--cin-radius); padding: 7px 12px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.cin-btn--primary {
	display: inline-block; text-decoration: none; border-color: var(--cin-accent);
	background: var(--cin-accent); color: #fff; padding: 9px 18px; font-weight: 600;
}

/* Teaser público (2026-08-09): calculadora completa NO renderizada para un
   visitante sin sesión que no está en el whitelist de acceso público — en
   su lugar, un boceto difuminado (decorativo, sin datos reales) + mensaje
   + CTA de registro. Ver CIN_Acceso::render_teaser_publico(). */
.cin-teaser { position: relative; min-height: 360px; }
.cin-teaser__blur {
	filter: blur(5px); opacity: .5; pointer-events: none; user-select: none;
}
.cin-teaser__skel {
	height: 84px; border-radius: 10px; margin-bottom: 14px;
	background: var(--cin-s1); border: 1px solid var(--cin-border);
}
.cin-teaser__overlay {
	position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; text-align: center; gap: 10px;
	padding: 24px; background: linear-gradient(to bottom, transparent, var(--cin-s0) 38%);
}
.cin-teaser__lock { font-size: 30px; margin: 0; line-height: 1; }
.cin-teaser__desc { max-width: 420px; font-size: 14px; color: var(--cin-text2); margin: 0; }
.cin-nota-viva { text-align: center; font-size: 12px; color: var(--cin-muted); margin: 0 0 16px; }

.cin-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.cin-metric { background: var(--cin-s1); border-radius: var(--cin-radius); padding: 12px 14px; min-width: 0; }
.cin-mlabel { font-size: 12px; color: var(--cin-text2); margin: 0 0 6px; }
.cin-mval { font-size: 19px; font-weight: 600; margin: 0; overflow-wrap: anywhere; line-height: 1.2; }
.cin-msub { font-size: 11px; color: var(--cin-muted); margin: 6px 0 0; }
.cin-subcat { display: grid; grid-template-columns: 1fr 130px; gap: 10px; align-items: end; margin-bottom: 10px; }
.cin-banner {
	padding: 11px 14px; border-radius: var(--cin-radius);
	background: var(--cin-bg-danger); color: var(--cin-danger); font-size: 13px; margin-bottom: 16px;
}
.cin-aviso {
	padding: 9px 12px; border-radius: var(--cin-radius); background: var(--cin-s1);
	color: var(--cin-text2); font-size: 12.5px; margin: 0 0 10px;
}

.cin-chart { position: relative; margin-bottom: 6px; }
.cin-chart svg { width: 100%; height: auto; display: block; }
.cin-axl { font-size: 10px; fill: var(--cin-muted); }
.cin-gridline { stroke: var(--cin-border); stroke-width: 1; stroke-dasharray: 2 3; }
.cin-chart-tip {
	position: absolute; pointer-events: none; background: var(--cin-text); color: var(--cin-s2);
	font-size: 11px; padding: 4px 7px; border-radius: 5px; white-space: nowrap;
	transform: translate(-50%, -130%); opacity: 0; transition: opacity .1s; z-index: 10;
}
.cin-ctitle { font-size: 13px; color: var(--cin-text2); margin: 0 0 3px; }
.cin-cnote { font-size: 11px; color: var(--cin-muted); margin: 0 0 8px; }

.cin-tabla { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; }
.cin-tabla th {
	text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--cin-border);
	color: var(--cin-text2); font-weight: 600; position: sticky; top: 0; background: var(--cin-s2);
}
.cin-tabla th:first-child, .cin-tabla td:first-child { text-align: left; }
.cin-tabla td { padding: 5px 10px; border-bottom: 1px solid var(--cin-border); text-align: right; }
.cin-tbl-wrap { max-height: 260px; overflow: auto; border: 1px solid var(--cin-border); border-radius: var(--cin-radius); }

.cin-cargando { opacity: .5; transition: opacity .15s; }

/* La tabla de reparto tiene columnas de ancho mínimo: en pantallas angostas
   scrollea dentro de su propia caja en vez de aplastar las celdas (9.2). */
.cin-calc [data-el="repartoGrid"] { overflow: auto; }
.cin-calc [data-el="repartoGrid"] > div { min-width: 430px; }

@media (max-width: 600px) {
	.cin-calc { padding: 16px 12px 32px; }
	.cin-card { padding: 14px; }
	.cin-pair { grid-template-columns: 1fr; }
	/* Los controles segmentados largos se apilan en vez de desbordarse. */
	.cin-seg { flex-wrap: wrap; }
	.cin-wfull { flex-direction: column; }
	.cin-wfull button { width: 100%; }
	/* Los gastos fijos pasan de 4 columnas a 2 para no comprimir los campos. */
	.cin-calc [data-el="listaGastosFijos"] > div { grid-template-columns: 1fr 1fr !important; }
	.cin-subcat { grid-template-columns: 1fr; }
	.cin-metrics { grid-template-columns: 1fr 1fr; }
	.cin-mval { font-size: 17px; }
}