/* ════════════════════════════════════════════════════════════════════════════
 * Fotos Gantos · estilos (E107). "Sobria industrial": los tokens de Gantos del catálogo (catalogo/web/DESIGN.md, sin pieles de
 * marca), las mismas fuentes, poco texto. Una sola web con dos vistas por ancho: menos de 900 px el celular (sacar), 900 o más la
 * computadora (el tablero). El estado de un color se dice con texto y además con el color del casillero (DESIGN.md de esta carpeta).
 * ════════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'DM Sans'; src: url(fuentes/dm-sans-400-700.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url(fuentes/dm-mono-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url(fuentes/dm-mono-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(fuentes/barlow-condensed-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(fuentes/barlow-condensed-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* Gantos (catalogo/web/DESIGN.md: marca-tinta, marca-acento, marca-fondo) */
  --casa: #123A2C; --acento: #0E7C5A; --acento-d: #0A5740; --fondo: #EEF2EE;
  --pared: #E7EBE6; --carton: #FFFFFF; --tinta: #103327; --tinta-2: #344E43; --tenue: #5E7268;
  --linea: rgba(18,58,44,.16); --linea-2: rgba(18,58,44,.08); --borde-campo: #718980;
  /* Los estados de un color */
  --foto-s: #E4F2EC; --crudas-s: #EAF1FB; --crudas: #1D4F91;
  /* Mensajes */
  --warn: #6E5200; --warn-s: #FFF2C6; --err: #9E2424; --err-s: #FCE9E7;
  /* Letras */
  --sans: 'DM Sans', system-ui, sans-serif; --mono: 'DM Mono', ui-monospace, monospace; --cond: 'Barlow Condensed', 'DM Sans', sans-serif;
  --r: 10px; --abajo: 0px;
  --sombra: 0 1px 2px rgba(20,24,20,.10), 0 8px 22px -10px rgba(20,24,20,.22);
  --rapido: 160ms cubic-bezier(.2,.8,.2,1);
  color-scheme: light;
  accent-color: var(--acento);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.45; color: var(--tinta); background: var(--pared); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
a { color: var(--casa); text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
h1:focus, .vista:focus { outline: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cod { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: .01em; color: var(--tenue); }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 50; }
.saltar:focus { left: 8px; }
[hidden] { display: none !important; }

/* ─── La barra: el nombre de quien entró, siempre a la vista ─── */
.barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: max(6px, env(safe-area-inset-top)) 16px 6px; background: var(--casa); color: #fff; }
.marca-casa { font-family: var(--cond); font-weight: 700; font-size: 24px; letter-spacing: .05em; text-transform: uppercase; }
.marca-casa small { font-weight: 600; opacity: .72; letter-spacing: .04em; margin-left: 6px; font-size: 16px; }
.barra .quien { margin-left: auto; font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.barra .salir { min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #fff; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; flex: none; }
.barra .salir:hover { background: rgba(255,255,255,.1); }
.barra .entorno { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.14); }

.red { position: sticky; top: 56px; z-index: 9; padding: 10px 16px; background: var(--warn-s); color: var(--warn); font-weight: 600; font-size: 15px; box-shadow: inset 0 -1px 0 rgba(110,82,0,.2); }

.vista { max-width: 1240px; margin: 0 auto; padding: 16px 16px calc(32px + var(--abajo)); }
.cargando { padding: 40px 0; color: var(--tinta-2); text-align: center; }

/* ─── Botones ─── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--acento); color: #fff; font-weight: 600; font-size: 16px; cursor: pointer; text-decoration: none; transition: background-color var(--rapido); }
.btn:hover { background: var(--acento-d); }
.btn:disabled { background: #9DB3A8; cursor: default; }
.btn.sec { background: var(--carton); color: var(--casa); box-shadow: inset 0 0 0 1.5px var(--casa); }
.btn.sec:hover { background: var(--fondo); }
.btn.ancho { width: 100%; }
.link { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--casa); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font-weight: 600; }

/* ─── Mensajes ─── */
.msg { margin: 12px 0; padding: 12px 14px; border-radius: var(--r); font-size: 15px; }
.msg.ok { background: var(--foto-s); color: var(--acento-d); }
.msg.warn { background: var(--warn-s); color: var(--warn); }
.msg.err { background: var(--err-s); color: var(--err); }
.msg .btn { margin-top: 10px; min-height: 44px; }

/* ─── Ingreso: el nombre y el PIN ─── */
.ing { max-width: 420px; margin: 8px auto 0; }
.ing h1 { font-family: var(--cond); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--casa); }
.ing .sub { margin-top: 6px; color: var(--tinta-2); }
.nombres { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.nombres button { width: 100%; min-height: 56px; padding: 0 18px; border: 0; border-radius: var(--r); background: var(--carton); box-shadow: inset 0 0 0 1px var(--linea); text-align: left; font-size: 18px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.nombres button:hover { box-shadow: inset 0 0 0 1.5px var(--casa); }
.pin-quien { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; }
.casillas { display: flex; gap: 12px; justify-content: center; margin: 22px 0 6px; }
.casillas span { width: 52px; height: 60px; border-radius: var(--r); background: var(--carton); box-shadow: inset 0 0 0 1.5px var(--borde-campo); display: grid; place-items: center; font-family: var(--mono); font-size: 28px; }
.casillas span.lleno::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--casa); }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.teclado button { min-height: 60px; border: 0; border-radius: var(--r); background: var(--carton); box-shadow: inset 0 0 0 1px var(--linea); font-family: var(--mono); font-size: 26px; font-weight: 500; cursor: pointer; }
.teclado button:active { background: var(--fondo); }
.teclado .borrar { font-family: var(--sans); font-size: 16px; font-weight: 600; }
.teclado .vacio { visibility: hidden; }
.pin-pc { display: block; margin-top: 10px; text-align: center; color: var(--tenue); font-size: 14px; }

/* ─── Chips de marca ─── */
.marcas { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.marcas button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--carton); box-shadow: inset 0 0 0 1px var(--linea); font-weight: 600; cursor: pointer; }
.marcas button[aria-pressed="true"] { background: var(--casa); color: #fff; box-shadow: none; }

/* ─── El chip del color (la regla del catálogo) ─── */
.chip { display: inline-flex; flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1.5px rgba(16,51,39,.34); background: #D5DBD6; }
.chip i { flex: 1; }
.chip.sin-muestra { display: inline-grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--tinta-2); }

/* ─── EL CELULAR ─── */
.cel-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 10px; }
.cel-cab h1 { font-family: var(--cond); font-weight: 700; font-size: 26px; text-transform: uppercase; letter-spacing: .01em; color: var(--casa); }
.cel-cab p { color: var(--tinta-2); font-size: 15px; }
.mods { display: grid; gap: 14px; }
.mod { background: var(--carton); border-radius: var(--r); box-shadow: var(--sombra); padding: 12px; }
.mod-cab { display: flex; gap: 12px; align-items: center; }
.ref { flex: none; width: 52px; height: 65px; border-radius: 7px; background: var(--fondo); object-fit: cover; }
.ref.vacia { display: grid; place-items: center; color: var(--tenue); }
.mod-cab h2 { font-size: 18px; font-weight: 700; line-height: 1.2; }
.mod-cab .cod { display: block; margin-top: 2px; }
.cas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.cas { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "chip nom" "chip cod" "est est"; column-gap: 10px; align-items: center; min-height: 92px; padding: 10px 10px 10px 12px; border: 0; border-radius: 9px; background: var(--carton); box-shadow: inset 0 0 0 1.5px var(--borde-campo); text-align: left; cursor: pointer; color: var(--tinta); }
.cas .chip { grid-area: chip; align-self: start; margin-top: 2px; }
.cas-n { grid-area: nom; font-weight: 600; font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.cas .cod { grid-area: cod; }
.cas-e { grid-area: est; margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.cas-e .ic { width: 18px; height: 18px; }
.cas.e-falta { box-shadow: inset 0 0 0 1.5px var(--borde-campo); }
.cas.e-rehacer { background: var(--warn-s); box-shadow: inset 0 0 0 1px rgba(110,82,0,.32); }
.cas.e-rehacer .cas-e { color: var(--warn); }
.cas.e-crudas { background: var(--crudas-s); box-shadow: inset 0 0 0 1px rgba(29,79,145,.28); }
.cas.e-crudas .cas-e { color: var(--crudas); }
.cas:active { transform: scale(.985); }
.vacio-msg { padding: 28px 16px; text-align: center; color: var(--tinta-2); background: var(--carton); border-radius: var(--r); }
.vacio-msg b { display: block; color: var(--tinta); font-size: 18px; margin-bottom: 4px; }

/* Lo que espera subir: fijo abajo */
.abajo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; padding: 10px 16px max(10px, env(safe-area-inset-bottom)); background: var(--carton); box-shadow: 0 -1px 0 var(--linea), 0 -8px 20px -12px rgba(20,24,20,.3); }
.abajo-b { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--casa); color: #fff; font-weight: 600; font-size: 16px; cursor: pointer; text-align: left; }
.abajo-b .estado { margin-left: auto; font-weight: 400; font-size: 14px; opacity: .85; }
.abajo-b.rech { background: var(--err); }
.abajo .aviso-disco { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--warn); }

/* ─── Las capas: la hoja de abajo (celular) y el diálogo ─── */
.velo { position: fixed; inset: 0; z-index: 30; background: rgba(12,28,22,.45); display: flex; align-items: flex-end; justify-content: center; }
.hoja { width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; background: var(--carton); border-radius: 16px 16px 0 0; padding: 18px 16px max(16px, env(safe-area-inset-bottom)); }
.hoja h2 { font-size: 20px; font-weight: 700; }
.hoja .sub { margin-top: 2px; color: var(--tinta-2); font-size: 15px; }
.hoja .acc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.hoja .acc.uno { grid-template-columns: 1fr; }
.guardada { display: flex; gap: 14px; align-items: center; margin-top: 14px; }
.guardada img { width: 96px; height: 120px; object-fit: cover; border-radius: 8px; background: var(--fondo); flex: none; }
.guardada .ok { display: flex; align-items: center; gap: 6px; color: var(--acento-d); font-weight: 700; font-size: 18px; }
.guardada p { margin-top: 4px; color: var(--tinta-2); font-size: 15px; }
.pend-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.pend-lista li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--linea); }
.pend-lista img { width: 56px; height: 70px; object-fit: cover; border-radius: 6px; background: var(--fondo); }
.pend-lista .et { font-weight: 600; line-height: 1.25; }
.pend-lista .motivo { margin-top: 2px; font-size: 14px; color: var(--tinta-2); }
.pend-lista li.rech { background: var(--err-s); box-shadow: none; }
.pend-lista li.rech .motivo { color: var(--err); }
.pend-lista .link { padding: 0; min-height: 44px; }

/* El aviso de instalación (el del catálogo, E102) */
.instalar { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 14px; padding: 14px 16px 8px; border-radius: var(--r); background: var(--carton); box-shadow: inset 0 0 0 1px var(--linea); }
.ins-icono { flex: none; width: 44px; height: 44px; border-radius: 10px; }
.ins-txt { flex: 1; min-width: 0; }
.ins-txt h2 { font-size: 16px; font-weight: 700; line-height: 1.25; }
.ins-txt p { margin-top: 2px; font-size: 15px; color: var(--tinta-2); }
.ins-pasos { margin: 8px 0 0; padding-left: 20px; font-size: 15px; }
.ins-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; }
.ins-acc .btn { min-height: 44px; }

/* ─── LA COMPUTADORA: el tablero ─── */
.tab-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin: 8px 0 14px; }
.tab-cab h1 { font-family: var(--cond); font-weight: 700; font-size: 36px; line-height: 1; text-transform: uppercase; letter-spacing: .01em; color: var(--casa); }
.tab-cab .act { font-family: var(--mono); font-size: 13px; color: var(--tenue); }
.resumen { font-size: 17px; font-weight: 600; color: var(--tinta); margin: 0 0 16px; }
.resumen span { color: var(--tenue); font-weight: 400; margin: 0 6px; }
.filas { display: grid; gap: 10px; }
.fila { display: grid; grid-template-columns: 56px 220px 1fr; gap: 16px; align-items: start; padding: 12px 14px; background: var(--carton); border-radius: var(--r); box-shadow: 0 1px 2px rgba(20,24,20,.08); }
.fila .ref { width: 56px; height: 70px; }
.fila-nom h2 { font-size: 17px; font-weight: 700; line-height: 1.2; }
.fila-nom h2 a { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; color: inherit; text-decoration: none; }
.fila-nom h2 a:hover { text-decoration: underline; }
.fila-nom .cod { display: block; margin-top: 3px; }
.fila-nom .linea { display: block; margin-top: 2px; font-size: 14px; color: var(--tinta-2); }
.cass { display: flex; flex-wrap: wrap; gap: 8px; }
.ca { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 1px; align-items: center; width: 186px; min-height: 60px; padding: 8px 10px; border-radius: 8px; background: var(--carton); box-shadow: inset 0 0 0 1.5px var(--borde-campo); }
.ca .chip { width: 22px; height: 22px; grid-row: span 2; }
.ca-n { font-weight: 600; font-size: 15px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-e { font-size: 14px; font-weight: 600; color: var(--tinta-2); white-space: nowrap; }
.ca-e small { font-weight: 400; color: var(--tenue); margin-left: 4px; }
.ca.e-foto { background: var(--foto-s); box-shadow: none; }
.ca.e-foto .ca-e { color: var(--acento-d); }
.ca.e-crudas { background: var(--crudas-s); box-shadow: inset 0 0 0 1px rgba(29,79,145,.28); }
.ca.e-crudas .ca-e { color: var(--crudas); }
.ca.e-rehacer { background: var(--warn-s); box-shadow: inset 0 0 0 1px rgba(110,82,0,.32); }
.ca.e-rehacer .ca-e { color: var(--warn); }
.ca.uso { background: var(--carton); box-shadow: inset 0 0 0 1.5px var(--borde-campo); border-left: 0; }
.ca.uso.e-foto { background: var(--foto-s); box-shadow: none; }
.ca.uso .ca-n { font-family: var(--cond); font-size: 17px; text-transform: uppercase; letter-spacing: .02em; }
.ca.uso .ic { grid-row: span 2; width: 22px; height: 22px; color: var(--tinta-2); }

/* Las pestañas del admin y lo de arriba del tablero */
.tab-cab { align-items: center; margin: 0 0 6px; }
.pest { display: flex; gap: 4px; }
.pest a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--tinta-2); font-weight: 600; text-decoration: none; }
.pest a:hover { background: var(--fondo); }
.pest a[aria-current="page"] { background: var(--carton); color: var(--casa); box-shadow: inset 0 0 0 1px var(--linea); }
.tab-der { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.tab-t { font-family: var(--cond); font-weight: 700; font-size: 36px; line-height: 1; text-transform: uppercase; letter-spacing: .01em; color: var(--casa); margin: 6px 0 14px; }
.btn.chico { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn.peligro { background: var(--err); }
.btn.peligro:hover { background: #7E1C1C; }
.fila-nom .abrir { margin-top: 10px; }

/* ─── El modelo abierto ─── */
.volver { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; }
.volver .ic { transform: rotate(180deg); width: 18px; height: 18px; }
.ab-cab { display: flex; gap: 20px; align-items: center; margin: 6px 0 20px; }
.ref.grande { width: 96px; height: 120px; border-radius: 9px; }
.ab-marca { font-size: 15px; color: var(--tinta-2); font-weight: 600; }
.ab-cab h1 { font-family: var(--cond); font-weight: 700; font-size: 38px; line-height: 1; text-transform: uppercase; letter-spacing: .01em; color: var(--casa); margin: 2px 0 4px; }
.ab-res { margin-top: 6px; color: var(--tinta-2); }
.zonas { display: grid; gap: 14px; }
.zona { padding: 14px 16px 16px; background: var(--carton); border-radius: var(--r); box-shadow: 0 1px 2px rgba(20,24,20,.08); border-left: 5px solid var(--borde-campo); }
.zona.e-foto { border-left-color: var(--acento); }
.zona.e-crudas { border-left-color: var(--crudas); }
.zona.e-rehacer { border-left-color: #C9A227; }
.zona-cab { display: flex; align-items: center; gap: 12px; }
.zona-cab h2 { font-size: 19px; font-weight: 700; }
.zona-cab h2 .cod { margin-left: 6px; }
.zona-cab .ic { width: 26px; height: 26px; color: var(--tinta-2); }
.estado-t { margin-left: auto; margin-right: 8px; font-weight: 600; font-size: 15px; color: var(--tinta-2); white-space: nowrap; }
.zona.e-foto .estado-t { color: var(--acento-d); }
.zona.e-crudas .estado-t { color: var(--crudas); }
.zona.e-rehacer .estado-t { color: var(--warn); }
.nada { margin-top: 8px; color: var(--tinta-2); font-size: 15px; }
.zona.encima { box-shadow: 0 0 0 3px var(--acento); background: var(--foto-s); }
.grupos { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.grupo { margin-top: 12px; }
.grupo-cab { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.grupo-cab h3 { margin: 0; font-size: 14px; font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
.grupo-cab .n { color: var(--tenue); margin-left: 2px; }
.its { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.it { margin: 0; width: 136px; display: flex; flex-direction: column; gap: 6px; }
.it-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: var(--fondo); display: block; }
.it-img.vacia { display: grid; place-items: center; color: var(--tenue); }
.it figcaption { display: grid; gap: 1px; min-width: 0; }
.it figcaption .cod { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-nota { font-size: 14px; color: var(--tinta-2); }
.it-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.it-acc .btn { flex: 1; padding: 0 10px; }
.it-acc .link { min-height: 44px; }
.soltar { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 1.5px dashed var(--borde-campo); border-radius: 999px; background: var(--fondo); color: var(--casa); font-weight: 600; cursor: pointer; }
.soltar:hover, .sd.encima { background: var(--foto-s); border-color: var(--acento); }
.zona-cab .soltar .ic { width: 20px; height: 20px; color: var(--casa); }
.sd-l span { display: grid; }
.sd-l small { font-size: 14px; color: var(--tinta-2); font-weight: 400; }
.sd-l .ic { width: 28px; height: 28px; }

/* El diálogo de subir */
.sd { position: relative; margin-top: 14px; border: 1.5px dashed var(--borde-campo); border-radius: 10px; background: var(--fondo); }
.sd input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.sd input:focus-visible + .sd-l { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 10px; }
.sd-l { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 10px 16px; color: var(--casa); cursor: pointer; }
.prev { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; }
.prev img { width: 96px; height: 120px; object-fit: cover; border-radius: 8px; background: var(--fondo); flex: none; }
.prev b { display: block; overflow-wrap: anywhere; }
.prev .msg { margin: 8px 0 0; }
.tomas { margin: 16px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tomas legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.tomas label { position: relative; }
.tomas input { position: absolute; opacity: 0; }
.tomas span { display: grid; place-items: center; min-height: 48px; padding: 0 6px; border-radius: 9px; box-shadow: inset 0 0 0 1.5px var(--borde-campo); font-weight: 600; cursor: pointer; text-align: center; }
.tomas input:checked + span { background: var(--casa); color: #fff; box-shadow: none; }
.tomas input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: 2px; }
.logo { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 12px; padding: 0 12px; border-radius: 9px; background: var(--warn-s); color: var(--warn); font-weight: 700; cursor: pointer; }
.logo input { width: 22px; height: 22px; flex: none; }
.campo { display: grid; gap: 4px; margin-top: 12px; font-weight: 600; }
.campo input, .campo select, .campo textarea { min-height: 50px; padding: 11px 14px; border: 0; border-radius: var(--r); background: var(--carton); box-shadow: inset 0 0 0 1.5px var(--borde-campo); font-size: 16px; font-weight: 400; }
.campo textarea { resize: vertical; }

/* Movimientos y Usuarios */
.alta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 4px 0 16px; padding: 14px 16px; background: var(--carton); border-radius: var(--r); }
.alta .campo { margin: 0; min-width: 240px; }
.tabla-env { overflow-x: auto; background: var(--carton); border-radius: var(--r); box-shadow: 0 1px 2px rgba(20,24,20,.08); }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th { position: sticky; top: 0; text-align: left; padding: 10px 12px; background: var(--fondo); font-family: var(--mono); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
.tabla td { padding: 8px 12px; border-top: 1px solid var(--linea-2); vertical-align: middle; }
.tabla tr.desc td { color: var(--tenue); }
.tabla .acc-t { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.pin-grande { margin: 16px 0; text-align: center; font-family: var(--mono); font-weight: 500; font-size: 64px; letter-spacing: .3em; color: var(--casa); }

/* ─── Las dos vistas ─── */
@media (min-width: 900px) {
  .vista { padding: 20px 28px 40px; }
  .barra { padding-left: 28px; padding-right: 28px; }
  .velo { align-items: center; padding: 24px; }
  .hoja { border-radius: 14px; max-width: 520px; }
}
@media (max-width: 899.98px) {
  input, select, textarea { font-size: 16px; }
  .marca-casa small { display: none; }
}
@media (max-width: 360px) {
  .cas-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }