/*
Theme Name: La Madera
Description: Azul marino profundo con chips de categoría e íconos circulares — inspirado en los portales de directorio regional de Ixtapa-Zihuatanejo.
Preview: #0A2343,#ffffff,#2E6DA4
Version: 0.02
Site-Type: directorio
*/
:root {
  --fg: #333333;
  --bg: #ffffff;
  --muted: #777777;
  --border: #DDDDDD;
  --accent: #28A745;
  --accent-fg: #ffffff;
  --accent2: #D97706;
  --green: #28A745;
  --red: #DC3545;
  --amber: #D97706;
  --navy: #0A2343;
  --icon-blue: #2E6DA4;
  --font-heading: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

body { font-family: var(--font-body); }
h1, h2, .brand span { color: var(--navy); font-family: var(--font-heading); }
.brand span { font-weight: 700; }
.btn-primary { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
.tab.active { background: var(--navy); border-color: var(--navy); }
.card h3 a { color: var(--navy); }

.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 16px; margin-bottom: 28px; }
.category-tile { text-align: center; text-decoration: none; color: var(--fg); font-size: 13px; font-weight: 500; }
.category-tile .icon-circle {
  width: 72px; height: 72px; border-radius: 50%; background: var(--icon-blue);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;
  font-size: 28px; color: #fff;
}
.category-tile:hover .icon-circle { background: var(--navy); }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent2, var(--navy)); color: #fff; border-radius: 999px;
  padding: 3px 10px; font-size: 12px; font-weight: 500;
}

/* Sin modo oscuro AUTOMÁTICO a propósito: este tema busca verse igual al
 * sitio de referencia (ixtapazihuatanejomexico.com), que es un sitio claro
 * fijo — adaptarse solo al prefers-color-scheme del visitante lo alejaría
 * de esa referencia en vez de acercarlo (ver includes/themes.php). El
 * bloque de abajo SÍ es modo oscuro, pero manual — solo se activa si el
 * visitante lo elige a propósito con el botón ☀️/🌙 del encabezado
 * (función "dark_mode" en Funciones), nunca solo, y por eso no rompe esa
 * decisión. */
:root[data-theme="dark"] {
  --fg: #EDEDED;
  --bg: #0F1115;
  --muted: #9AA3AD;
  --border: #2A2E35;
  --accent: #34C759;
  --accent-fg: #ffffff;
  --accent2: #F0A83C;
  --green: #34C759;
  --red: #FF6B6B;
  --amber: #F0A83C;
  --navy: #7EB3FF;
  --icon-blue: #3A7CA8;
}