/* =====================================================================
   REDISEÑO AGRAP CAMPO (10 oct 2026) — la maqueta «Agrap Campo.dc.html»
   ---------------------------------------------------------------------
   Cabecera azul de marca con la hoja amarilla, franja de título (finca,
   fecha, semana y cintas), tarjetas radio 20 con borde #e6e5df, botones
   píldora, la acción principal en amarillo y, en el teléfono, cuatro
   pestañas abajo (Inicio, Almacén, Corte, RDT) con «Más» para el resto.
   En el portátil sigue la barra lateral.

   SOLO FORMA: ningún cálculo, guardado ni toque depende de este archivo.
   Ninguna capa fija queda encima del contenido: la hoja «Más» solo existe
   (display) mientras está abierta. Lo carga solo index.html (la finca);
   oficina.html no lo ve. El azul es #003b5c (decisión del usuario), no el
   #153a5a de la maqueta.
   ===================================================================== */

:root {
  --rd-azul: #003b5c;
  --rd-azul-osc: #0d2840;
  --rd-amarillo: #fdb913;
  --rd-crema: #f9f9f7;
  --rd-borde: #e6e5df;
  --rd-suave: #f6f6f3;
  --rd-suave-2: #f1f0eb;
  --rd-tinta: #0d2840;
  --rd-tinta-2: #33485c;
  --rd-mut: #5d6b78;
  --rd-mut-2: #8a96a1;
  --rd-sombra: 0 1px 2px rgba(13, 40, 64, .04);
  --rd-flota: 0 16px 34px rgba(13, 40, 64, .14);
  --rd-curva: cubic-bezier(.2, .9, .25, 1.3);
  --rd-alto-barra: 72px;
}

/* ---------- Cabecera azul (todos los modos de index.html) ---------- */
.cabecera {
  background: var(--rd-azul); color: var(--rd-crema); border-bottom: 0; min-height: 58px; gap: 10px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding-top: calc(8px + var(--seguro-arriba)); padding-bottom: 8px;
}
.cabecera::before { display: none; }
.cabecera-logo { width: 26px; height: 26px; padding: 0; border: 0; object-fit: contain; box-sizing: content-box; }
.cab-marca { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--rd-crema); white-space: nowrap; }
.cab-marca b { color: var(--rd-amarillo); font-weight: 800; }
.cabecera-bodega #bodegaActiva { color: var(--rd-crema); font-weight: 750; }
.cabecera-bodega #bodegaActiva::after { color: rgba(249, 249, 247, .6); }
.cabecera-bodega small { color: rgba(249, 249, 247, .72); }
.cabecera .version { color: rgba(249, 249, 247, .55); }
.btn-atras { background: rgba(249, 249, 247, .12); color: var(--rd-crema); border: 1px solid rgba(249, 249, 247, .22); box-shadow: none; }
.btn-atras:hover { border-color: rgba(249, 249, 247, .5); }
.btn-atras:active { background: rgba(249, 249, 247, .22); }
.indicador { background: rgba(249, 249, 247, .14); color: var(--rd-crema); font-weight: 750; border-radius: 15px; min-height: 30px; }
.indicador.alerta-dias { background: #ff8f84; color: var(--rd-azul-osc); }
body.con-lateral .btn-menu { border-color: rgba(249, 249, 247, .25); background: rgba(249, 249, 247, .1); color: var(--rd-crema); }
.cabecera button:focus-visible { outline: 3px solid rgba(253, 185, 19, .8); outline-offset: 2px; }

/* el envío a la oficina, siempre a la vista */
.cab-nube {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border: 0; border-radius: 15px; flex: none;
  background: rgba(249, 249, 247, .12); color: var(--rd-crema); font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer;
}
.cab-nube .cn-punto { width: 8px; height: 8px; border-radius: 50%; background: #6fd39a; }
.cab-nube.off .cn-punto { background: rgba(249, 249, 247, .45); }
.cab-nube.pend { background: var(--rd-amarillo); color: var(--rd-azul-osc); }
.cab-nube.pend .cn-punto { background: var(--rd-azul-osc); }
.cab-avatar {
  width: 34px; height: 34px; border-radius: 50%; border: 0; flex: none; display: grid; place-items: center; cursor: pointer;
  background: var(--rd-amarillo); color: var(--rd-azul-osc); font: inherit; font-size: 14px; font-weight: 800;
}
body:not(.con-lateral) .cab-nube, body:not(.con-lateral) .cab-avatar, body:not(.con-lateral) .cab-marca { display: none; }

/* ---------- Franja de título de la sección ---------- */
.cab-titulo { background: var(--rd-azul); color: var(--rd-crema); padding: 4px 18px 18px; }
body:not(.con-lateral) .cab-titulo { display: none; }
.ct-kicker { font-size: 13px; font-weight: 700; color: var(--rd-amarillo); }
.ct-titulo { margin: 2px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: var(--rd-crema); }
.ct-cintas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; font-size: 13px; color: rgba(249, 249, 247, .85); }
.ct-cinta { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 11px; font-weight: 800; box-shadow: 0 0 0 1px rgba(249, 249, 247, .25); }
.cab-titulo { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }

/* ---------- Teléfono: cabecera de la maqueta y barra de abajo ---------- */
.barra-finca, .hoja-mas { display: none; }
@media (max-width: 899px) {
  /* arriba: hoja, «agrap campo», envío y la inicial; la finca y la sección van en la franja de título */
  body.con-lateral .btn-menu, body.con-lateral #btnCambiarFinca { display: none; }
  body.con-lateral .cabecera-logo { display: block; width: 22px; height: 22px; }
  body.con-lateral .cab-marca { margin-right: auto; }
  body.con-lateral { padding-bottom: calc(var(--rd-alto-barra) + 14px + var(--seguro-abajo)); }

  body.con-lateral .barra-finca:not([hidden]) {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 6px max(8px, env(safe-area-inset-left)) calc(6px + var(--seguro-abajo)) max(8px, env(safe-area-inset-right));
    background: #fff; border-top: 1px solid var(--rd-borde); box-shadow: 0 -6px 24px rgba(13, 40, 64, .06);
  }
  .bf-tab {
    flex: 1; min-width: 0; height: 58px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; cursor: pointer; color: var(--rd-mut-2); font: inherit; touch-action: manipulation;
  }
  .bf-ic { width: 46px; height: 28px; border-radius: 14px; display: grid; place-items: center; transition: background .2s; }
  .bf-forma { display: block; width: 12px; height: 12px; background: var(--rd-mut-2); transition: background .2s; }
  .bf-forma.f-inicio { border-radius: 2px 12px 2px 12px; }
  .bf-forma.f-almacen { border-radius: 3px; }
  .bf-forma.f-campo { border-radius: 50%; }
  .bf-forma.f-rdt { border-radius: 3px 3px 12px 12px; }
  .bf-forma.f-mas { width: 4px; height: 4px; border-radius: 50%; box-shadow: -6px 0 0 currentColor, 6px 0 0 currentColor; background: currentColor; }
  .bf-forma:not(.f-inicio):not(.f-almacen):not(.f-campo):not(.f-rdt):not(.f-mas) { border-radius: 2px 12px 2px 12px; }
  .bf-txt { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bf-tab.activa { color: var(--rd-azul-osc); }
  .bf-tab.activa .bf-ic { background: var(--rd-amarillo); }
  .bf-tab.activa .bf-forma { background: var(--rd-azul-osc); }
  .bf-tab.activa .bf-txt { font-weight: 800; }
  .bf-tab:focus-visible { outline: 3px solid rgba(253, 185, 19, .8); outline-offset: -3px; border-radius: 12px; }

  /* el aviso sube por encima de la barra */
  body.con-lateral .toast { bottom: calc(var(--rd-alto-barra) + 18px + var(--seguro-abajo)); }
}

/* ---------- «Más»: hoja de vidrio azul con el resto de las secciones ---------- */
body.con-lateral .hoja-mas:not([hidden]) {
  display: flex; flex-direction: column; justify-content: flex-end; position: fixed; inset: 0; z-index: 35;
  background: rgba(13, 40, 64, .25);
  padding: 10px 10px calc(var(--rd-alto-barra) + 24px + var(--seguro-abajo));
}
.hm-panel {
  max-width: 560px; width: 100%; margin: 0 auto; padding: 14px; border-radius: 30px;
  background: rgba(13, 40, 64, .9); border: 1px solid rgba(249, 249, 247, .16); color: var(--rd-crema);
  box-shadow: 0 30px 80px rgba(13, 40, 64, .28); animation: hojaIn .28s cubic-bezier(.2, .9, .25, 1.2) both;
  max-height: calc(100dvh - 140px); overflow-y: auto;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  @media (pointer: fine) { .hm-panel { background: rgba(13, 40, 64, .7); -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); } }
}
.hm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hm-item {
  min-height: 64px; border-radius: 32px; border: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 10px; text-align: left; cursor: pointer;
  background: rgba(249, 249, 247, .12); color: var(--rd-crema); font: inherit; font-size: 13.5px; font-weight: 800; line-height: 1.15;
}
.hm-item:hover { background: rgba(249, 249, 247, .2); }
.hm-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--rd-crema); display: grid; place-items: center; flex: none; }
.hm-ic span { width: 13px; height: 13px; border-radius: 2px 13px 2px 13px; background: var(--rd-azul); }
.hm-item.activa { background: var(--rd-crema); color: var(--rd-azul-osc); }
.hm-item.activa .hm-ic { background: var(--rd-amarillo); }
.hm-item.activa .hm-ic span { background: var(--rd-azul-osc); }
.hm-finca { display: grid; gap: 4px; margin-top: 12px; }
.hm-finca span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(249, 249, 247, .65); padding-left: 6px; }
.hm-finca select { min-height: 48px; border-radius: 24px; padding: 0 16px; border: 1px solid rgba(249, 249, 247, .25); background: rgba(249, 249, 247, .1); color: var(--rd-crema); font: inherit; font-weight: 700; }
.hm-finca option { color: var(--rd-tinta); }
.hm-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(249, 249, 247, .14); }
.hm-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid rgba(249, 249, 247, .22);
  background: none; color: var(--rd-crema); font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.hm-version { margin-left: auto; font-size: 11px; color: rgba(249, 249, 247, .5); }
/* «Más» abre la hoja de vidrio desde abajo (Agrap Campo.dc.html: hojaIn .28 s) */
@keyframes hojaIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes rdFunde { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hm-panel { animation: rdFunde .2s ease both; } }
@media (min-width: 900px) {
  /* en el portátil la misma hoja sale arriba a la derecha, bajo la inicial */
  body.con-lateral .hoja-mas:not([hidden]) { justify-content: flex-start; align-items: flex-end; padding: 70px 22px 22px; background: rgba(13, 40, 64, .18); }
  body.con-lateral .hm-panel { width: 440px; margin: 0; }
}

/* ---------- Portátil: barra lateral + cabecera azul ---------- */
@media (min-width: 900px) {
  body.con-lateral .cabecera-logo, body.con-lateral .cab-marca { display: none; }
  body.con-lateral #btnCambiarFinca { cursor: default; }
  body.con-lateral .cabecera { padding-left: 28px; padding-right: 22px; }
  body.con-lateral .cab-titulo { padding: 6px 32px 26px; }
  body.con-lateral .ct-titulo { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.035em; }
  body.con-lateral .ct-kicker { font-size: 14px; }
  body.con-lateral .ct-kicker .ctk-finca { display: none; }   /* la finca ya va en la cabecera */
  body.con-lateral #bodegaFinca { display: none; }            /* y la sección, en el título */
  .lateral-finca.ofi-lado { background: var(--rd-azul); }
  .lateral-finca .ofi-item.activa { background: var(--rd-crema); color: var(--rd-azul-osc); font-weight: 750; }
  .lateral-finca .ofi-item.activa .ic { filter: none; }
}

/* ---------- Contenido: el lenguaje de la maqueta ---------- */
body.con-lateral { background: var(--rd-crema); color: var(--rd-tinta); }
@media (max-width: 899px) { body.con-lateral .pantalla { padding-top: 14px; } }

.tarjeta, .inf-card, .wg, .inf-rango { border-radius: 20px; border: 1px solid var(--rd-borde); box-shadow: var(--rd-sombra); }
.tarjeta > h2:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; color: var(--rd-tinta); font-weight: 750; letter-spacing: -.015em; }
.tarjeta > h2:first-child::before { content: ""; width: 11px; height: 11px; border-radius: 2px 11px 2px 11px; background: var(--rd-amarillo); flex: none; }
.inf-card:hover, .wg.tocable:hover { transform: translateY(-3px); box-shadow: var(--rd-flota); border-color: var(--rd-borde); }

/* botones: píldoras; la acción principal en amarillo, como el «Guardar y subir» de la maqueta */
.btn { border-radius: 980px; font-weight: 750; }
.btn.primario { background: var(--rd-amarillo); color: var(--rd-azul-osc); border-color: var(--rd-amarillo); box-shadow: 0 6px 16px rgba(253, 185, 19, .22); }
.btn.primario:hover:not(:disabled) { background: #ffc93a; color: var(--rd-azul-osc); box-shadow: 0 8px 22px rgba(253, 185, 19, .3); }
.btn.primario:active { background: #e9aa0e; transform: scale(.98); }
.btn.secundario { background: #fff; color: var(--rd-azul-osc); border: 1.5px solid var(--rd-azul-osc); box-shadow: none; }
.btn.secundario:hover:not(:disabled) { background: var(--rd-azul-osc); color: var(--rd-crema); border-color: var(--rd-azul-osc); }
.btn.oscuro { background: var(--rd-azul-osc); color: var(--rd-crema); }
.btn.mini { border-radius: 980px; border: 1px solid var(--rd-borde); color: var(--rd-azul-osc); font-weight: 700; }
.btn.mini:hover:not(:disabled) { border-color: var(--rd-azul); color: var(--rd-azul); }
.btn.peligro { background: #b23a2e; }
@media (hover: none) {
  .btn.primario:hover:not(:disabled) { background: var(--rd-amarillo); box-shadow: 0 6px 16px rgba(253, 185, 19, .22); }
  .btn.secundario:hover:not(:disabled) { background: #fff; color: var(--rd-azul-osc); border-color: var(--rd-azul-osc); }
}
/* los botones claros del lobby y de las hojas azules siguen claros */
.lobby .btn.btn-claro, .inf-header .btn.secundario { background: rgba(249, 249, 247, .1); color: var(--rd-crema); border-color: rgba(249, 249, 247, .3); }

/* campos: 44 px, radio 13, borde suave; al escribir, filo azul de marca */
.campo input:not([type=checkbox]):not([type=radio]), .campo select, .rdt-input, textarea.firma, .rdt-dia input[type=date], .alm-elegir-dia input, .inf-in {
  border-radius: 13px; border: 1.5px solid var(--rd-borde); background: #fff; color: var(--rd-tinta); font-weight: 650;
}
.campo input:focus, .campo select:focus, .rdt-input:focus, textarea.firma:focus, .rdt-dia input[type=date]:focus, .alm-elegir-dia input:focus {
  border-color: var(--rd-azul); box-shadow: 0 0 0 3px rgba(0, 59, 92, .15); background: #fff; outline: none;
}
.campo > span, .rdt-campo { color: var(--rd-mut); }
.rdt-captura, .alm-captura { border: 1px solid var(--rd-borde); }

/* control segmentado: la opción puesta en azul de marca */
.segmentos, .rdt-segmento { background: var(--rd-suave-2); border-radius: 14px; }
.segmento.activo, .rdt-segmento button.on { background: var(--rd-azul); color: var(--rd-crema); box-shadow: 0 2px 8px rgba(0, 59, 92, .25); }
.usu-chip.on { background: var(--rd-azul); border-color: var(--rd-azul); }

/* tablas: cabecera suave con cuadrícula */
.tabla thead th { background: var(--rd-suave); color: var(--rd-tinta-2); font-size: 12.5px; font-weight: 700; border-bottom: 1px solid var(--rd-borde); }
.tabla td { border-bottom-color: #ecece6; }
td.num, .tabla td.num { font-weight: 650; }

/* cifras (Widget2): hoja amarilla en el rótulo; la primera, en azul */
.kpi { border-radius: 20px; border: 1px solid var(--rd-borde); box-shadow: var(--rd-sombra); position: relative; overflow: hidden; isolation: isolate; }
.kpi::after { content: ""; position: absolute; z-index: -1; right: -26px; bottom: -30px; width: 96px; height: 96px; border-radius: 10% 100% 10% 100%; background: var(--rd-suave-2); pointer-events: none; }
.kpi-rotulo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--rd-tinta-2); }
.kpi-rotulo::before { content: ""; width: 11px; height: 11px; border-radius: 2px 11px 2px 11px; background: var(--rd-amarillo); flex: none; }
.kpi-valor { font-weight: 750; letter-spacing: -.03em; color: var(--rd-tinta); }
.kpis > .kpi:first-child:not(.kpi-alerta) { background: var(--rd-azul); border-color: var(--rd-azul); color: var(--rd-crema); }
.kpis > .kpi:first-child:not(.kpi-alerta) :is(.kpi-rotulo, .kpi-valor) { color: var(--rd-crema); }
.kpis > .kpi:first-child:not(.kpi-alerta) > :not(.kpi-rotulo):not(.kpi-valor) { color: rgba(249, 249, 247, .75); }
.kpis > .kpi:first-child:not(.kpi-alerta)::after { background: rgba(249, 249, 247, .08); }

/* etiquetas y avisos con los estados de la maqueta */
.etiqueta { border-radius: 980px; font-weight: 750; }
.alerta { border-radius: 16px; }
.alerta-aviso { background: #fdf0cc; border-color: #f4dc94; color: #7a5300; }
.alerta-error { background: #fbe7e4; border-color: #f0c4bd; color: #a3352a; }
.alerta-ok { background: #e3f3e8; border-color: rgba(0, 122, 51, .35); }

/* el aviso (toast): azul profundo con la hoja amarilla, abajo al centro */
.toast { background: var(--rd-azul-osc); color: var(--rd-crema); border-radius: 16px; font-size: 13.5px; font-weight: 700; padding: 12px 16px 12px 38px; box-shadow: 0 14px 34px rgba(13, 40, 64, .35); -webkit-backdrop-filter: none; backdrop-filter: none; }
.toast::before { content: ""; position: absolute; left: 16px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 2px 10px 2px 10px; background: var(--rd-amarillo); }
.toast.ok { background: var(--rd-azul-osc); }
.toast.ok::before { background: #6fd39a; }
.toast.error { background: #a3352a; }
.toast.error::before { background: #fff; }
.toast.aviso { background: var(--rd-amarillo); color: var(--rd-azul-osc); }
.toast.aviso::before { background: var(--rd-azul-osc); }

/* diálogos y la hoja de campo azul */
.dialogo { border-radius: 24px; }
.inf-header { background: var(--rd-azul); box-shadow: 0 14px 34px rgba(13, 40, 64, .16); }
.dchip.on { background: var(--rd-azul); border-color: var(--rd-azul); }

/* ---------- Inicio: los widgets de la maqueta ---------- */
body.con-lateral .wg-barra { justify-content: flex-end; margin: 0 2px 12px; }
body.con-lateral .wg-barra > div:first-child { display: none; }   /* finca y saludo ya van en la franja de título */
.wg { gap: 6px; padding: 14px 16px; min-height: 120px; transition: transform .2s var(--rd-curva), box-shadow .2s, border-color .2s; }
.wg-cab { font-size: 12.5px; font-weight: 700; color: var(--rd-mut); text-transform: none; letter-spacing: 0; }
.wg-cab::before { content: ""; width: 10px; height: 10px; border-radius: 2px 10px 2px 10px; background: var(--rd-amarillo); flex: none; }
.wg-ic { display: none; }
.wg-ir { color: var(--rd-mut-2); }
.wg-cifra strong, .wg-hora, .wg-clima strong { color: var(--rd-tinta); font-weight: 800; letter-spacing: -.03em; }
.wg-cifra strong { font-size: 1.75rem; }
.wg-fila { border-top-color: var(--rd-suave-2); }
.wg-fila span { color: var(--rd-mut); }
.wg-nota { color: var(--rd-mut); }
.wg.tocable:active { transform: scale(.97); }
/* la primera tarjeta va en azul (Widget2 tema azul) */
.wg-grid > .wg:first-child { background: var(--rd-azul); border-color: var(--rd-azul); color: var(--rd-crema); }
.wg-grid > .wg:first-child :is(.wg-cab, .wg-nota, .wg-fila span, .wg-cifra span, .wg-ir) { color: rgba(249, 249, 247, .78); }
.wg-grid > .wg:first-child :is(.wg-cifra strong, .wg-hora, .wg-clima strong, p, b) { color: var(--rd-crema); }
.wg-grid > .wg:first-child .wg-fila { border-top-color: rgba(249, 249, 247, .14); }
.wg-grid > .wg:first-child .wg-dias > div { background: rgba(249, 249, 247, .1); }
.wg-grid > .wg:first-child .btn.mini { background: rgba(249, 249, 247, .12); color: var(--rd-crema); border-color: rgba(249, 249, 247, .28); }
.wg-grid > .wg:first-child a { color: var(--rd-amarillo); }
@media (max-width: 899px) {
  /* el teléfono: dos columnas como la maqueta; lo grande ocupa las dos */
  .wg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wg.grande, .wg-grid > .wg:first-child { grid-column: span 2; }
  .wg { padding: 13px 14px; min-height: 112px; border-radius: 20px; }
  .wg-cifra strong { font-size: 1.5rem; }
  .wg-fila { font-size: .82rem; }
  .wg-dias small { font-size: .7rem; }
}
.wg-editar .btn.mini { min-height: 36px; }

/* Informes: el título ya va en la franja */
body.con-lateral .inf-cabeza h1 { display: none; }

/* ---------- Entrada de pantalla (solo al cambiar de sección) ----------
   La maqueta no anima la entrada («Entrada al montar: no») y la regla del
   usuario («ninguna curva de aprendizaje») pide que los campos estén quietos
   y listos: al cambiar de sección solo hay un fundido corto, sin moverse. */
@media (prefers-reduced-motion: no-preference) {
  .pantalla.entrando > * { animation: rdFunde .2s ease both; }
}

/* Salidas nuevas: la fila que se acaba de guardar entra con hojaIn .35 s
   (la marca app.js con .rd-nueva; solo forma, la fila ya está en su sitio). */
@media (prefers-reduced-motion: no-preference) {
  .rd-nueva { animation: hojaIn .35s cubic-bezier(.2, .9, .25, 1.2) both; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-nueva { animation: rdFunde .3s ease both; }
  .wg.tocable:active, .btn.primario:active, .bf-tab:active .bf-ic { transform: none; }
}

/* Presionar: las baldosas y las pestañas se hunden (.97), los botones (.98) */
.wg { transition: transform .2s cubic-bezier(.2, .9, .25, 1.5), box-shadow .2s, border-color .2s; }
.bf-ic { transition: background .2s, transform .2s cubic-bezier(.2, .9, .25, 1.5); }
.bf-tab:active .bf-ic { transform: scale(.97); }
.btn.primario { transition: background .2s, box-shadow .2s, transform .2s cubic-bezier(.2, .9, .25, 1.5); }

/* ---------- Lobby / ingreso: mismo azul de marca ---------- */
.lobby { background: var(--rd-azul); }
.lobby-input { border-radius: 16px; }
body.con-lateral .wg-barra .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* Widget que todavía no llega (17 oct 2026, «saltos en el inicio»): ocupa ya su lugar, para que al llegar el dato
   las tarjetas de abajo no salten. El clima es el que más tarda (sale a internet) y el más alto. */
.wg-cargando { min-height: 44px; border-radius: 10px; background: currentColor; opacity: .06; }
.wg-cargando-clima { min-height: 264px; }   /* el de un teléfono; inicio.js recuerda el real de cada equipo */
@media (prefers-reduced-motion: no-preference) {
  .wg-cargando { animation: wgCargando 1.4s ease-in-out infinite; }
  @keyframes wgCargando { 50% { opacity: .11; } }
}