/* ── Reset & Variables ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #f0f2f5;
  --surface: #ffffff;
  --border:  #e0e4ea;
  --text:    #1a1d23;
  --muted:   #6b7280;
  --blue:    #2563eb;
  --green:   #16a34a;
  --purple:  #7c3aed;
  --orange:  #ea580c;
  --red:     #dc2626;
  --radius:  8px;
  --shadow:  0 1px 3px rgba(0,0,0,.08);
}

body { font-family: system-ui, sans-serif; font-size: 14px;
       background: var(--bg); color: var(--text); line-height: 1.5; }

/* ── Nav ───────────────────────────────────────────────────── */
nav {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--blue); color: #fff;
  padding: 0 1rem; height: 52px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.nav-brand { display: flex; align-items: center; gap: .5rem; font-size: 1rem; white-space: nowrap; }
.flag { font-size: 1.3rem; }
.nav-toggle {
  display: none; background: none; border: none; color: #fff;
  font-size: 1.5rem; cursor: pointer; padding: .25rem;
}
.nav-links { list-style: none; display: flex; gap: .25rem; }
.nav-links a {
  color: rgba(255,255,255,.85); text-decoration: none;
  padding: .35rem .75rem; border-radius: var(--radius);
  transition: background .15s; font-size: .875rem;
}
.nav-links a:hover, .nav-links a.active {
  background: rgba(255,255,255,.2); color: #fff;
}

/* ── Main ──────────────────────────────────────────────────── */
main { max-width: 1280px; margin: 0 auto; padding: 1.5rem; }


.page-header {
  display: flex; align-items: baseline; gap: 1rem;
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.page-header h1 { font-size: 1.4rem; }
.subtitle { color: var(--muted); font-size: .85rem; }
.badge {
  background: var(--blue); color: #fff;
  font-size: .75rem; padding: .2rem .6rem; border-radius: 99px;
}
.sync-info { color: var(--muted); font-size: .8rem; margin: -.5rem 0 1rem; }

/* ── Cards ─────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.card {
  background: var(--surface); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--shadow);
  border-left: 4px solid var(--blue);
  display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
}
.card-blue   { border-color: var(--blue); }
.card-green  { border-color: var(--green); }
.card-purple { border-color: var(--purple); }
.card-orange { border-color: var(--orange); }
.card-icon { font-size: 1.5rem; }
.card-val  { font-size: 2rem; font-weight: 700; }
.card-lbl  { color: var(--muted); font-size: .8rem; }

/* ── Charts ────────────────────────────────────────────────── */
.charts-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px,1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.chart-box {
  background: var(--surface); border-radius: var(--radius);
  padding: 1rem; box-shadow: var(--shadow);
}
.chart-box h3 { font-size: .9rem; color: var(--muted); margin-bottom: .75rem; }
canvas { max-height: 220px; }

/* ── Info box ──────────────────────────────────────────────── */
.info-box {
  background: var(--surface); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--shadow); border-left: 4px solid var(--green);
}
.info-box h3 { margin-bottom: .75rem; }
.info-box pre {
  background: #1e1e2e; color: #cdd6f4;
  border-radius: 6px; padding: 1rem; overflow-x: auto;
  font-size: .82rem; line-height: 1.6;
}

/* ── Search bar ────────────────────────────────────────────── */
.search-bar {
  display: flex; gap: .5rem; flex-wrap: wrap;
  background: var(--surface); padding: .75rem 1rem;
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.search-bar input, .search-bar select {
  flex: 1; min-width: 160px; padding: .4rem .6rem;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: .875rem;
}
.search-bar button {
  background: var(--blue); color: #fff;
  border: none; padding: .4rem 1rem;
  border-radius: 6px; cursor: pointer; font-size: .875rem;
}
.search-bar button:hover { filter: brightness(1.1); }
.btn-clear {
  color: var(--muted); text-decoration: none;
  padding: .4rem .75rem; border: 1px solid var(--border);
  border-radius: 6px; font-size: .875rem;
  display: flex; align-items: center;
}

/* ── Table ─────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
thead { background: #f8fafc; }
th, td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--border); }
th { font-weight: 600; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
tr:hover td { background: #f5f7fa; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.small { font-size: .78rem; color: var(--muted); }
code { font-size: .78rem; background: #f0f2f5; padding: .1rem .35rem; border-radius: 4px; }

/* ── Tags ──────────────────────────────────────────────────── */
.tag {
  display: inline-block; font-size: .72rem; padding: .15rem .5rem;
  border-radius: 99px; background: #e5e7eb; color: var(--text);
}
.tag-uso     { background: #dbeafe; color: #1e40af; }
.tag-ok      { background: #dcfce7; color: #166534; }
.tag-error   { background: #fee2e2; color: #991b1b; }
.tag-search  { background: #fef3c7; color: #92400e; }
.tag-estado-activo     { background: #dcfce7; color: #166534; }
.tag-estado-inactivo   { background: #fee2e2; color: #991b1b; }
.tag-estado-en_trámite { background: #fef3c7; color: #92400e; }

/* ── Pagination ────────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 1rem; padding: .75rem;
}
.pagination a {
  color: var(--blue); text-decoration: none;
  padding: .3rem .75rem; border: 1px solid var(--blue);
  border-radius: 6px; font-size: .85rem;
}
.pagination a:hover { background: var(--blue); color: #fff; }
.pagination a.active { background: var(--blue); color: #fff; font-weight: 600; }

/* ── Empty ─────────────────────────────────────────────────── */
.empty {
  text-align: center; padding: 3rem 1rem;
  color: var(--muted); background: var(--surface);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.empty code { font-size: .85rem; }

/* ── Log rows ──────────────────────────────────────────────── */
.log-error td { background: #fff5f5; }
.log-ok td    { background: #f0fdf4; }

/* ── Flash Messages ──────────────────────────────────────────── */
.flash-container { max-width: 1280px; margin: .75rem auto 0; padding: 0 1rem; }
.flash {
  padding: .65rem 1rem; border-radius: var(--radius);
  font-size: .875rem; margin-bottom: .5rem;
  border-left: 4px solid var(--blue);
  background: #dbeafe; color: #1e40af;
}
.flash-success { background: #dcfce7; color: #166534; border-color: var(--green); }
.flash-error   { background: #fee2e2; color: #991b1b; border-color: var(--red); }
.flash-warning { background: #fef3c7; color: #92400e; border-color: var(--orange); }

/* ── Login ──────────────────────────────────────────────────── */
.login-wrapper {
  display: flex; justify-content: center; align-items: center;
  min-height: 60vh;
}
.login-card {
  background: var(--surface); border-radius: var(--radius);
  padding: 2rem; box-shadow: var(--shadow);
  width: 100%; max-width: 400px;
}
.login-card h2 { margin-bottom: 1.25rem; font-size: 1.2rem; }
.btn-registro {
  display: inline-block; width: 100%; text-align: center;
  padding: .55rem 1.25rem; border-radius: var(--radius);
  border: 2px solid var(--green); color: var(--green);
  font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: background .15s, color .15s;
  box-sizing: border-box;
}
.btn-registro:hover {
  background: var(--green); color: #fff;
}

/* ── Form ───────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block; font-size: .85rem; font-weight: 600;
  color: var(--text); margin-bottom: .3rem;
}
.form-group input, .form-group select {
  width: 100%; padding: .5rem .65rem;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: .875rem; font-family: inherit;
}
.form-group input:focus, .form-group select:focus {
  outline: 2px solid var(--blue); outline-offset: -1px;
}
.btn-primary {
  background: var(--blue); color: #fff;
  border: none; padding: .5rem 1.25rem;
  border-radius: 6px; cursor: pointer; font-size: .875rem;
  text-decoration: none; display: inline-block;
}
.btn-primary:hover { filter: brightness(1.1); }
.form-card {
  background: var(--surface); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow);
  max-width: 500px;
}

/* ── Nav user ───────────────────────────────────────────────── */
.nav-divider {
  width: 1px; background: rgba(255,255,255,.3);
  margin: 0 .25rem; list-style: none;
}
.nav-user {
  color: rgba(255,255,255,.75); font-size: .8rem;
  padding: .35rem .5rem; white-space: nowrap;
}

/* ── Theme picker ───────────────────────────────────────────── */
.nav-theme-item { display: flex; align-items: center; }
.theme-picker {
  display: flex; align-items: center; gap: .3rem;
  padding: .2rem .4rem; border-radius: 99px;
  background: rgba(255,255,255,.1);
}
.theme-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  cursor: pointer; padding: 0; transition: transform .15s, border-color .15s;
}
.theme-dot:hover   { transform: scale(1.25); border-color: rgba(255,255,255,.7); }
.theme-dot.active  { border-color: #fff; transform: scale(1.2); box-shadow: 0 0 6px rgba(255,255,255,.5); }
.theme-dot-default  { background: #2563eb; }
.theme-dot-cyberpunk { background: #00f5ff; }
.theme-dot-glass    { background: #58a6ff; }
.theme-dot-space    { background: #7c6aff; }

/* ── Table actions ──────────────────────────────────────────── */
.actions { white-space: nowrap; }
.btn-sm {
  display: inline-block; padding: .25rem .6rem;
  font-size: .8rem; border-radius: 4px;
  background: var(--blue); color: #fff;
  text-decoration: none; border: none; cursor: pointer;
}
.btn-sm:hover { filter: brightness(1.1); }
.btn-danger { background: var(--red); }
.row-current td { background: #f0f7ff; }

/* ── Role tags ──────────────────────────────────────────────── */
.tag-role-superadmin { background: #fef3c7; color: #92400e; }

/* ── Filters ─────────────────────────────────────────────────── */
.filters {
  background: var(--surface); padding: 1rem; border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 1rem;
}
.filter-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.filter-group { display: flex; flex-direction: column; gap: .25rem; }
.filter-group label { font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.filter-group input, .filter-group select {
  padding: .4rem .6rem; border: 1px solid var(--border);
  border-radius: 6px; font-size: .85rem; min-width: 160px;
}
.filter-actions { display: flex; flex-direction: row; gap: .5rem; align-items: flex-end; }
.btn {
  background: var(--blue); color: #fff; border: none;
  padding: .4rem 1rem; border-radius: 6px; cursor: pointer;
  font-size: .85rem; text-decoration: none; display: inline-block;
}
.btn:hover { filter: brightness(1.1); }
.btn-secondary {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg); filter: none; }

.muted { color: var(--muted); }
.tag-role-admin      { background: #dbeafe; color: #1e40af; }
.tag-role-user       { background: #e5e7eb; color: #374151; }

/* ── Map controls ──────────────────────────────────────────── */
.map-controls {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  background: var(--surface); padding: .75rem 1rem;
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: .75rem;
}
.map-controls select {
  padding: .4rem .6rem; border: 1px solid var(--border);
  border-radius: 6px; font-size: .85rem; min-width: 160px;
}
.toggle-label {
  display: flex; align-items: center; gap: .3rem;
  font-size: .82rem; color: var(--text); cursor: pointer;
  white-space: nowrap;
}
.map-info-text {
  font-size: .78rem; color: var(--muted); margin-left: auto;
}
.map-search-bar {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end;
  background: var(--surface); padding: .75rem 1rem;
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: .75rem;
}
.map-search-group {
  display: flex; flex-direction: column; gap: .2rem;
}
.map-search-group label {
  font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase;
}
.map-search-group input {
  padding: .35rem .6rem; border: 1px solid var(--border);
  border-radius: 6px; font-size: .85rem; min-width: 140px;
}

/* ── Control panel (dashboard) ─────────────────────────────── */
.control-panel {
  background: var(--surface); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--shadow);
  border-left: 4px solid var(--purple); margin-bottom: 1rem;
}
.control-panel h3 { margin-bottom: .75rem; font-size: .95rem; }
.control-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.control-group { display: flex; flex-direction: column; gap: .3rem; flex: 1; min-width: 200px; }
.control-group label { font-size: .78rem; color: var(--muted); font-weight: 600; }
.control-group select { padding: .4rem .6rem; border: 1px solid var(--border);
  border-radius: 6px; font-size: .875rem; background: var(--surface); }
.control-buttons { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.control-buttons button {
  padding: .45rem 1rem; border: none; border-radius: 6px;
  font-size: .875rem; cursor: pointer; font-weight: 600;
}
.btn-start { background: var(--green); color: #fff; }
.btn-stop  { background: var(--red);   color: #fff; }
.btn-demo  { background: var(--orange); color: #fff; }
.control-buttons button:hover { filter: brightness(1.1); }
.control-buttons button:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.ctrl-status { font-size: .82rem; padding: .3rem .6rem;
  border-radius: 6px; align-self: center; }
.ctrl-ok    { background: #dcfce7; color: #166534; }
.ctrl-err   { background: #fee2e2; color: #991b1b; }
.ctrl-info  { background: #dbeafe; color: #1e40af; }
.log-box { margin-top: .75rem; }
.log-header { display: flex; justify-content: space-between; align-items: center;
  font-size: .8rem; font-weight: 600; color: var(--muted);
  margin-bottom: .3rem; }
.log-content {
  background: #1e1e2e; color: #cdd6f4; font-size: .75rem;
  padding: .75rem 1rem; border-radius: 6px; height: 180px;
  overflow-y: auto; white-space: pre-wrap; word-break: break-all;
  font-family: 'Consolas', monospace; line-height: 1.5;
}

.live-dot {
  width:8px; height:8px; border-radius:50%;
  background:#16a34a; display:inline-block; margin-left:.5rem;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.progress-box {
  background:var(--surface); border-radius:var(--radius);
  padding:1rem 1.25rem; box-shadow:var(--shadow);
  border-left:4px solid #0891b2; margin-bottom:1rem;
}
.progress-header { display:flex; justify-content:space-between;
  font-weight:600; margin-bottom:.5rem; }
.progress-track { background:#e5e7eb; border-radius:99px; height:10px; overflow:hidden; }
.progress-fill  { height:100%; background:#0891b2; border-radius:99px;
  transition: width .5s ease; }
.progress-detail { color:var(--muted); font-size:.78rem; margin-top:.4rem; }

.dpto-progress-box {
  background:var(--surface); border-radius:var(--radius);
  padding:1rem 1.25rem; box-shadow:var(--shadow); margin-bottom:1rem;
}
.dpto-progress-box h3 { font-size:.9rem; color:var(--muted); margin-bottom:.75rem; }
.dpto-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.4rem; }
.dpto-row { display:flex; flex-direction:column; gap:.15rem; }
.dpto-label { display:flex; justify-content:space-between; font-size:.78rem; }
.dpto-name  { font-weight:600; }
.dpto-count { color:var(--muted); }
.dpto-bar-track { background:#e5e7eb; border-radius:99px; height:5px; }
.dpto-bar-fill  { height:100%; border-radius:99px; transition:width .4s ease; }
.dpto-done .dpto-bar-fill { background:#16a34a; }
.dpto-partial .dpto-bar-fill { background:#0891b2; }
.dpto-empty .dpto-bar-fill  { background:#e5e7eb; }

/* ── Leaflet map ───────────────────────────────────────────── */
#map { height: 65vh; border-radius: var(--radius); z-index: 1; }


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤768px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { font-size: 13px; }

  /* ── Nav ─────────────────── */
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute; top: 52px; left: 0; right: 0;
    background: var(--blue); flex-direction: column;
    padding: .5rem; gap: 0; box-shadow: 0 4px 8px rgba(0,0,0,.2);
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-theme-item { padding: .5rem .75rem; }
  .theme-picker { background: rgba(255,255,255,.08); }
  .nav-links a {
    display: block; padding: .65rem .75rem;
    border-radius: 6px; font-size: .9rem;
  }
  .nav-divider { display: none; }
  .nav-user { display: block; padding: .65rem .75rem; font-size: .85rem; }

  /* ── Main ─────────────────── */
  main { padding: .75rem; }

  /* ── Page header ──────────── */
  .page-header h1 { font-size: 1.1rem; }
  .page-header { gap: .5rem; margin-bottom: .75rem; }

  /* ── Cards ────────────────── */
  .cards { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .card { padding: .75rem; }
  .card-val { font-size: 1.4rem; }
  .card-icon { font-size: 1.2rem; }

  /* ── Charts ───────────────── */
  .charts-grid { grid-template-columns: 1fr; gap: .75rem; }
  .chart-box { padding: .75rem; }
  canvas { max-height: 180px; }

  /* ── Tables ───────────────── */
  .table-wrap {
    margin: 0 -.75rem;
    border-radius: 0;
  }
  th, td { padding: .4rem .5rem; font-size: .78rem; }
  th { font-size: .7rem; }

  /* ── Search bar ───────────── */
  .search-bar { padding: .5rem .75rem; }
  .search-bar input, .search-bar select { min-width: 120px; font-size: .82rem; }

  /* ── Filters ──────────────── */
  .filters { padding: .75rem; }
  .filter-row { flex-direction: column; gap: .5rem; }
  .filter-group input, .filter-group select { min-width: 100%; }
  .filter-actions { width: 100%; }
  .filter-actions .btn { flex: 1; text-align: center; }

  /* ── Pagination ───────────── */
  .pagination { gap: .5rem; font-size: .8rem; }
  .pagination a { padding: .25rem .6rem; }

  /* ── Map ──────────────────── */
  .map-controls { flex-direction: column; align-items: stretch; gap: .4rem; }
  .map-controls select { min-width: 100%; }
  .map-info-text { margin-left: 0; text-align: right; }
  .map-search-bar { flex-direction: column; gap: .4rem; }
  .map-search-group input { min-width: 100%; }
  #map { height: 50vh; }

  /* ── Control panel ────────── */
  .control-row { flex-direction: column; }
  .control-group { min-width: 100%; }
  .control-buttons { width: 100%; }
  .control-buttons button { flex: 1; text-align: center; }

  /* ── Login ────────────────── */
  .login-card { margin: 1rem; padding: 1.5rem; }

  /* ── Form card ────────────── */
  .form-card { padding: 1rem; }

  /* ── Flash ────────────────── */
  .flash-container { padding: 0 .5rem; }
  .flash { font-size: .82rem; }

  /* ── Sync info ────────────── */
  .sync-info { font-size: .75rem; }

  /* ── Log box ──────────────── */
  .log-content { height: 140px; font-size: .7rem; }

  /* ── Progress / dpto grid ─── */
  .dpto-grid { grid-template-columns: 1fr; }
}

/* ── Extra small (≤420px) ──── */
@media (max-width: 420px) {
  .cards { grid-template-columns: 1fr 1fr; gap: .4rem; }
  .card { padding: .6rem; }
  .card-val { font-size: 1.15rem; }
  .nav-brand { font-size: .85rem; }
  .page-header h1 { font-size: 1rem; }
  .search-bar input, .search-bar select { min-width: 100%; }
  .search-bar { flex-direction: column; }
  .search-bar button { width: 100%; }
}