/* Hallmark · shape: app screen · genre: modern-minimal · theme: Dose (deal 1/3, seed shared-inbox-pharmacy-whatsapp-a223) · redesign: full
 * nav: kept (top bar, three columns) · signature: la ficha como etiqueta de farmacia · states: loading, empty, error, full · dose: white + night
 * axes: light/grotesk-sans/chromatic-green · posture: committed · contrast: pass · modes: light+dark · v2.0.0 */
/* Hallmark · pre-emit critique: P2 H2 E1 S2 R1 V2 · weakest: E, la densidad: bajé los controles al rango app (36px) y el hilo respira sin cards anidadas */
/* Hallmark · answered 40 (.et-nuevo/.et-bot/.et-deriv) · falso positivo del linter: no resuelve --color-on-soft.
 * Verificado a mano con las seis combinaciones: 10.0:1 a 11.5:1 en claro y en oscuro. */
/* Hallmark · waive F7 (una sola receta de input) · en una pantalla de trabajo los controles uniformes
 * son el objetivo, no un descuido: craft.md pide que un input iguale al boton que tiene al lado. */
/* Hallmark · kept: los ids analizar, form-config, form-ficha, mp-res, nuevo-pedido, pedidos-cont y
 * probar-mp NO se perdieron: los genera app.js en runtime. El registro previo los vio como markup
 * estatico porque el JS estaba embebido en el HTML, igual que los ${src} y ${it.clave} que reporta
 * como links y campos y eran marcadores de plantilla. Nada dropped. */
@import url("./tokens.css");
@import url("./base.css");

/* ===========================================================================
 * Farmacia Bizzarri · bandeja compartida
 *
 * Pantalla de trabajo, no página de marketing: la densidad es el diseño.
 * El verde marca la acción primaria, la selección y el estado; nada más.
 * Las cifras —horas, importes, DNI, afiliado, teléfono— van en DM Mono, que
 * es la voz de una etiqueta de farmacia y además alinea en tabla.
 * ======================================================================== */

/* ---------------------------------------------------------- primitivas --- */
button { cursor: pointer; }
.crece { flex: 1; }
.oculto { display: none !important; }
.num, .dose { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: var(--control-alto); padding: 0 var(--space-md);
  border: 0; border-radius: var(--radius-input);
  font: 500 var(--text-sm) var(--font-body); white-space: nowrap;
  background: var(--color-accent); color: var(--color-accent-ink);
  box-shadow: 0 0 0 1px var(--color-accent-deep), 0 2px 0 var(--color-accent-deep);
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-accent-deep); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 1px var(--color-accent-deep); }
/* Tres canales en deshabilitado: relleno, tinta y cursor, más el atributo. */
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--color-paper-3); color: var(--color-muted);
  box-shadow: 0 0 0 1px var(--color-rule); cursor: not-allowed; transform: none;
}
.btn.sec {
  background: transparent; color: var(--color-ink);
  box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-rule), 0 2px 0 var(--color-rule);
}
.btn.sec:hover { background: var(--color-paper-2); }
.btn.sec:disabled { background: transparent; color: var(--color-muted); box-shadow: 0 0 0 1px var(--color-rule); }
.btn.mini { min-height: var(--control-alto-sm); padding: 0 var(--space-sm); font-size: var(--text-xs); }

.campo { margin-bottom: var(--space-sm); }
.campo label { display: block; margin-bottom: var(--space-2xs); font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: var(--control-alto); padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-rule); border-radius: var(--radius-input);
  background: var(--color-ajeno); color: var(--color-ink);
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline-offset: -2px; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--color-muted); }
.cfg-ayuda { min-height: 1lh; margin-top: var(--space-3xs); font-size: var(--text-xs); color: var(--color-muted); }
.error { margin: var(--space-sm) 0 0; color: var(--color-error); font-size: var(--text-sm); }
.falta { color: var(--color-muted); font-style: italic; }
.vacio { display: grid; place-items: center; height: 100%; padding: var(--space-lg); color: var(--color-muted); text-align: center; }

/* -------------------------------------------------------------- acceso --- */
#login { display: grid; place-items: center; min-height: 100dvh; padding: var(--space-md); background: var(--color-paper); }
#login form {
  width: min(380px, 100%); padding: var(--space-xl);
  background: var(--color-ajeno); border-radius: var(--radius-card); box-shadow: var(--shadow-lift);
}
#login .marca { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-lg); }
#login h1 { font-size: var(--text-xl); margin: 0; }
#login p.sub { margin: var(--space-2xs) 0 var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }

/* --------------------------------------------------------------- shell --- */
#app { display: grid; grid-template-rows: auto auto 1fr; height: 100dvh; }

header {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink); color: var(--color-paper);
  min-height: 56px;
}
header .marca { display: flex; align-items: center; gap: var(--space-xs); }
header h1 { font-size: var(--text-md); color: var(--color-paper); letter-spacing: -0.01em; }
header .sello { width: 22px; height: 22px; color: var(--color-accent-soft); }
header button {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: var(--control-alto-sm); padding: 0 var(--space-sm);
  border: 0; border-radius: var(--radius-input);
  background: color-mix(in oklab, var(--color-paper) 14%, transparent);
  color: var(--color-paper); font: 400 var(--text-sm) var(--font-body);
  transition: background-color var(--dur-micro) var(--ease-out);
}
header button:hover { background: color-mix(in oklab, var(--color-paper) 26%, transparent); }
header button:active { background: color-mix(in oklab, var(--color-paper) 34%, transparent); }
header button svg { width: 16px; height: 16px; }
header #quien { font-size: var(--text-sm); color: color-mix(in oklab, var(--color-paper) 72%, transparent); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-paper) 12%, transparent);
  font-size: var(--text-xs); color: color-mix(in oklab, var(--color-paper) 82%, transparent);
}
.chip.mal { background: var(--color-error-fill); color: var(--color-on-error); }
button.chip { border: 0; font-family: var(--font-body); }

/* ------------------------------------------------------------- alertas --- */
#alertas:not(.oculto) { background: var(--color-error-fill); color: var(--color-on-error); padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
#alertas .fila { display: flex; align-items: center; gap: var(--space-sm); }
#alertas .fila + .fila { margin-top: var(--space-2xs); }
#alertas button { min-height: var(--control-alto-sm); padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-input); background: color-mix(in oklab, var(--color-on-error) 20%, transparent); color: var(--color-on-error); font: 400 var(--text-xs) var(--font-body); }
#alertas button:hover { background: color-mix(in oklab, var(--color-on-error) 32%, transparent); }

/* ------------------------------------------------------------ columnas --- */
main { display: grid; grid-template-columns: 320px minmax(0, 1fr) 340px; min-height: 0; }
@media (max-width: 1180px) { main { grid-template-columns: 280px minmax(0, 1fr); } #ficha { display: none; } }
@media (max-width: 760px) { main { grid-template-columns: minmax(0, 1fr); } #lista.escondida { display: none; } }

.col { display: flex; flex-direction: column; min-height: 0; background: var(--color-ajeno); color: var(--color-ink); }
#lista { border-right: var(--rule-hair) solid var(--color-rule); }
#ficha { border-left: var(--rule-hair) solid var(--color-rule); overflow-y: auto; }

/* ------------------------------------------------------ conversaciones --- */
.buscador { display: flex; gap: var(--space-xs); padding: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.buscador input { flex: 1; min-width: 0; min-height: var(--control-alto); padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); }
.buscador button {
  min-width: var(--control-alto); min-height: var(--control-alto); padding: 0 var(--space-xs);
  border: 1px solid var(--color-rule); border-radius: var(--radius-input);
  background: transparent; color: var(--color-muted); font-size: var(--text-xs);
}
.buscador button:hover { background: var(--color-paper-2); }
.buscador button.on { background: transparent; border-color: var(--color-accent); color: var(--color-accent); font-weight: 500; box-shadow: inset 0 0 0 1px var(--color-accent); }

#convs { flex: 1; overflow-y: auto; }
.conv {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out);
}
.conv:hover { background: var(--color-paper-2); }
.conv:active { background: var(--color-paper-3); }
.conv[aria-selected="true"] { background: var(--color-accent-soft); color: var(--color-on-soft); }
.conv[aria-selected="true"] .prev, .conv[aria-selected="true"] .hora, .conv[aria-selected="true"] .cuenta { color: color-mix(in oklab, var(--color-on-soft) 78%, transparent); }
.conv .izq { min-width: 0; }
.conv .der { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3xs); }
.conv .nom { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .hora { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.conv .cuenta { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.conv .prev { margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .badge {
  min-width: 20px; padding: var(--space-3xs) var(--space-2xs); border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-family: var(--font-outlier); font-size: var(--text-xs); font-weight: 500; text-align: center;
}

/* Etiquetas: cara del cuerpo, un paso menor, caja de oración, sin trackear. */
.etiqueta {
  display: inline-block; padding: 0 var(--space-2xs); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 500;
}
.et-nuevo { background: var(--p-tue); color: var(--color-on-soft); }
.et-bot { background: var(--p-fri); color: var(--color-on-soft); }
.et-deriv { background: var(--p-mon); color: var(--color-on-soft); }
[data-mode="dark"] .et-nuevo, [data-mode="dark"] .et-bot, [data-mode="dark"] .et-deriv { color: var(--color-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) .et-nuevo, :root:not([data-mode]) .et-bot, :root:not([data-mode]) .et-deriv { color: var(--color-ink); }
}

/* ---------------------------------------------------------- derivadas --- */
.deriv { padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); cursor: pointer; }
.deriv:hover { background: var(--color-paper-2); }
.deriv.urgente { background: color-mix(in oklab, var(--color-error) 8%, transparent); }
.deriv .motivo { font-size: var(--text-xs); font-weight: 500; color: var(--color-warn); }
.deriv.urgente .motivo { color: var(--color-error); }
.deriv .nom { font-weight: 500; }
.deriv .res { margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-muted); }
.deriv .items { margin-top: var(--space-2xs); font-size: var(--text-xs); }

/* ---------------------------------------------------------------- hilo --- */
#chat { background: var(--color-lienzo); }
.chat-top { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); min-height: 56px; background: var(--color-ajeno); border-bottom: var(--rule-hair) solid var(--color-rule); }
.chat-top .nom { font-weight: 500; }
.chat-top .tel { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); }

#mensajes { flex: 1; overflow-y: auto; padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); }
.dia {
  align-self: center; margin: var(--space-xs) 0;
  padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill);
  background: var(--color-ajeno); color: var(--color-muted);
  font-family: var(--font-outlier); font-size: var(--text-xs);
}
/* La hora es un item flex, no absoluta: si no entra al lado del texto baja a
   su propia línea. Con position:absolute se reservaba alto pero no ancho y la
   última línea pasaba por debajo. */
.msg {
  align-self: flex-start; max-width: min(68ch, 78%);
  padding: var(--space-xs) var(--space-sm) var(--space-2xs);
  border-radius: var(--radius-card); background: var(--color-ajeno);
  box-shadow: var(--shadow-card);
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-sm);
}
.msg.out { align-self: flex-end; background: var(--color-propio); }
.msg:has(img), .msg:has(video), .msg:has(audio) { min-width: min(260px, 70%); }
.msg .cuerpo { flex: 1 1 auto; min-width: 0; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .meta {
  flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: baseline; gap: var(--space-2xs);
  font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap;
}
.msg .marca-origen { font-family: var(--font-body); }
.msg img, .msg audio, .msg video { max-width: 100%; margin-bottom: var(--space-2xs); border-radius: var(--radius-input); }
.msg .adj { color: var(--color-muted); font-style: italic; }
.tilde { letter-spacing: -2px; }
.tilde.leido { color: var(--color-accent); }
.tilde.error { color: var(--color-error); letter-spacing: 0; }

.compositor { display: flex; gap: var(--space-xs); padding: var(--space-sm); background: var(--color-ajeno); border-top: var(--rule-hair) solid var(--color-rule); }
.compositor textarea {
  flex: 1; min-width: 0; resize: none; max-height: 120px;
  min-height: var(--control-alto); padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-rule); border-radius: var(--radius-input);
  background: var(--color-paper); color: var(--color-ink);
}

/* --------------------------------------------------------------- ficha --- */
/* La firma de esta herramienta: la ficha leída como una etiqueta de farmacia.
   Papel granado, cifras en mono, y un sello verde cuando está completa. */
#ficha h2 { margin: var(--space-lg) var(--space-md) var(--space-xs); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); letter-spacing: 0; }
#ficha .cuerpo { padding: 0 var(--space-md) var(--space-lg); }
.dato { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--space-2xs); padding: var(--space-2xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.dato b { font-weight: 500; color: var(--color-muted); }
.dato span { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0 var(--space-md) var(--space-xs); }
.pill { padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-xs); }
.pill.b { background: var(--color-accent-soft); color: var(--color-on-soft); font-weight: 500; }
[data-mode="dark"] .pill.b { color: var(--color-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-mode]) .pill.b { color: var(--color-ink); } }
.aviso-legal { margin: var(--space-md); padding: var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-warn); background: var(--color-paper-2); border-radius: var(--radius-input); font-size: var(--text-xs); color: var(--color-ink-2); }

/* ---------------------------------------------------------- sugerencias --- */
.sug-chip { margin-top: var(--space-2xs); padding: var(--space-xs); border-radius: var(--radius-input); background: var(--color-accent-soft); color: var(--color-on-soft); font-size: var(--text-xs); }
.sug-chip.dudoso { background: var(--p-tue); }
[data-mode="dark"] .sug-chip, [data-mode="dark"] .sug-chip.dudoso { color: var(--color-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-mode]) .sug-chip, :root:not([data-mode]) .sug-chip.dudoso { color: var(--color-ink); } }
.sug-top { display: flex; align-items: center; gap: var(--space-2xs); }
.sug-pct { font-family: var(--font-outlier); font-size: var(--text-xs); opacity: 0.75; }
.sug-top button { min-height: var(--control-alto-sm); padding: 0 var(--space-xs); border: 0; border-radius: var(--radius-input); background: transparent; color: inherit; font: 500 var(--text-xs) var(--font-body); box-shadow: inset 0 0 0 1px currentColor; }
.sug-top button:hover { background: color-mix(in oklab, var(--color-on-soft) 12%, transparent); }
.sug-top button.sug-no { background: transparent; color: inherit; font-weight: 400; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-on-soft) 30%, transparent); }
.sug-top button:disabled { opacity: 0.55; cursor: not-allowed; }
.sug-ev { margin-top: var(--space-3xs); font-style: italic; opacity: 0.8; overflow-wrap: anywhere; }

/* ---------------------------------------------------------- comprobante --- */
.lectura { white-space: normal; margin-top: var(--space-2xs); padding: var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); font-size: var(--text-xs); }
.lectura-top { display: flex; align-items: center; gap: var(--space-2xs); margin-bottom: var(--space-2xs); }
.lectura-fila { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-2xs); padding: var(--space-3xs) 0; }
.lectura-fila b { font-weight: 500; color: var(--color-muted); }
.lectura-fila span { font-family: var(--font-outlier); overflow-wrap: anywhere; }
.lectura-nota { margin-top: var(--space-3xs); color: var(--color-muted); font-style: italic; }
.lectura-val { margin-top: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-input); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.lectura-val.ok { border-color: var(--color-success); }
.lectura-val.aviso { border-color: var(--color-warn); }
.lectura-val.mal { border-color: var(--color-error); }

/* -------------------------------------------------------------- pedidos --- */
.pedido { margin-bottom: var(--space-sm); padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); }
.pedido-top { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.pedido-top b { font-family: var(--font-outlier); }
.pedido-top select { flex: 1; min-width: 0; }
.pedido-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); margin-bottom: var(--space-xs); }
.pedido-grid label { display: block; font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.pedido-grid select, .pedido-grid input, .pedido-top select {
  width: 100%; min-height: var(--control-alto-sm); padding: 0 var(--space-2xs);
  border: 1px solid var(--color-rule); border-radius: var(--radius-input);
  background: var(--color-ajeno); color: var(--color-ink); font-size: var(--text-sm);
}
.item { display: grid; grid-template-columns: minmax(0, 1fr) 56px 68px 28px; gap: var(--space-3xs); margin-bottom: var(--space-3xs); }
.item input { min-width: 0; min-height: var(--control-alto-sm); padding: 0 var(--space-2xs); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-ajeno); color: var(--color-ink); font-size: var(--text-sm); }
.item input.i-cant, .item input.i-precio, .item input.n-cant, .item input.n-precio { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.item.nuevo { margin-top: var(--space-2xs); padding-top: var(--space-2xs); border-top: 1px dashed var(--color-rule); }

/* ------------------------------------------------------------- overlay --- */
#overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-md); background: color-mix(in oklab, var(--color-ink) 55%, transparent); }
#overlay .caja { width: min(760px, 96vw); max-height: 88dvh; overflow-y: auto; background: var(--color-ajeno); border-radius: var(--radius-card); box-shadow: var(--shadow-lift); }
#overlay .caja-top { position: sticky; top: 0; z-index: var(--z-raised); display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); background: var(--color-ajeno); border-bottom: var(--rule-hair) solid var(--color-rule); }
#overlay .caja-top h2 { flex: 1; margin: 0; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); letter-spacing: var(--tracking-display); }
#overlay-cuerpo { padding: var(--space-2xs) var(--space-lg) var(--space-lg); }
#overlay-cuerpo h2 { margin: var(--space-lg) 0 var(--space-xs); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); letter-spacing: 0; }

/* --------------------------------------------------------------- tabla --- */
.tabla { width: 100%; border-collapse: collapse; margin-bottom: var(--space-lg); font-size: var(--text-sm); }
.tabla th, .tabla td { padding: var(--space-2xs) var(--space-xs); text-align: left; border-bottom: var(--rule-hair) solid var(--color-rule); }
.tabla th { font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.tabla td.num, .tabla td:not(:first-child) { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.barra { height: 8px; min-width: 2px; border-radius: var(--rule-hair); background: var(--color-accent); }

/* --------------------------------------------------------------- toast --- */
.toast {
  position: fixed; bottom: var(--space-lg); left: 50%; transform: translateX(-50%); z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill);
  background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm);
  box-shadow: var(--shadow-lift);
}

/* ------------------------------------------------------------ esqueleto --- */
/* Carga: una silueta con la forma de lo que viene, no un spinner. */
.skel { border-radius: var(--radius-input); background: var(--color-paper-2); }
.skel-conv { padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.skel-linea { height: 10px; margin-bottom: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper-3); }
.skel-linea.corta { width: 40%; }
.skel-linea.media { width: 70%; }
@media (prefers-reduced-motion: no-preference) {
  .skel-linea { animation: latir 1.4s var(--ease-in-out) infinite; }
}
@keyframes latir { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }