/* ═══════════════════════════════════════════════════════════════════════════
   RENOVO · ACABADO — auditoría en vivo del 2026-09-29
   Se carga la ÚLTIMA. Cada bloque nombra el defecto que corrige, medido en el
   recorrido completo (54 capturas con los datos reales de Blanc Roig, claro y
   oscuro, 1440 y 390 px). Lenguaje: el de la hoja aprobada — una superficie,
   filetes de 1 px, sin cajas, acciones en texto, cinco tamaños de letra.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · UNA SOLA BARRA DE SCROLL. #main tenía height:100vh + overflow:auto y un
      ancho de 1100 px centrado: su barra de desplazamiento cortaba la página por
      la mitad (x = 1270 a 1440 px; x = 1567 en la pantalla de David). Ahora
      desplaza la página y la barra superior se queda fija. */
@media (min-width: 901px) {
  html body.page-app .studio > .main,
  html body.page-app #main { height: auto !important; min-height: calc(100vh - 60px); overflow: visible !important; }
  html body.page-app .top-rail { position: sticky !important; top: 0; z-index: 60; }
}
html { scroll-padding-top: 76px; }

/* 2 · BARRA SUPERIOR: cinco controles en caja distintos → texto.
      (selector de local, buscar, RENO/Yo, Salir y la cuenta de Hoy) */
html body.page-app .top-rail .tr-brand { border-radius: 0; }
html body.page-app .top-rail .tr-brand:focus:not(:focus-visible) { outline: none; }
html body.page-app .top-rail .tr-biz select {
  -webkit-appearance: none; appearance: none; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; padding: 4px 16px 4px 0 !important;
  font: 600 12.5px/1.2 var(--font-ui) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--ink) !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%) !important;
  background-position: calc(100% - 6px) 55%, calc(100% - 2px) 55% !important; background-size: 4px 4px, 4px 4px !important; background-repeat: no-repeat !important;
  cursor: pointer; max-width: 170px;
}
html body.page-app .top-rail .tr-cmd {
  border: 0 !important; background: transparent !important; border-radius: 0 !important; padding: 0 0 3px !important;
  border-bottom: 1px solid transparent !important; color: var(--ink-soft) !important; font-size: 12.5px !important; gap: 8px;
}
html body.page-app .top-rail .tr-cmd:hover { color: var(--ink) !important; border-bottom-color: var(--line-strong) !important; }
html body.page-app .top-rail .tr-cmd kbd { border: 0 !important; background: none !important; padding: 0 !important; font: 500 11px var(--font-ui) !important; color: var(--ink-soft); letter-spacing: .04em; }
html body.page-app .top-rail .tr-drive { border: 0 !important; background: transparent !important; border-radius: 0 !important; gap: 14px; overflow: visible; }
html body.page-app .top-rail .tr-drive .mando-b {
  background: none !important; color: var(--ink-soft) !important; padding: 0 0 3px !important; border-radius: 0 !important;
  border-bottom: 1px solid transparent !important; font: 600 11px var(--font-ui) !important; letter-spacing: .08em;
}
html body.page-app .top-rail .tr-drive .mando-b.on { color: var(--ink) !important; border-bottom-color: var(--accent) !important; }
html body.page-app .top-rail .tr-drive::before { content: "Decide"; font: 500 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
html body.page-app .top-rail .tr-user .btn {
  border: 0 !important; background: none !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 0 3px !important; min-height: 0 !important; color: var(--ink-2) !important; font-size: 12.5px !important;
  border-bottom: 1px solid transparent !important;
}
html body.page-app .top-rail .tr-user .btn:hover { color: var(--ink) !important; border-bottom-color: var(--line-strong) !important; }
html body.page-app .tr-mods .nav-item .count {
  background: none !important; color: var(--accent-ink) !important; padding: 0 !important; margin-left: 5px;
  font: 600 11px var(--font-ui) !important; border-radius: 0 !important; min-width: 0; height: auto; vertical-align: super;
}

/* 3 · MENÚ MÓVIL ROTO: ☰ abría un .sidebar que ya no existe (se retiró en la v11):
      solo se oscurecía la pantalla. Ahora ☰ despliega la propia barra de módulos. */
@media (max-width: 900px) {
  html body.page-app.mnav-open .top-rail {
    display: flex !important; position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); height: 100%;
    flex-direction: column; align-items: stretch; gap: 24px; padding: 20px 24px calc(24px + env(safe-area-inset-bottom));
    background: var(--surface-page); border-right: 1px solid var(--line); z-index: 90; overflow-y: auto; box-shadow: var(--lift-2);
  }
  html body.page-app.mnav-open .top-rail .tr-mods { flex-direction: column; align-items: stretch; gap: 0; overflow: visible; flex: 0 0 auto; }
  html body.page-app.mnav-open .top-rail .tr-mods .nav-item { height: auto; padding: 14px 0 !important; border-bottom: 1px solid var(--line) !important; font-size: 15px !important; text-align: left; }
  html body.page-app.mnav-open .top-rail .tr-mods .nav-item.active { border-bottom-color: var(--accent) !important; }
  html body.page-app.mnav-open .top-rail .tr-cmd, html body.page-app.mnav-open .top-rail .tr-drive { align-self: flex-start; }
  html body.page-app.mnav-open .top-rail .tr-user { margin: auto 0 0; }
  html body.page-app.mnav-open .m-overlay { z-index: 80; }
}

/* 4 · CABECERAS DE SECCIÓN: barra naranja + serif en negrita (lenguaje viejo) →
      la etiqueta de la hoja: mayúsculas espaciadas, tinta suave, filete. */
html body.page-app #main .seccap-thin {
  font: 500 12.5px/1.4 var(--font-ui) !important; letter-spacing: .09em !important; text-transform: uppercase !important;
  color: var(--ink-soft) !important; margin: 32px 0 12px !important; padding: 0 !important; border: 0 !important; gap: 12px;
}
html body.page-app #main .seccap-thin::before { display: none !important; }
html body.page-app #main .seccap-thin::after { background: var(--line) !important; height: 1px !important; }
html body.page-app #main details > summary.seccap-thin::after { content: none !important; }

/* 5 · HOY · la tira de estado: círculo relleno sin significado + caja → una línea. */
html body.page-app #main .reno-strip {
  border: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 0 12px !important; margin: 0 0 8px !important; border-bottom: 1px solid var(--line) !important; gap: 16px;
}
html body.page-app #main .reno-orb { display: none !important; }
html body.page-app #main .reno-live { font-size: 15px; color: var(--ink-2); }
html body.page-app #main .reno-live b { color: var(--ink); font-weight: 600; }
/* El aviso de Google salía DOS veces (a la derecha de la tira y en la caja de abajo). */
html body.page-app #main #renoStrip:has(~ #hoyGoogleGate aside) .reno-watch { display: none !important; }
html body.page-app #main .reno-watch .d { display: none; }
html body.page-app #main .reno-watch { font-size: 12.5px !important; font-weight: 500 !important; }

/* 6 · AVISOS (Google sin local, sincronización): caja rellena → fila con filete. */
html body.page-app #main .hoy-google-gate, html body.page-app #main .alert {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  padding: 16px 0 !important; margin: 0 0 24px !important; gap: 16px; align-items: flex-start;
}
html body.page-app #main .hoy-google-gate-body b { font: 500 15px/1.4 var(--font-ui) !important; color: var(--ink) !important; }
html body.page-app #main .hoy-google-gate-body p { font-size: 15px !important; color: var(--ink-2) !important; margin-top: 4px !important; }
html body.page-app #main .hoy-google-gate > .btn { align-self: baseline !important; white-space: nowrap; }
html body.page-app #main .alert { color: var(--ink-2) !important; font-size: 15px !important; border-left: 0 !important; }
html body.page-app #main .alert b, html body.page-app #main .alert strong { color: var(--ink); }

/* 7 · HOY · el titular. «0,5» en serif gigante suelto → cifra dentro de la frase. */
html body.page-app #main .hoy-hero-band { border-top: 0 !important; padding-top: 16px !important; }
html body.page-app #main .hoy-hero-band .hero-titular { font: 500 21px/1.25 var(--font-display) !important; letter-spacing: -.02em; margin: 8px 0 0 !important; }
html body.page-app #main .hoy-hero-band .hero-titular b { color: var(--ink) !important; font-weight: 500 !important; }
html body.page-app #main .big-give { display: flex; align-items: baseline; gap: 8px; margin-top: 12px !important; }
html body.page-app #main .big-give .num { font: 500 21px/1 var(--font-display) !important; color: var(--ink) !important; letter-spacing: -.02em; }
html body.page-app #main .big-give .unit { font-size: 15px !important; color: var(--ink-2) !important; }

/* 8 · TARJETAS DE DECISIÓN (Hoy, Reputación, Contenido): iconos sueltos (★, tenedor,
      ojo) sin significado → fuera; hueco muerto de ~90 px entre el texto y sus
      acciones (las acciones iban DEBAJO de la columna derecha) → van con su texto. */
html body.page-app #main .qcard { display: block !important; padding: 24px 0 !important; margin: 0 !important; }
html body.page-app #main .q-src { display: none !important; }
html body.page-app #main .q-body {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: 48px; row-gap: 16px;
  grid-template-areas: "main side" "acts side"; align-items: start;
}
html body.page-app #main .q-body:not(:has(.q-side)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "acts"; }
html body.page-app #main .q-main { grid-area: main; min-width: 0; }
html body.page-app #main .q-side { grid-area: side; }
html body.page-app #main .q-acts { grid-area: acts; grid-column: auto !important; margin: 0 !important; align-self: start; }
html body.page-app #main .q-top { gap: 8px; }
html body.page-app #main .q-tag, html body.page-app #main .q-time { font: 500 12.5px var(--font-ui) !important; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft) !important; }
html body.page-app #main .q-time { letter-spacing: 0; text-transform: none; }
html body.page-app #main .q-headline { font: 500 21px/1.3 var(--font-display) !important; letter-spacing: -.015em; color: var(--ink) !important; margin: 8px 0 0 !important; }
html body.page-app #main .q-detail { font-size: 15px !important; line-height: 1.6 !important; color: var(--ink-2) !important; margin: 8px 0 0 !important; }
html body.page-app #main .q-skip { background: none !important; border: 0 !important; padding: 0 0 4px !important; font-size: 12.5px !important; color: var(--ink-soft) !important; }
html body.page-app #main .q-skip:hover { color: var(--ink) !important; }
html body.page-app #main .q-proof { font-size: 15px !important; line-height: 1.6; color: var(--ink-2); }
html body.page-app #main .q-proof b { color: var(--ink); }
@media (max-width: 900px) {
  html body.page-app #main .q-body { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "main" "side" "acts" !important; }
}

/* 9 · «Hecho sin pedirte nada»: caja verde rellena → una línea con su marca. */
html body.page-app #main .done-line { background: transparent !important; border-radius: 0 !important; padding: 12px 0 !important; border-bottom: 1px solid var(--line); font-size: 15px !important; }

/* 10 · AVISOS FLOTANTES: bloque de acento relleno → hoja elevada con filete. */
html body.page-app #toasts { right: 24px; bottom: 24px; }
html body.page-app .toast {
  background: var(--surface-raised) !important; color: var(--ink) !important; border-radius: 0 !important;
  border-left: 2px solid var(--accent) !important; box-shadow: var(--lift-2) !important; font-size: 15px !important; padding: 12px 16px !important;
}
html body.page-app .toast.warn { border-left-color: var(--bad) !important; }
html body.page-app .toast::before { color: inherit !important; }

/* 11 · INSTALAR LA APP: franja fija de dos líneas que tapaba la pestaña de abajo y
      chocaba con el botón del chat → una línea discreta. (El texto lo decide el JS
      según el dispositivo: el iPhone recibía las instrucciones del ordenador.) */
html body.page-app .renovo-install-hint {
  background: var(--surface-page) !important; border: 0 !important; border-top: 1px solid var(--line) !important;
  box-shadow: none !important; border-radius: 0 !important; padding: 10px 88px 10px 24px !important;
  font-size: 12.5px !important; color: var(--ink-2) !important; gap: 16px !important; justify-content: center;
}
html body.page-app .renovo-install-hint .btn { border: 0 !important; background: none !important; padding: 0 0 2px !important; border-bottom: 1px solid var(--line-strong) !important; border-radius: 0 !important; font-size: 12.5px !important; min-height: 0 !important; color: var(--ink) !important; box-shadow: none !important; }
@media (max-width: 900px) { html body.page-app .renovo-install-hint { padding: 10px 76px 10px 16px !important; justify-content: flex-start; } }

/* 12 · AJUSTES: grupos con barra de fondo rellena → título de sección con filete. */
html body.page-app #main details.set-group { border: 0 !important; background: transparent !important; }
html body.page-app #main .set-sum {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--line-strong) !important; border-radius: 0 !important;
  padding: 24px 0 8px !important; font: 500 21px/1.3 var(--font-display) !important; color: var(--ink) !important;
}

/* 13 · REPUTACIÓN: «Métricas» salía en azul (color fuera de paleta); el selector de
      orden, en caja oscura; la columna de estrellas decorativas. */
html body.page-app #main details.rep-metrics > summary { color: var(--ink-2) !important; font: 500 12.5px var(--font-ui) !important; letter-spacing: .09em; text-transform: uppercase; }
html body.page-app #main .rep-toolbar select {
  -webkit-appearance: none; appearance: none; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-strong) !important;
  border-radius: 0 !important; padding: 0 18px 3px 0 !important; font: 500 12.5px var(--font-ui) !important; color: var(--ink) !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%) !important;
  background-position: calc(100% - 6px) 50%, calc(100% - 2px) 50% !important; background-size: 4px 4px, 4px 4px !important; background-repeat: no-repeat !important;
}
html body.page-app #main .rep-toolbar { font-size: 12.5px; color: var(--ink-soft); }

/* 14 · CONTENIDO: la tira «Esta semana» salía dos veces (y el calendario nuevo ya la
      contiene). Se retira del marcado en JS; si algún camino la pinta, sin cajas. */
html body.page-app #main .week-day { border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; }

/* 15 · INFORME imprimible (#reportBody) en pantalla: el subtítulo salía sangrado a
      mitad de página (regla vieja de la landing). */
html body.page-app #main .inf-view .hero-sub { margin: 12px 0 0 !important; font-size: 15px !important; max-width: 62ch; color: var(--ink-2) !important; text-align: left !important; }
html body.page-app #main .inf-view .hero-titular { font: 500 21px/1.25 var(--font-display) !important; }
html body.page-app #main .fb-invite { border: 0 !important; border-top: 1px solid var(--line) !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important; padding: 24px 0 !important; }
html body.page-app #main .fb-invite :is(button, .btn) { border: 0 !important; border-bottom: 1px solid var(--line-strong) !important; background: none !important; border-radius: 0 !important; padding: 0 0 4px !important; margin-right: 24px; min-height: 0 !important; }

/* 16 · CARTA Y RECETAS: la lista vieja de platos (filas de 190 px, barrita de
      margen reducida a un guion, porcentajes, «Revisar coste» en platos sin receta)
      repetía la carta que la hoja del Escandallo ya enseña bien. Aquí solo se edita. */
html body.page-app #main .esc-despertar :is(#famaCara, #escCartaCap, #dishHero, #dishRows, #dishDetail, #menuMatrix) { display: none !important; }

/* 17 · Tipografía: las cifras sueltas ya no usan monoespaciada en ningún sitio. */
html body.page-app :is(kbd, code, .kbd) { font-family: var(--font-ui) !important; }

/* 18 · BARRA SUPERIOR (2ª pasada, medida): «Decide RENO · Yo» se partía en dos
      líneas y «Yo» seguía en caja; «Salir» quedaba descolgado. */
html body.page-app .top-rail .tr-drive { display: inline-flex !important; align-items: baseline !important; flex-wrap: nowrap !important; gap: 12px !important; height: auto !important; }
html body.page-app .top-rail .tr-drive .mando-b { border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; height: auto !important; line-height: 1.2 !important; }
html body.page-app .top-rail .tr-user { align-self: center; }
html body.page-app .top-rail .tr-brand .sb-wm, html body.page-app .m-topbar .sb-wm { color: var(--ink) !important; }
/* Marca 29/09: «Reno» en tinta, «vo» en el color del sol, en todas las barras. */
html body.page-app .top-rail .tr-brand .sb-wm span, html body.page-app .m-topbar .sb-wm span { color: var(--accent) !important; }

/* 19 · HOY · «Si no tocas nada…»: caja con degradado, línea dorada degradada, icono
      en caja y etiqueta resaltada → una fila de la hoja, con el dinero a la derecha. */
html body.page-app #main .future { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; padding: 24px 0 !important; margin: 16px 0 0 !important; box-shadow: none !important; }
html body.page-app #main .future::before { display: none !important; }
html body.page-app #main .fhead .ficon { display: none !important; }
html body.page-app #main .fhead h3 { font: 500 21px/1.3 var(--font-display) !important; letter-spacing: -.015em; }
html body.page-app #main .fhead .tag { background: none !important; padding: 0 !important; border-radius: 0 !important; color: var(--ink-soft) !important; font: 500 12.5px var(--font-ui) !important; letter-spacing: .09em; }
html body.page-app #main .fcopy p { font-size: 15px !important; line-height: 1.6 !important; }
html body.page-app #main .fcost .amt { font: 500 21px var(--font-display) !important; color: var(--bad) !important; }

/* 20 · VENTANAS (login, pago, asistente): el velo era tinta al 58 %: en oscuro la tinta es
      crema → un lavado gris sobre la página. Velo oscuro fijo en los dos temas. Y los textos
      de ejemplo de los campos iban en cursiva: la hoja no usa cursiva. */
.modal-backdrop { background: rgba(12, 10, 7, .66) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; }
input::placeholder, textarea::placeholder { font-style: normal !important; }

/* 21 · COLUMNA ÚNICA (medido 29/09): en Hoy los avisos (sincronía, «Hay 2 reseñas…», Google)
      empezaban 28 px a la izquierda del resto de la hoja: dos márgenes en una pantalla.
      En móvil, la hoja sumaba 20 + 28 px de margen por lado: 294 px de texto en 390. */
html body.page-app #main > .alert, html body.page-app #main > .reno-strip, html body.page-app #main > #hoyGoogleGate { margin-left: 28px !important; margin-right: 28px !important; }
@media (max-width: 760px) {
  html body.page-app #main { padding-left: 16px !important; padding-right: 16px !important; }
  html body.page-app #main > .stream { padding-left: 0 !important; padding-right: 0 !important; }
  html body.page-app #main > .alert, html body.page-app #main > .reno-strip, html body.page-app #main > #hoyGoogleGate { margin-left: 0 !important; margin-right: 0 !important; }
}

/* 22 · INFORME IMPRIMIBLE (11 cajas medidas): rejilla de 6 cifras en cajas, «2,6 h» en caja,
      resumen con banda lateral, gráfica en caja con barras negras y compras en otra caja.
      Un documento serio es una hoja: cifras en filas con filete, una sola cifra grande, sin cajas.
      El borde exterior de la hoja se queda: es el papel. */
#reportSheet .rs-exec { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 20px 0 24px !important; font-size: 14px !important; line-height: 1.65 !important; color: var(--ink-2); }
#reportSheet .rs-exec-tag { color: var(--ink-soft) !important; font-weight: 500 !important; font-size: 11px !important; letter-spacing: .09em !important; margin-bottom: 6px !important; }
#reportSheet .rs-money-lead { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 0 20px !important; margin: 0 !important; }
#reportSheet .rs-money-n { font: 500 44px/1 var(--font-display) !important; letter-spacing: -.035em; color: var(--ink) !important; }
#reportSheet .rs-money-l { font-size: 13px !important; color: var(--ink-soft) !important; margin-top: 10px !important; max-width: 52ch; }
#reportSheet .rs-kpis { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 48px !important; gap: 0 48px !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; margin: 0 0 28px !important; }
#reportSheet .rs-kpi { display: flex !important; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 16px; background: none !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 10px 0 !important; text-align: left !important; }
#reportSheet .rs-kpi .n { font: 500 19px/1.2 var(--font-display) !important; color: var(--ink) !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
#reportSheet .rs-kpi .l { font-size: 12.5px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink-soft) !important; margin: 0 !important; }
#reportSheet .rs-two { background: none !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; padding: 16px 0 !important; box-shadow: none !important; }
#reportSheet .rs-bfill { background: var(--accent) !important; border-radius: 0 !important; }
#reportSheet .rs-btrack { background: none !important; border-bottom: 1px solid var(--line-strong) !important; border-radius: 0 !important; }
#reportSheet .rs-bval, #reportSheet .rs-blbl { font-size: 11px !important; color: var(--ink-soft) !important; font-weight: 400 !important; }
#reportSheet .compra-map { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 16px 0 !important; }
#reportSheet .compra-map .card-header h3 { font: 500 12.5px var(--font-ui) !important; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft) !important; }
#reportSheet :is(.l21, .rs-l21, .rs-attn, [class*="attn"]) { background: none !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; padding: 12px 0 0 !important; }

/* 23 · LOCALES: las voces de marca eran píldoras de radio 99 (la hoja no pasa de 3 px). */
html body.page-app .voice-chips .vchip { border-radius: var(--r-btn) !important; }
html body.page-app .voice-chips .vchip.on, html body.page-app .voice-chips .vchip[aria-pressed="true"] { border-color: var(--accent) !important; color: var(--ink) !important; }
html body.page-app #bizFormOpen { margin-top: 8px; }

/* 24 · CARTA Y RECETAS (medido): tres sangrías distintas (214 / 218 / 238 px), títulos de
      bloque en mayúscula negrita negra (el resto de la app los lleva suaves), dos desplegables
      en caja y el selector de archivo nativo del navegador («Choose File»). Una sola columna. */
html body.page-app .esc-despertar { padding-left: 0 !important; padding-right: 0 !important; }
html body.page-app .esc-despertar > .card, html body.page-app .esc-despertar .esc-carta-viva, html body.page-app #escCartaImportCard { background: none !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 24px 0 !important; margin: 0 !important; }
html body.page-app .esc-despertar .card-header h3 { font: 500 12.5px/1.4 var(--font-ui) !important; letter-spacing: .09em !important; text-transform: uppercase !important; color: var(--ink-soft) !important; }
html body.page-app .esc-despertar .esc-receta-viva h4 { font: 500 17px/1.3 var(--font-display) !important; letter-spacing: -.01em; }
html body.page-app .esc-despertar > details { background: none !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px 0 !important; margin: 0 !important; }
html body.page-app .esc-despertar > details:last-child { border-bottom: 1px solid var(--line) !important; }
html body.page-app .esc-despertar > details > summary { padding: 0 !important; font-weight: 500 !important; font-size: 15px !important; color: var(--ink) !important; }
html body.page-app .file-pick { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-btn); cursor: pointer; }
html body.page-app .file-pick span { font-weight: 500; color: var(--ink); }
html body.page-app .file-pick small { font-size: 12.5px; color: var(--ink-soft); }
html body.page-app .file-pick:hover { border-color: var(--accent); }
html body.page-app .field:focus-within > .file-pick { outline: 1.5px solid var(--accent); outline-offset: 2px; }

/* 25 · RITMO DE LOS FORMULARIOS (medido en Publicaciones, Locales, Carta): entre dos filas de
      campos no había aire, así que cada etiqueta quedaba a 10 px del campo de ARRIBA y a 16 px
      del suyo: el ojo la pegaba al campo equivocado. Ahora la etiqueta va con su campo. */
/* (dentro de una .form-row los campos van lado a lado: ahí manda el gap de la rejilla) */
html body.page-app :is(.form-row, .field) + .form-row, html body.page-app :not(.form-row) > :is(.form-row, .field) + .field { margin-top: 20px; }
html body.page-app p.muted.small + :is(.form-row, .field) { margin-top: 16px; }
html body.page-app .field > label { line-height: 1.35; }

/* 26 · REPUTACIÓN: el borrador de respuesta iba en una caja de 3 líneas fija y cortaba la
      frase a la mitad («Nos encantaría que vuelvas y lo…»): leerla obligaba a hacer scroll
      DENTRO de la caja. Crece con el texto (Chrome/Edge/Android); en Safari, 7 líneas visibles. */
html body.page-app .rep-human-ta { field-sizing: content; min-height: 7lh; max-height: 22lh; resize: vertical; }

/* 27 · CAPAS: con una ventana abierta (factura, pago, confirmación) el botón de RENO seguía
      encima del velo, a pleno color: dos cosas pidiendo atención a la vez. */
html body:has(.modal:not([hidden])) #renoFab, html body:has(.rv-confirm) #renoFab { visibility: hidden; }

/* 28 · BARRA INFERIOR (móvil): iconos de línea de 1,6 px, del color del texto; el activo, en acento. */
html body.page-app .m-tabbar svg { fill: none !important; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; width: 22px; height: 22px; }

/* 29 · MÓVIL (390 px, medido): el ☰ iba dentro de una caja; «Elegir mi local» ocupaba todo el
      ancho con un subrayado de 358 px; la cifra de horas se quedaba sola en su línea; y el aviso
      de instalar (solo demo) quedaba debajo del botón de RENO. */
@media (max-width: 760px) {
  html body.page-app .m-burger { background: none !important; border: 0 !important; box-shadow: none !important; }
  html body.page-app #main .hoy-google-gate > .btn { align-self: flex-start !important; width: auto !important; }
  html body.page-app #main .big-give { display: block !important; }
  html body.page-app #main .big-give .num { display: inline !important; margin-right: 6px; }
  html body.page-app #main .big-give .unit { display: inline !important; }
  html body.page-app .renovo-install-hint { padding-right: 88px !important; }
}

/* 30 · CONTENIDO: «Cómo encaja Contenido con Reputación» iba en rojo teja (color de dominio
      heredado) — el único enlace de ese color en la app. Texto normal, como los demás plegables. */
html body.page-app .fly-details > summary { color: var(--ink-2) !important; font-weight: 500 !important; }

/* 31 · FACTURAS: el título del recuadro de subida repetía la frase de encima; «Escribirla a
      mano» parecía un título sin nada debajo (no decía que se despliega); «Compras bajo
      control» iba en negrita negra; las tablas llevaban una raya de 2 px negra bajo la cabecera
      y una × roja en cada fila, como si borrar fuera lo principal. */
html body.page-app details.inv-manual-pane > summary { cursor: pointer; display: flex !important; justify-content: space-between; align-items: baseline; }
html body.page-app details.inv-manual-pane > summary::after { content: "+"; color: var(--accent); font-weight: 400; letter-spacing: 0; }
html body.page-app details.inv-manual-pane[open] > summary::after { content: "–"; }
html body.page-app .compra-map .card-header h3 { font: 500 12.5px/1.4 var(--font-ui) !important; letter-spacing: .09em !important; text-transform: uppercase !important; color: var(--ink-soft) !important; }
html body.page-app .data-table thead th { border-bottom: 1px solid var(--line-strong) !important; }
html body.page-app .data-table .del-btn { color: var(--ink-soft) !important; opacity: .7; }
html body.page-app .data-table tr:hover .del-btn, html body.page-app .data-table .del-btn:focus-visible { color: var(--bad) !important; opacity: 1; }

/* 32 · MÓVIL PARA EL DEDO (29/09, medido a 390×844 en las 7 pantallas): 0 desbordes y 0 errores,
      pero 60+ botones medían 18–31 px de alto (Apple pide 44). Los botones con fondo crecen a 44;
      los que son texto conservan su aspecto y ganan una zona táctil invisible de 44×44.
      :where() deja la especificidad a 0: cualquier regla de clase con position sigue mandando.
      Los campos a 16 px: por debajo, iOS hace zoom al tocarlos y descoloca la pantalla. */
@media (pointer: coarse), (max-width: 880px) {
  html body.page-app #main :is(.btn, .hcta, .tabbtn, .rep-tab), html body.page-app .m-burger { min-height: 44px !important; }
  html body.page-app .m-burger { min-width: 44px !important; }
  :where(html body.page-app #main) :where(button, [role=button], .jump, a.qbtn) { position: relative; }
  :where(html body.page-app #main) :where(button, [role=button], .jump, a.qbtn)::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  html body.page-app :is(#main, .modal, #authModal) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { font-size: 16px !important; min-height: 44px; }
  /* Pestañas (Calendario · Publicaciones · Plan mensual · Galería): se cortaba «Galería» y
     «Plan mensual» partía en dos líneas. Una fila que se desliza con el dedo. */
  html body.page-app #main .tabbar { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  html body.page-app #main .tabbar::-webkit-scrollbar { display: none; }
  html body.page-app #main .tabbar .tabbtn { flex: 0 0 auto !important; white-space: nowrap !important; scroll-snap-align: start; }
  /* Aviso de demo: ocupaba 110 px fijos encima de la barra inferior (un 13 % de la pantalla).
     Ahora una sola fila de 56 px con el texto corto. */
  #demoBanner { flex-wrap: nowrap !important; gap: 10px !important; padding: 6px 12px !important; justify-content: space-between !important; }
  #demoBanner .db-long { display: none; }
  #demoBanner .db-short { display: inline !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  #demoBanner > span { min-width: 0; display: flex; align-items: center; }
  #demoBanner .btn { min-height: 44px !important; white-space: nowrap; }
  html body.page-app.has-demo-banner #main { padding-bottom: 72px !important; }
}
#demoBanner .db-short { display: none; }
/* 33 · Pila inferior del móvil en la demo: el aviso de instalar (solo demo), el aviso de demo y el
      botón de RENO se montaban entre 696 y 788 px. Subirlos todos taparía 264 px de 844. Con el aviso
      de demo presente, el de instalar se va y RENO flota por encima del aviso. */
@media (max-width: 880px) {
  html body.page-app.has-demo-banner .renovo-install-hint { display: none !important; }
  html body.page-app.has-demo-banner #renoFab { bottom: calc(64px + 57px + 14px + env(safe-area-inset-bottom)) !important; }
  /* Los avisos salían encima de la barra de pestañas (748–820 px): tapaban «Hoy» y «Más». */
  html body.page-app #toasts { left: 12px; right: 12px; bottom: calc(64px + 12px + env(safe-area-inset-bottom)); }
  html body.page-app.has-demo-banner #toasts { bottom: calc(64px + 57px + 12px + env(safe-area-inset-bottom)); }
}
/* 34 · Barra inferior en FR: «Coûts matière» partía en dos líneas y empujaba los iconos fuera de la
      barra. Una línea siempre; si una traducción futura no cabe, puntos suspensivos, nunca salto. */
html body.page-app .m-tabbar button { min-width: 0; }
html body.page-app .m-tabbar button span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
/* Escritorio: el botón de RENO quedaba medio tapado por el aviso de demo, y el ojo iba en otra línea. */
#demoBanner > span { display: inline-flex; align-items: center; }
@media (min-width: 881px) { html body.page-app.has-demo-banner #renoFab { bottom: calc(26px + 64px) !important; } }