/* Lo que no se arregla remapeando un token: la forma de tres componentes del
 * sistema de diseno, para que digan lo mismo que la portada.
 *
 * Va despues de `bundle.css` y `proto.css` a proposito: aqui solo hay
 * correcciones de tema, nunca maquetacion de una pantalla. */

/* El boton de accion lleva el degradado de la marca, como el de la portada. */
.cc-btn--primary,
.cc-btn--primary.is-loading {
  background: var(--marca-grad);
  border-color: transparent;
}
.cc-btn--primary:hover:not(:disabled) { background: var(--marca-grad); filter: brightness(1.07); }

/* La marca: los cuatro cuadros girados, los mismos de la portada. */
.cc-wordmark__dot {
  width: .95em;
  height: .95em;
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin-right: .3em;
  transform: rotate(45deg);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .07em;
  flex-shrink: 0;
}
.cc-wordmark__dot i { border-radius: .09em; background: #35c8a5; }
.cc-wordmark__dot i:nth-child(2) { background: #4f3cf4; }
.cc-wordmark__dot i:nth-child(3) { background: #19a7bf; }
.cc-wordmark__dot i:nth-child(4) { background: #6460fa; }


/* ── Lo que los cinco agentes encontraron que no era de su pantalla ───────── */

/* `.s-head > div` (proto.css) pone en columna lo que el encabezado reciba:
 * con mas de una accion se apilan en vertical y empujan el titulo media
 * pantalla hacia abajo. Y el eyebrow, que es inline-flex, se estira de lado a
 * lado como una barra gris. */
.s-head > div { align-items: flex-start; }
.s-head > div.s-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.s-head { margin-bottom: var(--space-6); }

/* Un filtro solo se estiraba hasta el ancho de la tabla: en «Mis papers» el
 * campo de busqueda media 1100 px para escribir un DOI. Y con un tope por hijo
 * los tres filtros de saldo y bitacora se apilaban de a uno por renglon: el
 * reparto es cosa del contenedor, no de cada campo. */
.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  align-items: end;
}
.filters > * { max-width: var(--measure-narrow); }

/* Cinturon de seguridad del gancho de las tarjetas de paper: sin tope de
 * altura, cualquier pantalla que le pase un texto largo vuelve a pintar un
 * muro de letra gris sobre la portada. */
.cc-paper__hook {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* `.muted` solo fijaba el color, asi que cada bajada se quedaba con el margen
 * que trae el navegador y se despegaba de su titulo. */
p.muted { margin: 0; }

/* La cifra y su unidad salian pegadas: «60creditos». */
.cc-stat__unit { margin-left: 4px; }

/* El dato de la infografia no siempre es un numero suelto: el servidor manda
 * «22 por ciento» con su etiqueta, y a 76px con interlineado fijo se salia. */
.cc-info__dato { flex-wrap: wrap; min-width: 0; }
.cc-info__num { font-size: var(--text-4xl); line-height: 1.08; min-width: 0; overflow-wrap: anywhere; }
.cc-info__numlabel { min-width: 0; max-width: 100%; }

/* Una cotizacion no es la salida de una terminal: los precios dejan la
 * monoespaciada y se quedan con cifras de ancho fijo, que es lo que hace
 * falta para compararlas en columna. */
.cc-cost__n,
.cc-cost__bal span:last-child,
.cc-cost__mxn,
.cc-qcard__mxn,
.cc-creditpill strong {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

/* El ultimo eyebrow en VERSALITAS que quedaba a la vista, y ademas hermano de
 * un titulo normal en Outfit: dos encabezados con dos tipografias distintas. */
.cc-cost .cc-overline {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ink);
}

/* La barra de la caja de instrucciones inventa un precio («≈ 2 creditos»)
 * cuando nadie se lo pasa, y lo pone en plural aunque sea uno. El precio de
 * verdad lo pone cada editor con la cotizacion del servidor. */
.cc-prompt__cost { display: none; }

/* En un telefono la barra de arriba no cabe —hamburguesa, marca, saldo,
 * avisos y avatar miden mas que la pantalla— y empujaba el documento entero,
 * asi que las 33 pantallas salian cortadas por la derecha. El saldo tiene su
 * propia pantalla; aqui cede el sitio. */
@media (max-width: 560px) {
  .cc-topbar { padding-right: var(--space-3); padding-left: var(--space-3); gap: var(--space-2); }
  .cc-topbar .cc-creditpill { display: none; }
  .cc-topbar__r { gap: var(--space-1); }
  .cc-topbar__l .cc-wordmark__name { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
}
.cc-shell__main, .cc-app > main { overflow-x: clip; }



/* ── Segunda pasada: lo que los revisores volvieron a marcar ──────────────── */

/* La insignia de avisos se dibujaba dentro del boton y tapaba casi entera la
 * campana. Se sale a la esquina, como una insignia de verdad. */
.cc-iconbtn { overflow: visible; }
.cc-iconbtn__badge {
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: var(--text-xs);
}

/* Lo mismo que ya se arreglo en las fichas de cifra, ahora en el medidor de
 * creditos: se leia «440creditos» de una pieza. */
.cc-credits__num span { margin-left: 4px; }

/* El resto de cifras que seguian en monoespaciada. Ninguna es salida de una
 * terminal: lo unico que la mono aportaba era alinearlas en columna, y eso lo
 * hace `tabular-nums` sin disfrazar un precio de registro de sistema. */
.cc-credits__mxn,
.cc-log__meta,
.cc-log__target,
.cc-table .is-mono,
.cc-tag__count,
.cc-tabs__count,
.cc-side__count,
.cc-field__counter,
.cc-slider__out,
.cc-steps__dot,
.cc-progress__pct {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.cc-log__meta { gap: var(--space-2); letter-spacing: 0; }
.cc-log__target { letter-spacing: 0; }

/* Elegir forma de pago es la misma eleccion excluyente que elegir paquete:
 * la tarjeta se abre en fila para que la marca de eleccion quede a la derecha. */
.pay-m {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.pay-m > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--ink);
}

/* La zona de subir el paper era lo unico de esa pantalla con borde
 * discontinuo, que la portada no usa en ningun sitio. */
.cc-drop {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: var(--space-8) var(--space-6);
}
.cc-drop:hover, .cc-drop.is-over { border-color: var(--azul); background: var(--azul-soft); }

/* Un documento largo con barra de desplazamiento corta la ultima linea a media
 * altura de letra y parece un error de maquetacion: el degradado dice que
 * sigue habiendo texto debajo. */
.term-doc { position: relative; }
.term-doc::after {
  content: '';
  position: sticky;
  display: block;
  bottom: calc(var(--space-6) * -1);
  height: 56px;
  margin-top: -56px;
  background: linear-gradient(to bottom, transparent, var(--surface) 72%);
  pointer-events: none;
}

/* La infografia que manda el servidor ya trae el gancho y el dato impresos:
 * el velo tiene que tapar lo de abajo o se leen dos textos superpuestos. */
.cc-info.has-photo .cc-info__veil {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ground) 94%, transparent) 0%,
    color-mix(in srgb, var(--ground) 92%, transparent) 50%,
    color-mix(in srgb, var(--ground) 96%, transparent) 100%
  );
}
.cc-info.has-photo .cc-info__foot {
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 -4px -4px;
}

/* «Calidad media» partia en dos renglones por compartir la fila con la
 * insignia «Recomendada». */
.cc-qcard__top { flex-direction: column; align-items: flex-start; gap: var(--space-1); }

/* Las seis versalitas que quedaban en el editor de guion: el titulo del
 * lienzo y el nombre de cada tramo. */
.cc-script__head .cc-overline {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 24px;
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  text-transform: none;
  color: var(--ink);
}
.cc-script__kind {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  text-transform: none;
  color: var(--ink);
}


/* ── Tercera pasada: los componentes compartidos que faltaban ─────────────── */

/* Las versalitas que quedaban, y son muchas porque `.cc-overline` es la
 * etiqueta de medio sistema de diseno: el menu lateral («CREDITOS», «CUENTA»),
 * el reproductor de audio, la pildora «GRATIS» del paso 5 y la disciplina de
 * la infografia. La portada no pone una sola palabra en versalitas. */
.cc-overline,
.cc-audio__eyebrow,
.cc-qcard__free,
.cc-info__disc,
.cc-side__group {
  text-transform: none;
  letter-spacing: var(--tracking-normal);
}
.cc-overline { font-size: var(--text-xs); }

/* Y las cifras que seguian en monoespaciada: el tiempo y la velocidad del
 * reproductor, los segundos y el total del guion, y el `.mono` del prototipo,
 * que es con lo que la ficha pinta el DOI, la IP y la huella del archivo. */
.cc-audio__time,
.cc-audio__speed,
.cc-script__sec,
.cc-script__total,
.mono {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.mono { font-size: var(--text-xs); }

/* La ultima fila del centro de avisos dejaba una raya suelta flotando sobre el
 * relleno de la tarjeta, sin nada debajo que separar. */
.notif li:last-child { border-bottom: 0; }

/* Las tres tarjetas de calidad de cada formato arrancaban a distinta altura
 * porque solo una lleva la insignia «Recomendada». */
.cc-qcard__top { min-height: 50px; justify-content: flex-start; }

/* Una celda que es toda ella un enlace: la llamada a difundir otro paper se
 * estira a la altura de las tarjetas vecinas en vez de colgar de arriba. */
.cc-card--llamada {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  text-decoration: none;
  color: inherit;
}

/* Los campos de fecha eran los nativos del navegador, con su «dd/mm/aaaa» gris
 * y su icono de calendario, al lado de campos del sistema de diseno. */
input[type='date'],
input[type='time'],
input[type='datetime-local'] {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink);
}
input[type='date']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator,
input[type='datetime-local']::-webkit-calendar-picker-indicator {
  opacity: .45;
  cursor: pointer;
}
input[type='date']:hover::-webkit-calendar-picker-indicator,
input[type='time']:hover::-webkit-calendar-picker-indicator,
input[type='datetime-local']:hover::-webkit-calendar-picker-indicator { opacity: .8; }