/* ============================================================
   COLEGIOS PERÚ — Estilos principales
   Tema: Cartográfico | Colores inspirados en el escudo del Perú
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700&family=Barlow:wght@300;400;500&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --sidebar-w:        380px;
  --header-h:         58px;

  /* Paleta */
  --color-bg:         #0f1923;
  --color-surface:    #162030;
  --color-surface-2:  #1e2e42;
  --color-border:     rgba(255,255,255,0.07);
  --color-accent:     #d4222a;   /* rojo peruano */
  --color-gold:       #c8a84b;   /* oro peruano */
  --color-text:       #dce8f0;
  --color-muted:      #7a96aa;
  --color-badge-pub:  #1a7f4b;
  --color-badge-priv: #1a5a7f;
  --color-badge-m:    #7f4b1a;
  --color-badge-f:    #7f1a66;
  --color-badge-mix:  #3d1a7f;

  /* Tipografía */
  --font-display:     'Barlow Condensed', sans-serif;
  --font-body:        'Barlow', sans-serif;

  /* Sombras */
  --shadow-card:      0 2px 16px rgba(0,0,0,0.5);
  --shadow-marker:    0 3px 8px rgba(0,0,0,0.6);

  /* Transiciones */
  --trans-fast:       150ms ease;
  --trans-med:        300ms ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body               { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-body);
  background:  var(--color-bg);
  color:       var(--color-text);
  font-size:   15px;
  line-height: 1.5;
}

/* ── Header ─────────────────────────────────────────────────── */
#header {
  position:       fixed;
  top: 0; left: 0; right: 0;
  height:         var(--header-h);
  background:     var(--color-surface);
  border-bottom:  1px solid var(--color-border);
  display:        flex;
  align-items:    center;
  padding:        0 18px;
  z-index:        1000;
  gap:            14px;
  box-shadow:     0 2px 20px rgba(0,0,0,0.4);
}

#header .logo {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
}
#header .logo-icon {
  width:  34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-accent), #a01820);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       18px;
  font-weight:     700;
  font-family:     var(--font-display);
  color:           #fff;
  letter-spacing:  -1px;
  box-shadow:      0 2px 8px rgba(212,34,42,0.4);
}
#header .logo-text {
  font-family: var(--font-display);
  font-size:   20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  line-height: 1.1;
}
#header .logo-text span {
  color:       var(--color-gold);
  font-size:   11px;
  font-weight: 400;
  display:     block;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Search bar */
#search-wrapper {
  flex:        1;
  max-width:   420px;
  position:    relative;
}
#search-input {
  width:            100%;
  padding:          8px 14px 8px 38px;
  background:       var(--color-surface-2);
  border:           1px solid var(--color-border);
  border-radius:    8px;
  color:            var(--color-text);
  font-family:      var(--font-body);
  font-size:        14px;
  outline:          none;
  transition:       border-color var(--trans-fast), box-shadow var(--trans-fast);
}
#search-input:focus {
  border-color: var(--color-gold);
  box-shadow:   0 0 0 3px rgba(200,168,75,0.15);
}
#search-input::placeholder { color: var(--color-muted); }
#search-wrapper .search-icon {
  position:   absolute;
  left:       12px;
  top:        50%;
  transform:  translateY(-50%);
  color:      var(--color-muted);
  font-size:  15px;
  pointer-events: none;
}

/* Counter badge */
#school-count {
  margin-left:  auto;
  background:   var(--color-surface-2);
  border:       1px solid var(--color-border);
  border-radius: 20px;
  padding:      4px 12px;
  font-size:    13px;
  color:        var(--color-muted);
  white-space:  nowrap;
  flex-shrink:  0;
}
#school-count strong {
  color:       var(--color-gold);
  font-weight: 600;
}

/* Locate-me button */
#btn-locate {
  background:   var(--color-accent);
  border:       none;
  border-radius: 8px;
  color:        #fff;
  padding:      8px 14px;
  font-family:  var(--font-body);
  font-size:    13px;
  font-weight:  500;
  cursor:       pointer;
  display:      flex;
  align-items:  center;
  gap:          6px;
  white-space:  nowrap;
  flex-shrink:  0;
  transition:   background var(--trans-fast), transform var(--trans-fast);
}
#btn-locate:hover  { background: #b81c23; }
#btn-locate:active { transform: scale(0.96); }

/* ── Layout ─────────────────────────────────────────────────── */
#app {
  position:   fixed;
  top:        var(--header-h);
  left:       0;
  right:      0;
  bottom:     0;
  display:    flex;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
#sidebar {
  width:          var(--sidebar-w);
  min-width:      var(--sidebar-w);
  background:     var(--color-surface);
  border-right:   1px solid var(--color-border);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  transition:     transform var(--trans-med), width var(--trans-med);
  z-index:        500;
}

#sidebar-header {
  padding:        14px 18px 10px;
  border-bottom:  1px solid var(--color-border);
  flex-shrink:    0;
}
#sidebar-header h2 {
  font-family:  var(--font-display);
  font-size:    17px;
  font-weight:  600;
  letter-spacing: 0.5px;
  color:        #fff;
  margin-bottom: 4px;
}
#sidebar-header p {
  font-size: 12px;
  color:     var(--color-muted);
}

#school-list {
  flex:       1;
  overflow-y: auto;
  padding:    8px 0;
}

/* Scrollbar personalizado */
#school-list::-webkit-scrollbar       { width: 5px; }
#school-list::-webkit-scrollbar-track { background: transparent; }
#school-list::-webkit-scrollbar-thumb { background: var(--color-surface-2); border-radius: 4px; }

/* Skeleton loader */
.skeleton-item {
  padding:  14px 18px;
  border-bottom: 1px solid var(--color-border);
}
.skeleton-line {
  height:        12px;
  border-radius: 4px;
  background:    linear-gradient(90deg, var(--color-surface-2) 25%, #243550 50%, var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation:     shimmer 1.5s infinite;
  margin-bottom: 6px;
}
.skeleton-line.short { width: 60%; }
.skeleton-line.long  { width: 90%; }
.skeleton-line.med   { width: 75%; }

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Accordion item ─────────────────────────────────────────── */
.school-item {
  border-bottom: 1px solid var(--color-border);
  transition:    background var(--trans-fast);
}
.school-item:last-child { border-bottom: none; }

.school-item-header {
  display:     flex;
  align-items: center;
  padding:     12px 18px;
  cursor:      pointer;
  gap:         10px;
  transition:  background var(--trans-fast);
  user-select: none;
}
.school-item-header:hover     { background: var(--color-surface-2); }
.school-item.active .school-item-header {
  background: rgba(212,34,42,0.12);
  border-left: 3px solid var(--color-accent);
}

.school-item-number {
  font-family: var(--font-display);
  font-size:   13px;
  color:       var(--color-muted);
  min-width:   24px;
  flex-shrink: 0;
}

.school-item-info {
  flex: 1;
  overflow: hidden;
}
.school-item-name {
  font-family:   var(--font-display);
  font-size:     15px;
  font-weight:   600;
  color:         #fff;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  line-height:   1.2;
}
.school-item-sub {
  font-size: 12px;
  color:     var(--color-muted);
  margin-top: 2px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.school-item-chevron {
  color:       var(--color-muted);
  font-size:   12px;
  transition:  transform var(--trans-fast);
  flex-shrink: 0;
}
.school-item.active .school-item-chevron { transform: rotate(180deg); }

/* Accordion body */
.school-item-body {
  display:  none;
  padding:  0 18px 16px 18px;
  animation: fadeIn 200ms ease;
}
.school-item.active .school-item-body { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Detail rows */
.detail-row {
  display:    flex;
  gap:        8px;
  margin-top: 8px;
  font-size:  13px;
  align-items: flex-start;
}
.detail-label {
  color:      var(--color-muted);
  min-width:  80px;
  flex-shrink: 0;
  font-size:  12px;
  padding-top: 1px;
}
.detail-value {
  color:    var(--color-text);
  word-break: break-word;
}

/* Badges */
.badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  font-size:     11px;
  font-weight:   500;
  padding:       2px 8px;
  border-radius: 20px;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  margin-right:  4px;
}
.badge-pub   { background: rgba(26,127,75,0.25);  color: #4ecf8c; border: 1px solid rgba(26,127,75,0.4); }
.badge-priv  { background: rgba(26,90,127,0.25);  color: #5ba8e0; border: 1px solid rgba(26,90,127,0.4); }
.badge-m     { background: rgba(127,75,26,0.25);  color: #e0a05b; border: 1px solid rgba(127,75,26,0.4); }
.badge-f     { background: rgba(127,26,102,0.25); color: #e05bb5; border: 1px solid rgba(127,26,102,0.4); }
.badge-mix   { background: rgba(61,26,127,0.25);  color: #9b6be0; border: 1px solid rgba(61,26,127,0.4); }

/* Go to map button */
.btn-goto-map {
  display:      inline-flex;
  align-items:  center;
  gap:          6px;
  margin-top:   12px;
  padding:      7px 14px;
  background:   var(--color-accent);
  color:        #fff;
  border:       none;
  border-radius: 6px;
  font-size:    13px;
  font-family:  var(--font-body);
  cursor:       pointer;
  transition:   background var(--trans-fast);
}
.btn-goto-map:hover { background: #b81c23; }

/* Empty state */
#empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  height:          100%;
  padding:         30px;
  text-align:      center;
  color:           var(--color-muted);
  gap:             10px;
}
#empty-state .empty-icon { font-size: 40px; opacity: 0.5; }
#empty-state p            { font-size: 14px; }

/* ── Mapa ────────────────────────────────────────────────────── */
#map-wrapper {
  flex:     1;
  position: relative;
  overflow: hidden;
}

#map {
  width:  100%;
  height: 100%;
}

/* Loading overlay sobre el mapa */
#map-loading {
  position:        absolute;
  top:    14px;
  right:  14px;
  background:      var(--color-surface);
  border:          1px solid var(--color-border);
  border-radius:   8px;
  padding:         8px 14px;
  font-size:       13px;
  color:           var(--color-gold);
  display:         none;
  align-items:     center;
  gap:             8px;
  z-index:         800;
  box-shadow:      var(--shadow-card);
}
#map-loading.visible { display: flex; }

.spinner {
  width:            16px;
  height:           16px;
  border:           2px solid rgba(200,168,75,0.3);
  border-top-color: var(--color-gold);
  border-radius:    50%;
  animation:        spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Marcadores Leaflet customizados ────────────────────────── */
.custom-marker {
  width:         30px;
  height:        30px;
  border-radius: 50% 50% 50% 0;
  transform:     rotate(-45deg);
  border:        2px solid rgba(255,255,255,0.8);
  box-shadow:    var(--shadow-marker);
  transition:    transform var(--trans-fast), width var(--trans-fast), height var(--trans-fast);
}
.custom-marker.pub   { background: #1a7f4b; }
.custom-marker.priv  { background: #1a5a7f; }
.custom-marker.mixed { background: #7f4b1a; }
.custom-marker.default { background: var(--color-accent); }

.custom-marker-inner {
  width:           100%;
  height:          100%;
  border-radius:   50% 50% 50% 0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transform:       rotate(45deg);   /* cancela el rotate del padre */
  font-size:       12px;
  color:           rgba(255,255,255,0.9);
}

.marker-icon-wrapper.active .custom-marker {
  width:  36px;
  height: 36px;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 4px rgba(200,168,75,0.25), var(--shadow-marker);
}

/* Popup Leaflet */
.leaflet-popup-content-wrapper {
  background:    var(--color-surface) !important;
  border:        1px solid var(--color-border) !important;
  border-radius: 10px !important;
  box-shadow:    var(--shadow-card) !important;
  color:         var(--color-text) !important;
}
.leaflet-popup-tip { background: var(--color-surface) !important; }
.leaflet-popup-close-button { color: var(--color-muted) !important; }

.popup-title {
  font-family:  var(--font-display);
  font-size:    16px;
  font-weight:  700;
  color:        #fff;
  margin-bottom: 6px;
  line-height:  1.2;
}
.popup-sub {
  font-size:    13px;
  color:        var(--color-muted);
  margin-bottom: 8px;
}
.popup-badges { margin-bottom: 8px; }
.popup-tel {
  font-size: 13px;
  color:     var(--color-gold);
}
.popup-btn {
  display:      inline-flex;
  align-items:  center;
  gap:          5px;
  margin-top:   10px;
  padding:      6px 12px;
  background:   var(--color-accent);
  color:        #fff;
  border:       none;
  border-radius: 5px;
  font-size:    12px;
  cursor:       pointer;
  width:        100%;
  justify-content: center;
  font-family:  var(--font-body);
  transition:   background var(--trans-fast);
}
.popup-btn:hover { background: #b81c23; }

/* ── Panel mobile ────────────────────────────────────────────── */
#mobile-panel {
  display:    none;
  position:   absolute;
  bottom:     0; left: 0; right: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-radius: 14px 14px 0 0;
  padding:    20px 20px 30px;
  z-index:    700;
  transform:  translateY(100%);
  transition: transform var(--trans-med);
  box-shadow: 0 -4px 30px rgba(0,0,0,0.5);
  max-height: 75vh;
  overflow-y: auto;
}
#mobile-panel.open {
  transform: translateY(0);
}
#mobile-panel-close {
  position:   absolute;
  top:  12px; right: 14px;
  background: var(--color-surface-2);
  border:     none;
  color:      var(--color-muted);
  width:      28px; height: 28px;
  border-radius: 50%;
  font-size:  16px;
  cursor:     pointer;
  display:    flex;
  align-items: center;
  justify-content: center;
}
#mobile-panel .school-detail { padding-top: 4px; }
.drag-handle {
  width:        40px; height: 4px;
  background:   var(--color-border);
  border-radius: 2px;
  margin:       0 auto 16px;
}

/* ── Leyenda del mapa ────────────────────────────────────────── */
#map-legend {
  position:    absolute;
  bottom:      24px;
  left:        14px;
  background:  var(--color-surface);
  border:      1px solid var(--color-border);
  border-radius: 8px;
  padding:     10px 14px;
  z-index:     800;
  font-size:   12px;
  box-shadow:  var(--shadow-card);
}
#map-legend h4 {
  font-family:   var(--font-display);
  font-size:     12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:         var(--color-muted);
  margin-bottom: 8px;
}
.legend-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 5px;
}
.legend-dot {
  width:         10px; height: 10px;
  border-radius: 50%;
  flex-shrink:   0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --header-h: 52px; }

  #header .logo-text span,
  #school-count              { display: none; }
  #search-wrapper            { max-width: none; flex: 1; }

  #sidebar   { display: none; }
  #map-wrapper { flex: 1; }

  #mobile-panel  { display: block; }
  #map-legend    { bottom: 20px; left: 8px; }

  #btn-locate span { display: none; }
  #btn-locate      { padding: 8px 10px; }
}

@media (max-width: 480px) {
  #header { padding: 0 10px; gap: 8px; }
}