/* static/styles.css */
:root {
  --bg: #0b0c10;
  --panel: #15171c;
  --text: #e8e8e8;
  --muted: #9aa0a6;
  --stroke: #2a2f3a;
  --primary: #2f6fed;
  --radius: 12px;
  --gap: 0.75rem;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  margin: 0; padding: 1rem; background: var(--bg); color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

.container { width: 100%; max-width: 980px; margin: 0 auto; background: var(--panel);
  padding: 1rem 1.25rem; border-radius: var(--radius); box-shadow: 0 0 20px rgba(0,0,0,0.3); }

h1 { margin: 0 0 .5rem 0; font-size: clamp(1.25rem, 2.5vw + .5rem, 2rem); line-height: 1.2; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

label { display: flex; flex-direction: column; font-size: 0.95rem; gap: .35rem; }
input, select, button { padding: .6rem .7rem; border-radius: 8px; border: 1px solid #333843; background: #0f1116; color: var(--text); font-size: 16px; }
button.primary { background: var(--primary); border-color: var(--primary); cursor:pointer; }
button.secondary { background: #20242c; border-color: #20242c; cursor:pointer; }
button:hover { filter: brightness(1.05); }
.mt { margin-top: 1rem; }
.actions { display:flex; gap:.5rem; margin-top: .75rem; }

.checkbox-line { flex-direction: row; align-items: center; gap: .5rem; }
.radio { display:inline-flex; align-items:center; gap:.5rem; margin-right: 1rem; }
.mode { border: 1px solid var(--stroke); border-radius: 10px; padding: .75rem; }
.hint { margin-top: .25rem; }

.row { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin: .5rem 0; }
.grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin: .75rem 0; }
@media (min-width: 640px) { .row { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 640px) { button, .primary { width: 100%; } }

.meta { display:grid; grid-template-columns: 1fr; gap:.5rem; margin-top: 1rem; background:#0f1116; padding:.75rem; border:1px solid var(--stroke); border-radius: 10px; }
@media (min-width: 640px) { .meta { grid-template-columns: repeat(3, 1fr); } }

#map-wrap.hidden { display: none; }
#map { width: 100%; height: 300px; margin: .5rem 0 0.25rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--stroke); }
@media (min-width: 640px){ #map{ height: 360px; } }
@media (min-width: 960px){ #map{ height: 420px; } }

.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--stroke); margin-top: 1rem; background: #0f1116; }
table { width: 100%; border-collapse: collapse; font-size: clamp(0.85rem, 1.5vw, 0.95rem); min-width: 720px; }
th, td { border-bottom: 1px solid var(--stroke); padding: 0.6rem; text-align: center; white-space: nowrap; }
th { background: #1d2026; position: sticky; top: 0; z-index: 1; }
/* Modo captura: desactiva sticky y overflow para que entre TODA la tabla */
.capture-mode .table-wrap {
  overflow: visible !important;
}

.capture-mode th {
  position: static !important;
}

/* Por si querés forzar que la tabla crezca al ancho real durante la captura */
.capture-mode table {
  width: max-content !important;
  min-width: unset !important;
}

/* Layouts y componentes */
.section-title { font-size: 1.25rem; margin-bottom: .5rem; }
.section-subtitle { font-weight: 600; margin-bottom: .25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .75rem; }
@media (max-width: 900px){ .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.toolbar { display:flex; align-items:center; gap:.5rem; margin-top:.5rem; }
.toolbar .spacer { flex:1 1 auto; }

/* Cards oscuras */
.card { background:#0f1116; border:1px solid var(--stroke); border-radius:.75rem; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.15); }
.card-header { display:flex; justify-content:space-between; align-items:baseline; padding:.75rem .9rem; border-bottom:1px solid var(--stroke); background:#11141a; }
.card-body { padding:.9rem; }

/* Mapa de registro */
#reg-map { width:100%; height:320px; margin-top:.5rem; border-radius:10px; overflow:hidden; border:1px solid var(--stroke); }
@media (min-width:960px){ #reg-map{ height:380px; } }

.hidden { display: none !important; }

/* ====== UI UPGRADE: estética pro + transiciones ====== */

/* Tipografía & micro-espaciado */
:root {
  --elev-1: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.2);
  --elev-2: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.28);
  --ring: 0 0 0 3px rgba(47, 111, 237, .28);
}
body { letter-spacing: 0.1px; }

/* Contenedor con “cinta” superior sutil */
.container{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.container::before{
  content:"";
  position:absolute; inset: -60% -60% auto -60%;
  height: 260px;
  background: radial-gradient(1200px 300px at 20% 0%, rgba(47,111,237,.12), transparent 60%),
              radial-gradient(800px 240px at 80% 0%, rgba(255,255,255,.04), transparent 50%);
  pointer-events:none;
  z-index:0;
}
.container > * { position: relative; z-index: 1; }

/* Títulos más pulidos */
h1 { font-weight: 700; letter-spacing: .2px; }
.section-title { font-weight: 700; }

/* Botones con transiciones y foco accesible */
button, .secondary, .primary {
  transition: transform .08s ease, box-shadow .2s ease, filter .15s ease, background .2s ease, border-color .2s ease;
}
button:active { transform: translateY(1px); }
button:focus-visible, a.secondary:focus-visible {
  outline: none; box-shadow: var(--ring);
}

/* Primary con brillo sutil */
button.primary {
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(47,111,237,.22);
}
button.primary:hover { filter: brightness(1.08); }
button.primary:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

/* Secondary con borde a juego */
button.secondary, a.secondary {
  border: 1px solid #2b2f38;
}
button.secondary:hover, a.secondary:hover { filter: brightness(1.06); }

/* Cards con leve elevación y hover */
.card { box-shadow: var(--elev-1); transition: box-shadow .25s ease, transform .12s ease; }
.card:hover { box-shadow: var(--elev-2); }
.card-header { font-weight: 600; }

/* Tabla: filas “zebra” y hover */
table tr:nth-child(even) td { background: #0e1218; }
tbody tr:hover td { background: #121722; }
th { text-transform: uppercase; font-size: .8rem; letter-spacing:.6px; }

/* Barra de acciones pegajosa (si la usas en top) */
.sticky-actions {
  position: sticky; top: .5rem; z-index: 3; backdrop-filter: blur(4px);
  background: color-mix(in oklab, #0f1116 85%, transparent);
  border: 1px solid var(--stroke); border-radius: 10px; padding: .4rem .5rem;
}

/* Details/accordion: animación de apertura */
details { transition: border-color .2s ease, background .2s ease; }
details[open] .card-body { animation: slideDown .22s ease-out; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Utilitarias de entrada */
.fade-in { animation: fadeIn .25s ease both; }
.slide-up { animation: slideUp .25s ease both; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px)} to { opacity: 1; transform: translateY(0)} }

/* Inputs más definidos + placeholder sutil */
input::placeholder { color: #6f7681; }
input, select {
  transition: border-color .15s ease, box-shadow .2s ease, background .25s ease;
}
input:focus-visible, select:focus-visible {
  outline: none; border-color: color-mix(in oklab, var(--primary) 85%, #2b2f38);
  box-shadow: var(--ring);
}

/* Meta bar chips */
.meta{ border-radius:12px; }
.meta strong { font-weight: 700; }

/* Captura: sombreado del área para destacar */
#capture-area { transition: box-shadow .2s ease; border-radius: 12px; }
#capture-area:hover { box-shadow: 0 12px 28px rgba(0,0,0,.22); }

/* Lista de tarjetas responsive */
.cards-stack { display: grid; gap: .9rem; }
@media (min-width: 860px){
  .cards-stack { grid-template-columns: 1fr 1fr; }
}

/* Acciones dentro de celdas */
td.actions { display:flex; gap:.35rem; justify-content:center; }

/* Iconitos con CSS (caret) para <summary> */
summary.card-header::after{
  content:""; width:10px; height:10px; margin-left: .5rem; display:inline-block;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform: rotate(-45deg) translateY(-2px); transition: transform .2s ease;
}
details[open] summary.card-header::after{ transform: rotate(45deg) translateY(2px); }

/* Scrollbar sutil (Chromium/Edge) */
*::-webkit-scrollbar { height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb { background: #222734; border-radius: 999px; }
*::-webkit-scrollbar-track { background: #0d0f14; }

/* Layouts “full-bleed” */
@media (min-width: 1080px){
  .container { max-width: 1100px; padding: 1.25rem 1.35rem; }
}

/* Espaciado cohesivo entre bloques */
.container > * + * { margin-top: .9rem; }

/* Botones dentro de tablas/cards: alturas compactas */
table .secondary, table .primary, .card .secondary, .card .primary{
  padding: .45rem .6rem; font-size: .9rem;
}

/* Chips/badges más visibles */
.badge{ border-color:#384155; color:#c7ccd6; background:#0f1522; }

/* Botón chip bonito para acciones de cabecera (solo el que tenga class "chip") */
.secondary.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.48rem .85rem; border-radius:999px;
  background: linear-gradient(180deg, #212632, #151922);
  border:1px solid #2b2f38; color:var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(47,111,237,.18);
  transition: filter .2s ease, box-shadow .25s ease, transform .08s ease;
}
.secondary.chip:hover{ filter:brightness(1.08); }
.secondary.chip:active{ transform: translateY(1px); }
.secondary.chip:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(47,111,237,.28); }

/* === Botones de navegación (Mi cuenta / Salir / Home) === */
.btn-nav {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, #4CAF50, #2e7d32);
  border: none;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}

.btn-nav:hover {
  background: linear-gradient(135deg, #43a047, #1b5e20);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.btn-nav:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.btn-nav:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(76,175,80,0.4);
}

/* ===== Estilos para los Tabs (contraste mejorado) ===== */
.tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tabs button {
  flex: 1;
  padding: 0.65rem 1rem;
  background: #0f1116;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  color: var(--muted); /* texto gris claro para tabs inactivos */
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.tabs button:hover {
  background: #161b22;
  color: var(--text); /* al pasar el mouse, texto se vuelve blanco */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

.tabs button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #111; /* texto oscuro para resaltar sobre azul */
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(47,111,237,.35);
}

/* ===== App Bar / Footer ===== */
.appbar{
  position: sticky; top: 0; z-index: 10;
  display:flex; align-items:center; justify-content:space-between;
  padding: .6rem 1rem; margin-bottom: .75rem;
  background: color-mix(in oklab, var(--panel) 88%, transparent);
  border: 1px solid var(--stroke); border-radius: var(--radius);
  backdrop-filter: blur(6px);
}
.app-title{ margin:0; font-size: clamp(1.1rem, 2vw, 1.35rem); }
.appbar-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

.appfoot{
  max-width: 1100px; margin: 1rem auto 0; padding: .75rem 1rem;
  display:flex; justify-content:center; align-items:center;
  color: var(--muted);
}

/* ===== Tabs: barra segmentada ===== */
.tabs.segmented{
  display:flex; gap:.5rem; background:#0f1116; padding:.35rem;
  border:1px solid var(--stroke); border-radius: 999px; overflow:hidden;
}
.segmented-btn{
  flex:1; padding:.55rem 1rem; border:0; border-radius: 999px; cursor:pointer;
  background: transparent; color: var(--muted); font-weight: 600;
  transition: color .18s ease, transform .1s ease, background .2s ease, box-shadow .2s ease;
}
.segmented-btn:hover{ color: var(--text); transform: translateY(-1px); }
.segmented-btn.active{
  background: var(--primary); color:#111; box-shadow: 0 8px 22px rgba(47,111,237,.3);
}

/* === Tabs en modo "página" (sin stacking) === */
.tab-panel { 
  display: none !important;           /* oculto por defecto */
  opacity: 1; 
  transform: none; 
  pointer-events: auto;
}
.tab-panel.active { 
  display: block !important;          /* solo el activo se muestra */
}
.tab-panel[hidden]{
  display: none !important;           /* asegurá que hidden realmente oculte */
}


/* ===== Mapa (altura fluida) ===== */
#map{
  width: 100%;
  height: clamp(320px, 50vh, 560px);
  margin: .5rem 0 0.25rem;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--stroke);
}

/* ===== Cards pequeñas en lista (para cultivos existentes si querés tarjetas) ===== */
.cards-stack > li{
  list-style:none;
  background:#0f1116; border:1px solid var(--stroke); border-radius:.75rem; padding:.75rem .9rem;
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
  box-shadow: var(--elev-1); transition: box-shadow .25s ease, transform .12s ease;
}
.cards-stack > li:hover{ box-shadow: var(--elev-2); transform: translateY(-1px); }

/* ===== Micro-animaciones ===== */
@media (prefers-reduced-motion: no-preference){
  .fade-in{ animation: fadeIn .22s ease both; }
  .slide-up{ animation: slideUp .22s ease both; }
  @keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
  @keyframes slideUp { from { opacity:0; transform: translateY(8px)} to { opacity:1; transform: none} }
}

/* ===== Accesibilidad de foco ===== */
.segmented-btn:focus-visible, .btn-nav:focus-visible, button.primary:focus-visible, input:focus-visible, select:focus-visible {
  outline: none; box-shadow: var(--ring);
}

/* ===== Botones nav (ya tenés, mantengo) ===== */
/* Sin cambios, hereda tu .btn-nav existente */

.stat-card { background: var(--card-bg); padding: 16px; border-radius: 16px; box-shadow: var(--elev-1); }
.stat-title { font-size: .9rem; color: var(--muted); }
.stat-value { font-size: 2rem; font-weight: 700; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
@media (max-width: 900px){ .grid-4 { grid-template-columns: repeat(2,1fr); } }

/* --- Modal overlay --- */
.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0,0,0,.55);
  z-index: 1000;
}
.modal[hidden] { display: none; }

.modal-card {
  width: min(980px, 96vw);
  max-height: 88vh;
  background: #0f1116; /* o tu var de fondo */
  border: 1px solid var(--stroke, #232833);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.75rem .9rem; border-bottom:1px solid var(--stroke, #232833);
  background:#11141a;
}
.modal-header h3 { margin:0; font-size:1.05rem; }
#um-close {
  background:#20242c; border:1px solid var(--stroke, #232833);
  border-radius:8px; line-height:1; padding:.35rem .6rem; cursor:pointer;
}
.modal-body{
  flex: 1 1 auto;          /* <- clave: crece y ocupa el espacio disponible */
  padding: .9rem;
  overflow: auto;           /* desktop: si hace falta, scrollea el body */
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

.table-wrap.slim table { min-width: 720px; } /* o 780px si preferís */
table.compact td, table.compact th { padding:.4rem .5rem; font-size:.9rem; }
.badge { background:#1f2937; border:1px solid var(--stroke, #232833); padding:.15rem .4rem; border-radius:999px; font-size:.75rem; }

/* ===== MOBILE TWEAKS (tabs + grids + forms) ===== */

/* Tabs segmentados: que se puedan desplazar en móvil */
.tabs.segmented{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  gap: .35rem;
  flex-wrap: nowrap;            /* evita salto a 2 líneas; usa scroll horizontal */
}
.tabs.segmented::-webkit-scrollbar{ height: 6px; }
.segmented-btn{
  flex: 0 0 auto;               /* ancho según contenido (chips) */
  scroll-snap-align: start;
  font-size: clamp(.85rem, 3.6vw, .95rem);
  padding: .5rem .8rem;
}

/* Ajustes de grillas en teléfonos */
@media (max-width: 680px){
  .grid-4, .grid-3 { grid-template-columns: 1fr !important; }
  .grid { grid-template-columns: 1fr !important; }
}

/* Formularios y acciones más amigables en móvil */
@media (max-width: 680px){
  label input, label select { width: 100%; }
  .actions { flex-wrap: wrap; }
  .appbar { flex-wrap: wrap; gap: .5rem; }
}

/* Reportes: evita que “apriete” controles dentro de cards */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* === Admin > Modal: pulido responsive y sin scrolls feos === */

/* Tarjeta del modal: alto/anchos fluidos y header “sticky” */
.modal-card {
  width: min(980px, 96vw);
  max-height: min(88vh, 100svh - 32px);
  background: #0f1116;
  border: 1px solid var(--stroke, #232833);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);

  /* NUEVO: estructura estable */
  display: flex;
  flex-direction: column;
}
@supports not (height: 100svh){
  .modal-card{ max-height: 88vh; }
}
.modal-header{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Modal: habilitar scroll horizontal cuando se use .table-wrap */
.modal .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Modal: si la tabla está dentro de .table-wrap, que pueda ser más ancha que la pantalla */
.modal .table-wrap > table {
  width: max-content;
  min-width: 720px !important; /* vence el min-width:0 !important del modal */
  white-space: nowrap;          /* evita que se rompa el layout en celdas largas */
}


/* Cuerpo del modal: layout en columna con buen gap y scroll vertical suave */
.modal .modal-body{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  padding: .9rem;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

/* Formularios y acciones dentro del modal: que NO se aprieten */
.modal .row,
.modal .grid{
  grid-template-columns: 1fr !important; /* 1 columna en móvil */
}
@media (min-width: 900px){
  .modal .row,
  .modal .grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important; /* 2 col. en desktop */
  }
}
.modal .actions{ flex-wrap: wrap; gap: .5rem; }
.modal label{ min-width: 0; }
.modal .row input,
.modal .row select,
.modal .row button{ width: 100%; }

/* Listas de tarjetas en el modal: siempre 1 columna (mejor lectura) */
.modal .cards-stack{ grid-template-columns: 1fr; }
@media (min-width: 900px){
  .modal .cards-stack{ grid-template-columns: 1fr 1fr; }
}

/* Tablas dentro del modal: SIN ancho mínimo y con quiebre de texto */
/* Modal: tablas con ancho natural y scroll SOLO dentro del card */
.modal .table-wrap{
  max-height: clamp(240px, 50vh, 420px);
  overflow: auto;                 /* scroll vertical/horizontal SOLO aquí */
  -webkit-overflow-scrolling: touch;
}
.modal .table-wrap > table{
  width: max-content;             /* que crezca según contenido */
  min-width: 720px;               /* mantiene columnas legibles */
  table-layout: auto;
}
.modal .table-wrap > table th,
.modal .table-wrap > table td{
  white-space: nowrap;            /* evita que rompa columnas */
}
.modal td.actions{
  display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-start;
}
.modal td input,
.modal td select{ width: 100%; min-width: 0; }

/* Detalles visuales */
.modal hr{ border: 0; border-top: 1px solid var(--stroke); margin: .5rem 0; }

/* Caso moderno (Chrome/Edge/Firefox nuevos): el contenedor del table scrollea */
@supports selector(:has(> table)) {
  .modal .card .card-body:has(> table){
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal .card .card-body > table{
    table-layout: auto;     /* columnas toman su ancho natural */
    width: max-content;     /* la tabla crece hasta su contenido */
    min-width: 720px;       /* base razonable; sube a 900px si querés más aire */
  }
  /* Para legibilidad: no partir líneas dentro de celdas en este caso */
  .modal .card .card-body > table th,
  .modal .card .card-body > table td{
    white-space: nowrap;
  }
}

/* Fallback (si :has no está disponible): el propio <table> scrollea */
@supports not (selector(:has(*))) {
  .modal .card .card-body > table{
    display: block;               /* convierte la tabla en contenedor de scroll */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    table-layout: auto;
    width: max-content;
    min-width: 720px;
  }
  .modal .card .card-body > table th,
  .modal .card .card-body > table td{
    white-space: nowrap;
  }
}

/* Modal: sólo scroll vertical en el body; nada de scroll horizontal */
/* Modal: scroll del body en desktop; en móvil, lo desactivamos */
.modal .modal-body { 
  overflow-y: auto;
  overflow-x: hidden;
}
@media (max-width: 680px){
  .modal .modal-body {
    overflow-y: auto;                 /* permite desplazar el modal en vertical */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;/* inercia iOS */
    touch-action: pan-y;              /* asegura gesto vertical */
  }
}

/* opcional pero recomendado para evitar “scroll chaining” al fondo */
.modal { overscroll-behavior: contain; }

/* Permitir que los hijos de grillas/flex ENCOJAN en el modal */
.modal .card,
.modal .card-body,
.modal .cards-stack > *,
.modal .row > *,
.modal .grid > *,
.modal .table-wrap{
  min-width: 0;
}

/* Evitar alturas forzadas iguales en cards apilados */
.modal .cards-stack{ align-items: start; }

body.modal-open { overflow: hidden; }

@media (max-width: 680px){
  /* Que la tabla nunca se intente encoger para entrar en la pantalla */
  .modal .table-wrap{
    overflow-x: auto;             /* scroll horizontal si es necesario */
    -webkit-overflow-scrolling: touch;
  }
  .modal .table-wrap > table{
    min-width: 600px;             /* base más pequeña para móviles */
    width: max-content;           /* deja crecer según contenido */
    table-layout: auto;
  }

  /* Permitir corte de texto en celdas largas (emails, nombres, etc.) */
  .modal .table-wrap > table td,
  .modal .table-wrap > table th{
    white-space: normal;          /* permite saltos de línea */
    word-break: break-word;       /* parte palabras largas si hace falta */
  }
}

/* === FIX: Tabla de Planes dentro del modal === */

/* 1) Reservar ancho mínimo para la columna "Mulch" */
.modal .table-wrap .compact th:nth-child(3),
.modal .table-wrap .compact td:nth-child(3){
  width: 92px;         /* suficiente para "No"/"Sí" o el <select> */
  min-width: 88px;
}

/* 2) Asegurar que el <select> de Mulching no se colapse */
.modal .table-wrap .compact td:nth-child(3) select.pl-mulch{
  display: block;
  width: 100%;
  min-width: 80px;
}

/* 3) En móvil, hacer que los 2 inputs de "Periodo" bajen a 2 líneas,
      así liberamos ancho horizontal para "Mulch" */
@media (max-width: 680px){
  .modal .table-wrap .compact td:nth-child(1){
    white-space: normal;         /* permite salto de línea dentro del TD */
  }
  .modal .table-wrap .compact td:nth-child(1) .pl-ini,
  .modal .table-wrap .compact td:nth-child(1) .pl-fin{
    display: block;              /* uno debajo del otro */
    width: 100%;
    min-width: 0;
  }

  /* Un pelín más de aire para Cultivo y Mulch en móvil */
  .modal .table-wrap .compact th:nth-child(2),
  .modal .table-wrap .compact td:nth-child(2){ min-width: 140px; }
  .modal .table-wrap .compact th:nth-child(3),
  .modal .table-wrap .compact td:nth-child(3){ min-width: 90px; }
}

/* 4) Botonera: que no invada columnas en pantallas angostas */
@media (max-width: 680px){
  .modal .table-wrap .compact td.actions{
    white-space: normal;
  }
  .modal .table-wrap .compact td.actions > *{
    flex: 0 0 auto;
  }
}

.map-wrap{
  display: grid;
  grid-template-columns: minmax(260px, 28%) 1fr;   /* sidebar crece hasta ~28% */
  align-items: start;
  gap: 12px;
}

.map-side{
  position: sticky;        /* queda visible mientras scrolleás en desktop */
  top: .5rem;
  max-height: calc(100svh - 140px); /* respeta alto de viewport en móviles modernos */
  overflow: hidden;        /* el scroll vive en la lista */
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.list.slim{
  flex: 1 1 auto;
  min-height: 160px;
  max-height: none;        /* sin tope fijo; el contenedor controla el alto */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.list.slim li{
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 8px;
}
.list.slim li:hover{ background: rgba(255,255,255,.04); }

/* Mapa: altura fluida y bordes prolijos */
#map{
  width: 100%;
  height: clamp(320px, 58svh, 680px);  /* usa svh para móviles; buen rango en desktop */
  margin: .5rem 0 0.25rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--stroke);
}

/* Leaflet se adapta bien, solo aseguramos fondo y bordes redondeados */
.leaflet-container{ background: #0e1117; }
.leaflet-pane, .leaflet-top, .leaflet-bottom{ will-change: transform; }

/* Estados (puntitos) al lado del usuario – reusamos tus clases */
.status-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.dot-blue{ background:#3b82f6; }
.dot-orange{ background:#f59e0b; }
.dot-red{ background:#ef4444; }
.dot-gray{ background:#6b7280; }

/* 💡 COMPORTAMIENTO EN TABLET / MÓVIL */
@media (max-width: 980px){
  .map-wrap{
    grid-template-columns: 1fr;   /* apila */
  }
  /* Primero el mapa, debajo el panel lateral (mejor UX en móvil) */
  #tab-mapa #map{ order: 1; }
  #tab-mapa .map-side{ 
    order: 2; 
    position: static;         /* sin sticky en móvil */
    max-height: none; 
  }
  /* En móvil, la lista tiene tope razonable y scroll propio */
  .list.slim{
    max-height: 40svh;
  }
}

/* Micro-ajustes de inputs/botones del panel lateral para pantallas angostas */
@media (max-width: 680px){
  .map-side .actions{ flex-wrap: wrap; }
  .map-side input, .map-side button{ width: 100%; }
}

/* Mejora de accesibilidad: foco visible al navegar con teclado */
#tab-mapa .list.slim li:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(47,111,237,.35);
}
.simple-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--card); }
.simple-head .row { align-items: center; gap: .75rem; }

/* GRID horizontal scrollable */
.simple-list {
  list-style: none; padding: 0; margin: .25rem 0 0;
  display: grid; gap: 8px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.simple-item {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: space-between;
  background: var(--bg-soft); border-radius: 12px; padding: 10px 12px;
  min-height: 90px; scroll-snap-align: start;
}
.simple-day { font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.dot-water { font-size: 18px; }
.simple-metrics { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
@media (min-width: 900px) {
  .simple-list { grid-auto-columns: minmax(200px, 1fr); }
}

/* Menús desplegables */
.simple-head details.menu { display:inline-block; margin-left:.5rem; }
.simple-head details.menu[open] > summary { opacity: .9; }

/* Vista simple horizontal (si la querés en carrusel) */
.simple-list { display:grid; gap:8px; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); overflow-x:auto; }
.simple-item { min-width: 220px; }

/* Botoncito para <summary> */
.simple-head details.menu > summary.secondary {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  cursor: pointer;
  user-select: none;
}

.simple-head details.menu[open] > summary.secondary {
  opacity: .95;
}

/* Oculta el triangulito default si molesta, dejando sólo el chip */
.simple-head details.menu > summary::-webkit-details-marker { display: none; }

.install-bar {
  position: sticky; top: 0; z-index: 1000;
  background: linear-gradient(90deg, #0e1117, #0e1117);
  padding: 10px; display: flex; justify-content: flex-end; align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.btn-install {
  border: 0; padding: 10px 16px; border-radius: 999px;
  background: #fff; color: #1e3a3a; font-weight: 700; cursor: pointer;
  transition: transform .05s ease, box-shadow .2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.btn-install:hover { transform: translateY(-1px); }

/* Oculta el botón en la PWA instalada (cualquier display-mode de app) */
@media all and (display-mode: standalone), 
       all and (display-mode: fullscreen), 
       all and (display-mode: minimal-ui), 
       all and (display-mode: window-controls-overlay) {
  #install-bar { display: none !important; }
}