/* 03 · La casilla — impreso fiscal con casillas y sello. */
.d-casilla {
  --d-bg: #EEF1E6;
  --d-ink: #1E3B2F;
  --d-soft: #46604F;
  --d-line: #1E3B2F;
  --d-field-bg: transparent;
  --d-field-line: transparent;
  --d-focus: #0B0F59;
  --d-fill: #0B0F59;
  --d-on-fill: #FFFFFF;
  --d-money: #0E7A45;
  --d-mark: #CDE9D5;
  --d-radius: 0;
  --d-font: "Archivo", system-ui, sans-serif;
  --d-font-display: "Archivo", system-ui, sans-serif;
  --ck-bg: #1E3B2F; --ck-ink: #EEF1E6; --ck-link: #EEF1E6;
  background-image: linear-gradient(#DCE3D1 1px, transparent 1px);
  background-size: 100% 24px;
}
.d-casilla .rotulo { font-family: "Archivo Narrow", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; display: flex; gap: 8px; align-items: center; }
.d-casilla .caja { border: 1.5px solid currentColor; padding: 2px 6px; }

.d-casilla .membrete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px var(--pad-x); background: var(--d-ink); color: var(--d-bg); }
.d-casilla .membrete div { display: grid; gap: 2px; }
.d-casilla .membrete .rotulo { font-size: 11px; letter-spacing: 0.1em; }
.d-casilla .membrete .marca { font-weight: 800; font-size: 18px; }
.d-casilla .membrete img { height: 16px; width: auto; }

.d-casilla .impreso { max-width: 1080px; margin: 0 auto; padding: 22px var(--pad-x) 0; display: grid; gap: 24px; }
.d-casilla .apartado { display: grid; gap: 12px; align-content: start; }
.d-casilla .resultado { position: relative; }
.d-casilla h1 { font-size: clamp(42px, 12vw, 76px); font-weight: 800; line-height: 0.96; letter-spacing: -0.035em; }
.d-casilla .casilla-importe { display: grid; grid-template-columns: 78px 1fr; border: 2px solid var(--d-ink); background: #FFFFFF; }
.d-casilla .casilla-importe .num { display: grid; place-content: center; text-align: center; background: var(--d-ink); color: var(--d-bg); font-family: "Archivo Narrow", sans-serif; font-weight: 700; font-size: 12px; line-height: 1.2; padding: 8px; }
.d-casilla .casilla-importe .num span { display: block; font-size: 21px; }
.d-casilla .casilla-importe .valor { padding: 12px 14px; display: grid; gap: 2px; }
.d-casilla .casilla-importe .valor span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.d-casilla .casilla-importe strong { font-size: clamp(34px, 10vw, 52px); font-weight: 800; letter-spacing: -0.03em; color: var(--d-money); white-space: nowrap; }
.d-casilla .sello { position: relative; justify-self: end; margin: -26px 8px 0 0; transform: rotate(-9deg); display: flex; gap: 6px; align-items: center; padding: 6px 10px; border: 3px solid #0B0F59; border-radius: 6px; color: #0B0F59; background: color-mix(in srgb, var(--d-bg) 85%, transparent); font-weight: 800; font-size: 15px; letter-spacing: 0.1em; }
.d-casilla .texto { font-size: 15.5px; line-height: 1.55; }

.d-casilla .hoja { border: 2px solid var(--d-ink); background: #FFFFFF; gap: 0; scroll-margin-top: 12px; }
.d-casilla .hoja .cabeza { padding: 10px 12px; border-bottom: 2px solid var(--d-ink); }
.d-casilla .hoja .cuerpo { padding: 14px 12px; }
.d-casilla .hoja .cuerpo:empty { display: none; }
.d-casilla .field { margin-bottom: 0; padding: 8px 10px; border: 1px solid var(--d-ink); margin-top: -1px; }
.d-casilla .pareja .field + .field { margin-left: -1px; }
.d-casilla .field label { font-family: "Archivo Narrow", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 2px; }
.d-casilla .field input, .d-casilla .field select { height: 34px; padding: 0; border: 0; font-weight: 500; font-size: 16px; }
.d-casilla .field input:focus { box-shadow: none; }
.d-casilla .field:focus-within { outline: 3px solid var(--d-focus); outline-offset: -3px; }
.d-casilla .tel-prefijo { left: 0; font-size: 16px; }
.d-casilla .tel-wrap input { padding-left: 38px; }
.d-casilla .consent { margin-top: 12px; }
.d-casilla .pareja { gap: 0; }

.d-casilla .rejilla { display: grid; grid-template-columns: repeat(2, 1fr); border: 2px solid var(--d-ink); background: #FFFFFF; }
.d-casilla .rejilla div { display: grid; gap: 2px; padding: 12px; border-right: 1px solid var(--d-ink); border-bottom: 1px solid var(--d-ink); }
.d-casilla .rejilla div:nth-child(2n) { border-right: 0; }
.d-casilla .rejilla div:nth-last-child(-n+2) { border-bottom: 0; }
.d-casilla .rejilla .n { font-family: "Archivo Narrow", sans-serif; font-size: 11px; font-weight: 700; }
.d-casilla .rejilla b { font-size: 28px; font-weight: 800; }
.d-casilla .rejilla span:last-child { font-size: 12.5px; }

.d-casilla .pie { max-width: 1080px; margin: 0 auto; padding: 24px var(--pad-x) 30px; display: grid; gap: 10px; font-family: "Archivo Narrow", sans-serif; font-size: 11.5px; letter-spacing: 0.05em; }
.d-casilla .pie nav { display: flex; gap: 16px; }

@media (min-width: 960px) {
  :root { --pad-x: 40px; }
  .d-casilla .impreso { grid-template-columns: 1fr 1fr; column-gap: 40px; padding-top: 40px; }
  .d-casilla .hoja { grid-row: span 2; }
}