/* ============================================================
   EcoDero · Gestión de Finca — ACTIVIDADES (js/actividades.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
   va con prefijo act- y los colores salen de las variables de
   theme.js, así que sigue los tres temas (el «Realista» es oscuro).
   Blancos de toque de 48 px; nada rueda de lado a 360 px.
   ============================================================ */

/* El selector de siempre (cuatro perfiles) se esconde cuando hay catálogo: las actividades
   lo reemplazan. Sin catálogo no hay clase y vuelve a verse. */
.capa-actividades #pb-opts,.capa-actividades #aj-opts{display:none}

.act-panel{min-width:0;color:var(--tinta,#1c1c17)}
.act-tit{font-weight:800;font-size:.95rem;color:var(--verde-osc,#08382a);margin:0 0 8px}
.act-esp{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px;font-size:1rem}
.act-ico{font-size:1.4rem;flex:none;line-height:1}
.act-ayuda{color:var(--gris,#6c6656);font-size:.82rem}
.act-ok,.act-etq{display:inline-block;font-size:.74rem;font-weight:800;border-radius:999px;padding:3px 9px;white-space:nowrap;line-height:1.3}
.act-ok{border:1px solid var(--verde-cl,#2f7a5f);color:var(--verde-osc,#08382a);background:var(--crema,#f4f1e5)}
.act-etq{border:1px solid var(--amber,#b7791f);color:var(--tinta,#1c1c17);background:rgba(183,121,31,.14)}

.act-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.act-opt,.act-fila{display:flex;align-items:center;gap:10px;text-align:left;width:100%;min-width:0;min-height:56px;
  background:var(--crema,#f4f1e5);border:2px solid var(--linea,#e6e1d3);border-radius:14px;padding:10px 12px;
  cursor:pointer;font-family:inherit;font-size:1rem;color:var(--tinta,#1c1c17)}
.act-opt:hover,.act-fila:hover{border-color:var(--verde-cl,#2f7a5f)}
.act-opt.on{background:var(--lima,#dcf47f);border-color:var(--verde,#0d4f3c);color:#26340a}
.act-opt.on .act-des{color:#26340a}
.act-opt.act-prep{border-style:dashed}
.act-chk{flex:none;width:28px;height:28px;border-radius:8px;border:2px solid var(--linea,#e6e1d3);display:grid;place-items:center;
  font-weight:900;font-size:1rem;background:var(--papel,#fff);color:var(--verde,#0d4f3c)}
.act-opt.on .act-chk{border-color:var(--verde,#0d4f3c);background:var(--verde,#0d4f3c);color:#fff}
.act-opt.act-prep .act-chk{border:none;background:none}
.act-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.act-nom{font-weight:800;font-size:.95rem;line-height:1.2;overflow-wrap:anywhere}
.act-var{font-weight:600}
.act-des{font-size:.8rem;color:var(--gris,#6c6656);line-height:1.25;overflow-wrap:anywhere}
.act-opt .act-etq,.act-fila .act-etq{align-self:flex-start}
.act-fila .act-etq{margin-top:4px}

.act-mas{margin-top:10px;border-top:1px solid var(--linea,#e6e1d3);padding-top:4px}
.act-mas summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:48px;cursor:pointer;font-weight:800;
  color:var(--verde-osc,#08382a);font-size:.95rem;list-style:none}
.act-mas summary::-webkit-details-marker{display:none}
.act-mas summary::before{content:'▸';font-size:.9rem;color:var(--gris,#6c6656)}
.act-mas[open] summary::before{content:'▾'}
.act-nota{color:var(--gris,#6c6656);font-size:.85rem;margin:0 0 8px}
.act-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}

.act-modal-etq{margin:6px 0 10px}
.act-modal-txt{font-size:1rem;line-height:1.45;margin:0 0 10px;color:var(--tinta,#1c1c17)}
.act-modal-chico{font-size:.85rem;color:var(--gris,#6c6656)}
.act-modal-lista{margin:0 0 12px 20px;font-size:.95rem;line-height:1.5}
.act-modal-btns{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.act-btn{min-height:48px;flex:1 1 140px;font-size:1rem}
.act-btn[disabled]{opacity:.75;cursor:default}

/* Foco: verde en los temas claros (el lima sobre blanco da 1.2:1 y no se ve); lima solo en el
   oscuro, más abajo. Mínimo 3:1 contra el fondo. */
.act-opt:focus-visible,.act-fila:focus-visible,.act-mas summary:focus-visible,.act-btn:focus-visible,.act-resumen:focus-visible{outline:3px solid var(--verde,#0d4f3c);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.act-opt,.act-fila{transition:none}}

/* Tema oscuro («Realista»): el verde oscuro de los títulos no se lee sobre negro. */
[data-theme="realista"] .act-tit,[data-theme="realista"] .act-mas summary{color:var(--lima,#b9f27a)}
[data-theme="realista"] .act-ok{color:var(--tinta,#eee);border-color:var(--verde-cl,#54c081);background:transparent}
[data-theme="realista"] .act-opt,[data-theme="realista"] .act-fila{background:#202020;border-color:#3a3a3a}
[data-theme="realista"] .act-opt.on{background:var(--lima,#b9f27a);border-color:var(--lima,#b9f27a);color:#0b0b0b}
[data-theme="realista"] .act-opt.on .act-des{color:#1b1b1b}
[data-theme="realista"] .act-chk{background:#161616;border-color:#4a4a4a;color:var(--lima,#b9f27a)}
[data-theme="realista"] .act-opt.on .act-chk{background:#0b0b0b;border-color:#0b0b0b;color:var(--lima,#b9f27a)}
[data-theme="realista"] .act-modal h3{color:var(--lima,#b9f27a)}
[data-theme="realista"] .act-modal .btn.ghost{color:var(--tinta,#eee);border-color:#4a4a4a}
[data-theme="realista"] .act-etq{color:#f3d9a8;border-color:#b7791f;background:rgba(183,121,31,.22)}

/* ---------- Revisión 2026-10-12 (UX): la barra no empuja los números del ganadero ---------- */
/* Un solo título y una sola instrucción por bloque: los de la barra de siempre se esconden. */
.capa-actividades #perfil-bar .pb-ttl,.capa-actividades #perfil-bar .pb-sub{display:none}
.capa-actividades #perfil-bar .pb-top{margin-bottom:6px}
.capa-actividades #perfil-bar{padding:8px 10px;margin-bottom:12px}
/* En Ajustes el selector ya está en su tarjeta: la barra de arriba no se repite. */
.capa-actividades #scroll:has(> #p-ajustes[style*="block"]) > #perfil-bar{display:none}
/* La tarjeta de Ajustes: el título nuevo (data-capa) reemplaza a «Perfil de negocio». */
.capa-actividades #p-ajustes .card:has(#aj-opts) > h3:not([data-capa]){display:none}

/* Texto secundario con contraste ≥ 4.5:1 en los temas claros (el gris de theme.js no alcanza
   en letra chica). Primero el gris de siempre, por si el navegador no sabe color-mix. */
.act-panel .act-des,.act-panel .act-ayuda,.act-panel .act-nota,.act-modal-chico{color:var(--gris,#6c6656);color:color-mix(in srgb,var(--gris,#6c6656) 55%,var(--tinta,#1c1c17))}

.act-cambiar>summary{list-style:none}
.act-cambiar>summary::-webkit-details-marker{display:none}
.act-resumen{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;border-radius:12px;padding:2px 2px}
.act-resumen .act-txt{flex:1}
.act-boton{flex:none;min-height:44px;min-width:88px;display:inline-grid;place-items:center;padding:0 14px;border-radius:999px;
  font-weight:800;font-size:.95rem;background:var(--verde,#0d4f3c);color:#fff;white-space:nowrap}
.act-cambiar[open] .act-boton{background:transparent;color:var(--verde-osc,#08382a);border:2px solid var(--linea,#e6e1d3)}
.act-cambiar[open] .act-boton::after{content:' ▴'}
.act-cuerpo{padding-top:10px;border-top:1px solid var(--linea,#e6e1d3);margin-top:6px}
.act-opts-chip{display:flex;flex-wrap:wrap;gap:8px}
.act-opt.act-chip{width:auto;flex:1 1 auto;min-height:48px;padding:8px 12px;gap:8px;justify-content:center}
.act-opt.act-chip .act-nom{overflow-wrap:normal;white-space:nowrap}
.act-opt.act-chip .act-chk{width:22px;height:22px;font-size:.85rem}
.act-opt.act-chip .act-txt{flex:0 1 auto}
.act-opt.act-chip .act-nom{font-size:.9rem}
.act-opts-prep{margin:0 0 8px}
.act-aviso{margin:8px 0 0;padding:8px 10px;border-radius:10px;border:1px solid var(--amber,#b7791f);background:rgba(183,121,31,.10)}
.act-h3{margin-bottom:6px}

[data-theme="realista"] .act-boton{background:var(--lima,#b9f27a);color:#0b0b0b}
[data-theme="realista"] .act-cambiar[open] .act-boton{background:transparent;color:var(--lima,#b9f27a);border-color:#4a4a4a}
[data-theme="realista"] .act-resumen .act-nom{color:var(--tinta,#eee)}
[data-theme="realista"] .act-panel .act-des,[data-theme="realista"] .act-panel .act-ayuda,[data-theme="realista"] .act-panel .act-nota,[data-theme="realista"] .act-modal-chico{color:#b4b4b4}
[data-theme="realista"] .act-aviso{color:var(--tinta,#eee);background:rgba(183,121,31,.18)}
[data-theme="realista"] .act-opt:focus-visible,[data-theme="realista"] .act-fila:focus-visible,[data-theme="realista"] .act-mas summary:focus-visible,[data-theme="realista"] .act-btn:focus-visible,[data-theme="realista"] .act-resumen:focus-visible{outline-color:var(--lima,#b9f27a)}