/* [salto] */
.c-saltar {
  background: var(--c-surco);
  color: #FFFFFF;
  left: var(--e-2);
  padding: var(--e-2) var(--e-3);
  position: absolute;
  top: -100vh;
  z-index: 30;
}

.c-saltar:focus {
  top: var(--e-2);
}

/* [cabecera] */
.c-fila-planilla {
  align-items: stretch;
  background: var(--c-fondo);
  border-bottom: 1px solid var(--c-borde);
  display: flex;
  z-index: 20;
}

.c-celda {
  align-items: center;
  color: var(--c-tierra);
  display: flex;
  font-family: var(--t-titular);
  font-size: var(--t-l);
  font-weight: 600;
  padding: var(--e-3) var(--e-4);
  text-decoration: none;
}

.c-celda + .c-celda {
  border-left: 1px solid var(--c-borde);
}

.c-celda:hover {
  color: var(--c-surco-hondo);
}

.c-celda-marca {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-right: auto;
}

body[data-rubro="granos"] .c-celda[data-rubro="granos"],
body[data-rubro="costos"] .c-celda[data-rubro="costos"],
body[data-rubro="politica"] .c-celda[data-rubro="politica"],
body[data-rubro="logistica"] .c-celda[data-rubro="logistica"] {
  box-shadow: inset 0 -3px 0 var(--c-surco);
}

.c-celda-accion {
  background: var(--c-surco);
  color: #FFFFFF;
  transition: background var(--m-rapido) var(--m-curva);
}

.c-celda-accion:hover {
  background: var(--c-surco-hondo);
  color: #FFFFFF;
}

.c-franja-consumo {
  background: var(--c-brote);
  display: flex;
  flex-direction: column;
  font-size: var(--t-xs);
  gap: var(--e-1);
  padding: var(--e-2) var(--e-4);
}

/* Los dos botones que la ley manda tener a mano no pueden ser el blanco mas
   chico del sitio: 24 px de alto util es el minimo de WCAG 2.5.8. */
.c-boton-legal {
  align-items: center;
  color: var(--c-surco-hondo);
  display: inline-flex;
  font-weight: 600;
  letter-spacing: 0.04em;
  min-height: 24px;
  padding: var(--e-1) 0;
}

.c-pestanas-inferiores {
  background: var(--c-fondo);
  border-top: 1px solid var(--c-borde);
  bottom: 0;
  /* Hoy el viewport no lleva viewport-fit=cover, asi que el inset vale 0 y esto
     no cambia nada. Esta puesto para el dia que se agregue: sin el, la barra
     quedaria debajo del indicador de gestos. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  left: 0;
  position: fixed;
  right: 0;
  z-index: 25;
}

/* Debajo de 820 px estas cuatro celdas son toda la navegacion: van a 44 px,
   como el resto de los controles del sitio. */
.c-pestanas-inferiores a {
  align-items: center;
  color: var(--c-tierra);
  display: flex;
  flex: 1 1 0;
  font-size: var(--t-xs);
  justify-content: center;
  min-height: 44px;
  padding: var(--e-2) var(--e-1);
  text-align: center;
  text-decoration: none;
}

.c-pestanas-inferiores a + a {
  border-left: 1px solid var(--c-borde);
}

/* [migas] */
.c-migas {
  color: var(--c-tierra-media);
  font-size: var(--t-xs);
  margin: var(--e-4) 0 var(--e-3);
}

.c-migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-migas li + li::before {
  content: "› ";
}

.c-migas li + li {
  margin-top: 0;
}

/* [tablero] */
.c-panel {
  background: var(--c-fondo);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-panel);
  box-shadow: var(--sombra-panel);
  overflow: hidden;
}

.c-panel-banda {
  background: var(--c-brote);
  border-bottom: 1px solid var(--c-borde);
  font-family: var(--t-titular);
  font-size: var(--t-l);
  font-weight: 600;
  margin: 0;
  padding: var(--e-2) var(--e-3);
}

.c-nota-corta {
  padding: var(--e-3);
}

.c-nota-corta + .c-nota-corta {
  border-top: 1px solid var(--c-borde);
}

.c-nota-corta h3 {
  font-family: var(--t-lectura);
  font-size: var(--t-m);
  margin: 0 0 var(--e-1);
}

.c-nota-corta p {
  color: var(--c-tierra-media);
  font-size: var(--t-s);
  margin: 0 0 var(--e-2);
}

.c-etiqueta {
  color: var(--c-tierra-media);
  font-family: var(--t-cifra);
  font-size: var(--t-xs);
}

/* [archivo] */
.c-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}

.c-filtro button {
  background: var(--c-fondo);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-campo);
  color: var(--c-tierra);
  cursor: pointer;
  font-size: var(--t-s);
  min-height: 44px;
  padding: var(--e-2) var(--e-3);
}

.c-filtro button.is-activo {
  background: var(--c-surco);
  border-color: var(--c-surco);
  color: #FFFFFF;
}

.c-lista-notas {
  border-top: 1px solid var(--c-borde);
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-lista-notas li {
  border-bottom: 1px solid var(--c-borde);
  margin: 0;
  padding: var(--e-3) 0;
}

.c-lista-notas a {
  font-size: var(--t-m);
}

/* [nota] */
.c-nota {
  max-width: var(--e-texto);
}

.c-copete {
  color: var(--c-tierra-media);
  font-size: var(--t-l);
}

.c-autoria {
  border-bottom: 1px solid var(--c-borde);
  border-top: 1px solid var(--c-borde);
  color: var(--c-tierra-media);
  font-size: var(--t-s);
  padding: var(--e-2) 0;
}

.c-paso {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: auto minmax(0, 1fr);
  margin-bottom: var(--e-4);
}

.c-paso-numero {
  align-items: center;
  background: var(--c-surco);
  border-radius: var(--r-campo);
  color: #FFFFFF;
  display: flex;
  font-family: var(--t-cifra);
  font-size: var(--t-s);
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

/* [ficha] */
.c-ficha {
  background: var(--c-rastrojo);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-panel);
  font-size: var(--t-s);
  padding: var(--e-3);
}

.c-ficha > summary {
  font-family: var(--t-titular);
  font-size: var(--t-l);
  font-weight: 600;
  margin-bottom: var(--e-2);
}

.c-ficha h3 {
  font-family: var(--t-lectura);
  font-size: var(--t-s);
  margin: var(--e-3) 0 var(--e-1);
}

.c-ficha ul {
  margin: 0;
  padding-left: var(--e-4);
}

.c-ficha-cifra {
  display: block;
  font-family: var(--t-cifra);
  font-size: var(--t-s);
}

/* [cuadros] */
.c-cuadro {
  border: 1px solid var(--c-borde);
  border-radius: var(--r-panel);
  margin-bottom: var(--e-3);
  overflow-x: auto;
}

.c-cuadro th {
  background: var(--c-brote);
  border-bottom: 1px solid var(--c-borde);
}

.c-cuadro tbody tr:nth-child(even) {
  background: var(--c-rastrojo);
}

.c-cuadro-fuente {
  color: var(--c-tierra-media);
  font-size: var(--t-xs);
  margin: 0 0 var(--e-4);
}

/* [tarifas] */
.c-tarifas td:nth-child(3) {
  font-size: var(--t-xs);
}

.c-tarifas .c-boton {
  font-size: var(--t-s);
  min-height: 44px;
  padding: 0 var(--e-3);
}

/* [formularios] */
.c-formulario {
  display: grid;
  gap: var(--e-4);
  margin-bottom: var(--e-5);
  max-width: 34rem;
}

.c-campo label,
.c-campo legend {
  display: block;
  font-weight: 600;
  margin-bottom: var(--e-1);
}

.c-campo input,
.c-campo select,
.c-campo textarea {
  background: var(--c-fondo);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-campo);
  color: var(--c-tierra);
  min-height: 44px;
  padding: var(--e-2) var(--e-3);
  width: 100%;
}

.c-campo textarea {
  min-height: 8rem;
  resize: vertical;
}

.c-campo input:focus,
.c-campo select:focus,
.c-campo textarea:focus {
  border-color: var(--c-surco);
  border-width: 2px;
}

.c-campo fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.c-campo fieldset label {
  align-items: center;
  display: flex;
  font-weight: 400;
  gap: var(--e-2);
  min-height: 44px;
}

.c-campo fieldset input {
  min-height: auto;
  width: auto;
}

.c-campo.is-error input,
.c-campo.is-error select,
.c-campo.is-error textarea {
  border-color: var(--c-alerta);
  border-width: 2px;
}

.c-campo-ayuda {
  color: var(--c-tierra-media);
  display: block;
  font-size: var(--t-xs);
  margin-bottom: var(--e-1);
}

.c-campo-error {
  color: var(--c-alerta);
  display: block;
  font-size: var(--t-s);
  font-weight: 600;
  margin-top: var(--e-1);
}

.c-campo-error:empty {
  display: none;
}

.c-consentimiento {
  align-items: start;
  display: grid;
  gap: var(--e-2);
  grid-template-columns: auto minmax(0, 1fr);
  font-size: var(--t-s);
}

/* La casilla que habilita el consentimiento es un control mas: mismo minimo
   de 24 px que el resto, aunque no viva dentro de un fieldset. */
.c-consentimiento input {
  height: 24px;
  margin-top: 0;
  width: 24px;
}

.c-aviso-datos {
  background: var(--c-rastrojo);
  border-left: 4px solid var(--c-surco);
  font-size: var(--t-s);
  padding: var(--e-3);
}

.c-aviso-datos p {
  margin: 0 0 var(--e-2);
}

.c-aviso-datos p:last-child {
  margin-bottom: 0;
}

.c-aviso-recaptcha {
  color: var(--c-tierra-media);
  font-size: var(--t-xs);
}

.c-boton {
  align-items: center;
  background: var(--c-surco);
  border: 0;
  border-radius: var(--r-campo);
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--t-titular);
  font-size: var(--t-l);
  font-weight: 600;
  justify-content: center;
  justify-self: start;
  min-height: 48px;
  padding: 0 var(--e-5);
  text-decoration: none;
  transition: background var(--m-rapido) var(--m-curva);
}

.c-boton:hover {
  background: var(--c-surco-hondo);
  color: #FFFFFF;
}

.c-boton.is-enviando {
  opacity: 0.7;
  pointer-events: none;
}

/* [calculadora] */
.c-calculadora {
  display: grid;
  gap: var(--e-4);
  margin-bottom: var(--e-5);
}

.c-calculadora .c-campo {
  margin-bottom: var(--e-3);
}

.c-resultado {
  background: var(--c-rastrojo);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-panel);
  padding: var(--e-3);
}

.c-resultado dl {
  display: grid;
  gap: var(--e-1) var(--e-3);
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
}

.c-resultado dt {
  font-size: var(--t-s);
}

.c-resultado dd {
  font-family: var(--t-cifra);
  font-size: var(--t-s);
  margin: 0;
  text-align: right;
}

.c-resultado dd.is-error {
  color: var(--c-alerta);
}

/* [mapa] */
.c-mapa {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--c-borde);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.c-mapa iframe {
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

/* [figura] */
.c-figura {
  margin-bottom: var(--e-4);
}

.c-figura img {
  border-radius: var(--r-panel);
  width: 100%;
}

.c-figura-pie {
  color: var(--c-tierra-media);
  font-size: var(--t-xs);
  padding-top: var(--e-2);
}

.c-figura-credito {
  display: block;
  font-family: var(--t-cifra);
  font-size: var(--t-xs);
  margin-top: var(--e-1);
}

/* [cierre] */
.c-fuentes {
  font-size: var(--t-s);
}

.c-fuentes ol {
  padding-left: var(--e-4);
}

.c-aviso-inversion {
  border: 1px solid var(--c-borde);
  border-radius: var(--r-panel);
  font-size: var(--t-s);
  margin-bottom: var(--e-4);
  padding: var(--e-3);
}

.c-banda-suscripcion {
  background: var(--c-brote);
  border-radius: var(--r-panel);
  display: grid;
  gap: var(--e-3);
  justify-items: start;
  margin-bottom: var(--e-5);
  padding: var(--e-4);
}

.c-banda-suscripcion h2 {
  margin: 0;
}

.c-banda-suscripcion p {
  margin: 0;
}

/* [pie] */
.c-pie {
  background: var(--c-tierra);
  color: #FFFFFF;
  margin-top: var(--e-6);
  padding: var(--e-5) 0;
}

.c-pie a {
  color: #FFFFFF;
}

.c-pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--t-s);
  gap: var(--e-2) var(--e-4);
  list-style: none;
  margin: 0 0 var(--e-4);
  padding: 0;
}

.c-pie-enlaces li + li {
  margin-top: 0;
}

.c-pie-enlaces button {
  background: none;
  border: 0;
  color: #FFFFFF;
  cursor: pointer;
  font-size: var(--t-s);
  padding: 0;
  text-decoration: underline;
}

.c-pie-datos {
  display: grid;
  font-size: var(--t-s);
  gap: var(--e-1) var(--e-3);
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 var(--e-4);
}

.c-pie-datos dt {
  color: var(--c-brote);
}

.c-pie-datos dd {
  margin: 0;
}

.c-pie-consumo {
  border: 1px solid #FFFFFF;
  border-radius: var(--r-panel);
  font-size: var(--t-s);
  margin-bottom: var(--e-3);
  padding: var(--e-3);
}

.c-pie-consumo p {
  margin: 0 0 var(--e-2);
}

.c-pie-consumo p:last-child {
  margin-bottom: 0;
}

/* [utilidades] */
.u-oculto {
  display: none;
}

.u-solo-lectores {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.u-cifra {
  font-family: var(--t-cifra);
  text-align: right;
  white-space: nowrap;
}

/* [cortes] */
@media (max-width: 819px) {
  body {
    padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
  }

  .c-celda[data-rubro],
  .c-celda-accion,
  .c-celda[href="/calculadora.html"] {
    display: none;
  }
}

@media (min-width: 480px) {
  .c-franja-consumo {
    flex-direction: row;
    gap: var(--e-3);
  }

  .c-franja-consumo span + span {
    border-left: 1px solid var(--c-borde);
    padding-left: var(--e-3);
  }
}

@media (min-width: 820px) {
  /* La pegajosa es la cabecera entera, no la fila: el bloque contenedor de un
     elemento sticky es su padre, y dentro de <header> la fila solo podia
     desplazarse los 36 px de la franja antes de irse con el resto. Pegada la
     cabecera, quedan arriba la fila de celdas y los dos botones del consumidor. */
  header {
    background: var(--c-fondo);
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .c-pestanas-inferiores {
    display: none;
  }

  .c-ficha {
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    position: sticky;
    top: 7.5rem;
  }

  .c-pie-datos {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .c-calculadora {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}

@media (min-width: 1180px) {
  .c-celda {
    padding: var(--e-3) var(--e-5);
  }
}