/* ============================
   Design Tokens (CSP-safe)
   ============================ */
:root{
  --bg:#f7f7f8;
  --fg:#111;
  --muted:#6b7280;
  --primary:#c1121f;
  --card:#fff;
  --border:#e5e7eb;

  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:12px;

  --shadow-sm:0 4px 10px rgba(0,0,0,.06);
  --shadow-md:0 10px 20px rgba(0,0,0,.08);
}

/* ============================
   Base
   ============================ */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Montserrat","Segoe UI",system-ui,-apple-system,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  color:var(--fg);
  background:var(--bg);
}

/* Scrollbar suave (no requiere CSP) */
*{
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
*::-webkit-scrollbar{ height:10px; width:10px; }
*::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ============================
   Header principal
   ============================ */
header.main-header{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  height:70px; padding:0 20px;
  background:linear-gradient(to right, #084474, #f37404);
  color:#fff;
}
.main-header .logo img{
  height:50px; object-fit:contain; display:block;
}

/* ============================
   Botones
   ============================ */
button{
  background:var(--primary);
  color:#fff;
  border:0;
  padding:9px 14px;
  border-radius:var(--radius-md);
  cursor:pointer;
  font-weight:600;
  box-shadow:var(--shadow-sm);
}
button:hover{ filter:brightness(.96); }
button:active{ transform:translateY(1px); }
button.secondary{
  background:#e5e7eb; color:#111;
}

/* Botón flotante del mapa */
.map-fab{
  position:fixed; right:16px; bottom:16px; z-index:1000;
  border:0; border-radius:999px; padding:10px 12px;
  background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.2);
  cursor:pointer; font-size:18px; line-height:1;
}
.map-fab:hover{ filter:brightness(.97); }

/* ============================
   Layout
   ============================ */
.layout{
  display:grid;
  grid-template-areas:
    "filters map"
    "table   table";
  grid-template-columns:40% 1fr;
  gap:12px; padding:12px;
}

/* Responsive */
@media (max-width: 960px){
  .layout{
    grid-template-areas:
      "filters"
      "map"
      "table";
    grid-template-columns:1fr;
  }
}

/* ============================
   Panel filtros
   ============================ */
.filters-panel{
  grid-area:filters;
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:12px;
  box-shadow:var(--shadow-sm);
}
.filters{ display:grid; grid-template-columns:1fr; gap:8px; }
.filter-actions{ display:flex; gap:8px; margin-top:8px; }

/* Inputs estilo suave */
.filters input[list],
.filters input,
.filters select,
.grid input,
.grid select,
.grid textarea{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px;
  background:#fff;
  outline:none;
  font:inherit;
}
.filters input:focus,
.filters select:focus,
.grid input:focus,
.grid select:focus,
.grid textarea:focus{
  border-color:#cbd5e1;
  box-shadow:0 0 0 3px rgba(17,94,234,.08);
}

/* ============================
   Mapa
   ============================ */
#map{
  grid-area:map;
  height:35vh;
  background:#ddd;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}

/* Leaflet: asegúrate de que el mapa quede debajo del modal */
#map, .leaflet-container{ z-index:0; }
.leaflet-container img{ image-rendering:auto; }

/* ============================
   Tabla
   ============================ */
.tablewrap{
  grid-area:table;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:auto;
  box-shadow:var(--shadow-sm);
}

/* Tu tabla puede llamarse #pdv-table o .grid según renderTable() */
#pdv-table, .grid-table{
  width:100%; border-collapse:collapse;
}

#pdv-table th, #pdv-table td,
.grid-table th, .grid-table td{
  border-bottom:1px solid var(--border);
  padding:8px;
  font-size:12px;
  text-align:left;
  vertical-align:top;
}
#pdv-table thead, .grid-table thead{
  position:sticky; top:0; background:#fff; z-index:1;
  box-shadow:0 1px 0 var(--border);
}

#pdv-table tbody tr,
.grid-table tbody tr{ cursor:pointer; }
#pdv-table tbody tr:hover,
.grid-table tbody tr:hover{ background:#fafafa; }

/* Paginador */
.pager{
  display:flex; gap:8px; align-items:center; justify-content:flex-end;
  padding:8px 12px;
}
#pg-info{ font-size:12px; color:var(--muted); }

/* Leyenda (si la usas) */
.legend{
  background:#fff; padding:8px; border-radius:var(--radius-sm);
  border:1px solid var(--border); font-size:12px; box-shadow:var(--shadow-sm);
}
.legend h4{ margin:4px 0 8px; font-size:12px; }
.legend .dot{
  display:inline-block; width:10px; height:10px; border-radius:999px;
  margin-right:6px; vertical-align:middle;
}

/* ============================
   Modal
   ============================ */
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  padding:16px; z-index:10000; /* por encima del mapa y header */
}
.modal.hidden{ display:none; }
.modal-card{
  width:min(720px,95vw);
  background:#fff;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  padding:16px;
  box-shadow:var(--shadow-md);
}
.modal-card h2{ margin-top:0; }

/* Grid genérica usada en formularios del modal */
.grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.grid .col-span-2{ grid-column: span 2; }
.grid input, .grid select, .grid textarea{
  width:100%; border:1px solid var(--border);
  border-radius:var(--radius-md); padding:8px; background:#fff;
}
.actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }

/* Evita scroll del body al abrir modal (añade/quita body.modal-open desde JS si quieres) */
body.modal-open{ overflow:hidden; }

/* ============================
   Utilidades/Badges (opcionales)
   ============================ */
.badge{
  display:inline-block; border-radius:999px; padding:2px 8px; font-size:11px; line-height:1.6;
  border:1px solid var(--border); background:#fff;
}
.badge.ko{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.badge.ok{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.badge.warn{ background:#fff7ed; color:#9a3412; border-color:#fed7aa; }

/* ============================
   Pequeños refinamientos
   ============================ */
h1{ font-size:18px; margin:0; }
a{ color:inherit; text-decoration:none; }
label{ font-size:12px; color:var(--muted); display:block; margin-bottom:4px; }
.small{ font-size:12px; color:var(--muted); }
.is-hidden{ display:none !important; }

.assignment-warning{
  margin:10px 12px 0;
  padding:10px 12px;
  border:1px solid #fecaca;
  background:#fff1f2;
  color:#9f1239;
  border-radius:10px;
  font-size:13px;
}

/* Tabs móvil: texto negro */
@media (max-width: 900px){
  .mobile-tabs button,
  .mobile-tabs .tab-btn{
    color: #000 !important;
  }

  /* opcional: el activo también negro */
  .mobile-tabs button.active,
  .mobile-tabs .tab-btn.active{
    color: #000 !important;
  }
}