/* =========================================================
   o39-libro.css — Libro de Reclamaciones virtual (O39)
   Usa los tokens del tema «sugoi» (tokens-sugoi.css).
   Nombre de archivo NUEVO: la caché del CDN no lo tiene.
   ========================================================= */

.sugoi-lr { --lr-accent: var(--sg-accent, #1d3184); --lr-accent2: var(--sg-accent-2, #ea4a12); }

/* ---------- Envoltorio de la página ---------- */
.lr-wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: var(--sg-space-5, 1.5rem) var(--sg-space-4, 1rem) var(--sg-space-7, 3rem);
	font-family: var(--sg-font-body, system-ui, sans-serif);
	color: var(--sg-ink, #14161f);
}
.lr-wrap h2 { font-family: var(--sg-font-display, Georgia, serif); color: var(--lr-accent); }
.lr-intro p { color: var(--sg-ink-soft, #4b5263); line-height: 1.6; }
.lr-def {
	background: var(--sg-surface-2, #f3f6fc);
	border-left: 4px solid var(--lr-accent);
	padding: .75rem 1rem;
	border-radius: var(--sg-radius-sm, 10px);
	font-size: .95rem;
}

/* ---------- Formulario ---------- */
.lr-form { margin-top: var(--sg-space-5, 1.5rem); }
.lr-fs {
	border: 1px solid var(--sg-line, #e3e8f1);
	border-radius: var(--sg-radius, 18px);
	padding: var(--sg-space-4, 1rem) var(--sg-space-4, 1rem) var(--sg-space-5, 1.5rem);
	margin: 0 0 var(--sg-space-4, 1rem);
	background: var(--sg-surface, #fff);
}
.lr-fs legend {
	font-family: var(--sg-font-display, Georgia, serif);
	font-weight: 700;
	color: var(--lr-accent);
	padding: 0 .5rem;
	font-size: 1.05rem;
}
.lr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sg-space-3, .75rem); }
.lr-grid .lr-col2 { grid-column: 1 / -1; }
.lr-rep { margin-top: var(--sg-space-3, .75rem); padding-top: var(--sg-space-3, .75rem); border-top: 1px dashed var(--sg-line, #e3e8f1); }

.lr-form label { display: block; font-size: .9rem; font-weight: 600; color: var(--sg-ink-soft, #4b5263); }
.lr-form input[type=text], .lr-form input[type=email], .lr-form select, .lr-form textarea {
	width: 100%;
	margin-top: .3rem;
	padding: .6rem .7rem;
	border: 1px solid var(--sg-line-strong, #ccd5e5);
	border-radius: var(--sg-radius-sm, 10px);
	font: inherit;
	color: var(--sg-ink, #14161f);
	background: #fff;
	box-sizing: border-box;
}
.lr-form input:focus, .lr-form select:focus, .lr-form textarea:focus {
	outline: none;
	border-color: var(--lr-accent);
	box-shadow: var(--sg-focus, 0 0 0 3px rgba(29,49,132,.28));
}
.lr-block { display: block; margin-top: var(--sg-space-3, .75rem); }
.lr-readonly {
	background: var(--sg-surface-2, #f3f6fc);
	border-radius: var(--sg-radius-sm, 10px);
	padding: .7rem .9rem;
	margin: 0;
	font-size: .95rem;
	color: var(--sg-ink-soft, #4b5263);
}
.lr-check { display: flex; gap: .5rem; align-items: flex-start; font-weight: 500; margin-top: var(--sg-space-3, .75rem); }
.lr-check input { margin-top: .2rem; }
.lr-radio { display: flex; flex-direction: column; gap: .5rem; margin-bottom: var(--sg-space-3, .75rem); }
.lr-opt { display: flex; gap: .5rem; align-items: flex-start; font-weight: 500; padding: .6rem .8rem; border: 1px solid var(--sg-line, #e3e8f1); border-radius: var(--sg-radius-sm, 10px); cursor: pointer; }
.lr-opt:hover { border-color: var(--lr-accent); }
.lr-opt input { margin-top: .25rem; }
.lr-legal { font-size: .82rem; color: var(--sg-ink-faint, #8a92a4); margin-top: .6rem; }
.lr-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.lr-btn {
	display: inline-block;
	background: var(--lr-accent);
	color: #fff !important;
	border: none;
	padding: .85rem 1.6rem;
	border-radius: var(--sg-radius-pill, 999px);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	text-decoration: none;
}
.lr-btn:hover { background: var(--sg-accent-hover, #16266a); color: #fff !important; }
.lr-submit { margin-top: var(--sg-space-4, 1rem); width: 100%; }

.lr-errores {
	background: #fdecea;
	border: 1px solid #f5c6c0;
	border-left: 4px solid var(--sg-danger, #d32f2f);
	border-radius: var(--sg-radius-sm, 10px);
	padding: .75rem 1rem;
	margin: var(--sg-space-4, 1rem) 0;
	color: #8a1f16;
}
.lr-errores ul { margin: 0; padding-left: 1.1rem; }

/* ---------- Constancia ---------- */
.lr-ok-msg { background: #e9f6ec; border: 1px solid #b7e0c0; border-radius: var(--sg-radius, 18px); padding: 1rem 1.2rem; margin-bottom: var(--sg-space-4, 1rem); }
.lr-ok-msg h2 { margin: 0 0 .3rem; }
.lr-ok-foot { text-align: center; margin-top: var(--sg-space-4, 1rem); }

.lr-hoja { border: 2px solid var(--lr-accent); border-radius: var(--sg-radius, 18px); overflow: hidden; background: #fff; }
.lr-hoja-head { background: var(--lr-accent); color: #fff; padding: .8rem 1rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.lr-hoja-head strong { font-family: var(--sg-font-display, Georgia, serif); font-size: 1.15rem; letter-spacing: .02em; }
.lr-hoja-head span { font-size: .82rem; opacity: .9; }
.lr-hoja-tabla { width: 100%; border-collapse: collapse; }
.lr-hoja-tabla th, .lr-hoja-tabla td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--sg-line, #e3e8f1); vertical-align: top; font-size: .92rem; }
.lr-hoja-tabla th { width: 34%; color: var(--sg-ink-soft, #4b5263); font-weight: 600; background: var(--sg-surface-2, #f3f6fc); }
.lr-hoja-nota { padding: .8rem 1rem; margin: 0; font-size: .82rem; color: var(--sg-ink-soft, #4b5263); background: var(--sg-surface-2, #f3f6fc); }

/* ---------- Aviso del pie (todas las páginas) ---------- */
.lr-aviso-pie { display: flex; justify-content: center; padding: 1rem; background: var(--sg-surface-2, #f3f6fc); border-top: 1px solid var(--sg-line, #e3e8f1); }
.lr-aviso-link { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--sg-ink, #14161f); }
.lr-aviso-badge { display: inline-flex; }
.lr-aviso-texto strong { display: block; color: var(--lr-accent); font-family: var(--sg-font-display, Georgia, serif); }
.lr-aviso-texto small { color: var(--sg-ink-soft, #4b5263); }

/* ---------- Aviso en el checkout ---------- */
.lr-checkout-aviso { background: var(--sg-surface-2, #f3f6fc); border: 1px solid var(--sg-line, #e3e8f1); border-radius: var(--sg-radius-sm, 10px); padding: .7rem .9rem; font-size: .92rem; color: var(--sg-ink-soft, #4b5263); }
.lr-checkout-aviso a { color: var(--lr-accent); font-weight: 700; }
.lr-aviso-badge--sm { font-size: 1rem; }

@media (max-width: 640px) {
	.lr-grid { grid-template-columns: 1fr; }
	.lr-hoja-tabla th { width: 40%; }
}