/* =====================================================================
   SOLSE — Nómina Peruana para Odoo 19 Community
   Identidad: expediente normativo peruano. Papel de boleta, tinta de
   documento, granate institucional y el verde del validador como firma.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
	--papel: #FAFAF7;
	--papel-sombra: #F1EFE8;
	--tinta: #1A2332;
	--tinta-suave: #4A5568;
	--granate: #9E1B32;
	--granate-oscuro: #7A1426;
	--verde: #1E7D4E;
	--verde-claro: #E8F4EE;
	--ambar: #C9962E;
	--pauta: #D8D5CC;

	--display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--cuerpo: 'Public Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mono: 'IBM Plex Mono', 'Courier New', monospace;

	--ancho-lectura: 62rem;
	--radio: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation: none !important; transition: none !important; }
}

body {
	font-family: var(--cuerpo);
	color: var(--tinta);
	background: var(--papel);
	line-height: 1.6;
	font-size: 1rem;
}

/* ---------- Estructura expediente: nav lateral + contenido ---------- */
.expediente { display: grid; grid-template-columns: 15.5rem 1fr; min-height: 100vh; }

.indice {
	background: var(--tinta);
	color: var(--papel);
	padding: 2rem 1.4rem;
	position: sticky; top: 0; height: 100vh;
	display: flex; flex-direction: column; gap: .35rem;
}
.indice .sello-solse {
	font-family: var(--display); font-weight: 700; font-size: 1.5rem;
	color: var(--papel); letter-spacing: .02em; margin-bottom: .2rem;
}
.indice .sello-solse span { color: var(--ambar); }
.indice .subsello {
	font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
	color: #8A94A6; margin-bottom: 1.6rem; line-height: 1.4;
}
.indice a {
	color: #C7CDD8; text-decoration: none; font-size: .88rem;
	padding: .5rem .7rem; border-radius: var(--radio);
	border-left: 3px solid transparent; transition: background .15s, color .15s;
}
.indice a:hover { background: rgba(255,255,255,.07); color: #fff; }
.indice a:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
.indice a.activo {
	background: rgba(158,27,50,.35); color: #fff;
	border-left-color: var(--granate); font-weight: 600;
}
.indice .pie-indice {
	margin-top: auto; font-size: .72rem; color: #8A94A6; line-height: 1.5;
	border-top: 1px solid rgba(255,255,255,.12); padding-top: 1rem;
}

main { padding: 0; }
.pagina { max-width: var(--ancho-lectura); margin: 0 auto; padding: 3rem 2.5rem 4rem; }

/* ---------- Tipografía ---------- */
h1 {
	font-family: var(--display); font-weight: 600; font-size: 2.6rem;
	line-height: 1.12; letter-spacing: -.01em; margin-bottom: 1rem;
}
h2 {
	font-family: var(--display); font-weight: 600; font-size: 1.7rem;
	margin: 2.8rem 0 .9rem; padding-top: 1.2rem;
	border-top: 3px double var(--pauta);
}
h3 { font-size: 1.08rem; font-weight: 700; margin: 1.6rem 0 .5rem; }
p { margin-bottom: .9rem; max-width: 46rem; }
p.destacado { font-size: 1.14rem; color: var(--tinta-suave); max-width: 42rem; }
strong { font-weight: 700; }
.eyebrow {
	font-size: .74rem; text-transform: uppercase; letter-spacing: .16em;
	color: var(--granate); font-weight: 700; margin-bottom: .5rem;
}

/* ---------- La firma: cinta de validación ---------- */
.cinta-validacion {
	background: #fff; border: 1px solid var(--pauta);
	border-left: 5px solid var(--verde); border-radius: var(--radio);
	font-family: var(--mono); font-size: .86rem;
	margin: 1.4rem 0; overflow: hidden;
}
.cinta-validacion .cinta-cabecera {
	background: var(--verde-claro); color: var(--verde);
	padding: .55rem .9rem; font-weight: 600; font-size: .8rem;
	letter-spacing: .05em; border-bottom: 1px solid var(--pauta);
}
.cinta-validacion .fila {
	display: grid; grid-template-columns: 1.6rem 1fr auto;
	gap: .8rem; padding: .42rem .9rem; align-items: baseline;
	border-bottom: 1px dashed var(--papel-sombra);
}
.cinta-validacion .fila:last-child { border-bottom: none; }
.cinta-validacion .ok { color: var(--verde); font-weight: 600; }
.cinta-validacion .monto { font-weight: 600; }

/* ---------- Boleta hero ---------- */
.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.6rem; align-items: start; margin: 1rem 0 1.5rem; }
.boleta {
	background: #fff; border: 1px solid var(--pauta); border-radius: var(--radio);
	box-shadow: 0 10px 30px rgba(26,35,50,.10), 0 2px 6px rgba(26,35,50,.06);
	font-family: var(--mono); font-size: .8rem; overflow: hidden;
	transform: rotate(.6deg);
}
.boleta .boleta-cab {
	border-bottom: 2px solid var(--tinta); padding: .8rem 1rem .6rem;
	font-family: var(--cuerpo);
}
.boleta .boleta-cab .titulo-boleta { font-weight: 700; font-size: .82rem; letter-spacing: .04em; }
.boleta .boleta-cab .norma { font-size: .68rem; color: var(--tinta-suave); }
.boleta table { width: 100%; border-collapse: collapse; }
.boleta td { padding: .3rem 1rem; border-bottom: 1px dashed var(--papel-sombra); }
.boleta td:last-child { text-align: right; font-weight: 500; }
.boleta tr.total td {
	border-top: 2px solid var(--tinta); border-bottom: none;
	font-weight: 600; background: var(--verde-claro);
}
.sello-validado {
	position: relative; float: right; margin: -1.4rem 1rem 0 0;
	border: 3px solid var(--verde); color: var(--verde);
	font-family: var(--cuerpo); font-weight: 700; font-size: .78rem;
	letter-spacing: .12em; padding: .35rem .8rem; border-radius: var(--radio);
	transform: rotate(-6deg); background: rgba(255,255,255,.92);
}

/* ---------- Componentes ---------- */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1.4rem 0; }
.tarjeta {
	background: #fff; border: 1px solid var(--pauta); border-radius: var(--radio);
	padding: 1.2rem 1.3rem;
}
.tarjeta h3 { margin-top: 0; }
.tarjeta .codigo { font-family: var(--mono); font-size: .74rem; color: var(--granate); font-weight: 600; }

.tabla { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .92rem; background: #fff; border: 1px solid var(--pauta); }
.tabla th {
	background: var(--tinta); color: var(--papel); text-align: left;
	padding: .55rem .8rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
}
.tabla td { padding: .55rem .8rem; border-bottom: 1px solid var(--papel-sombra); vertical-align: top; }
.tabla tr:nth-child(even) td { background: var(--papel); }
.tabla .mono { font-family: var(--mono); font-size: .84rem; }

.aviso {
	border: 1px solid var(--pauta); border-left: 5px solid var(--ambar);
	background: #fff; padding: .9rem 1.1rem; border-radius: var(--radio); margin: 1.2rem 0;
	font-size: .93rem;
}
.aviso.ok { border-left-color: var(--verde); }

.paso { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; margin: 1.1rem 0; }
.paso .num {
	font-family: var(--display); font-weight: 700; font-size: 1.3rem;
	color: var(--granate); border: 2px solid var(--granate); border-radius: 50%;
	width: 2.4rem; height: 2.4rem; display: grid; place-items: center; background: #fff;
}
.paso h3 { margin: .15rem 0 .3rem; }
.paso p { margin-bottom: .3rem; }

code, .kbd {
	font-family: var(--mono); font-size: .85em; background: var(--papel-sombra);
	padding: .1em .4em; border-radius: 3px; border: 1px solid var(--pauta);
}
pre {
	font-family: var(--mono); font-size: .82rem; background: var(--tinta);
	color: #DCE3EE; padding: 1rem 1.2rem; border-radius: var(--radio);
	overflow-x: auto; margin: 1rem 0; line-height: 1.55;
}

.cta {
	display: inline-block; background: var(--granate); color: #fff;
	font-weight: 700; text-decoration: none; padding: .7rem 1.4rem;
	border-radius: var(--radio); margin: .4rem .6rem .4rem 0;
	transition: background .15s;
}
.cta:hover { background: var(--granate-oscuro); }
.cta.secundario { background: transparent; color: var(--granate); border: 2px solid var(--granate); }
.cta:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }

.pie-pagina {
	border-top: 3px double var(--pauta); margin-top: 3rem; padding-top: 1.2rem;
	font-size: .82rem; color: var(--tinta-suave);
	display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ---------- Responsive + impresión ---------- */
@media (max-width: 900px) {
	.expediente { grid-template-columns: 1fr; }
	.indice { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
	.indice .subsello, .indice .pie-indice { display: none; }
	.hero { grid-template-columns: 1fr; }
	.pagina { padding: 2rem 1.2rem 3rem; }
	h1 { font-size: 2rem; }
}
@media print {
	.indice { display: none; }
	.expediente { grid-template-columns: 1fr; }
	.boleta { box-shadow: none; transform: none; }
	.cta { display: none; }
	body { font-size: 11pt; }
	h2 { break-after: avoid; }
	.tabla, .cinta-validacion, .tarjeta { break-inside: avoid; }
}

/* SYSTION/Odoo portal refinements */
.indice .volver-sitio {
    margin-bottom: .55rem;
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    background: rgba(255,255,255,.04);
}
.indice .volver-sitio:hover { background: rgba(255,255,255,.10); }
@media (max-width: 900px) {
    .indice .volver-sitio { width: 100%; }
}