/* =====================================================================
   AGRAP CAMPO — diseño simplificado de captura (28 oct 2026)
   ---------------------------------------------------------------------
   La maqueta aprobada (Main, Labor, Riego, Presion, Sanidad, Hoy): cabecera
   azul #003b5c con acentos amarillos #fdb913, fondo crema #f4f1ea, tarjetas
   blancas redondeadas, botones grandes (≥ 48 px), íconos SVG en línea.
   Sin franjas ni bordes de color. Fuente: Outfit (en fuentes/, sin red).
   Solo forma: nada de lo que se guarda depende de este archivo.
   ===================================================================== */

:root {
  --cp-azul: #003b5c;
  --cp-amarillo: #fdb913;
  --cp-crema: #f4f1ea;
  --cp-tinta: #0f2433;
  --cp-mut: #4a5d6b;
  --cp-verde: #1d7a45;
  --cp-verde-fondo: #e5f3ea;
  --cp-sombra: 0 1px 2px rgba(15, 36, 51, .08);
}

body.con-lateral { background: var(--cp-crema); color: var(--cp-tinta); }
body.con-lateral .pantalla[data-pantalla] { padding: 0; }
body.con-lateral .cab-titulo { display: none !important; }

/* ---------- Teléfono: cada pantalla trae su cabecera; abajo solo Registrar · Hoy ---------- */
@media (max-width: 899px) {
  body.con-lateral > .cabecera { display: none; }
  body.con-lateral .pantalla[data-pantalla] { padding-top: 0; }
  body.con-lateral.en-captura .barra-finca { display: none !important; }
  body.con-lateral.en-captura { padding-bottom: calc(110px + var(--seguro-abajo)); }
  body.con-lateral .barra-finca:not([hidden]) { padding: 10px 20px calc(12px + var(--seguro-abajo)); gap: 10px; border-top: 0; }
  .bf-tab.cp-tab {
    flex: 1; height: auto; min-height: 56px; gap: 4px; padding: 8px; border-radius: 14px; color: var(--cp-azul);
    font-weight: 700;
  }
  .bf-tab.cp-tab .bf-txt { font-size: 14px; font-weight: 700; }
  .bf-tab.cp-tab.activa { background: var(--cp-azul); color: #fff; }
  .bf-tab.cp-tab.activa .bf-txt { font-weight: 700; }
}
/* la hoja de la finca sale arriba (la abre el nombre de la finca o la inicial) */
@media (max-width: 899px) {
  body.con-lateral .hoja-mas:not([hidden]) { justify-content: flex-start; padding: calc(70px + var(--seguro-arriba)) 12px 12px; }
}
.hm-finca b { font-size: 18px; padding-left: 6px; }

/* ---------- Cabeceras azules ---------- */
.cp-cab { background: var(--cp-azul); color: #fff; padding: calc(18px + var(--seguro-arriba)) 20px 18px; display: flex; gap: 12px; }
.cp-cab-inicio { flex-direction: column; gap: 14px; padding-bottom: 24px; border-radius: 0 0 28px 28px; }
.cp-cab-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cp-finca { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-kicker { font-size: 13px; color: #b9d3e3; font-weight: 600; }
.cp-finca-nombre { font-size: 24px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-cab-der { display: flex; align-items: center; gap: 8px; flex: none; }
.cp-pildora { all: unset; cursor: pointer; background: rgba(255, 255, 255, .14); padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; min-height: 22px; white-space: nowrap; }
.cp-pildora.pend { background: var(--cp-amarillo); color: var(--cp-azul); font-weight: 700; }
.cp-avatar { all: unset; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; background: var(--cp-amarillo); color: var(--cp-azul); display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.cp-cab-captura { align-items: center; position: sticky; top: 0; z-index: 30; }
.cp-volver { all: unset; cursor: pointer; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .14); display: grid; place-items: center; flex: none; }
.cp-cab-txt { display: flex; flex-direction: column; min-width: 0; }
.cp-cab-titulo { font-size: 20px; font-weight: 800; }
.cp-cab-linea { all: unset; cursor: pointer; font-size: 13px; color: var(--cp-amarillo); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-cab-hoy { flex-direction: column; gap: 12px; }
.cp-cab-titulo-grande { font-size: 24px; font-weight: 800; }
.cp-contadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cp-contadores.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cp-cont { background: rgba(255, 255, 255, .12); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; min-width: 0; }
.cp-cont b { font-size: 24px; font-weight: 800; }
.cp-cont span { font-size: 12px; color: #b9d3e3; font-weight: 600; }
.cp-cab button:focus-visible, .cp-ubic:focus-visible { outline: 3px solid rgba(253, 185, 19, .85); outline-offset: 2px; }

/* ---------- La tarjeta amarilla de la ubicación ---------- */
.cp-ubic { all: unset; cursor: pointer; box-sizing: border-box; width: 100%; background: var(--cp-amarillo); color: var(--cp-azul); border-radius: 18px; padding: 10px; display: flex; align-items: center; gap: 12px; }
.cp-mini { border-radius: 12px; flex: none; display: block; }
.cp-mini-vacio { width: 120px; height: 104px; background: rgba(0, 59, 92, .12); display: grid; place-items: center; }
.cp-ubic-txt { display: flex; flex-direction: column; flex: 1; gap: 2px; min-width: 0; }
.cp-ubic-l1 { font-size: 20px; font-weight: 800; line-height: 1.15; }
.cp-ubic-l2 { font-size: 15px; font-weight: 700; }
.cp-ubic-l3 { font-size: 13px; font-weight: 600; }

/* ---------- Cuerpo ---------- */
.cp-cuerpo { padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 18px; max-width: 640px; margin: 0 auto; box-sizing: border-box; }
.cp-seccion { display: flex; flex-direction: column; gap: 10px; }
.cp-paso { font-size: 15px; font-weight: 700; color: var(--cp-mut); }
.cp-nota { margin: 0; font-size: 14px; color: #6b4b00; background: #fdf1d6; border-radius: 14px; padding: 10px 14px; font-weight: 600; }
.cp-vacio { margin: 0; color: var(--cp-mut); font-size: 15px; text-align: center; padding: 18px 0; }
.cp-input { box-sizing: border-box; width: 100%; min-height: 52px; border-radius: 14px; border: 1.5px solid #e2ddd2; background: #fff; color: var(--cp-tinta); font: inherit; font-size: 17px; font-weight: 600; padding: 12px 14px; }
.cp-input:focus { outline: 3px solid rgba(253, 185, 19, .7); outline-offset: 0; border-color: var(--cp-azul); }
textarea.cp-input { resize: vertical; min-height: 80px; }
.cp-campo { display: flex; flex-direction: column; gap: 6px; }
.cp-campo > span { font-size: 14px; font-weight: 700; color: var(--cp-mut); }

/* Registrar: los 4 botones */
.cp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cp-tile { all: unset; cursor: pointer; box-sizing: border-box; background: #fff; border-radius: 22px; padding: 20px 16px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; box-shadow: var(--cp-sombra); }
.cp-tile:active { transform: scale(.98); }
.cp-tile:focus-visible { outline: 3px solid var(--cp-amarillo); }
.cp-tile-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; }
.cp-tile-txt { font-size: 19px; font-weight: 800; }
.cp-llevas { all: unset; cursor: pointer; box-sizing: border-box; background: #fff; border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.cp-llevas span { font-size: 15px; font-weight: 600; color: var(--cp-mut); }
.cp-llevas b { font-size: 15px; font-weight: 800; }

/* Labor: la lista de labores */
.cp-lista-labores { display: flex; flex-direction: column; gap: 10px; }
.cp-labor { all: unset; cursor: pointer; box-sizing: border-box; width: 100%; min-height: 54px; border-radius: 16px; padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; background: #fff; color: var(--cp-tinta); box-shadow: var(--cp-sombra); }
.cp-labor.on { background: var(--cp-azul); color: #fff; }
.cp-labor-nombre { flex: 1; text-align: left; }
.cp-labor-donde { font-size: 12px; font-weight: 700; opacity: .75; text-align: right; }
.cp-labor:focus-visible, .cp-op:focus-visible, .cp-chip:focus-visible, .cp-tecla:focus-visible { outline: 3px solid var(--cp-amarillo); outline-offset: 1px; }

/* foto */
.cp-foto { all: unset; cursor: pointer; box-sizing: border-box; width: 100%; min-height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; font-weight: 800; background: var(--cp-azul); color: #fff; padding: 8px 14px; text-align: center; }
.cp-foto:disabled { opacity: .35; cursor: default; }
.cp-foto.lista { background: var(--cp-verde-fondo); color: var(--cp-verde); }
.cp-foto-grande { min-height: 120px; border-radius: 20px; flex-direction: column; gap: 8px; }
.cp-foto-mini { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; }
.cp-foto-grande .cp-foto-mini { width: 72px; height: 72px; }

/* notas 1–5 (rojo → verde) */
.cp-notas { display: flex; gap: 8px; }
.cp-nota-b { all: unset; cursor: pointer; box-sizing: border-box; flex: 1; min-width: 0; min-height: 76px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; text-align: center; }
.cp-nota-b b { font-size: 22px; font-weight: 800; }
.cp-nota-b small { font-size: 11px; font-weight: 700; line-height: 1.1; }
.cp-nota-b:disabled { opacity: .35; cursor: default; }
.cp-nota-b:not(:disabled):active { transform: scale(.96); }
.cp-n1 { background: #b3361f; } .cp-n2 { background: #c2571a; } .cp-n3 { background: #b07a00; } .cp-n4 { background: #3d7f2e; } .cp-n5 { background: #1d7a45; }

.cp-secundario { all: unset; cursor: pointer; box-sizing: border-box; width: 100%; min-height: 52px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--cp-azul); box-shadow: var(--cp-sombra); }
.cp-secundario.cp-chico { min-height: 48px; }
.cp-principal { all: unset; cursor: pointer; box-sizing: border-box; width: 100%; min-height: 60px; border-radius: 18px; background: var(--cp-azul); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; }
.cp-principal:active, .cp-secundario:active { transform: scale(.98); }

/* Daño de riego */
.cp-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cp-op { all: unset; cursor: pointer; box-sizing: border-box; min-height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; background: #fff; color: var(--cp-tinta); text-align: center; padding: 6px; box-shadow: var(--cp-sombra); }
.cp-op.on { background: var(--cp-azul); color: #fff; }
.cp-gravedades { display: flex; gap: 8px; }
.cp-grav { all: unset; cursor: pointer; box-sizing: border-box; flex: 1; min-height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #fff; }
.cp-grav:disabled { opacity: .35; cursor: default; }
.cp-g-alta { background: #b3361f; } .cp-g-media { background: #b07a00; } .cp-g-baja { background: #3d6b8a; }

/* Presión */
.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-chip { all: unset; cursor: pointer; box-sizing: border-box; min-height: 44px; padding: 0 14px; border-radius: 999px; display: flex; align-items: center; font-size: 15px; font-weight: 700; background: #fff; color: var(--cp-tinta); box-shadow: var(--cp-sombra); }
.cp-chip.on { background: var(--cp-azul); color: #fff; }
.cp-valores { display: grid; gap: 8px; }
.cp-valores.doble { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-valor { all: unset; cursor: pointer; box-sizing: border-box; background: #fff; border-radius: 22px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; min-height: 88px; }
.cp-valor small { flex-basis: 100%; text-align: center; font-size: 13px; font-weight: 700; color: var(--cp-mut); }
.cp-valores.doble .cp-valor.on { outline: 3px solid var(--cp-amarillo); }
.cp-valor-num { font-size: 64px; font-weight: 800; color: var(--cp-azul); line-height: 1; min-width: 60px; text-align: center; }
.cp-valores.doble .cp-valor-num { font-size: 44px; }
.cp-valor-psi { font-size: 22px; font-weight: 700; color: var(--cp-mut); }
.cp-teclado { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cp-tecla { all: unset; cursor: pointer; box-sizing: border-box; min-height: 56px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: var(--cp-tinta); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.cp-tecla:active { background: #e8e3d8; }

/* Sanidad */
.cp-pestanas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cp-pestana { all: unset; cursor: pointer; box-sizing: border-box; min-height: 46px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.cp-pestana.on { background: var(--cp-azul); color: #fff; }
.san-cuerpo { padding-bottom: 0; }
.san-semana { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; color: var(--cp-mut); font-size: 15px; }
.san-semana .cp-input { width: auto; min-height: 44px; font-size: 15px; }
.pantalla[data-pantalla="sanidad"] > section { margin: 0 20px 14px; max-width: 600px; }
@media (min-width: 680px) { .pantalla[data-pantalla="sanidad"] > section { margin-left: auto; margin-right: auto; } }
.pantalla[data-pantalla="sanidad"] .san-num { min-height: 48px; font-size: 19px; text-align: center; }

/* Hoy */
.cp-banda { border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 700; }
.cp-banda.pend { background: #fdf1d6; color: #6b4b00; }
.cp-banda.ok { background: var(--cp-verde-fondo); color: var(--cp-verde); }
.cp-banda-b { all: unset; cursor: pointer; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--cp-azul); color: #fff; display: flex; align-items: center; font-weight: 700; font-size: 14px; }
.cp-hoy-lista { display: flex; flex-direction: column; gap: 10px; }
.cp-hoy-item { background: #fff; border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--cp-sombra); }
.cp-hoy-chip { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #fff; flex: none; }
.cp-hoy-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cp-hoy-txt b { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.cp-hoy-txt small { font-size: 13px; color: var(--cp-mut); }
.cp-hoy-der { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.cp-estado { font-size: 12px; font-weight: 700; color: #9a6a00; }
.cp-estado.ok { color: var(--cp-verde); }
.cp-anular { all: unset; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--cp-azul); text-decoration: underline; min-height: 32px; display: flex; align-items: center; padding: 0 2px; }
.cp-pdfs { display: flex; flex-direction: column; gap: 10px; }
.cp-pdf { min-height: 54px; font-size: 16px; }

/* escoger lote sin mapa */
.cp-lotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; }
.cp-lote-op { all: unset; cursor: pointer; box-sizing: border-box; min-height: 48px; border-radius: 12px; background: var(--cp-crema); display: grid; place-items: center; font-weight: 700; }
.cp-lote-op.on { background: var(--cp-azul); color: #fff; }

/* el aviso verde de «guardado», abajo, con «Deshacer» */
.cp-guardado {
  position: fixed; left: 20px; right: 20px; bottom: calc(28px + var(--seguro-abajo)); z-index: 70; max-width: 600px; margin: 0 auto;
  background: var(--cp-verde); color: #fff; border-radius: 18px; padding: 16px 18px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 24px rgba(15, 36, 51, .25); animation: cpSube .22s ease-out both;
}
.cp-guardado svg { flex: none; }
.cp-guardado-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cp-guardado-txt b { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.cp-guardado-txt small { font-size: 13px; }
.cp-guardado-deshacer { all: unset; cursor: pointer; font-weight: 800; font-size: 14px; text-decoration: underline; min-height: 44px; display: flex; align-items: center; padding: 0 4px; }
@media (max-width: 899px) { body.con-lateral:not(.en-captura) .cp-guardado { bottom: calc(96px + var(--seguro-abajo)); } }
@keyframes cpSube { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cp-guardado { animation: none; } }

/* portátil: la barra lateral sigue; el contenido centrado */
@media (min-width: 900px) {
  .cp-cab { border-radius: 0 0 22px 22px; }
  .cp-cab-captura { border-radius: 0; }
}

/* sin la entrada animada en estas pantallas: se repintan al tocar (labor, tipo, punto) y no deben parpadear */
body.con-lateral .pantalla[data-pantalla].entrando > * { animation: none; }
.cp-guardado-txt small { color: rgba(255, 255, 255, .92); }