/* 8fac · la portada de contabilidad.8fac.com (src/pages/contabilidad/index.astro).
   Va después de estilos.css de la home y usa sus colores, fuentes y botones. Todo lo de aquí lleva «cp-» para no
   pisar nada de la home. Un solo amarillo (#f2b705), siempre de fondo con tinta encima: nunca como texto.
   Superficies planas y líneas de 1 px. Sin degradados ni sombras. */

/* ------------------------------------------------------------ cabecera */

.cp-cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.cp-cabecera-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--alto-cabecera);
}
.cp-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border-radius: 4px;
  color: var(--tinta);
  text-decoration: none;
}
.cp-marca img { height: 26px; width: auto; }
.cp-marca-texto {
  padding-left: 10px;
  border-left: 1px solid var(--linea);
  color: var(--tinta-suave);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.cp-acciones {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.cp-entrar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}
.cp-entrar:hover { text-decoration: underline; }
/* En el celular más chico no entran el texto, «Entrar» y el botón: el botón lleva al formulario, que está abajo. */
@media (max-width: 379px) {
  .cp-marca-texto { display: none; }
}

/* ------------------------------------------------------------ inicio */

.cp-inicio { padding-block: clamp(28px, 5vw, 72px) clamp(48px, 7vw, 96px); }
.cp-inicio-rejilla { display: grid; gap: 36px; }
.cp-inicio-rejilla > * { min-width: 0; }
@media (min-width: 960px) {
  .cp-inicio-rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    gap: 56px;
    align-items: start;
  }
  .cp-inicio-texto { padding-top: 24px; }
}

.cp-antetitulo {
  margin-bottom: 16px;
  font-size: 1rem;
  font-weight: 700;
}
.cp-titulo {
  font-size: clamp(2.125rem, 8.4vw, 4.25rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
}
@media (min-width: 960px) {
  .cp-titulo { font-size: clamp(3.25rem, 5vw, 4.25rem); }
}
.cp-bajada {
  max-width: 38ch;
  margin-top: 22px;
  font-size: clamp(1.125rem, 1.02rem + .5vw, 1.3125rem);
  line-height: 1.45;
  text-wrap: pretty;
}
.cp-puntos {
  display: grid;
  gap: 10px;
  margin-top: 26px;
  list-style: none;
}
.cp-puntos li,
.cp-lista li {
  position: relative;
  padding-left: 30px;
  line-height: 1.4;
}
/* La marca de cada punto: un visto en tinta sobre el amarillo, como un comprobante revisado. */
.cp-puntos li::before,
.cp-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .12em;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--sol);
}
.cp-puntos li::after,
.cp-lista li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: calc(.12em + 4px);
  width: 5px;
  height: 9px;
  border: solid var(--sobre-sol);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cp-ya {
  margin-top: 28px;
  color: var(--tinta-suave);
  font-size: 1rem;
}
.cp-ya a { color: var(--tinta); font-weight: 700; }

/* ------------------------------------------------------------ el formulario */

.cp-tarjeta {
  scroll-margin-top: calc(var(--alto-cabecera) + 12px);
  padding: 22px 18px 20px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel-alto);
}
@media (min-width: 480px) {
  .cp-tarjeta { padding: 28px 26px 24px; }
}
.cp-tarjeta-titulo {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.cp-form[hidden] { display: none; }
.cp-campo { display: grid; gap: 6px; margin-top: 14px; }
.cp-campo label { font-weight: 700; line-height: 1.3; }
.cp-opcional { color: var(--tinta-suave); font-weight: 400; }
.cp-form input:not([type="hidden"]),
.cp-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1.5px solid var(--tinta-suave);
  border-radius: 8px;
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}
.cp-form textarea { resize: vertical; }
.cp-form input:focus-visible,
.cp-form textarea:focus-visible {
  border-color: var(--tinta);
  outline: 3px solid var(--tinta);
  outline-offset: 1px;
}
.cp-form input:not([type="hidden"])[aria-invalid="true"],
.cp-form textarea[aria-invalid="true"] {
  border-color: var(--rechazado);
  border-width: 2px;
}
.cp-mas { margin-top: 14px; }
.cp-mas summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.cp-mas summary::-webkit-details-marker { display: none; }
.cp-mas summary::before {
  content: "+";
  width: 1ch;
  font-family: var(--f-datos);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}
.cp-mas[open] summary::before { content: "−"; }
.cp-mas summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.cp-mas summary:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 4px; }
.cp-mas .cp-campo:first-of-type { margin-top: 4px; }
/* La trampa para robots: fuera de la vista y del orden del teclado. */
.cp-trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.cp-estado:empty { display: none; }
.cp-estado {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--anulado-fondo);
  line-height: 1.4;
}
.cp-estado-error {
  border: 1.5px solid var(--rechazado);
  background: var(--rechazado-fondo);
}
.cp-enviar { width: 100%; margin-top: 18px; }
.cp-enviar:disabled { cursor: progress; opacity: .7; }
.cp-nota {
  margin-top: 10px;
  color: var(--tinta-suave);
  font-size: .9375rem;
  line-height: 1.4;
}
.cp-nota a { color: var(--tinta); }

/* Los mensajes: sin JavaScript se ven con :target (la API vuelve a /#contador-gracias, -error o -espera) y con
   JavaScript, con la clase .ver. */
.cp-mensaje {
  display: none;
  margin-top: 16px;
  scroll-margin-top: calc(var(--alto-cabecera) + 16px);
  padding: 16px;
  border-radius: var(--radio);
  line-height: 1.4;
}
.cp-mensaje:target,
.cp-mensaje.ver { display: block; }
.cp-mensaje:focus { outline: none; }
.cp-mensaje:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.cp-mensaje p + p { margin-top: 6px; }
.cp-mensaje a { color: var(--tinta); }
.cp-mensaje-titulo { font-weight: 800; }
.cp-listo { border: 1.5px solid var(--aceptado); background: var(--aceptado-fondo); }
.cp-fallo { border: 1.5px solid var(--rechazado); background: var(--rechazado-fondo); }
/* El 429 sin JavaScript: no es un error de la persona, solo hay que esperar. */
.cp-espera { border: 1.5px solid var(--tinta-suave); background: var(--anulado-fondo); }
/* Sin JavaScript, con el «gracias» a la vista el formulario ya no hace falta. */
.cp-listo:target ~ .cp-form { display: none; }

/* ------------------------------------------------------------ secciones */

.cp-seccion {
  padding-block: clamp(48px, 8vw, 112px);
  border-top: 1px solid var(--linea);
}
.cp-mes { background: var(--papel-alto); }
.cp-entrada {
  max-width: 40ch;
  margin-top: 18px;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.5;
  text-wrap: pretty;
}
.cp-lista {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  list-style: none;
}

/* El asiento de ejemplo: papel, líneas de 1 px y los montos en Mono, alineados a la derecha. */
.cp-mes-rejilla { display: grid; gap: 36px; }
.cp-mes-rejilla > * { min-width: 0; }
@media (min-width: 960px) {
  .cp-mes-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 64px; align-items: center; }
}
.cp-asiento {
  padding: 18px 16px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
}
.cp-asiento table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-datos);
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}
.cp-asiento caption {
  padding-bottom: 10px;
  color: var(--tinta-suave);
  font-family: var(--f-texto);
  font-size: .9375rem;
  text-align: left;
}
.cp-asiento th,
.cp-asiento td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--linea);
  text-align: right;
  white-space: nowrap;
}
.cp-asiento th:first-child,
.cp-asiento td:first-child { text-align: left; }
.cp-asiento thead th {
  color: var(--tinta-suave);
  font-family: var(--f-texto);
  font-size: .875rem;
  font-weight: 700;
}
.cp-asiento-doc th {
  padding-top: 14px;
  font-family: var(--f-texto);
  font-weight: 800;
  text-align: left;
}
.cp-asiento figcaption {
  margin-top: 12px;
  color: var(--tinta-suave);
  font-size: .9375rem;
  line-height: 1.4;
}

/* ------------------------------------------------------------ cuánto cuesta */

.cp-precios {
  display: grid;
  gap: 16px;
  margin-top: 28px;
  list-style: none;
}
@media (min-width: 720px) {
  .cp-precios { grid-template-columns: 1fr 1fr; gap: 20px; max-width: 880px; }
}
.cp-precio-caja {
  padding: 22px 20px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel-alto);
}
.cp-precio-para { font-weight: 700; line-height: 1.3; }
.cp-precio-monto {
  margin-top: 14px;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
}
/* «Gratis» va sobre el amarillo, con tinta encima, como lo que sale gratis en la home. */
.cp-gratis {
  display: inline-block;
  padding: 0 .18em .02em;
  border-radius: 6px;
  background: var(--sol);
  color: var(--sobre-sol);
  letter-spacing: -.02em;
}
.cp-precio-monto .dato { letter-spacing: -.04em; }
.cp-precio-mes { font-size: 1rem; font-weight: 700; }
.cp-precio-nota {
  margin-top: 10px;
  color: var(--tinta-suave);
  line-height: 1.4;
}
.cp-precio-pie {
  margin-top: 18px;
  color: var(--tinta-suave);
  font-size: 1rem;
}

/* ------------------------------------------------------------ pie */

.cp-pie { margin-top: 0; }