/* ============================================================
   UNIR · Buscador de centros de bachillerato
   Hoja de estilos — sobreescribe Bootstrap 5
   Cárgala DESPUÉS de bootstrap.min.css:
   <link rel="stylesheet" href="bootstrap.min.css">
   <link rel="stylesheet" href="unir-centros.css">
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS DE DISEÑO
   Ajusta --unir-primary al azul oficial de la marca si difiere.
   ------------------------------------------------------------ */
:root {
  /* Marca */
  --unir-primary:       #1655A2;   /* azul UNIR refinado (sustituye al #0d6efd de Bootstrap) */
  --unir-primary-hover: #114685;
  --unir-primary-tint:  #E8F0FB;   /* fondos seleccionados, chips, hover de fila */
  --unir-primary-soft:  #C7DBF5;   /* bordes de elementos activos */

  /* Neutros (tono frío, coherente con el azul) */
  --unir-bg:            #F5F7FA;   /* fondo de página */
  --unir-surface:       #FFFFFF;   /* tarjetas, tabla, panel */
  --unir-border:        #E2E8F0;
  --unir-text:          #1A2433;   /* texto principal */
  --unir-text-2:        #5A6B80;   /* texto secundario, etiquetas */
  --unir-text-3:        #8A97A8;   /* placeholders, metadatos */

  /* Semánticos (estado RVOE, sostenimiento) */
  --unir-ok:            #157A4C;   /* Vigente */
  --unir-ok-bg:         #E2F4EA;
  --unir-warn:          #9A6700;   /* En trámite */
  --unir-warn-bg:       #FCF1DB;
  --unir-danger:        #B3261E;   /* Retirado */
  --unir-danger-bg:     #FBE9E7;

  /* Geometría y elevación */
  --unir-radius:        10px;
  --unir-radius-sm:     6px;
  --unir-shadow-1:      0 1px 2px rgba(16, 32, 56, .06), 0 1px 3px rgba(16, 32, 56, .08);
  --unir-shadow-2:      0 4px 12px rgba(16, 32, 56, .10), 0 2px 4px rgba(16, 32, 56, .06);
  --unir-shadow-panel: -8px 0 24px rgba(16, 32, 56, .14);

  /* Tipografía */
  --unir-font: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
body {
  font-family: var(--unir-font);
  background: var(--unir-bg);
  color: var(--unir-text);
  font-size: 14px;
}
a       { color: var(--unir-primary); text-decoration: none; }
a:hover { color: var(--unir-primary-hover); text-decoration: underline; }

h1, .page-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--unir-text);
}
.page-subtitle { color: var(--unir-text-2); font-size: 14px; }

/* ------------------------------------------------------------
   3. BOTONES (override Bootstrap)
   ------------------------------------------------------------ */
.btn { border-radius: var(--unir-radius-sm); font-weight: 600; font-size: 14px; }

.btn-primary {
  --bs-btn-bg: var(--unir-primary);
  --bs-btn-border-color: var(--unir-primary);
  --bs-btn-hover-bg: var(--unir-primary-hover);
  --bs-btn-hover-border-color: var(--unir-primary-hover);
  --bs-btn-active-bg: var(--unir-primary-hover);
  box-shadow: var(--unir-shadow-1);
}
.btn-outline-primary {
  --bs-btn-color: var(--unir-primary);
  --bs-btn-border-color: var(--unir-primary-soft);
  --bs-btn-hover-bg: var(--unir-primary-tint);
  --bs-btn-hover-color: var(--unir-primary-hover);
  --bs-btn-hover-border-color: var(--unir-primary-soft);
}
/* Botón secundario neutro (Exportar CSV, Limpiar) */
.btn-ghost {
  background: var(--unir-surface);
  border: 1px solid var(--unir-border);
  color: var(--unir-text-2);
}
.btn-ghost:hover { border-color: var(--unir-primary-soft); color: var(--unir-primary); background: var(--unir-primary-tint); }

/* Toggle de vista Tabla / Mapa (segmented control) */
.view-toggle {
  display: inline-flex;
  background: var(--unir-surface);
  border: 1px solid var(--unir-border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  box-shadow: var(--unir-shadow-1);
}
.view-toggle .btn {
  border: 0; border-radius: 999px;
  padding: 5px 16px; font-size: 13px;
  color: var(--unir-text-2); background: transparent;
}
.view-toggle .btn.active { background: var(--unir-primary); color: #fff; }

/* ------------------------------------------------------------
   4. FORMULARIOS / FILTROS
   ------------------------------------------------------------ */
.form-control, .form-select {
  border-radius: var(--unir-radius-sm);
  border-color: var(--unir-border);
  font-size: 14px;
  color: var(--unir-text);
}
.form-control::placeholder { color: var(--unir-text-3); }
.form-control:focus, .form-select:focus {
  border-color: var(--unir-primary);
  box-shadow: 0 0 0 3px var(--unir-primary-tint);
}
.form-label, .filter-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--unir-text-2); margin-bottom: 4px;
}

/* Tarjeta de filtros */
.filters-card {
  position: relative;
  z-index: 3; /* por encima de .table-centros thead th (z-index: 2), que es sticky */
  background: var(--unir-surface);
  border: 1px solid var(--unir-border);
  border-radius: var(--unir-radius);
  box-shadow: var(--unir-shadow-1);
}
.filters-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--unir-border);
  padding: 12px 20px;
}
/* Cuerpo colapsable: úsalo con el plugin Collapse de Bootstrap
   <div class="collapse show" id="filtrosAvanzados"> */

/* Chips de filtros activos */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--unir-primary-tint);
  border: 1px solid var(--unir-primary-soft);
  color: var(--unir-primary-hover);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 13px; font-weight: 600;
}
.chip .chip-close {
  width: 18px; height: 18px; border-radius: 50%;
  border: 0; background: transparent; color: inherit;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.chip .chip-close:hover { background: rgba(22, 85, 162, .15); }

/* ------------------------------------------------------------
   5. TABLA DE RESULTADOS
   ------------------------------------------------------------ */
.results-card {
  background: var(--unir-surface);
  border: 1px solid var(--unir-border);
  border-radius: var(--unir-radius);
  box-shadow: var(--unir-shadow-1);
  overflow: hidden;
}
.results-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--unir-border);
}
.results-count { font-size: 14px; color: var(--unir-text-2); }
.results-count strong { color: var(--unir-text); font-weight: 700; }

.table-centros { margin: 0; font-size: 14px; }
.table-centros thead th {
  background: #FAFBFD;
  border-bottom: 1px solid var(--unir-border);
  color: var(--unir-text-2);
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 16px;
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;  /* cabecera fija con scroll */
}
.table-centros tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #EEF2F7;
  vertical-align: middle;
}
.table-centros tbody tr { cursor: pointer; }
.table-centros tbody tr:hover     { background: #F4F8FE; }
.table-centros tbody tr.selected  { background: var(--unir-primary-tint); box-shadow: inset 3px 0 0 var(--unir-primary); }

/* Celda principal: institución + CCT en dos líneas (evita 2 columnas) */
.cell-title { font-weight: 600; color: var(--unir-text); }
.cell-sub   { font-size: 12.5px; color: var(--unir-text-3); font-family: "SF Mono", Consolas, monospace; }

/* Badges de estado */
.badge-estado { border-radius: 999px; font-size: 12px; font-weight: 600; padding: 3px 10px; }
.badge-vigente  { background: var(--unir-ok-bg);     color: var(--unir-ok); }
.badge-tramite  { background: var(--unir-warn-bg);   color: var(--unir-warn); }
.badge-retirado { background: var(--unir-danger-bg); color: var(--unir-danger); }
.badge-nivel {
  background: #EEF2F7; color: var(--unir-text-2);
  border-radius: var(--unir-radius-sm);
  font-size: 12px; font-weight: 600; padding: 3px 8px;
}

/* Paginación */
.pagination { --bs-pagination-active-bg: var(--unir-primary);
              --bs-pagination-active-border-color: var(--unir-primary);
              --bs-pagination-color: var(--unir-text-2);
              --bs-pagination-border-color: var(--unir-border);
              font-size: 13px; }

/* ------------------------------------------------------------
   6. PANEL LATERAL DE DETALLE
   Estructura: <aside class="detail-panel open"> … </aside>
   ------------------------------------------------------------ */
.detail-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 92vw;
  background: var(--unir-surface);
  box-shadow: var(--unir-shadow-panel);
  border-left: 1px solid var(--unir-border);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 1050;
  display: flex; flex-direction: column;
}
.detail-panel.open { transform: translateX(0); }
.detail-panel .panel-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--unir-border);
}
.detail-panel .panel-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.detail-panel .panel-footer {
  padding: 14px 24px; border-top: 1px solid var(--unir-border);
  display: flex; gap: 10px;
}
.detail-row { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; padding: 8px 0; font-size: 14px; }
.detail-row dt { color: var(--unir-text-2); font-weight: 400; }
.detail-row dd { color: var(--unir-text); margin: 0; font-weight: 600; }

/* ------------------------------------------------------------
   7. VISTA MAPA / SPLIT VIEW
   Estructura:
   <div class="split-view">
     <div class="split-map"> …mapa… </div>
     <div class="split-list"> …tarjetas… </div>
   </div>
   ------------------------------------------------------------ */
.split-view {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 0;
  height: calc(100vh - 220px);   /* ajusta según altura de tu cabecera+filtros */
  min-height: 480px;
  border: 1px solid var(--unir-border);
  border-radius: var(--unir-radius);
  overflow: hidden;
  background: var(--unir-surface);
  box-shadow: var(--unir-shadow-1);
}
.split-map { position: relative; }
.split-list {
  border-left: 1px solid var(--unir-border);
  overflow-y: auto;
  background: #FAFBFD;
}
.centro-card {
  background: var(--unir-surface);
  border: 1px solid var(--unir-border);
  border-radius: var(--unir-radius-sm);
  padding: 12px 14px;
  margin: 8px 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.centro-card:hover { border-color: var(--unir-primary-soft); box-shadow: var(--unir-shadow-1); }
.centro-card.selected { border-color: var(--unir-primary); box-shadow: 0 0 0 2px var(--unir-primary-tint); }

/* Leyenda del mapa */
.map-legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 5;
  background: var(--unir-surface);
  border: 1px solid var(--unir-border);
  border-radius: var(--unir-radius-sm);
  box-shadow: var(--unir-shadow-1);
  padding: 10px 14px; font-size: 12.5px; color: var(--unir-text-2);
  display: grid; gap: 6px;
}
.legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: -1px; }

/* Clusters personalizados (Google Maps MarkerClusterer con renderer propio) */
.cluster-marker {
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--unir-primary);
  color: #fff; font-weight: 700; font-size: 13px;
  border: 3px solid rgba(255, 255, 255, .85);
  box-shadow: var(--unir-shadow-2);
}
/* tamaños por volumen: s (≤50), m (≤500), l (>500) */
.cluster-marker.s { width: 36px; height: 36px; }
.cluster-marker.m { width: 46px; height: 46px; font-size: 14px; }
.cluster-marker.l { width: 58px; height: 58px; font-size: 15px; }

/* ------------------------------------------------------------
   8. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 992px) {
  .split-view { grid-template-columns: 1fr; grid-template-rows: 55% 45%; }
  .split-list { border-left: 0; border-top: 1px solid var(--unir-border); }
  .detail-panel { width: 100vw; }
}

/* ------------------------------------------------------------
   9. INTEGRACIÓN CON EL PROYECTO (añadido al portar el mockup)
   ------------------------------------------------------------ */

/* Puente Bootstrap -> tokens de marca: cualquier .btn-primary/focus-ring
   residual de Bootstrap hereda el azul UNIR sin tener que perseguir cada
   clase por separado en las plantillas. */
:root {
  --bs-primary: var(--unir-primary);
  --bs-primary-rgb: 22, 85, 162;
}

/* Reskin de Choices.js con los tokens de marca (sustituye el bloque de
   colores teal->azul que antes vivía inline en cada plantilla). */
.choices__list--multiple .choices__item {
  background-color: var(--unir-primary);
  border-color: var(--unir-primary);
}
.choices__list--multiple .choices__item.is-highlighted {
  background-color: var(--unir-primary-hover);
  border-color: var(--unir-primary-hover);
}

/* Cabecera del sitio: wordmark + separador + título/subtítulo. */
.site-header {
  background: var(--unir-surface);
  border-bottom: 1px solid var(--unir-border);
  padding: 18px 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  margin-bottom: 24px;
}
.site-header .brand { display: flex; align-items: center; gap: 20px; }
.site-header .wordmark {
  font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--unir-primary);
}
.site-header .divider { width: 1px; height: 28px; background: var(--unir-border); }
.site-header h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.site-header p { font-size: 12.5px; color: var(--unir-text-2); margin: 0; }

/* Paginación numérica propia (tabla.js/mapa.js vía UNIR.renderPaginacion).
   Los botones deshabilitados (‹/› en los extremos) se generan como <a> sin
   href, y el activo como <span>, así que los selectores no fijan la etiqueta
   y usan solo la clase. */
.paginacion { display: flex; gap: 4px; font-size: 13px; font-weight: 600; align-items: center; }
.paginacion a, .paginacion .active, .paginacion .disabled {
  display: inline-block;
  border: 1px solid var(--unir-border); border-radius: var(--unir-radius-sm);
  padding: 6px 11px; color: var(--unir-text-2); cursor: pointer; line-height: 1;
}
.paginacion a:hover { border-color: var(--unir-primary-soft); color: var(--unir-primary); text-decoration: none; }
.paginacion .active { background: var(--unir-primary); border-color: var(--unir-primary); color: #fff; }
.paginacion .disabled { color: var(--unir-text-3); cursor: default; }
.paginacion .ellipsis { padding: 6px 4px; border: 0; color: var(--unir-text-3); }