/* ==========================================================================
   TEMA: VERDE OLIVA (EDITORIAL GOURMET)
   ========================================================================== */

/* Fuentes Google Fonts: Cormorant Garamond para títulos editoriales y Karla para cuerpo */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600;1,700&family=Karla:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400;1,600&display=swap');

/* ==========================================================================
   1. VARIABLES DE DISEÑO (SISTEMA CROMÁTICO Y TIPOGRÁFICO)
   ========================================================================== */
[data-site-theme="olive"] {
  /* Tipografías Editoriales */
  --font-heading: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;

  /* Paleta Editorial Cálida: Crema, Marfil, Verde Oliva y Salvia */
  --bg-primary: #F7F3EA;          /* Fondo crema editorial */
  --bg-surface: #FFFDF8;          /* Superficie marfil suave */
  --bg-surface-rgb: 255, 253, 248;
  --bg-input: #EFE8DC;            /* Fondo de inputs y cajas sutiles */
  --text-primary: #2A2F26;        /* Tinta botánica carbón cálido */
  --text-secondary: #6B7264;      /* Visón / oliva neutro */
  --border-color: rgba(63, 81, 56, 0.16); /* Borde sutil verde oliva */

  /* Acentos de Marca */
  --color-primary: #3F5138;       /* Verde Oliva Profundo */
  --color-primary-hover: #2C3A27; /* Oliva oscuro */
  --color-primary-rgb: 63, 81, 56;
  --color-secondary: #8A9B7E;     /* Verde Salvia suave */
  --color-secondary-hover: #758669;
  --color-gold: #C29B38;          /* Oro Culinario / Ámbar para estrellas */
  --color-gold-hover: #A9842A;

  /* Sombras suaves y orgánicas */
  --shadow-sm: 0 4px 14px rgba(42, 47, 38, 0.05);
  --shadow-md: 0 10px 28px -6px rgba(42, 47, 38, 0.09);
  --shadow-lg: 0 22px 48px -12px rgba(42, 47, 38, 0.14);

  /* Radios de curvatura orgánicos */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-pill: 9999px;
}

/* Modo Oscuro adaptado al estilo Verde Oliva Editorial */
[data-site-theme="olive"][data-theme="dark"] {
  --bg-primary: #181C16;          /* Carbono oliva profundo */
  --bg-surface: #222820;          /* Superficie oliva noche */
  --bg-surface-rgb: 34, 40, 32;
  --bg-input: #2B3429;            /* Fondo input oscuro */
  --text-primary: #F4F1EA;        /* Crema suave */
  --text-secondary: #A7B2A1;      /* Salvia claro */
  --border-color: rgba(138, 155, 126, 0.22);
  
  --color-primary: #8A9B7E;       /* Salvia luminoso como acento */
  --color-primary-hover: #A3B497;
  --color-primary-rgb: 138, 155, 126;
  --color-secondary: #A3B497;
  --color-gold: #D4AC45;

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 28px -6px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 22px 48px -12px rgba(0, 0, 0, 0.60);
}

/* ==========================================================================
   2. TIPOGRAFÍA Y ESTRUCTURA GENERAL
   ========================================================================== */
[data-site-theme="olive"] body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

[data-site-theme="olive"] h1,
[data-site-theme="olive"] h2,
[data-site-theme="olive"] h3,
[data-site-theme="olive"] h4,
[data-site-theme="olive"] h5,
[data-site-theme="olive"] h6,
[data-site-theme="olive"] .brand-title,
[data-site-theme="olive"] .section-title,
[data-site-theme="olive"] .recipe-title,
[data-site-theme="olive"] .detail-recipe-title,
[data-site-theme="olive"] .collection-card-title,
[data-site-theme="olive"] .top-recipe-title {
  font-family: var(--font-heading) !important;
  letter-spacing: -0.015em;
}

[data-site-theme="olive"] h1 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.15;
}

[data-site-theme="olive"] h2,
[data-site-theme="olive"] .section-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.25;
}

/* ==========================================================================
   3. CABECERA Y BARRA DE NAVEGACIÓN
   ========================================================================== */
[data-site-theme="olive"] .header,
[data-site-theme="olive"] header,
[data-site-theme="olive"] .main-header {
  background-color: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-site-theme="olive"] .brand h1,
[data-site-theme="olive"] .brand-title,
[data-site-theme="olive"] .header-brand {
  font-family: var(--font-heading) !important;
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-primary) !important;
}

[data-site-theme="olive"] .nav-link,
[data-site-theme="olive"] .navbar a {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--text-primary);
  border-radius: var(--radius-pill);
  transition: all 0.2s ease;
}

[data-site-theme="olive"] .nav-link:hover,
[data-site-theme="olive"] .navbar a:hover,
[data-site-theme="olive"] .nav-link.active {
  color: var(--color-primary) !important;
  background-color: rgba(63, 81, 56, 0.08) !important;
}

/* Botones de acción rápida en cabecera */
[data-site-theme="olive"] #btn-nav-favorites,
[data-site-theme="olive"] #btn-nav-collections,
[data-site-theme="olive"] #btn-nav-my-recipes {
  font-size: 0.88rem;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  transition: all 0.25s ease;
}

[data-site-theme="olive"] #btn-nav-favorites:hover,
[data-site-theme="olive"] #btn-nav-collections:hover,
[data-site-theme="olive"] #btn-nav-my-recipes:hover {
  background: var(--color-primary) !important;
  color: #FFFDF8 !important;
  border-color: var(--color-primary) !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   4. HERO / BANNER PRINCIPAL EDITORIAL
   ========================================================================== */
[data-site-theme="olive"] .hero,
[data-site-theme="olive"] .hero-section,
[data-site-theme="olive"] .hero-carousel-container {
  background: linear-gradient(180deg, rgba(239, 233, 221, 0.75) 0%, rgba(247, 243, 234, 1) 100%) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

[data-site-theme="olive"] .hero h1,
[data-site-theme="olive"] .hero-content h1 {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.3rem, 4.5vw, 3.6rem) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  line-height: 1.18 !important;
}

[data-site-theme="olive"] .hero p,
[data-site-theme="olive"] .hero-content p {
  font-family: var(--font-body) !important;
  color: var(--text-secondary) !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
}

[data-site-theme="olive"] .hero-badge {
  background-color: rgba(138, 155, 126, 0.18) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgba(63, 81, 56, 0.16) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
}

[data-site-theme="olive"] .hero input,
[data-site-theme="olive"] #search-input {
  border-radius: var(--radius-pill) !important;
  border: 1.5px solid var(--border-color) !important;
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-site-theme="olive"] .hero input:focus,
[data-site-theme="olive"] #search-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(63, 81, 56, 0.14) !important;
}

/* ==========================================================================
   5. BOTONES Y CONTROLES INTERACTIVOS
   ========================================================================== */
[data-site-theme="olive"] .btn-primary,
[data-site-theme="olive"] button.btn-primary,
[data-site-theme="olive"] .btn-hero-primary {
  background-color: var(--color-primary) !important;
  color: #FFFDF8 !important;
  border: 1px solid var(--color-primary) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 4px 12px rgba(63, 81, 56, 0.2) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}

[data-site-theme="olive"] .btn-primary:hover,
[data-site-theme="olive"] button.btn-primary:hover,
[data-site-theme="olive"] .btn-hero-primary:hover {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(63, 81, 56, 0.28) !important;
}

[data-site-theme="olive"] .btn-secondary,
[data-site-theme="olive"] button.btn-secondary,
[data-site-theme="olive"] .btn-hero-secondary {
  background-color: var(--bg-surface) !important;
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-primary) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}

[data-site-theme="olive"] .btn-secondary:hover,
[data-site-theme="olive"] button.btn-secondary:hover,
[data-site-theme="olive"] .btn-hero-secondary:hover {
  background-color: var(--color-primary) !important;
  color: #FFFDF8 !important;
}

[data-site-theme="olive"] .filter-btn,
[data-site-theme="olive"] .filter-tag,
[data-site-theme="olive"] .tag-pill {
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border-color) !important;
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  transition: all 0.2s ease !important;
}

[data-site-theme="olive"] .filter-btn.active,
[data-site-theme="olive"] .filter-tag.active {
  background-color: var(--color-primary) !important;
  color: #FFFDF8 !important;
  border-color: var(--color-primary) !important;
}

/* ==========================================================================
   6. TARJETAS DE RECETAS (ESTÉTICA EDITORIAL LIBRO DE COCINA)
   ========================================================================== */
[data-site-theme="olive"] .recipe-card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
}

[data-site-theme="olive"] .recipe-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(63, 81, 56, 0.35) !important;
}

[data-site-theme="olive"] .recipe-card-title,
[data-site-theme="olive"] .recipe-card .recipe-title,
[data-site-theme="olive"] .recipe-card h3 {
  font-family: var(--font-heading) !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

[data-site-theme="olive"] .recipe-card:hover .recipe-card-title,
[data-site-theme="olive"] .recipe-card:hover .recipe-title,
[data-site-theme="olive"] .recipe-card:hover h3 {
  color: var(--color-primary) !important;
}

[data-site-theme="olive"] .recipe-badge-category,
[data-site-theme="olive"] .recipe-card .badge,
[data-site-theme="olive"] .recipe-card .badge-category {
  background-color: rgba(255, 253, 248, 0.94) !important;
  color: var(--color-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid rgba(63, 81, 56, 0.14) !important;
}

[data-site-theme="olive"] .btn-fav-card,
[data-site-theme="olive"] .btn-favorite-heart {
  border-radius: 50% !important;
  background-color: rgba(255, 253, 248, 0.92) !important;
  border: 1px solid rgba(63, 81, 56, 0.15) !important;
}

[data-site-theme="olive"] .btn-fav-card.active svg,
[data-site-theme="olive"] .btn-favorite-heart.active svg {
  fill: var(--color-primary) !important;
  stroke: var(--color-primary) !important;
}

[data-site-theme="olive"] .btn-card-collection {
  border-radius: 50% !important;
  background-color: rgba(255, 253, 248, 0.92) !important;
  border: 1px solid rgba(63, 81, 56, 0.15) !important;
  color: var(--color-primary) !important;
}

/* Estrellas doradas cálidas */
[data-site-theme="olive"] .stars-wrapper,
[data-site-theme="olive"] .rating-stars {
  color: var(--color-gold) !important;
}

/* ==========================================================================
   7. TARJETAS DE COLECCIONES Y DESPLEGABLE INLINE
   ========================================================================== */
[data-site-theme="olive"] .collection-card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-site-theme="olive"] .collection-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--color-secondary) !important;
}

[data-site-theme="olive"] .collection-card-title,
[data-site-theme="olive"] .collection-card h3 {
  font-family: var(--font-heading) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

[data-site-theme="olive"] .collection-count-badge {
  background-color: rgba(138, 155, 126, 0.16) !important;
  color: var(--color-primary) !important;
  border-radius: var(--radius-pill) !important;
}

/* ==========================================================================
   8. FICHA DE DETALLE DE RECETA (EDITORIAL MAGAZINE)
   ========================================================================== */
[data-site-theme="olive"] .recipe-detail-view,
[data-site-theme="olive"] #section-recipe-detail {
  background-color: var(--bg-surface) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
}

[data-site-theme="olive"] .detail-recipe-title,
[data-site-theme="olive"] .recipe-detail-header h1 {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  line-height: 1.15 !important;
}

[data-site-theme="olive"] .recipe-quick-actions button,
[data-site-theme="olive"] .btn-quick-action {
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border-color) !important;
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  transition: all 0.2s ease !important;
}

[data-site-theme="olive"] .recipe-quick-actions button:hover,
[data-site-theme="olive"] .btn-quick-action:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background-color: rgba(63, 81, 56, 0.05) !important;
}

[data-site-theme="olive"] .recipe-meta-grid {
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
}

[data-site-theme="olive"] .meta-icon {
  color: var(--color-primary) !important;
}

[data-site-theme="olive"] .meta-val {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 1.35rem !important;
  color: var(--text-primary) !important;
}

[data-site-theme="olive"] .ingredients-section h2,
[data-site-theme="olive"] .recipe-ingredients-section h2,
[data-site-theme="olive"] .recipe-steps-section h2 {
  font-family: var(--font-heading) !important;
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

[data-site-theme="olive"] .step-number,
[data-site-theme="olive"] .step-num {
  font-family: var(--font-heading) !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  line-height: 1 !important;
}

[data-site-theme="olive"] .step-card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}

[data-site-theme="olive"] .step-card:hover {
  border-color: var(--color-secondary) !important;
  transform: translateX(4px);
}

[data-site-theme="olive"] .recipe-tips-section {
  background: rgba(138, 155, 126, 0.12) !important;
  border-left: 4px solid var(--color-primary) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

[data-site-theme="olive"] .recipe-tips-section h3 {
  font-family: var(--font-heading) !important;
  color: var(--color-primary) !important;
}

[data-site-theme="olive"] .btn-detail-save-collection {
  border-radius: var(--radius-pill) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* ==========================================================================
   9. MODALES, FORMULARIOS Y PANELES
   ========================================================================== */
[data-site-theme="olive"] .modal-content,
[data-site-theme="olive"] .dialog-box {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

[data-site-theme="olive"] input[type="text"],
[data-site-theme="olive"] input[type="email"],
[data-site-theme="olive"] input[type="password"],
[data-site-theme="olive"] input[type="number"],
[data-site-theme="olive"] select,
[data-site-theme="olive"] textarea {
  border-radius: var(--radius-sm) !important;
  border: 1.5px solid var(--border-color) !important;
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

[data-site-theme="olive"] input:focus,
[data-site-theme="olive"] select:focus,
[data-site-theme="olive"] textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(63, 81, 56, 0.14) !important;
}

/* ==========================================================================
   10. PIE DE PÁGINA (FOOTER EDITORIAL)
   ========================================================================== */
[data-site-theme="olive"] footer,
[data-site-theme="olive"] .site-footer {
  background-color: var(--bg-surface) !important;
  border-top: 1px solid var(--border-color) !important;
}

[data-site-theme="olive"] footer h3,
[data-site-theme="olive"] footer h4 {
  font-family: var(--font-heading) !important;
  color: var(--text-primary) !important;
}