/* ===== BASE COMPARTIDA DEL REDISEÑO (portafolio_proveedores.php / ver_proveedor.php) =====
   Se carga en el <head> compartido (includes/header.php), por lo tanto TODAS las clases
   nuevas llevan el prefijo mlcr- para no chocar con Bootstrap (.btn, .card, .container,
   .breadcrumb, etc.) ni con assets/css/styles.css, que ya se usan en el resto del sitio.
   El navbar y el footer reales del proyecto (includes/header.php e includes/footer.php)
   se conservan tal cual -- por eso aquí NO se define .topbar/.nav/.logo/.footer. */
:root {
  /* Colores reales del proyecto (no estimados): #198754 ya se usa a mano en los banners
     de portafolio_proveedores.php y ver_proveedor.php (verde real de Bootstrap 5 bg-success).
     --fondo/--texto/--gris/--borde/--inactivo/--inactivo-bg mapeados a los valores reales
     ya definidos en assets/css/styles.css y usados en el resto del sitio. */
  --verde: #198754;
  --verde-osc: #146c43;
  --verde-prof: #0f3d2a;
  --verde-claro: #75c9a0;
  --verde-bg: #e3f4ea;
  --fondo: #f8f9fa;
  --texto: #343a40;
  --gris: #6c757d;
  --borde: #dee2e6;
  --inactivo: #dc3545;
  --inactivo-bg: #f8d7da;
  --sombra: 0 2px 10px rgba(15, 61, 42, .07);
  --sombra-hover: 0 14px 34px rgba(25, 135, 84, .20);
  --radio: 14px;
  /* Cada página define esta variable inline (--hero-img) con el valor del CMS;
     "none" aquí es el respaldo cuando no hay imagen configurada (queda solo el degradado). */
  --hero-img: none;
  /* "Cortina" oscura sobre la imagen del hero -- el CMS permite desactivarla para
     mostrar la foto con sus colores reales, sin el tinte verde. */
  --hero-overlay: linear-gradient(180deg, rgba(15,61,42,.55), rgba(20,108,67,.88));
}

/* Botón "Registrarse" como CTA verde en el navbar real (solo cuando
   includes/header.php recibe $navbarClaro=true, ver portafolio_proveedores.php
   y ver_proveedor.php) -- pedido explícito del cliente, igual que en la maqueta. */
.mlcr-nav-cta { background: var(--verde) !important; color: #fff !important; font-weight: 600; border-radius: 8px; padding: 8px 16px !important; margin-left: 4px; }
.mlcr-nav-cta:hover { background: var(--verde-osc) !important; color: #fff !important; }

.mlcr-page a { color: inherit; }
.mlcr-ico { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mlcr-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ===== BOTONES / BADGES =====
   Selectores compuestos (.mlcr-btn.mlcr-btn-primary, no solo .mlcr-btn-primary)
   a propósito: una sola clase pierde contra ".mlcr-page a { color: inherit; }"
   en especificidad (esa regla tiene clase + etiqueta), y el texto del botón
   terminaba heredando el color oscuro del contexto en vez del blanco/verde
   que le corresponde. */
.mlcr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 10px; font-weight: 600; font-size: .92rem; line-height: 1.2; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: .2s; font-family: inherit; }
.mlcr-btn.mlcr-btn-primary { background: var(--verde); color: #fff; }
.mlcr-btn.mlcr-btn-primary:hover { background: var(--verde-osc); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(25,135,84,.3); }
.mlcr-btn.mlcr-btn-outline { background: #fff; color: var(--verde-osc); border-color: var(--verde); }
.mlcr-btn.mlcr-btn-outline:hover { background: var(--verde-bg); }
.mlcr-btn.mlcr-btn-glass { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.mlcr-btn.mlcr-btn-glass:hover { background: rgba(255,255,255,.22); color: #fff; }
.mlcr-btn.mlcr-btn-white { background: #fff; color: var(--verde-prof); border-color: #fff; }
.mlcr-btn.mlcr-btn-white:hover { background: var(--verde-bg); }

.mlcr-badge-estado { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 50px; font-size: .76rem; font-weight: 700; background: rgba(255,255,255,.95); color: var(--verde-osc); }
.mlcr-badge-estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgba(25,135,84,.22); }
.mlcr-badge-estado.mlcr-inactivo { color: var(--inactivo); }
.mlcr-badge-estado.mlcr-inactivo::before { background: var(--inactivo); box-shadow: 0 0 0 3px rgba(220,53,69,.22); }

/* ===== HERO (bosque de Costa Rica) ===== */
.mlcr-hero {
  position: relative; color: #fff; text-align: center; overflow: hidden;
  background-color: var(--verde-prof);
  background-image: var(--hero-overlay), var(--hero-img);
  background-size: cover; background-position: center;
}
.mlcr-hero .mlcr-container { position: relative; z-index: 2; }
.mlcr-hero-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); backdrop-filter: blur(6px); padding: 7px 18px; border-radius: 50px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-claro); }
.mlcr-breadcrumb { display: flex; gap: 8px; list-style: none; font-size: .85rem; opacity: .85; justify-content: center; flex-wrap: wrap; padding: 0; margin: 0; }
.mlcr-breadcrumb li + li::before { content: '/'; margin-right: 8px; opacity: .6; }
.mlcr-breadcrumb a { text-decoration: none; }
.mlcr-breadcrumb a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .mlcr-hero-row { flex-direction: column; align-items: flex-start; }
}