/* ═══════════════════════════════════════════════════════════════
   HANS · Piel 3b «Taller tipográfico»
   Vocabulario de imprenta: reglas en vez de cajas, radios casi a
   cero, folios y titulillos en versalitas, y el carmín reservado a
   la marca de corrector.

   Reglas fijadas en la bitácora que este archivo hace cumplir:
     1. La página manda — también de noche.
     2. El carmín es juicio: barra al margen, número volado y nota al
        pie. Nunca en un botón, nunca decorativo.
     3. Una sola acción primaria por vista.
   ═══════════════════════════════════════════════════════════════ */

/* ── 0 · Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--papel-hondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-ui);
  -webkit-font-smoothing: antialiased;
  transition: background var(--medio) var(--llega), color var(--medio) var(--llega);
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

::selection { background: var(--carmin-suave); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--carmin);
  outline-offset: 2px;
}

@keyframes latir   { 0%,45% { opacity: 1 } 55%,100% { opacity: .08 } }
@keyframes entra   { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes respira { 0%,100% { transform: scale(1) } 50% { transform: scale(1.07) } }

.entra { animation: entra var(--medio) var(--llega) both; }

/* ── 1 · Armazón ────────────────────────────────────────────────── */
.app {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--papel-hondo);
}

.lienzo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--papel);
}

/* ── 2 · Riel ───────────────────────────────────────────────────
   Celdas apiladas, sin radio; el estado activo entra por el filo
   izquierdo y no por un fondo. */
.riel {
  width: 56px; flex: 0 0 56px;
  background: var(--papel);
  border-right: 1px solid var(--linea);
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 0; gap: 0;
}
.riel b {
  width: 36px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0;
  border-bottom: 1px solid var(--linea-fina);
  color: var(--tinta-media);
  cursor: pointer;
  transition: color var(--rapido) var(--llega), box-shadow var(--rapido) var(--llega);
}
.riel b svg { width: 16px; height: 16px; stroke: currentColor; fill: none;
              stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.riel b:hover, .riel b[aria-current] { color: var(--tinta); box-shadow: inset 2px 0 0 var(--tinta); }
.riel b:active { transform: none; }
.riel .riel-hueco { flex: 1; border: 0; }

[data-piel="noche"] .riel b { color: var(--noche-icono); }
[data-piel="noche"] .riel b:hover,
[data-piel="noche"] .riel b[aria-current] {
  color: var(--noche-txt);
  box-shadow: inset 2px 0 0 var(--noche-lampara);
}

/* ── 3 · Barra superior ─────────────────────────────────────────
   Folio + título + acciones de documento como enlaces en versalitas.
   Buscar, Imagen, Diagramar y Drive viven aquí: son acciones de
   documento, no de texto, y liberan la regleta. */
.superior {
  display: flex; align-items: baseline; gap: 11px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
  flex-wrap: wrap;
}
.superior .folio {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinta-tenue);
}
.superior .tit {
  font-family: var(--serif); font-size: 15px; font-weight: 600;
  letter-spacing: -.01em; margin-right: auto; color: var(--tinta);
}
.superior .gh {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 0 2px;
  border: 0; border-bottom: 1px solid var(--linea);
  border-radius: 0; background: none; color: var(--tinta-media);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; cursor: pointer;
  transition: color var(--rapido) var(--llega), border-color var(--rapido) var(--llega);
}
.superior .gh:hover { color: var(--tinta); border-bottom-color: var(--tinta); }
.superior .gh:active { transform: none; }
.superior .gh[aria-current] { color: var(--tinta); border-bottom-color: var(--tinta); }
.superior .gh .pt { width: 7px; height: 7px; border-radius: 50%;
                    background: var(--carmin); display: block; }
.superior .gh.grabando .pt { animation: latir 1.15s var(--llega) infinite; }

[data-piel="noche"] .superior { background: var(--noche-barra); border-bottom-color: var(--noche-linea); }
[data-piel="noche"] .superior .gh { border-bottom-color: var(--noche-regla); }
[data-piel="noche"] .superior .gh:hover,
[data-piel="noche"] .superior .gh[aria-current] { border-bottom-color: var(--noche-lampara); }

/* ── 4 · La regleta de formato ──────────────────────────────────
   Celdas de una sola altura separadas por filos. Una altura, ningún
   radio, ninguna caja: resuelve las tres alturas y los nueve radios
   que señaló la auditoría. */
.formato {
  display: flex; align-items: stretch; padding: 0;
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
  overflow-x: auto;
  scrollbar-width: none;
}
.formato::-webkit-scrollbar { display: none; }
.formato .fb {
  min-width: 34px; height: 33px; flex: 0 0 auto;
  border: 0; border-right: 1px solid var(--linea-fina);
  border-radius: 0;
  background: none; color: var(--tinta-media);
  font-family: var(--sans); font-size: 12.5px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--rapido) var(--llega), color var(--rapido) var(--llega);
}
.formato .fb svg { width: 14px; height: 14px; stroke: currentColor; fill: none;
                   stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.formato .fb.serif { font-family: var(--serif); font-size: 13px; }
.formato .fb.negrita { font-weight: 700; }
.formato .fb.cursiva { font-style: italic; }
.formato .fb.subrayado { text-decoration: underline; }
.formato .fb.tachado { text-decoration: line-through; }
.formato .fb.mono { font-family: var(--mono); font-size: 11px; }
.formato .fmenu {
  height: 33px; flex: 0 0 auto;
  border: 0; border-right: 1px solid var(--linea-fina); border-radius: 0;
  background: none; color: var(--tinta);
  display: inline-flex; align-items: center; gap: 7px; padding: 0 11px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .11em;
  text-transform: uppercase;
  transition: background var(--rapido) var(--llega);
}
.formato .fmenu i { color: var(--tinta-tenue); font-size: 8px; font-style: normal; }
.formato .fb:hover, .formato .fmenu:hover { background: var(--papel-hondo); color: var(--tinta); }
.formato .fb:active { transform: none; box-shadow: inset 0 -2px 0 var(--tinta); }
.formato .fb[aria-pressed="true"] { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--tinta); }
/* El separador de grupo deja de ser un objeto: es un filo más grueso. */
.formato .grupo-fin { border-right-color: var(--linea); }
.formato .fin { border-right-color: transparent; }

[data-piel="noche"] .formato { background: var(--noche-barra); border-bottom-color: var(--noche-linea); }
[data-piel="noche"] .formato .fb { color: var(--noche-icono); border-right-color: var(--noche-hueco); }
[data-piel="noche"] .formato .fmenu { color: var(--noche-txt); border-right-color: var(--noche-hueco); }
[data-piel="noche"] .formato .grupo-fin { border-right-color: var(--noche-regla); }
[data-piel="noche"] .formato .fb:hover,
[data-piel="noche"] .formato .fmenu:hover { background: var(--noche-hueco); color: var(--noche-txt); }

/* ── 5 · El escritorio ──────────────────────────────────────────
   De día, papel hondo. De noche se apaga, y el halo ámbar no es
   decoración: es la caída de la lámpara. */
.escritorio {
  flex: 1;
  background: var(--papel-hondo);
  padding: 34px 22px 44px;
  overflow-y: auto;
  transition: background var(--medio) var(--llega);
}
[data-piel="noche"] .escritorio {
  background:
    radial-gradient(ellipse 62% 46% at 50% 24%,
      rgba(201,168,106,.13), rgba(201,168,106,.04) 55%, rgba(0,0,0,0) 78%),
    var(--noche-mesa);
}

/* ── 6 · La hoja ────────────────────────────────────────────────
   Cuadrada, con regla de tinta arriba: es una plancha en la prensa.
   Detrás, la pila de papel; encima, el grano. */
.hoja-marco { position: relative; max-width: 520px; margin: 0 auto; }
.hoja-marco .pila {
  position: absolute; display: block;
  background: #fbfaf7; border: 1px solid var(--linea-fina); border-radius: 2px;
}
.hoja-marco .pila-b { top: 8px; bottom: -8px; left: 10px; right: 10px; opacity: .45; }
.hoja-marco .pila-a { top: 4px; bottom: -4px; left: 5px;  right: 5px;  opacity: .75; }

.hoja {
  position: relative;
  background: linear-gradient(#ffffff, #fdfcfa);
  border-radius: 2px;
  border-top: 2px solid var(--tinta);
  box-shadow: var(--sombra-4);
  padding: 40px 44px 46px;
  transition: background var(--medio) var(--llega), box-shadow var(--medio) var(--llega);
}
.hoja .cabecera {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 14px;
}
.hoja .ficha {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinta-media);
}
.hoja .folio {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-tenue); white-space: nowrap;
}
.hoja .t {
  margin: 0;
  font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.1;
  letter-spacing: -.018em; color: var(--tinta);
}
.hoja .t:focus-visible { outline-offset: 4px; }
.hoja .filete { height: 1px; background: var(--linea); margin: 18px 0 21px; }
.hoja .cuerpo:focus-visible { outline-offset: 8px; }
.hoja p {
  margin: 0;
  font-family: var(--serif-lee, var(--serif));
  font-size: var(--cuerpo-lee, 15.5px);
  line-height: 1.78;
  max-width: var(--medida);
  color: var(--tinta);
  text-wrap: pretty;
}
.hoja p + p { margin-top: 1em; text-indent: 1.4em; }
.hoja .marcado + p, .hoja p + .marcado { margin-top: 1em; }

.grano {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .035; pointer-events: none; border-radius: 2px;
}

/* El cursor de escritura: uno de los tres únicos carmines. */
.cursor {
  display: inline-block; width: 2px; height: 17px;
  background: var(--carmin); margin-left: 1px; vertical-align: -3px;
  animation: latir 1.15s var(--llega) infinite;
}

/* Noche · la hoja NO se apaga: baja a marfil y recibe el halo. */
[data-piel="noche"] .hoja-marco .pila-b { background: #bdb5a3; border-color: transparent; opacity: .3; }
[data-piel="noche"] .hoja-marco .pila-a { background: #cfc7b4; border-color: transparent; opacity: .55; }
[data-piel="noche"] .hoja {
  background: linear-gradient(var(--noche-papel-a), var(--noche-papel-b));
  border-top-color: var(--noche-papel-tt);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35),
    0 30px 80px -24px rgba(0,0,0,.85),
    0 0 90px -10px rgba(201,168,106,.28);
}
[data-piel="noche"] .hoja p,
[data-piel="noche"] .hoja .t      { color: var(--noche-papel-tt); }
[data-piel="noche"] .hoja .ficha  { color: var(--noche-papel-md); }
[data-piel="noche"] .hoja .folio  { color: var(--noche-papel-tn); }
[data-piel="noche"] .hoja .filete { background: var(--noche-papel-ln); }
/* En oscuro el grano ensucia: se retira. */
[data-piel="noche"] .hoja .grano  { display: none; }

/* ── 7 · El juicio como marca de corrector ──────────────────────
   Tres piezas que se responden:
     .marcado  — barra carmín al margen del párrafo señalado
     .llamada  — el número volado dentro del texto
     .juicio   — la nota al pie, tras una regla de tinta */
.marcado { display: flex; gap: 13px; }
.marcado::before {
  content: "";
  width: 2px; flex: 0 0 2px;
  background: var(--carmin);
  border-radius: 1px;
}
.marcado p { text-indent: 1.4em; }
.llamada {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--carmin); padding-left: 2px; vertical-align: super;
}
.juicio {
  margin-top: 26px; padding-top: 12px;
  border-top: 1px solid var(--tinta);
  display: flex; gap: 13px;
  background: none;          /* se retira el relleno carmín */
  border-left: 0; border-radius: 0;
  animation: entra var(--medio) var(--llega) both;
}
.juicio .num { font-family: var(--mono); font-size: 12px; font-weight: 600;
               color: var(--carmin); flex: none; padding-top: 2px; }
.juicio .cuerpo-juicio { min-width: 0; }
.juicio .voz { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
               text-transform: uppercase; color: var(--tinta-tenue);
               display: block; margin: 0 0 5px; }
.juicio .dice { margin: 0; font-family: var(--serif); font-style: italic;
                font-size: 14.5px; line-height: 1.62; color: var(--tinta);
                text-wrap: pretty; }
.juicio .acciones { display: flex; gap: 14px; margin-top: 12px; align-items: center; flex-wrap: wrap; }

[data-piel="noche"] .marcado::before,
[data-piel="noche"] .hoja .cursor { background: var(--noche-carmin); }
[data-piel="noche"] .llamada,
[data-piel="noche"] .juicio .num  { color: var(--noche-carmin); }
[data-piel="noche"] .juicio       { border-top-color: var(--noche-papel-tt); }
[data-piel="noche"] .juicio .voz  { color: var(--noche-papel-tn); }
[data-piel="noche"] .juicio .dice { color: var(--noche-papel-tt); }
[data-piel="noche"] .juicio .boton-primario {
  background: var(--noche-papel-tt); color: var(--noche-papel-a);
}
[data-piel="noche"] .juicio .boton-secundario {
  color: var(--noche-papel-md); border-bottom-color: var(--noche-papel-ln);
}
[data-piel="noche"] .juicio .boton-secundario:hover {
  color: var(--noche-papel-tt); border-bottom-color: var(--noche-papel-tt);
}

/* ── 8 · Botones. Dos, y ninguno carmín ─────────────────────────
   Consolida los cuatro estilos de primario que encontró la auditoría. */
.boton-primario {
  border: 0; border-radius: 3px; padding: 9px 14px;
  background: var(--accion); color: var(--accion-txt);
  font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
  box-shadow: none;
  transition: transform var(--rapido) var(--masa), opacity var(--rapido) var(--llega);
}
.boton-primario:active { transform: translateY(1px); }
.boton-primario[disabled] { opacity: .35; cursor: not-allowed; }

.boton-secundario {
  border: 0; border-bottom: 1px solid var(--linea); border-radius: 0;
  background: none; color: var(--tinta-media);
  font-family: var(--sans); font-size: 11px; padding: 0 0 2px;
  transition: color var(--rapido) var(--llega), border-color var(--rapido) var(--llega);
}
.boton-secundario:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

/* Contorno: para acciones de igual rango que no son la primaria. */
.boton-contorno {
  border: 1px solid var(--tinta); border-radius: 2px;
  background: none; color: var(--tinta);
  padding: 8px 14px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  transition: background var(--rapido) var(--llega), color var(--rapido) var(--llega);
}
.boton-contorno:hover { background: var(--tinta); color: var(--papel-alto); }

/* Dictar es lo único con forma de píldora en todo el producto:
   se encuentra sin mirar. */
.dictar-pulgar {
  min-height: 52px; padding: 0 22px; border: 0;
  border-radius: var(--r-max);
  background: var(--accion); color: var(--accion-txt);
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: var(--sombra-2);
  transition: transform var(--rapido) var(--masa);
}
.dictar-pulgar:active { transform: translateY(2px); }
.dictar-pulgar .pt { width: 9px; height: 9px; border-radius: 50%;
                     background: var(--carmin); display: block; }
.dictar-pulgar.grabando .pt { animation: latir 1.15s var(--llega) infinite; }

/* ── 9 · Titulillos de sección ──────────────────────────────────
   El patrón de rótulo de toda la piel: versalitas y regla. */
.titulillo {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinta);
  padding-bottom: 6px; border-bottom: 1.5px solid var(--tinta);
  margin: 0 0 14px;
}
.kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--tinta-tenue); margin: 0;
}

/* ── 10 · Piezas comunes ────────────────────────────────────────── */

/* Ficha de área / eje: chip cuadrado en versalitas. */
.chip {
  padding: 6px 11px; border-radius: 0;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase;
  border: 1px solid var(--linea); background: none; color: var(--tinta-media);
  transition: background var(--rapido) var(--llega), color var(--rapido) var(--llega),
              border-color var(--rapido) var(--llega);
}
.chip:hover { border-color: var(--tinta); color: var(--tinta); }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel-alto); }

/* Campos: filo fino, nunca caja redondeada. */
.campo {
  border: 1px solid var(--linea); border-radius: 2px;
  padding: 9px 11px;
  background: var(--papel-alto); color: var(--tinta);
  font-family: var(--sans); font-size: 12.5px;
  transition: border-color var(--rapido) var(--llega);
}
.campo:focus { border-color: var(--tinta); outline: none; }
.campo::placeholder { color: var(--tinta-tenue); }
.campo.serif { font-family: var(--serif); font-size: 13.5px; }

/* El punto de estado. Solo el último estado gana color: ahí HANS ya
   juzgó. Rampa tomada de hans.jsx (.esc-item .dot). */
.punto { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; display: block; }
.punto.fragmento { background: var(--linea); }
.punto.borrador  { background: var(--tinta-tenue); }
.punto.revisado  { background: var(--tinta-media); }
.punto.listo     { background: var(--carmin); }

/* Tarjeta: una regla de tinta arriba y nada más. */
.tarjeta {
  background: var(--papel-alto);
  border-radius: 2px;
  border-top: 2px solid var(--tinta);
  box-shadow: var(--sombra-2);
  padding: 20px 22px;
}
.tarjeta-plana {
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: 2px;
  padding: 14px 16px;
}

.regla { height: 1px; background: var(--linea); border: 0; margin: 0; }

/* ── 11 · Movimiento ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── La cuenta a la vista (Fase 1) ──────────────────────────────
   El escritor siempre sabe si su taller lo sigue o vive solo en
   este aparato. Punto de entrada en el riel, chip en la mesa y
   primera seccion de preferencias. */
.riel b.riel-cuenta {
  width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font: 600 12.5px/1 var(--sans); color: var(--tinta-media);
  border: 1px dashed var(--tinta-tenue); background: transparent;
  margin-bottom: 2px;
}
.riel b.riel-cuenta:hover { border-style: solid; color: var(--tinta); }
.riel b.riel-cuenta.dentro {
  border: 1px solid var(--accion); background: var(--accion);
  color: var(--accion-txt);
}

.cuenta-chip {
  align-self: flex-start; font: 11.5px/1.4 var(--sans);
  letter-spacing: .05em; color: var(--tinta-media);
  background: var(--papel-alto); border: 1px solid var(--linea);
  border-radius: var(--r-ch); padding: 7px 11px; cursor: pointer;
  white-space: nowrap; max-width: 220px; overflow: hidden;
  text-overflow: ellipsis;
}
.cuenta-chip b { color: var(--carmin); font-weight: 600; }
.cuenta-chip:hover { border-color: var(--tinta-tenue); color: var(--tinta); }

.cuenta-caja {
  border: 1px solid var(--linea); border-left: 3px solid var(--carmin);
  background: var(--papel-alto); border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: 20px;
}
.cuenta-caja.dentro { border-left-color: var(--tinta); }
.cuenta-linea {
  font: 14.5px/1.6 var(--serif); color: var(--tinta-media);
  margin: 0 0 10px;
}
.cuenta-linea b { color: var(--tinta); }