/*
Theme Name: Monitor del Conflicto Colombia
Theme URI: https://monitorconflicto.com
Author: Monitor del Conflicto Colombia
Author URI: https://monitorconflicto.com
Description: Theme a medida para el observatorio independiente Monitor del Conflicto Colombia — mapa táctico interactivo de orden público, conflicto armado y tensión social. Incluye mapa Leaflet con tiles oscuros gratuitos, mapa de calor conmutable, sistema de simbología por actor/modalidad, feed en vivo y filtros.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: monitor-conflicto
License: Uso privado — Monitor del Conflicto Colombia
*/

/* =======================================================
   TOKENS — chrome exclusivo de marca. Nunca reutilizar estos
   colores para representar actores o hechos (ver js/actores.js).
   ======================================================= */
:root{
  --bg:        #081b33;
  --bg-deep:   #05101f;
  --panel:     #0c2440;
  --panel-2:   #0f2c4d;
  --border:    #1b3a5c;
  --teal:      #5fb4b4;
  --teal-deep: #0d6e75;
  --text:      #e7eef4;
  --muted:     #7e93ac;
  --danger-ui: #c0392b; /* solo para estados de error de UI, no de mapa */

  --font-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --radius: 6px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family: var(--font-mono);
  background: var(--bg-deep);
  color: var(--text);
  overflow:hidden;
}
h1,h2,h3{ font-family: var(--font-display); font-weight:600; margin:0; }
button{ font-family: inherit; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

/* =======================================================
   TOPBAR
   ======================================================= */
.topbar{
  position:fixed; top:12px; left:12px; right:12px; z-index:1200;
  height:52px; border-radius:12px;
  display:flex; align-items:center; gap:16px;
  padding:0 14px;
  background: rgba(8,27,51,.88);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand__mark{ width:32px; height:32px; flex:0 0 auto; }
.brand__text{ display:flex; flex-direction:column; line-height:1.05; }
.brand__title{
  font-family: var(--font-display);
  font-size:15px; font-weight:700; letter-spacing:.03em;
  color:var(--text);
}
.brand__sub{ font-size:10.5px; color:var(--muted); letter-spacing:.02em; }

.search{ position:relative; flex:1 1 auto; max-width:420px; }
.search input{
  width:100%; height:34px; padding:0 12px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-size:12.5px; font-family:var(--font-mono);
}
.search input::placeholder{ color:var(--muted); }
.search__results{
  position:absolute; top:40px; left:0; right:0;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  max-height:260px; overflow:auto; box-shadow:var(--shadow); z-index:1300;
}
.search__item{ padding:8px 12px; font-size:12px; cursor:pointer; border-bottom:1px solid var(--border); }
.search__item:last-child{ border-bottom:none; }
.search__item:hover, .search__item.is-active{ background:var(--panel-2); }
.search__item small{ color:var(--muted); display:block; margin-top:2px; }

.topbar__actions{ display:flex; gap:8px; flex:0 0 auto; }
.iconbtn{
  height:34px; padding:0 12px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-size:12px; letter-spacing:.02em; cursor:pointer;
}
.iconbtn:hover{ border-color:var(--teal); color:var(--teal); }
.iconbtn--onlymobile{ display:none; }

/* =======================================================
   MAPA
   ======================================================= */
#map{
  position:fixed; inset:0; z-index:0;
  background: var(--bg-deep);
}
/* Fallback keyless cuando no hay API key de CARTO configurada:
   tiles normales de OpenStreetMap + filtro CSS para verse oscuros. */
.osm-dark-fallback{
  filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}
.leaflet-container{ background: var(--bg-deep); font-family: var(--font-mono); }
.leaflet-control-attribution{
  background: rgba(5,16,31,.75) !important; color: var(--muted) !important;
  font-size:10px !important;
}
.leaflet-control-attribution a{ color: var(--teal) !important; }
.leaflet-control-zoom a{
  background: var(--panel) !important; color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Marcador táctico: círculo de color de actor + glifo SVG interno */
.tac-marker{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  box-shadow: 0 0 0 3px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.5);
}
.tac-marker svg{ width:15px; height:15px; }
.tac-marker__emoji{ font-size:14px; line-height:1; }
.tac-marker.is-approx{ border-style:dashed; opacity:.92; } /* ubicación por municipio, no exacta */

/* Popup / ficha OSINT */
.leaflet-popup-content-wrapper{
  background: var(--panel); color: var(--text);
  border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.leaflet-popup-tip{ background: var(--panel); }
.leaflet-popup-content{ margin:0; width:280px !important; }
.leaflet-popup-close-button{ color: var(--muted) !important; }

.ficha{ padding:12px 14px; }
.ficha__badge{
  display:inline-block; font-size:10px; font-family:var(--font-mono);
  letter-spacing:.04em; padding:2px 7px; border-radius:3px;
  color:#fff; margin-bottom:8px;
}
.ficha__titular{
  font-family: var(--font-display); font-size:15px; font-weight:600;
  line-height:1.25; margin:0 0 6px;
}
.ficha__meta{ font-size:11px; color:var(--muted); margin-bottom:8px; display:flex; flex-wrap:wrap; gap:8px; }
.ficha__meta b{ color:var(--text); font-weight:500; }
.ficha__resumen{ font-size:12.5px; line-height:1.5; color:var(--text); margin:0 0 10px; }
.ficha__link{
  display:inline-block; font-size:11.5px; color:var(--teal);
  border-top:1px solid var(--border); padding-top:8px; width:100%;
  text-decoration:none;
}
.ficha__link:hover{ color:#fff; }
.ficha__approx-note{ font-size:10.5px; color:var(--muted); font-style:italic; margin-top:4px; }

/* =======================================================
   CONTROLES FLOTANTES SOBRE EL MAPA
   ======================================================= */
.map-controls{
  position:fixed; top:76px; left:12px; z-index:1100;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}
.segmented{
  display:flex; background:var(--panel); border:1px solid var(--border);
  border-radius: var(--radius); overflow:hidden;
}
.segmented__btn{
  border:none; background:transparent; color:var(--muted);
  font-size:12px; padding:8px 14px; cursor:pointer; font-family:var(--font-mono);
}
.segmented__btn.is-active{ background:var(--teal-deep); color:#fff; }
.lastupdate{
  font-size:10px; color:var(--muted); background:rgba(5,16,31,.8);
  padding:4px 8px; border-radius:4px; border:1px solid var(--border);
}

/* =======================================================
   SIDEBAR (desktop) / BOTTOM SHEET (móvil)
   ======================================================= */
.sidebar{
  position:fixed; top:76px; right:12px; bottom:12px; width:340px;
  background: rgba(8,27,51,.92);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  overflow-y:auto; z-index:1000;
  padding:14px 14px 20px;
  display:flex; flex-direction:column; gap:14px;
}
.sidebar__handle{ display:none; }

.panel{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:12px 14px;
}
.panel__title{
  font-size:13px; letter-spacing:.02em; color:var(--text);
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.panel__count{
  font-family:var(--font-mono); font-size:11px; color:var(--teal);
  background:var(--bg-deep); padding:2px 7px; border-radius:10px;
}

.filter-group{ margin-bottom:12px; }
.filter-group:last-of-type{ margin-bottom:8px; }
.filter-group__label{
  display:block; font-size:10.5px; color:var(--muted);
  letter-spacing:.03em; margin-bottom:6px;
}
.filter-group--row{ display:flex; gap:10px; }
.filter-group--row > div{ flex:1; }
.filter-group--row input[type=date]{
  width:100%; background:var(--bg-deep); border:1px solid var(--border);
  color:var(--text); border-radius:4px; padding:5px 6px; font-size:11px; font-family:var(--font-mono);
}
.chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  display:flex; align-items:center; gap:5px;
  font-size:11px; padding:4px 9px 4px 6px; border-radius:14px;
  border:1px solid var(--border); background:var(--bg-deep);
  color:var(--muted); cursor:pointer; user-select:none;
}
.chip__dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.chip.is-active{ color:#fff; border-color:transparent; }

.btn-ghost{
  width:100%; background:transparent; border:1px solid var(--border);
  color:var(--muted); padding:7px; border-radius:4px; font-size:11px; cursor:pointer;
}
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal); }

.feed{ flex:1; display:flex; flex-direction:column; min-height:200px; }
.feed__list{ display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
.feed-item{
  border:1px solid var(--border); border-left:3px solid var(--teal);
  border-radius:4px; padding:8px 10px; cursor:pointer; background:var(--bg-deep);
}
.feed-item:hover{ border-color: var(--teal); }
.feed-item__top{ display:flex; justify-content:space-between; gap:8px; margin-bottom:4px; }
.feed-item__actor{ font-size:9.5px; letter-spacing:.03em; color:#fff; padding:1px 6px; border-radius:3px; }
.feed-item__fecha{ font-size:9.5px; color:var(--muted); white-space:nowrap; }
.feed-item__titular{ font-family:var(--font-display); font-size:12.5px; font-weight:600; line-height:1.3; color:var(--text); }
.feed-item__lugar{ font-size:10.5px; color:var(--muted); margin-top:3px; }
.feed__empty{ font-size:11.5px; color:var(--muted); text-align:center; padding:30px 10px; }

.ad-slot{ flex:0 0 auto; }
.ad-slot__label{ font-size:9.5px; color:var(--muted); letter-spacing:.05em; margin-bottom:6px; }
.ad-slot__box{
  min-height:250px; display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--border); border-radius:4px; color:var(--muted); font-size:11px;
}
.ad-slot--header{
  position:fixed; top:12px; left:12px; right:366px; z-index:900;
  display:flex; justify-content:center; padding:6px;
  background: transparent;
}
.ad-slot--header .ad-slot__box{ min-height:90px; width:728px; max-width:100%; }

/* =======================================================
   LEYENDA (modal)
   ======================================================= */
.modal{
  position:fixed; inset:0; z-index:2000;
  background: rgba(5,16,31,.75);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal[hidden]{ display:none; }
.modal__card{
  width:100%; max-width:560px; max-height:82vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  box-shadow:var(--shadow);
}
.modal__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-bottom:1px solid var(--border);
}
.modal__head h2{ font-size:15px; }
.modal__body{ padding:16px; }
.modal__divider{ border:none; border-top:1px solid var(--border); margin:16px 0; }
.modal__note{ font-size:11px; color:var(--muted); line-height:1.5; margin-top:14px; }
.legend-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.legend-item{ display:flex; align-items:center; gap:8px; font-size:12px; }
.legend-item__dot{ width:16px; height:16px; border-radius:50%; flex:0 0 auto; border:2px solid rgba(255,255,255,.85); }
.legend-item__glyph{ width:22px; height:22px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--bg-deep); border-radius:50%; font-size:13px; }
.legend-item__glyph svg{ width:14px; height:14px; }

/* =======================================================
   RESPONSIVE — móvil: sidebar se convierte en bottom sheet
   ======================================================= */
@media (max-width: 880px){
  .search{ display:none; }
  .iconbtn--onlymobile{ display:inline-block; }
  .ad-slot--header{ display:none !important; }

  .sidebar{
    top:auto; right:10px; left:10px; width:auto;
    height:60vh; bottom:10px;
    border-radius:14px;
    transform: translateY(calc(100% - 20px));
    transition: transform .28s ease;
  }
  .sidebar.is-open{ transform: translateY(0); }
  .sidebar__handle{
    display:block; width:40px; height:4px; border-radius:2px;
    background:var(--border); margin:8px auto 10px;
  }
  .map-controls{ top:76px; left:10px; }
  .legend-grid{ grid-template-columns:1fr; }
}

@media (max-width: 420px){
  .brand__sub{ display:none; }
  .leaflet-popup-content{ width:230px !important; }
}

/* Accesibilidad: respeta reduce-motion */
@media (prefers-reduced-motion: reduce){
  .sidebar{ transition:none; }
}