/*
 * Lenguaje visual de la consola TVC-K.
 *
 * Los tokens son los mismos de la consola original: papel, tinta, sus opacidades,
 * el filete de 1px, y las dos familias (una estructural para etiquetas y
 * numeros, otra para texto). Lo que NO viene de ahi es ningun color del Atlas:
 * las paletas llegan de la API y se pintan con el hex que devuelve el motor.
 *
 * Sin fuentes externas: la CSP no permite terceros, y las familias caen a las
 * del sistema si no estan instaladas. La consola se ve igual de sobria.
 */

:root {
  --papel: #fafafa;
  --tinta: #231f20;
  --tinta-62: rgba(35, 31, 32, .62);
  --tinta-42: rgba(35, 31, 32, .42);
  --tinta-25: rgba(35, 31, 32, .25);
  --tinta-12: rgba(35, 31, 32, .12);
  --tinta-05: rgba(35, 31, 32, .05);
  --rule: 1px solid var(--tinta);
  --hair: 1px solid var(--tinta-25);
  --sans: Montserrat, 'Segoe UI', Verdana, Tahoma, sans-serif;
  --struct: Poppins, 'Segoe UI', Helvetica, Arial, sans-serif;
  --alerta: #8a1c1c;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}

[hidden] { display: none !important; }

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

.masthead {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 24px 11px;
  border-bottom: var(--rule);
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papel);
}

.marca {
  font-family: var(--struct);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.who {
  font-family: var(--struct);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-62);
}

.meta { margin-left: auto; display: flex; gap: 16px; align-items: center; }

.mic {
  font-family: var(--struct);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-62);
}

/* -------------------------------------------------------------- bloques */

main { padding: 26px 24px 80px; max-width: 1180px; margin: 0 auto; }

.box { border: var(--rule); padding: 16px 18px 18px; background: var(--papel); }
.box + .box { margin-top: 18px; }

.eyebrow {
  font-family: var(--struct);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

h1, h2, h3 { font-family: var(--struct); font-weight: 500; margin: 0 0 8px; }
h1 { font-size: 26px; letter-spacing: -.01em; }
h2 { font-size: 18px; }
h3 { font-size: 14px; letter-spacing: .02em; }

.cap { font-size: 12px; line-height: 1.5; color: var(--tinta-62); }
.mt { margin-top: 14px; }

.spread { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.paso { display: flex; gap: 18px; align-items: baseline; margin-bottom: 18px; }
.paso-numero {
  font-family: var(--struct);
  font-weight: 500;
  font-size: 46px;
  line-height: .95;
  letter-spacing: -.07em;
  color: var(--tinta-25);
}

/* -------------------------------------------------------------- mandos */

.btn {
  border: var(--rule);
  background: transparent;
  color: inherit;
  padding: 7px 15px;
  border-radius: 99mm;
  cursor: pointer;
  font-family: var(--struct);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .04em;
  white-space: nowrap;
}

.btn:hover:not(:disabled) { background: var(--tinta-05); }
.btn:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn.solid { background: var(--tinta); color: var(--papel); }
.btn.solid:hover:not(:disabled) { background: #000; }
.btn.sm { padding: 4px 11px; font-size: 11px; }

.campo { display: flex; flex-direction: column; gap: 4px; }
.campo.crece { flex: 1 1 220px; }
.campo.ancho { grid-column: 1 / -1; }

.campo > span { font-family: var(--struct); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-62); }

input.f, select.f, textarea.f {
  font: inherit;
  color: inherit;
  background: transparent;
  border: var(--hair);
  padding: 7px 9px;
  border-radius: 0;
  width: 100%;
}

input.f:focus, select.f:focus, textarea.f:focus { outline: none; border-color: var(--tinta); }
textarea.f { min-height: 78px; resize: vertical; }

/* -------------------------------------------------------------- listas */

.lista { list-style: none; margin: 0; padding: 0; border-top: var(--hair); }
.lista li { border-bottom: var(--hair); }

.fila {
  display: flex;
  width: 100%;
  gap: 14px;
  align-items: baseline;
  justify-content: space-between;
  padding: 11px 2px;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fila:hover { background: var(--tinta-05); }
.fila:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.fila[aria-current='true'] { background: var(--tinta-12); }

/* -------------------------------------------------------------- estados */

.estado {
  font-family: var(--struct);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: var(--hair);
  border-radius: 99mm;
  padding: 3px 10px;
  white-space: nowrap;
}

.estado[data-estado='draft'] { color: var(--tinta-62); }
.estado[data-estado='in_progress'] { border-color: var(--tinta-62); }
.estado[data-estado='ready'] { border-color: var(--tinta); }
.estado[data-estado='finalized'] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.estado[data-estado='cancelled'] { color: var(--alerta); border-color: var(--alerta); }

/* -------------------------------------------------------------- avisos */

.aviso { border-left: 3px solid var(--tinta); padding: 6px 0 6px 14px; font-size: 12.5px; color: var(--tinta-62); margin: 14px 0 0; }
.aviso.error { border-color: var(--alerta); color: var(--alerta); }
.aviso.cargando { border-color: var(--tinta-42); }

/* ------------------------------------------------------------- muestras */

.muestras { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); border-top: var(--hair); border-left: var(--hair); }
.muestra { border-right: var(--hair); border-bottom: var(--hair); padding: 0; }
.muestra i { display: block; height: 58px; }
.muestra b { display: block; font-family: var(--struct); font-weight: 500; font-size: 11px; padding: 7px 9px 9px; }
.muestra small { display: block; padding: 0 9px 9px; font-size: 10px; color: var(--tinta-62); letter-spacing: .06em; }

.combinacion { border-top: var(--hair); padding: 12px 0; }
.combinacion .tiras { display: flex; gap: 0; margin-top: 7px; }
.combinacion .tiras i { display: block; height: 30px; flex: 1; }

/* --------------------------------------------------------------- acceso */

.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.acceso .box { max-width: 520px; width: 100%; overflow: hidden; text-align: center; padding: 50px 46px 38px; }
.acceso .acceso-logo { display: block; width: 360px; max-width: 100%; height: auto; margin: 0 auto; object-fit: contain; }
.acceso-intro { margin-top: 46px; }
.acceso h1 { font-size: 26px; letter-spacing: .04em; margin-bottom: 18px; }
.acceso .cap { margin: 0; font-size: 13px; line-height: 1.7; }
.acceso .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 30px auto 0;
  padding: 10px 22px;
  text-align: center;
  text-decoration: none;
}
.acceso .aviso { margin-top: 24px; text-align: left; }

.pie { margin: 44px 0 0; padding-top: 20px; border-top: var(--hair); font-size: 11px; color: var(--tinta-42); }

@media (max-width: 640px) {
  main { padding: 18px 14px 60px; }
  .masthead { padding: 12px 14px 10px; }
  .paso-numero { font-size: 34px; }
  .acceso .box { padding: 38px 24px 30px; }
  .acceso-intro { margin-top: 36px; }
}