/* ============================================================
   EcoDero · Gestión de Finca — CAPTURA DE CAMPO (F2 · carril C)
   El indicador «qué está en el teléfono», su panel, el aviso de
   cerrar sesión y el aviso de versión nueva (js/pwa.js).

   Aparte de estilo.css a propósito: estilo.css es copia exacta del
   <style> de la demo y la prueba de equivalencia lo vigila. Todo
   aquí va con prefijo campo- y no toca ninguna clase de la demo.
   Los colores salen de las variables de theme.js, así que siguen
   los tres temas (el «Realista» es oscuro).

   Pensado para un señor de 63 años a pleno sol: letra de 1 rem o
   más, negrita, contraste alto, botones de 48 px como mínimo.
   ============================================================ */

/* La franja va DENTRO del flujo, bajo la barra de arriba: empuja el contenido, no lo
   tapa. Ninguna de las cuatro cifras grandes queda debajo de ella. */
.campo-barra{padding:8px 16px 0;min-width:0}
.campo-ind{display:flex;align-items:center;width:100%;min-height:48px;padding:8px 14px;
  border-radius:12px;border:2px solid var(--linea,#e6e1d3);background:var(--papel,#fff);
  color:var(--tinta,#1c1c17);font-weight:700;font-size:1rem;line-height:1.3;font-family:inherit;text-align:left;
  cursor:pointer;overflow-wrap:anywhere;min-width:0}
.campo-ind.campo-ok{border-color:var(--verde-cl,#2f7a5f)}
.campo-ind.campo-pend{border-color:var(--amber,#b7791f);background:rgba(183,121,31,.13)}
.campo-ind.campo-mal{border-color:var(--rojo,#b4472e);background:var(--rojo,#b4472e);color:#fff}
.campo-ind:focus-visible,.campo-btn:focus-visible{outline:3px solid var(--lima,#dcf47f);outline-offset:2px}

/* El panel: una hoja que sube desde abajo, encima de todo (incluida la barra de pestañas). */
.campo-ov{position:fixed;inset:0;z-index:95;background:rgba(10,20,15,.55);display:flex;
  align-items:flex-end;justify-content:center;padding:12px}
.campo-hoja{width:100%;max-width:520px;max-height:86vh;overflow:auto;background:var(--papel,#fff);
  color:var(--tinta,#1c1c17);border-radius:18px;padding:20px 18px;box-shadow:0 24px 60px rgba(0,0,0,.35);
  font-size:1rem;line-height:1.45;min-width:0}
.campo-hoja h3{font-size:1.15rem;color:var(--verde-osc,#08382a);margin:0 0 10px}
.campo-hoja h4{font-size:1.02rem;margin:16px 0 8px;color:var(--verde-osc,#08382a)}
.campo-hoja h4.campo-tit-mal{color:var(--rojo,#b4472e)}
.campo-linea{margin:0 0 6px;overflow-wrap:anywhere}
.campo-sub{margin:0 0 6px;color:var(--gris,#6c6656);font-size:.95rem}
.campo-alerta{font-size:1.08rem;font-weight:700}
.campo-item{border:1px solid var(--linea,#e6e1d3);border-left:5px solid var(--rojo,#b4472e);
  border-radius:12px;padding:12px;margin:0 0 10px;min-width:0}
.campo-item-q b{display:block;overflow-wrap:anywhere}
.campo-item-q span{display:block;color:var(--gris,#6c6656);font-size:.88rem}
.campo-motivo{margin:8px 0 10px;overflow-wrap:anywhere}
.campo-aviso-txt{margin:0 0 8px;padding:10px 12px;border-radius:10px;background:var(--crema,#f4f1e5);overflow-wrap:anywhere}
.campo-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.campo-btn{flex:1 1 140px;min-height:48px;padding:0 16px;border-radius:12px;font-weight:700;font-size:1rem;line-height:1.2;
  font-family:inherit;cursor:pointer;border:2px solid transparent;max-width:100%}
.campo-btn.campo-pri{background:var(--verde,#0d4f3c);color:#fff}
.campo-btn.campo-sec{background:var(--crema,#f4f1e5);color:var(--verde-osc,#08382a);border-color:var(--linea,#e6e1d3)}
.campo-btn.campo-peligro{background:transparent;color:var(--rojo,#b4472e);border-color:var(--rojo,#b4472e)}
.campo-item .campo-btn{width:100%}

/* Aviso «Hay una versión nueva» (js/pwa.js): mismo estilo que la franja. Va EN EL FLUJO,
   arriba de todo, fuera de #v-app: no flota, así que tampoco tapa las cifras grandes. */
.campo-aviso{margin:8px 16px;padding:10px 12px;border-radius:12px;border:2px solid var(--verde-cl,#2f7a5f);
  background:var(--papel,#fff);color:var(--tinta,#1c1c17);font-weight:700;font-size:1rem;line-height:1.35;font-family:inherit;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-width:0}
.campo-aviso .aviso-version-texto{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.campo-aviso button{min-height:48px;padding:0 16px;border-radius:12px;font-weight:700;font-size:1rem;line-height:1.2;font-family:inherit;cursor:pointer}
.campo-aviso .aviso-version-si{background:var(--verde,#0d4f3c);color:#fff;border:2px solid transparent}
.campo-aviso .aviso-version-no{background:var(--crema,#f4f1e5);color:var(--verde-osc,#08382a);border:2px solid var(--linea,#e6e1d3)}

@media (min-width:821px){
  .campo-barra{padding:10px 30px 0}
  .campo-ind{width:auto;max-width:100%}
}
/* F2 · pérdida de datos: la segunda confirmación de «cerrar sesión» y los avisos del teléfono */
.campo-btn:disabled{opacity:.55;cursor:not-allowed}
.campo-perder{margin:6px 0 10px;padding-left:20px;max-height:40vh;overflow:auto;overflow-wrap:anywhere}
.campo-perder li{margin:4px 0}
.campo-perder li span{opacity:.75;font-size:.9em}

/* F5 · El aviso de la mensualidad (js/mensualidad.js): bajo la franja del teléfono, EN EL
   FLUJO (empuja, no tapa). Solo aparece en gracia (al dueño) o suspendida (a todos). */
.mens-aviso{margin:8px 16px 0;padding:12px 14px;border-radius:12px;border:2px solid var(--amber,#b7791f);
  background:rgba(183,121,31,.13);color:var(--tinta,#1c1c17);font-size:1rem;line-height:1.4;min-width:0;overflow-wrap:anywhere}
.mens-aviso.mens-suspendida{border-color:var(--rojo,#b4472e);background:rgba(180,71,46,.12)}
.mens-aviso .mens-tit{display:block;font-weight:800;margin:0 0 4px}
.mens-aviso .mens-txt{display:block}