/* DirectorioCEE — estilos globales (port de app/globals.css de la app Next.js).
 * Las utilidades Tailwind las genera public/js/tailwind.js en el navegador;
 * aquí solo van variables, componentes (.btn, .card, .badge...) y utilidades propias. */

/* ─── FUENTES ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─── VARIABLES ───────────────────────────────────────────── */
:root {
  /* Marca (propuesta visual 2026): naranja #fd902a · azul #0163db · marino #07264c */
  --brand-orange:       #fd902a;
  --brand-orange-hover: #ec7b12;
  --brand-orange-50:    #fff4e8;
  --brand-blue:         #0163db;
  --brand-blue-hover:   #0152b8;
  --brand-navy:         #07264c;
  --brand-navy-hover:   #0b3566;

  /* Colores primarios */
  --primary:        #07264c;
  --primary-light:  #0163db;
  --primary-hover:  #0152b8;
  --primary-50:     #eef5ff;
  --primary-100:    #dbe9fd;
  --primary-200:    #bcd6fb;
  --primary-dark:   #061f3f;
  --primary-darker: #041832;

  /* Acento (verde: éxito / verificado) */
  --accent:         #10B981;
  --accent-light:   #d1fae5;
  --accent-hover:   #059669;

  /* Highlight */
  --highlight:      #F59E0B;
  --highlight-light:#fef3c7;
  --highlight-hover:#d97706;

  /* Superficies */
  --surface:        #FFFFFF;
  --surface-muted:  #F5F8FC;
  --surface-dark:   #0F172A;
  --surface-card:   #FFFFFF;

  /* Bordes */
  --border:         #E3EAF4;
  --border-dark:    #C9D5E6;

  /* Texto */
  --text:           #13294B;
  --text-muted:     #5B6B82;
  --text-secondary: #5B6B82;
  --text-light:     #94A3B8;
  --text-white:     #FFFFFF;

  /* Radios */
  --radius-sm:      6px;
  --radius:         10px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --radius-full:    9999px;

  /* Sombras */
  --shadow-sm:      0 1px 2px rgba(7,38,76,0.04), 0 2px 8px rgba(7,38,76,0.04);
  --shadow:         0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:      0 12px 36px rgba(7,38,76,0.10), 0 4px 12px rgba(7,38,76,0.05);
  --shadow-xl:      0 20px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-primary: 0 4px 16px rgba(1,99,219,0.22);
  --shadow-accent:  0 4px 16px rgba(253,144,42,0.30);

  /* Transiciones */
  --transition:     all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── BASE ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  color: var(--text);
  background: var(--surface-muted);
  line-height: 1.6;
}

/* ─── SKIP LINK ──────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--primary-light);
  color: var(--surface);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.1s;
}

.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ─── ANIMACIONES ─────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.8; }
  70%  { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── UTILIDADES PERSONALIZADAS ───────────────────────────── */

/* Footer gradient banner */
.bg-gradient-footer {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, var(--primary-darker) 100%);
}

/* Cards de cristal — solo para páginas auth sobre fondos oscuros */
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow);
}

/* Botones — estilo de la home: sólidos planos, radio 10px, outline sobre blanco */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius);
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  white-space: nowrap;
}

.btn-primary {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
  background: var(--brand-blue-hover);
  transform: translateY(-1px);
}

/* CTA principal: naranja de marca */
.btn-accent {
  background: var(--brand-orange);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-accent:hover {
  background: var(--brand-orange-hover);
  transform: translateY(-1px);
}

.btn-navy {
  background: var(--brand-navy);
  color: #fff;
}
.btn-navy:hover {
  background: var(--brand-navy-hover);
  transform: translateY(-1px);
}

.btn-outline {
  background: var(--surface);
  color: var(--brand-navy);
  border-color: var(--primary-200);
}
.btn-outline:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  background: var(--primary-50);
  transform: translateY(-1px);
}

.btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
}

.btn-pill { border-radius: var(--radius-full); }

.btn-sm  { padding: 0.4rem 0.875rem; font-size: 0.8125rem; }
.btn-lg  { padding: 0.875rem 1.75rem; font-size: 1rem; border-radius: var(--radius-lg); }
.btn-xl  { padding: 1rem 2rem; font-size: 1.0625rem; border-radius: var(--radius-lg); }
.btn:disabled,
.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn:disabled:hover,
.btn[disabled]:hover { transform: none; box-shadow: none; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-social    { background: var(--brand-orange-50); color: var(--brand-orange-hover); }
.badge-private   { background: var(--primary-50);      color: var(--brand-blue); }
.badge-remote    { background: var(--primary-50);      color: var(--brand-blue); }
.badge-onsite    { background: var(--brand-orange-50); color: var(--brand-orange-hover); }
.badge-mixed     { background: #eef2f7;                color: var(--brand-navy); }
.badge-verified  { background: var(--accent-light);    color: var(--accent-hover); }
.badge-pending   { background: var(--highlight-light); color: var(--highlight-hover); }
.badge-featured  { background: var(--highlight-light); color: var(--highlight-hover); }
.badge-new       { background: var(--brand-orange-50); color: var(--brand-orange-hover); }

/* Cards */
.card {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--primary-200);
}

/* Cabeceras de sección — antetítulo naranja, título marino, subtítulo gris */
.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: 0.625rem;
}
.section-title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--brand-navy);
}
.section-subtitle {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Enlace con flecha (tarjetas) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-orange);
  transition: var(--transition);
}
.link-arrow:hover { color: var(--brand-orange-hover); gap: 0.5rem; }

/* Etiqueta de categoría (tarjetas de contenido) */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--brand-orange-50);
  color: var(--brand-orange-hover);
}

/* Secciones */
.section-padding  { padding: 4rem 0; }
.section-padding-sm { padding: 3rem 0; }
@media (min-width: 768px) {
  .section-padding { padding: 5.5rem 0; }
}
.container-site {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  /* Solo horizontal: un `padding` abreviado anularía las utilidades pt-/py- de Tailwind */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Gradientes de fondo */
.bg-gradient-hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #1a3a5c 100%);
}

.bg-gradient-section {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-muted) 100%);
}

/* Separador de sección */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 0 auto;
  max-width: 800px;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Animación de entrada */
.animate-in { animation: fadeIn 0.5s ease forwards; }
.animate-in-left { animation: fadeInLeft 0.5s ease forwards; }
.animate-in-right { animation: fadeInRight 0.5s ease forwards; }
.animate-scale { animation: scaleIn 0.4s ease forwards; }

/* Inputs */
.input-base {
  width: 100%;
  padding: 0.625rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--text);
  background: var(--surface);
  transition: var(--transition);
  outline: none;
}
.input-base:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(1,99,219,0.12);
}
.input-base::placeholder { color: var(--text-light); }

/* Search input wrapper — flex sibling pattern avoids padding-shorthand fights */
.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.625rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: var(--transition);
}
.search-input-wrapper:focus-within {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(1,99,219,0.12);
}
.search-input-wrapper input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.875rem;
  color: var(--text);
  padding: 0;
}
.search-input-wrapper input::placeholder { color: var(--text-light); }

/* Select */
.select-base {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

/* ─── PRINT ──────────────────────────────────────────────── */
/* Justificantes imprimibles: solo el contenido del documento */
@media print {
  header, footer, nav, aside { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: none; }
  /* Panel: anular el hueco del sidebar fijo en vistas imprimibles */
  .lg\:ml-64 { margin-left: 0 !important; }
  main { padding: 0 !important; }
}

/* ─── MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-in,
  .animate-in-left,
  .animate-in-right,
  .animate-scale {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .btn-primary:hover,
  .btn-accent:hover,
  .btn-navy:hover,
  .btn-outline:hover,
  .btn-outline-white:hover {
    transform: none !important;
  }

  .card:hover {
    transform: none !important;
  }
}

/* ─── ALPINE ─────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ─── ICONOS (resources/icons, lucide) ───────────────────── */
svg.lucide { flex-shrink: 0; } /* display: block lo pone el preflight de Tailwind, igual que lucide-react */

/* ─── PROSE (contenido editorial HTML) ───────────────────── */
.prose-cee { color: var(--text); line-height: 1.75; }
.prose-cee h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 0.75rem; color: #111827; }
.prose-cee h3 { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 0.5rem; color: #111827; }
.prose-cee p { margin: 0 0 1rem; }
.prose-cee ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 1rem; }
.prose-cee ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 1rem; }
.prose-cee a { color: var(--primary-light); text-decoration: underline; }
.prose-cee blockquote { border-left: 4px solid var(--border-dark); padding-left: 1rem; color: var(--text-muted); margin: 0 0 1rem; }

/* ============================================================
   Directorio: barra de filtros, tarjeta en lista y mapa
   ============================================================ */
.dir-filter-btn {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 56px;
  padding: 0.5rem 0.875rem; background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); transition: border-color .15s, box-shadow .15s;
}
.dir-filter-btn:hover { border-color: var(--border-dark); }
.dir-filter-btn:focus-visible { outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(1,99,219,0.12); }
.dir-filter-btn.is-active { border-color: var(--primary-200); background: var(--primary-50); }
.dir-filter-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dir-filter-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.dir-filter-option {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; min-height: 36px;
  border-radius: var(--radius-sm); font-size: 0.8125rem; color: var(--text); cursor: pointer;
}
.dir-filter-option:hover { background: var(--surface-muted); }

.dir-chip { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.625rem; border-radius: var(--radius-full); border: 1px solid; }
.dir-chip-blue  { background: var(--primary-50); color: var(--brand-blue); border-color: var(--primary-100); }
.dir-chip-amber { background: var(--highlight-light); color: var(--highlight-hover); border-color: #fde68a; }
.dir-chip-green { background: var(--accent-light); color: var(--accent-hover); border-color: #a7f3d0; }

.dir-split { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) {
  .dir-split { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); align-items: start; }
  .dir-split-map { position: sticky; top: var(--dir-sticky-top, 9.5rem); height: calc(100dvh - var(--dir-sticky-top, 9.5rem) - 1rem); }
}
@media (max-width: 1023px) {
  .dir-split-map { height: calc(100dvh - 14rem); min-height: 380px; }
}

/* Tarjeta horizontal */
.dir-row { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 0.875rem 0.875rem 1rem; transition: box-shadow .15s, border-color .15s; border: 1.5px solid transparent; }
.dir-row:hover, .dir-row.is-map-hover { border-color: var(--primary-200); box-shadow: var(--shadow); }
.dir-row-avatar {
  width: 56px; height: 56px; border-radius: 9999px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.125rem;
}
.dir-row-actions { display: flex; flex-direction: column; gap: 0.5rem; width: 8.5rem; flex-shrink: 0; }
@media (max-width: 639px) {
  .dir-row { flex-wrap: wrap; align-items: flex-start; }
  .dir-row-avatar { width: 44px; height: 44px; font-size: 0.9375rem; }
  .dir-row-actions { flex-direction: row; width: 100%; }
  .dir-row-actions > * { flex: 1; }
}

/* Mapa */
.dir-map { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #e8eef4; border: 1px solid var(--border); isolation: isolate; }
.dir-map-canvas { position: absolute; inset: 0; background: #e8eef4; }
.dir-map .leaflet-container { font-family: inherit; }
.dir-map-layers {
  position: absolute; top: 0.875rem; left: 0.875rem; z-index: 500; display: flex; padding: 3px;
  background: var(--surface); border-radius: var(--radius-full); box-shadow: var(--shadow);
}
.dir-map-layers button { padding: 0.375rem 1.125rem; font-size: 0.8125rem; font-weight: 600; border-radius: var(--radius-full); color: var(--brand-navy); min-height: 34px; }
.dir-map-layers button.is-active { background: var(--brand-navy); color: #fff; }
.dir-map-search-area {
  position: absolute; top: 0.875rem; left: 50%; transform: translateX(-50%); z-index: 500;
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; min-height: 36px;
  background: var(--surface); color: var(--brand-blue); font-size: 0.8125rem; font-weight: 600;
  border-radius: var(--radius-full); box-shadow: var(--shadow);
}
.dir-map-search-area[hidden] { display: none; }
.dir-map-controls { position: absolute; right: 0.875rem; bottom: 1.75rem; z-index: 500; display: flex; flex-direction: column; gap: 1px; }
.dir-map-controls button {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--brand-navy); box-shadow: var(--shadow-sm); border: 1px solid var(--border);
}
.dir-map-controls [data-zoom="in"] { border-radius: 8px 8px 0 0; }
.dir-map-controls [data-zoom="out"] { border-radius: 0 0 8px 8px; }
.dir-map-controls [data-locate], .dir-map-controls [data-reset] { border-radius: 8px; }
.dir-map-controls button:hover { background: var(--surface-muted); }
.dir-map-controls [data-locate].is-busy { color: var(--brand-blue); animation: dir-pulse 1s ease-in-out infinite; }
@keyframes dir-pulse { 50% { opacity: .45; } }
.dir-map-status {
  position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); z-index: 500;
  padding: 0.375rem 0.875rem; font-size: 0.75rem; background: var(--brand-navy); color: #fff; border-radius: var(--radius-full); white-space: nowrap;
}
.dir-map-status[hidden] { display: none; }

.dir-cluster {
  display: flex; align-items: center; justify-content: center; border-radius: 9999px;
  background: rgba(1,99,219,.22); transition: transform .15s;
}
.dir-cluster span {
  width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  background: var(--brand-blue); color: #fff; font-weight: 700; font-size: 0.8125rem; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(7,38,76,.25);
}
.dir-cluster.is-large { background: rgba(253,144,42,.28); }
.dir-cluster.is-large span { background: var(--brand-orange); font-size: 0.9375rem; }
.dir-cluster.is-active, .dir-point.is-active { transform: scale(1.18); z-index: 1000 !important; }
.dir-cluster.is-active span { background: var(--brand-navy); }
.dir-point { border-radius: 9999px; background: var(--brand-orange); border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(7,38,76,.35); transition: transform .15s; }
.dir-point.is-active { background: var(--brand-navy); }

.dir-popup { display: flex; flex-direction: column; gap: 0.25rem; min-width: 11rem; }
.dir-popup strong { color: var(--brand-navy); font-size: 0.8125rem; line-height: 1.3; }
.dir-popup-loc { font-size: 0.75rem; color: var(--text-muted); }
.dir-popup a { font-size: 0.75rem; font-weight: 600; color: var(--brand-blue); margin-top: 0.125rem; }
.dir-popup .badge { align-self: flex-start; }
.dir-map .leaflet-popup-content-wrapper { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.dir-map .leaflet-popup-content { margin: 0.75rem 0.875rem; }
/* Callejero de Esri algo más neutro (no afecta a satélite) */
.dir-map:not(.is-satellite) .leaflet-tile-pane { filter: saturate(0.8) brightness(1.02); }

/* Tarjeta en cuadrícula */
.dir-tile { display: flex; flex-direction: column; overflow: hidden; padding: 0; border: 1.5px solid transparent; transition: box-shadow .15s, border-color .15s; }
.dir-tile:hover, .dir-tile.is-map-hover { border-color: var(--primary-200); box-shadow: var(--shadow); }
.dir-tile-media {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 7; overflow: hidden;
  background: linear-gradient(135deg, var(--primary-50), var(--primary-100) 60%, #e6effd); color: var(--brand-blue);
}
.dir-tile-body { display: flex; flex-direction: column; flex: 1; padding: 0 1rem 1rem; }
.dir-tile-avatar {
  width: 52px; height: 52px; border-radius: 9999px; flex-shrink: 0; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1rem;
  border: 3px solid var(--surface); box-shadow: 0 2px 6px rgba(7,38,76,.15);
}
.dir-tile-tag { font-size: 0.6875rem; padding: 0.1875rem 0.625rem; border-radius: var(--radius-full); background: var(--surface-muted); border: 1px solid var(--border); color: var(--text-muted); }

/* Centros destacados (plan con visibilidad): borde naranja con franja izquierda, fondo cálido
   suave, anillo en el logo y pestaña "Destacado" en la esquina. Sustituye al ring de Tailwind,
   que quedaba tapado por el box-shadow de .card */
.dir-row.is-featured, .dir-tile.is-featured {
  position: relative;
  border-color: var(--brand-orange);
  /* La franja es el propio borde (sigue la curva de la esquina; un ::before se veía cortado) */
  border-left-width: 5px;
  background: linear-gradient(105deg, #fff7ef 0%, var(--surface) 55%);
  box-shadow: var(--shadow);
}
.dir-row.is-featured { padding-top: 2.25rem; padding-left: calc(1rem - 3.5px); }
.dir-row.is-featured:hover, .dir-row.is-featured.is-map-hover,
.dir-tile.is-featured:hover, .dir-tile.is-featured.is-map-hover {
  border-color: var(--brand-orange-hover);
  box-shadow: var(--shadow-lg);
}
.dir-row.is-featured .dir-row-avatar, .dir-tile.is-featured .dir-tile-avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--brand-orange); }
.dir-featured-tab {
  position: absolute; z-index: 10; top: -1.5px; left: -5px;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem 1.25rem .3rem .75rem;
  background: var(--brand-orange); color: #fff;
  font-size: .75rem; font-weight: 700; letter-spacing: .01em; line-height: 1.2;
  border-radius: 14px 0 0 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - .625rem) 100%, 0 100%);
}
/* En la cuadrícula la tarjeta recorta (overflow: hidden): la pestaña se sale 1px hacia arriba y a la
   izquierda para que, con el borde de 1.5px, no asome una línea del banner por el redondeo de subpíxel */
.dir-tile .dir-featured-tab { top: -1px; left: -1px; padding-top: calc(.3rem + 1px); padding-left: calc(.75rem + 1px); border-radius: 0; }

/* Separador entre datos y acciones, y datos secundarios en una línea con divisores */
@media (min-width: 640px) {
  .dir-row-actions { border-left: 1px solid var(--border); padding-left: 1rem; width: calc(8.5rem + 1rem + 1px); }
}
.dir-row-meta { display: flex; align-items: center; gap: .625rem; min-width: 0; margin-top: .625rem; font-size: 11px; color: var(--text-muted); }
.dir-row-meta > :first-child { flex-shrink: 0; }
.dir-row-meta > * + *::before { content: ""; width: 1px; height: .75rem; background: var(--border); margin-right: .625rem; }

/* Contadores de los desplegables de filtros */
.dir-filter-count { margin-left: auto; padding-left: 0.5rem; font-size: 0.75rem; color: var(--text-light); font-variant-numeric: tabular-nums; }
.dir-filter-option.is-empty { opacity: 0.5; }

/* Mini mapa de la ficha de centro (<x-publico.center-map>) */
.center-map { position: relative; display: block; height: 9.5rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #e8eef4; isolation: isolate; }
.center-map-canvas { position: absolute; inset: 0; background: #e8eef4; cursor: pointer; }
.center-map-canvas .leaflet-control-attribution { font-size: 9px; line-height: 1.3; background: rgba(255,255,255,.75); }
.center-map-cta {
  position: absolute; top: 0.5rem; right: 0.5rem; z-index: 500; display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.625rem; font-size: 0.6875rem; font-weight: 600; color: var(--brand-navy);
  background: var(--surface); border-radius: var(--radius-full); box-shadow: var(--shadow); transition: color .15s;
}
.center-map:hover .center-map-cta { color: var(--brand-blue); }

/* ─── TOM SELECT (x-tom-select-assets) con el aspecto de .input-base ───
 * Copia la clase del select a su contenedor: ahí se neutraliza.
 * `html` delante: tom-select.css se carga después y, a igual especificidad, ganaría. */
html .ts-wrapper.input-base { padding: 0; border: 0; box-shadow: none; background: transparent; }
html .ts-wrapper.single .ts-control { padding: 0.625rem 2.25rem 0.625rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: 0.875rem; color: var(--text); box-shadow: none; background-color: #fff; min-height: 0; line-height: 1.25rem; }
html .ts-wrapper.single.focus .ts-control { border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(1,99,219,0.12); }
html .ts-wrapper.single .ts-control input { font-size: 0.875rem; }
html .ts-wrapper.single .ts-control::after { right: 1rem; }
html .ts-dropdown { z-index: 60; border-radius: var(--radius); border: 1.5px solid var(--border); box-shadow: 0 10px 25px -10px rgba(7,38,76,0.25); font-size: 0.875rem; margin-top: 4px; overflow: hidden; }
html .ts-dropdown .option { padding: 0.5rem 1rem; }
html .ts-dropdown .active { background: var(--primary-50); color: var(--text); }
html .ts-dropdown .optgroup-header { padding: 0.5rem 1rem 0.25rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); background: #fff; }
html .ts-dropdown .no-results { padding: 0.5rem 1rem; color: var(--text-light); }

/* ─── CAMPO CON ICONO DELANTE ───
 * .input-base fija su padding (sin capa) y anula el pl-9 de Tailwind: el icono quedaba
 * encima del texto. Si el input va precedido por un icono absoluto, se deja su hueco. */
.relative > .lucide.absolute ~ .input-base,
.relative > .lucide.absolute ~ input.input-base { padding-left: 2.375rem; }

/* ─── PANEL (body.panel-ui, layout dashboard) — mismo lenguaje visual que la web pública ───
 * Tailwind v4 pinta cada color con var(--color-*): aquí se redefinen gray y blue con los
 * tonos de marca, así todas las vistas del panel (y sus modales) heredan la paleta. */
.panel-ui {
  --color-gray-50:  #f5f8fc;
  --color-gray-100: #edf2f8;
  --color-gray-200: #e3eaf4;
  --color-gray-300: #c9d5e6;
  --color-gray-400: #8e9db3;
  --color-gray-500: #5b6b82;
  --color-gray-600: #4a5a72;
  --color-gray-700: #33455f;
  --color-gray-800: #1b3253;
  --color-gray-900: #07264c;
  --color-blue-50:  #eef5ff;
  --color-blue-100: #dbe9fd;
  --color-blue-200: #bcd6fb;
  --color-blue-300: #8fbaf7;
  --color-blue-400: #4d93ee;
  --color-blue-500: #1a74e4;
  --color-blue-600: #0163db;
  --color-blue-700: #0152b8;
  --color-blue-800: #0b3566;
  --color-blue-900: #07264c;
}
/* Título de página como los de la web: marino, extrabold y compacto; subtítulo en gris de marca */
.panel-ui main h1 { color: var(--brand-navy); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; font-size: clamp(1.5rem, 1.1rem + 1vw, 1.875rem); }
.panel-ui main h1 + p { color: var(--text-muted); font-size: 0.9375rem; margin-top: 0.375rem; }
/* Títulos de tarjeta */
.panel-ui main h2 { color: var(--brand-navy); letter-spacing: -0.01em; }
/* En el panel las tarjetas son contenedores (formularios, listas): no se levantan al pasar el ratón */
.panel-ui .card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); }
.panel-ui a.card:hover { box-shadow: var(--shadow-lg); border-color: var(--primary-200); }