/*
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;
  --green: #28A745;
  --red: #DC3545;
  --amber: #D97706;
  --navy: #0A2343;
  --icon-blue: #2E6DA4;
}

body { font-family: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; }
h1, h2, .brand span { color: var(--navy); }
.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(--navy); color: #fff; border-radius: 999px;
  padding: 3px 10px; font-size: 12px; font-weight: 500;
}

/* Sin variante de modo oscuro a propósito: este tema busca verse igual al
 * sitio de referencia (ixtapazihuatanejomexico.com), que es un sitio claro
 * fijo — adaptarse al prefers-color-scheme del visitante lo alejaría de esa
 * referencia en vez de acercarlo. Ver includes/themes.php. */