/* TaxiTrux · Libro de Reclamaciones. Va después de taxitru.css.
   La página se lee como un libro oficial: tapa de cuero con letras doradas, y debajo la hoja donde se escribe.
   Documento regulado: nada se mueve en el formulario ni en la constancia. Lo único animado son los estados de carga:
   el giro de los botones (taxitru.css) y el pulso del selector de viajes mientras carga. */

:root {
  --cover: #2a140c; --cover-lit: #4b2517; --cover-deep: #190b06; --gold-line: rgba(217, 137, 95, .5);
  --libro-max: 1320px;
  --pad-l: max(var(--gutter), var(--safe-l)); --pad-r: max(var(--gutter), var(--safe-r));
  --sheet-l: var(--pad-l); --sheet-r: var(--pad-r);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root { --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1c19' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
}

/* El formulario no se desliza: al saltar entre campos el foco llega de inmediato.
   El relleno superior evita que la cabecera y los pasos fijos tapen el campo con foco. */
html { scroll-behavior: auto; scroll-padding-top: calc(var(--stick) + 84px); }
[data-step-heading]:focus { outline: none; }

/* ── Tapa ── */
.cover { position: relative; isolation: isolate; overflow: clip; background: radial-gradient(130% 150% at 82% -10%, var(--cover-lit) 0%, var(--cover) 52%, var(--cover-deep) 100%); }
/* Filete hundido y lomo cosido: son de la tapa, no de la página. */
.cover::before { content: ""; position: absolute; z-index: -1; inset: clamp(8px, 1.1vw, 16px) clamp(8px, 1.1vw, 16px) clamp(8px, 1.1vw, 16px) calc(clamp(10px, 1.5vw, 24px) + clamp(6px, .8vw, 12px)); border: 1px solid var(--gold-line); box-shadow: 0 0 0 3px var(--cover), 0 0 0 4px var(--gold-line); }
.cover::after { content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: clamp(10px, 1.5vw, 24px); background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 18px, rgba(217, 137, 95, .32) 18px 26px, rgba(0, 0, 0, 0) 26px 34px), rgba(0, 0, 0, .34); border-right: 1px solid rgba(0, 0, 0, .5); }
.cover .wrap.cover-in { display: grid; gap: clamp(20px, 3vw, 32px); max-width: calc(var(--libro-max) + var(--pad-l) + var(--pad-r)); padding: clamp(36px, 6vw, 84px) calc(var(--pad-r) + 10px) clamp(36px, 6vw, 84px) calc(var(--pad-l) + 18px); }
.cover .meta { display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(14px, 2vw, 22px); color: var(--night-ink); }
.cover .meta .i { width: 22px; height: 22px; color: var(--taxi); }
.cover h1 { font: 700 clamp(34px, 10.9vw, 106px)/.96 var(--display); text-transform: uppercase; letter-spacing: .012em; color: var(--taxi); text-wrap: wrap; overflow-wrap: anywhere; }
.cover-text { display: grid; gap: 14px; justify-items: start; }
.cover-text p { max-width: 56ch; color: var(--night-ink); }
.cover-text strong { color: var(--taxi); font-weight: 500; }
.cover-text .btn { margin-top: 6px; box-shadow: none; }
@media (max-width: 519px) { .cover-text .btn { width: 100%; } }
@media (min-width: 980px) {
  .cover .wrap.cover-in { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: end; gap: clamp(32px, 4vw, 64px); }
  .cover h1 { font-size: clamp(66px, 6.9vw, 100px); }
}
/* Dorado de la tapa. Solo en pantalla: al imprimir el texto no puede quedar transparente. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  @media screen and (forced-colors: none) {
    .cover h1 { background: linear-gradient(100deg, #ffdd77 0%, #f5b700 38%, #ffe394 58%, #f5b700 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  }
}

/* ── Disposición ── */
.libro-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3.4vw, 44px) clamp(28px, 3.6vw, 56px); width: 100%; max-width: calc(var(--libro-max) + var(--pad-l) + var(--pad-r)); margin: 0 auto; padding: clamp(24px, 3.4vw, 44px) var(--pad-r) clamp(40px, 6vw, 88px) var(--pad-l); }
.libro-page > * { min-width: 0; }
.libro-page h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1; }
.libro-page p + p { margin-top: 10px; }
@media (min-width: 1100px) {
  .libro-page { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "hoja tipo" "app app"; }
  .libro-page > .libro { grid-area: hoja; }
  .libro-page > .tipo { grid-area: tipo; align-self: start; }
  .libro-page > .app-way { grid-area: app; }
}
/* La guía acompaña mientras se llena la hoja. Solo si cabe entera en la pantalla. */
@media (min-width: 1100px) and (min-height: 700px) {
  .libro-page > .tipo { position: sticky; top: calc(var(--stick) + 24px); max-height: calc(100vh - var(--stick) - 48px); max-height: calc(100svh - var(--stick) - 48px); }
}

/* ── ¿Reclamo o queja? ── */
.tipo h2 { margin-bottom: 14px; }
.tipo .table { display: block; margin: 0; font-size: 16px; }
.tipo .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tipo .table tbody { display: grid; gap: 12px; }
.tipo .table tbody tr { display: block; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--adobe); border-radius: 2px 12px 12px 2px; }
.tipo .table td { display: block; padding: 0; border: 0; }
.tipo .table td + td { margin-top: 10px; }
.tipo .table td:first-child strong { font: 700 24px/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.tipo .table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 14px; }
@media (min-width: 620px) and (max-width: 1099px) {
  .tipo .table tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── La hoja ── */
.libro { position: relative; margin: 0 calc(-1 * var(--pad-r)) 0 calc(-1 * var(--pad-l)); padding: clamp(24px, 3vw, 40px) var(--sheet-r) clamp(28px, 3.4vw, 44px) var(--sheet-l); border: 0; border-block: 1px solid var(--line); border-top: 4px solid var(--ink); border-radius: 0; }
.libro > h2 { margin-bottom: 12px; }
.libro > p.info-only { max-width: 62ch; }
@media (min-width: 720px) {
  :root { --sheet-l: clamp(36px, 4.4vw, 60px); --sheet-r: clamp(24px, 3.4vw, 48px); }
  .libro { margin: 0; border: 1px solid var(--line); border-top: 4px solid var(--ink); border-radius: 2px 2px 14px 14px; }
  /* Doble línea de margen, como en un libro contable. */
  .libro::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--sheet-l) - 16px); width: 4px; border-inline: 1px solid var(--adobe); opacity: .4; pointer-events: none; }
}

/* ── Pasos ── */
.libro .stepper { position: sticky; top: var(--stick); z-index: 5; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 22px calc(-1 * var(--sheet-r)) 14px calc(-1 * var(--sheet-l)); padding: 9px var(--sheet-r) 7px var(--sheet-l); background: var(--surface); border-block: 1px solid var(--line); }
.libro .stepper li { position: relative; display: grid; justify-items: start; gap: 2px; text-align: left; font-size: 13px; line-height: 1.25; color: var(--muted); }
.libro .stepper li::before { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 7px; background: var(--surface); font-size: 14px; }
.libro .stepper li:not(:last-child)::after { content: ""; position: absolute; top: 12px; left: 26px; right: 0; height: 2px; background: var(--line); }
.libro .stepper li[aria-current="step"]::before { border-color: var(--ink); }
@supports selector(:has(*)) {
  /* Los pasos ya hechos se deducen del actual: libro.js no cambia. */
  .libro .stepper li:has(~ li[aria-current="step"]) { color: var(--ink); }
  .libro .stepper li:has(~ li[aria-current="step"])::before { content: ""; border-color: var(--accent); background: var(--accent) var(--check) center / 18px no-repeat; }
  .libro .stepper li:has(~ li[aria-current="step"])::after { background: var(--accent); }
  /* Sin el servicio solo queda el aviso: no hay pasos que seguir. */
  #libro-app:has(#libro-unavailable:not([hidden])) .stepper,
  #libro-app:has(#libro-unavailable:not([hidden])) .status { display: none; }
}
@media (min-width: 720px) {
  .libro .stepper { padding-block: 11px; }
  .libro .stepper li { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 15px; }
  .libro .stepper li:not(:last-child)::after { position: static; flex: 1; min-width: 8px; margin-right: 8px; }
}
/* Con el teclado abierto en el celular, la pantalla es para el campo. */
@supports selector(:has(*)) {
  @media (max-width: 719px) {
    .libro:has(input:not([type="radio"]):focus, textarea:focus) .stepper { position: static; }
  }
}
.receipt-mode .libro .stepper { position: static; }
.libro .status { margin-bottom: 8px; font-size: 15px; }
/* En el paso del código, #code-info ya dice lo mismo en pantalla. El aviso sigue llegando a los lectores de pantalla. */
@supports selector(:has(*)) {
  #libro-app:has(#step-code:not([hidden])) .status { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ── Campos ── */
.libro h3[data-step-heading] { margin-bottom: 14px; font: 700 clamp(25px, 2.6vw, 30px)/1.14 var(--sans); letter-spacing: -.012em; scroll-margin-top: calc(var(--stick) + 84px); }
.libro .field { margin-bottom: 22px; }
.libro .field > label { margin-bottom: 7px; font-size: 17px; line-height: 1.3; }
.libro .optional { font-size: 15px; }
.libro .hint { margin-top: 6px; font-size: 15px; line-height: 1.4; }
.libro .field-error { margin-top: 8px; font-size: 15px; }
.libro input[type="text"], .libro input[type="tel"], .libro input[type="email"], .libro select, .libro textarea { min-height: 54px; padding: 13px 14px; font-size: 17px; border-radius: 8px; }
.libro textarea { min-height: 172px; line-height: 1.5; }
.libro #f-request { min-height: 128px; }
.libro select:disabled { background: var(--raised); color: var(--muted); cursor: progress; }
.libro input[aria-invalid="true"], .libro select[aria-invalid="true"], .libro textarea[aria-invalid="true"] { border-width: 2px; }
/* El cuadro de texto crece con lo que se escribe, sin barra interna. */
@supports (field-sizing: content) {
  .libro textarea { field-sizing: content; max-height: 70vh; max-height: 70svh; }
}
#step-email .field { max-width: 440px; }
#step-email .field-error, #step-code .field-error { max-width: 60ch; }
.libro .input-code { width: 100%; max-width: 260px; font: 700 30px/1 var(--sans); letter-spacing: .24em; font-variant-numeric: tabular-nums; }
.libro .input-amount { max-width: 240px; }
#code-info { margin-bottom: 18px; max-width: 60ch; overflow-wrap: anywhere; }
.libro .notice { margin-top: 4px; font-size: 15px; line-height: 1.45; }
.libro .notice a { color: var(--accent); }
.libro .form-error { margin: 12px 0 0; }
.libro .error-summary { margin: 0 0 22px; }
.libro .error-summary a { display: block; min-height: 44px; padding: 9px 0; line-height: 1.4; }
.libro .verified { gap: 6px; margin: 0 0 6px; font-size: 16px; color: var(--ink); }
.libro .verified::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--ok); -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat; }
#step-form > .hint { margin: 0 0 24px; }

/* Secciones de la hoja: A, B y C, como en un formulario oficial. */
#step-form { counter-reset: seccion; }
#step-form fieldset { counter-increment: seccion; margin: 0 0 clamp(26px, 3vw, 34px); padding: 0; border-top: 2px solid var(--ink); }
#step-form legend { float: left; display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 0 16px; margin: 0; font: 700 21px/1.2 var(--sans); }
#step-form legend::before { content: counter(seccion, upper-alpha); content: counter(seccion, upper-alpha) / ""; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: 7px; font: 700 18px/1 var(--display); }
#step-form legend + * { clear: both; }
#step-form .field:last-of-type { margin-bottom: 0; }
.libro .choices { gap: 12px; }
.libro .choice { position: relative; gap: 12px; min-height: 76px; padding: 14px; border-radius: 10px; }
.libro .choice input { width: 22px; height: 22px; margin: 2px 0 0; }
.libro .choice strong { display: block; font-size: 18px; line-height: 1.3; }
.libro .choice small { font-size: 15px; line-height: 1.35; margin-top: 2px; }
.libro .choice:has(input:checked) { border-width: 2px; padding: 13.5px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent); }
@media (min-width: 720px) {
  #step-form fieldset:nth-of-type(2) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
  #step-form fieldset:nth-of-type(2) legend { float: none; grid-column: 1 / -1; }
  #step-form fieldset:nth-of-type(2) .field:nth-last-of-type(2) { margin-bottom: 0; }
}

/* Botones de la hoja: sin brillo ni salto. El giro de aria-busy sigue funcionando. */
#libro-app .btn { transition: none; }
#libro-app .btn-primary { box-shadow: none; }
#libro-app button.btn:hover:not(:disabled), #libro-app button.btn:active:not(:disabled) { transform: none; }
@media (hover: hover) { #libro-app .btn-primary:hover:not(:disabled) { background: var(--taxi-strong); } }
#libro-app .actions { margin-top: 22px; }
#btn-submit, #btn-send-code, #btn-verify { min-width: 220px; }
@media (max-width: 719px) {
  #libro-app .actions .btn { width: 100%; }
  #libro-app .btn-link { justify-content: center; width: 100%; }
}

/* ── Constancia ── */
#step-receipt > p:not(.receipt-provider) { max-width: 62ch; }
.libro .receipt-code { margin: 8px 0 14px; padding: 12px 0 10px; border-block: 3px double var(--ink); font: 700 clamp(34px, 10.4vw, 60px)/1 var(--display); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.libro .receipt-list { grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 0; margin: 20px 0; border-bottom: 1px solid var(--line); }
.libro .receipt-list dt, .libro .receipt-list dd { padding: 10px 0; border-top: 1px solid var(--line); }
.libro .receipt-list dt { padding-right: 16px; font-size: 15px; }
.libro .receipt-list dt.wide { padding-bottom: 2px; }
.libro .receipt-list dd.wide { padding-top: 2px; border-top: 0; }
.libro .receipt-provider { font-size: 15px; line-height: 1.5; max-width: 72ch; }
@media (max-width: 520px) {
  .libro .receipt-list { grid-template-columns: minmax(0, 1fr); }
  .libro .receipt-list dt { padding: 10px 0 0; }
  .libro .receipt-list dd { margin: 0; padding: 0 0 10px; border-top: 0; }
}

/* ── También desde la app ── */
.app-way { padding-top: clamp(20px, 2.6vw, 28px); border-top: 2px solid var(--ink); }
.app-way h2 { margin-bottom: 18px; }
.app-way .steps { counter-reset: paso; display: grid; max-width: 68ch; }
.app-way .steps li { counter-increment: paso; position: relative; min-height: 48px; padding: 2px 0 18px 46px; }
.app-way .steps li:last-child { padding-bottom: 0; }
.app-way .steps li::before { content: counter(paso); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--outline); border-radius: 7px; background: var(--bg); font-size: 15px; font-weight: 700; }
.app-way .steps li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--line); }
.app-way code { padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--raised); font: 500 .94em/1.4 var(--sans); white-space: nowrap; }
.app-way .card { margin: 24px 0 14px; border-radius: 2px 12px 12px 2px; border-left: 4px solid var(--adobe); }
.app-way .card h3 { margin-bottom: 6px; }
.app-way .meta { margin: 0; line-height: 1.5; }
@media (min-width: 1100px) {
  .app-way { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto 1fr; gap: 0 clamp(28px, 3.6vw, 56px); align-items: start; }
  .app-way h2, .app-way .steps { grid-column: 1; }
  .app-way .card { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .app-way .meta { grid-column: 1 / -1; margin-top: 22px; max-width: 90ch; }
}

/* ── Carga: el selector de viajes late mientras llegan. Es la única animación fuera de los botones. ── */
@media screen and (prefers-reduced-motion: no-preference) {
  .libro select:disabled { animation: libro-espera 1s ease-in-out infinite alternate; }
  @keyframes libro-espera { to { opacity: .6; } }
}

@media (forced-colors: active) {
  .libro .stepper li[aria-current="step"]::before { border-width: 3px; }
  .libro .stepper li:not(:last-child)::after { background: CanvasText; }
  .libro .verified::before { background: CanvasText; }
}

/* ── Impresión ──
   taxitru.css deja blanco y negro lo común. Aquí falta lo que depende del tema: sin esto, con el sistema en oscuro, los
   avisos salen con fondo de noche y tinta negra. La constancia ocupa la hoja entera, con encabezado y filas legibles. */
@media print {
  @page { margin: 15mm 15mm 16mm; }
  :root, .is-night { --warn-bg: #ffffff; --warn-line: #000000; --error-bg: #ffffff; --ok: #000000; --adobe: #000000; --wash: #ffffff; --raised: #ffffff; --cover: #ffffff; --cover-lit: #ffffff; --cover-deep: #ffffff; }
  html { scroll-padding-top: 0; }
  body { font: 400 10.5pt/1.42 var(--sans); }
  .wrap { max-width: none; padding: 0; }

  .foot, .topbar .btn, .libro::before, .cover::before, .cover::after, .cover .meta .i { display: none !important; }
  .topbar { position: static; padding-bottom: 6pt; border-bottom: 1.5pt solid #000000; }
  .topbar-in { height: auto; }
  .logo { min-height: 0; font-size: 17pt; }
  .logo span { padding: 2pt 4pt 1pt; border: 1pt solid #000000; background: none; box-shadow: none; }

  .cover { background: none; overflow: visible; isolation: auto; }
  .cover .wrap.cover-in { display: block; max-width: none; padding: 10pt 0 8pt; }
  .cover .meta { margin: 0 0 2pt; font-size: 9pt; color: #444444; }
  .cover h1 { font-size: 22pt; line-height: 1.1; color: #000000; }
  .cover-text { display: block; margin-top: 6pt; }
  .cover-text p { max-width: none; color: #000000; }
  .cover-text p + p { margin-top: 3pt; }
  .cover-text strong { color: #000000; font-weight: 700; }

  .libro-page { display: block; max-width: none; padding: 0; }
  .libro-page p + p { margin-top: 4pt; }
  .libro { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  .tipo .table thead { position: static; }
  .app-way { display: block; }

  /* Con la constancia en pantalla se imprime solo lo necesario: proveedor y constancia. */
  .receipt-mode .info-only, .receipt-mode #libro-title { display: none !important; }
  #step-receipt { break-before: avoid; }
  .libro h3[data-step-heading] { margin: 4pt 0 6pt; font-size: 14pt; line-height: 1.2; break-after: avoid; }
  #step-receipt > p { max-width: none; break-inside: avoid; }
  .libro .receipt-code { margin: 3pt 0 6pt; padding: 6pt 0 5pt; border-block: 2.5pt double #000000; font-size: 26pt; break-inside: avoid; break-after: avoid; }
  .libro .receipt-list { grid-template-columns: 46mm minmax(0, 1fr); margin: 8pt 0; border-bottom: .75pt solid #777777; }
  .libro .receipt-list dt, .libro .receipt-list dd { padding: 3.5pt 0; border-top: .75pt solid #777777; font-size: 10pt; line-height: 1.35; }
  .libro .receipt-list dt { padding-right: 8pt; color: #444444; font-size: 9pt; }
  .libro .receipt-list dt:not(.wide), .libro .receipt-list dd:not(.wide) { break-inside: avoid; }
  .libro .receipt-list dt.wide { padding-bottom: 1pt; break-after: avoid; font-weight: 500; }
  .libro .receipt-list dd.wide { padding-top: 0; border-top: 0; orphans: 3; widows: 3; }
  .libro .receipt-provider { max-width: none; font-size: 9pt; line-height: 1.4; color: #000000; break-inside: avoid; }
  .todo { color: #444444; }
}