/* =========================================================================
   BeeUy - hoja de estilos
   Paleta: turquesa, celeste y azul profundo (identidad VetUy). Producto de VetUy para apicultura.
   ========================================================================= */

:root {
  --a11y-accent: #0E6F9E;   /* color del botón y estados del panel de accesibilidad (módulo a11y.css) */
  --miel-oscuro:  #5CF2E8;
  --miel-medio:   #2CEDE0;
  --miel-claro:   #8FF5EE;
  --miel-suave:   rgba(44, 237, 224, 0.10);
  --dorado:       #1C8FD6;
  --gris-claro:   #06101C;
  --gris-medio:   rgba(255, 255, 255, 0.12);
  --gris-texto:   rgba(220, 234, 244, 0.62);
  --negro-texto:  #F0F8FF;
  --blanco:       #FFFFFF;
  --cyber-turquesa: #2CEDE0;
  --verde-ok:     #52D68A;
  --rojo-error:   #FF6B5E;
  --gradiente-miel: linear-gradient(135deg, #1C8FD6 0%, #2CEDE0 100%);
  --gradiente-claro: linear-gradient(135deg, #2CEDE0 0%, #2CEDE0 100%);
  --sombra-sutil: 0 4px 20px rgba(0, 0, 0, 0.35);
  --sombra-card:  0 14px 36px rgba(0, 0, 0, 0.5);
  --superficie:   rgba(255, 255, 255, 0.045);
  --superficie-2: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--negro-texto);
  line-height: 1.6;

  /* Fondo apícola futurista: oscuro con brillos dorados y el panal como
     retícula de fondo, consistente en toda la aplicación. */
  background-color: var(--gris-claro);
  background-image:
    radial-gradient(1100px 620px at 10% -10%, rgba(44, 237, 224, 0.09), transparent 60%),
    radial-gradient(900px 700px at 105% 20%, rgba(28, 143, 214, 0.12), transparent 55%),
    linear-gradient(180deg, #06101C 0%, #0A1828 45%, #0F2238 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='129.9'%20height='225'%20viewBox='0%200%20129.9%20225'%3E%3Cg%20fill='none'%20stroke='%232CEDE0'%20stroke-opacity='0.05'%20stroke-width='1.2'%3E%3Cpath%20d='M64.95%20112.5%20L0%20150%20L-64.95%20112.5%20L-64.95%2037.5%20L0%200%20L64.95%2037.5%20Z'/%3E%3Cpath%20d='M194.85%20112.5%20L129.9%20150%20L64.95%20112.5%20L64.95%2037.5%20L129.9%200%20L194.85%2037.5%20Z'/%3E%3Cpath%20d='M129.9%20225%20L64.95%20262.5%20L0%20225%20L0%20150%20L64.95%20112.5%20L129.9%20150%20Z'/%3E%3Cpath%20d='M129.9%200%20L64.95%2037.5%20L0%200%20L0%20-75%20L64.95%20-112.5%20L129.9%20-75%20Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed, fixed;
  background-size: cover, cover, cover, 129.9px 225px;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--negro-texto);
}

/* ===== Formularios (Bootstrap), adaptados al tema oscuro en toda la app ===== */
.form-control, .form-select {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--gris-medio);
  color: var(--negro-texto);
}
.form-control::placeholder { color: rgba(220, 234, 244, 0.35); }
.form-control:focus, .form-select:focus {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--miel-medio);
  color: var(--negro-texto);
  box-shadow: 0 0 0 3px rgba(44, 237, 224, .18);
}
.form-select option { color: #04141F; }
.form-label { color: var(--gris-texto); font-weight: 600; font-size: 0.86rem; }
.form-check-input { background-color: rgba(255,255,255,0.06); border-color: var(--gris-medio); }
.form-check-input:checked { background-color: var(--miel-medio); border-color: var(--miel-medio); }
/* Bootstrap 5.3 pinta las celdas con --bs-table-bg (blanco por defecto): sobre el tema oscuro
   quedaban filas blancas con texto claro, ilegibles (falla de contraste WCAG 1.4.3). */
.table {
  --bs-table-color: var(--negro-texto);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--gris-medio);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-striped-color: var(--negro-texto);
  --bs-table-hover-bg: rgba(44, 237, 224, 0.05);
  --bs-table-hover-color: var(--negro-texto);
  color: var(--negro-texto);
}
hr { border-color: var(--gris-medio); opacity: 1; }
.text-muted { color: var(--gris-texto) !important; }

/* ===== Navbar — versión moderna "hive-tech", global en todo el sitio ===== */
.navbar-apicultura {
  background: linear-gradient(180deg, rgba(11, 26, 43, 0.97), rgba(6, 16, 28, 0.97));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(44, 237, 224, 0.22);
  padding: 0.65rem 0;
  box-shadow: 0 4px 26px rgba(0, 0, 0, 0.35);
}
.navbar-apicultura .brand {
  font-weight: 800;
  font-size: 1.25rem;
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, #2CEDE0, #2CEDE0 55%, #2CEDE0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.navbar-apicultura .brand i {
  color: var(--miel-claro);
  font-size: 1.5rem;
  filter: drop-shadow(0 0 8px rgba(44, 237, 224, 0.55));
  -webkit-text-fill-color: initial;
}
.navbar-apicultura .brand span.text-muted {
  background: none; -webkit-background-clip: unset; background-clip: unset;
  -webkit-text-fill-color: rgba(220, 234, 244, 0.55) !important;
  color: rgba(220, 234, 244, 0.55) !important;
  font-weight: 500;
}
.navbar-apicultura .nav-link {
  color: rgba(220, 234, 244, 0.72);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 0.95rem !important;
  border-radius: 50px;
  display: flex; align-items: center; gap: 7px;
  transition: color .15s ease, background .15s ease;
}
.navbar-apicultura .nav-link i { font-size: 0.95rem; color: var(--miel-medio); }
.navbar-apicultura .nav-link:hover {
  color: var(--miel-claro);
  background: rgba(44, 237, 224, 0.08);
}
.navbar-apicultura .nav-link.activo {
  color: #04141F;
  background: var(--gradiente-miel);
  box-shadow: 0 0 16px rgba(44, 237, 224, 0.4);
}
.navbar-apicultura .nav-link.activo i { color: #04141F; }
.navbar-apicultura .nav-link.text-muted { color: rgba(220, 234, 244, 0.45) !important; }
.navbar-apicultura .nav-link.text-muted:hover { color: var(--miel-claro) !important; }
.navbar-apicultura .navbar-toggler {
  border-color: rgba(44, 237, 224, 0.3);
}
.navbar-apicultura .navbar-toggler-icon {
  filter: invert(1) sepia(1) saturate(3) hue-rotate(2deg) brightness(1.1);
}
@media (max-width: 991px) {
  .navbar-apicultura .navbar-collapse { margin-top: 0.6rem; }
  .navbar-apicultura .nav-link { padding: 0.6rem 0.9rem !important; }
}

/* ===== Botones ===== */
.btn-miel {
  background: var(--gradiente-miel);
  color: var(--blanco);
  border: none;
  padding: 0.55rem 1.3rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-miel:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 100, 150, 0.3);
  color: var(--blanco);
}
.btn-miel-outline {
  background: transparent;
  color: var(--miel-oscuro);
  border: 2px solid var(--miel-oscuro);
  padding: 0.5rem 1.3rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .15s ease;
}
.btn-miel-outline:hover { background: var(--miel-oscuro); color: #04141F; }

/* ===== Dashboard cards ===== */
.stat-card {
  background: linear-gradient(160deg, var(--superficie-2), var(--superficie));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--gris-medio);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--sombra-sutil);
  border-left: 4px solid var(--miel-medio);
}
.stat-card .stat-numero {
  font-size: 2rem; font-weight: 700;
  color: var(--miel-claro); line-height: 1;
}
.stat-card .stat-label {
  color: var(--gris-texto); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-top: 6px;
}
.stat-card i { color: var(--miel-medio); font-size: 1.4rem; margin-right: 6px; }
.stat-card.verde { border-left-color: var(--verde-ok); }
.stat-card.verde .stat-numero { color: var(--verde-ok); }
.stat-card.suave { border-left-color: var(--miel-claro); background: linear-gradient(160deg, rgba(44,237,224,0.14), var(--superficie)); }

/* ===== Tablas ===== */
.tabla-card {
  overflow-x: auto;   /* a11y: con texto grande la tabla se desplaza dentro de su tarjeta, no la página */
  background: linear-gradient(160deg, var(--superficie-2), var(--superficie));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--gris-medio);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--sombra-sutil);
  margin-bottom: 1.5rem;
}
.tabla-card h5 {
  color: var(--miel-claro);
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: 8px;
}
.tabla-card table th {
  background: rgba(44, 237, 224, 0.07);
  color: var(--miel-claro);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid rgba(44, 237, 224, 0.3);
}
.tabla-card table td { vertical-align: middle; border-color: var(--gris-medio); }
.tabla-card table tr:hover td { background: rgba(44, 237, 224, 0.04); }
.tabla-card a { color: var(--miel-claro); }

/* ===== Badges de estado ===== */
.badge-estado {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.badge-estado.activa { background: rgba(82, 214, 138, 0.14); color: var(--verde-ok); }
.badge-estado.inactiva { background: rgba(255, 255, 255, 0.08); color: var(--gris-texto); }
.badge-estado.enferma { background: rgba(255, 107, 94, 0.14); color: var(--rojo-error); }
.badge-estado.observacion { background: rgba(44, 237, 224, 0.14); color: var(--miel-claro); }
.badge-estado.disponible { background: rgba(82, 214, 138, 0.14); color: var(--verde-ok); }
.badge-estado.agotado { background: rgba(255, 255, 255, 0.08); color: var(--gris-texto); }
/* Accesibilidad: el estado no se comunica solo con color; se agrega un símbolo (el texto del estado ya está en el badge) */
.badge-estado.activa::before, .badge-estado.disponible::before { content: "\2714\00a0" / ""; }
.badge-estado.inactiva::before, .badge-estado.agotado::before { content: "\2013\00a0" / ""; }
.badge-estado.enferma::before { content: "\2716\00a0" / ""; }
.badge-estado.observacion::before { content: "\26A0\00a0" / ""; }

/* ===== Cards colmenas ===== */
.colmena-card {
  background: linear-gradient(160deg, var(--superficie-2), var(--superficie));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 12px;
  padding: 1.2rem;
  border: 1px solid var(--gris-medio);
  transition: all .15s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.colmena-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-card);
  border-color: var(--miel-medio);
  color: inherit;
}
.colmena-card .codigo {
  font-weight: 700;
  color: var(--miel-claro);
  font-size: 1.1rem;
  display: flex; align-items: center; gap: 8px;
}
.colmena-card .codigo i { color: var(--miel-medio); }
.colmena-card .stats-mini {
  display: flex; gap: 12px; margin-top: 0.5rem;
  font-size: 0.8rem; color: var(--gris-texto);
}
.colmena-card .stats-mini span i { color: var(--miel-medio); }

/* ===== Login ===== */
.login-body {
  min-height: 100vh;
  background-color: #0B1A2B;
  background-image:
    radial-gradient(1000px 600px at 15% -10%, rgba(44, 237, 224, 0.14), transparent 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(28, 143, 214, 0.16), transparent 55%),
    linear-gradient(160deg, #06101C 0%, #0F2238 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='129.9'%20height='225'%20viewBox='0%200%20129.9%20225'%3E%3Cg%20fill='none'%20stroke='%232CEDE0'%20stroke-opacity='0.08'%20stroke-width='1.4'%3E%3Cpath%20d='M64.95%20112.5%20L0%20150%20L-64.95%20112.5%20L-64.95%2037.5%20L0%200%20L64.95%2037.5%20Z'/%3E%3Cpath%20d='M194.85%20112.5%20L129.9%20150%20L64.95%20112.5%20L64.95%2037.5%20L129.9%200%20L194.85%2037.5%20Z'/%3E%3Cpath%20d='M129.9%20225%20L64.95%20262.5%20L0%20225%20L0%20150%20L64.95%20112.5%20L129.9%20150%20Z'/%3E%3Cpath%20d='M129.9%200%20L64.95%2037.5%20L0%200%20L0%20-75%20L64.95%20-112.5%20L129.9%20-75%20Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: cover, cover, cover, 129.9px 225px;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.login-box {
  background: linear-gradient(160deg, var(--superficie-2), var(--superficie));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--gris-medio);
  border-radius: 20px;
  max-width: 420px; width: 100%;
  padding: 2.5rem 2rem;
  box-shadow: 0 25px 70px rgba(0,0,0,.5);
}
.login-logo {
  text-align: center; margin-bottom: 1.5rem;
  color: var(--miel-claro);
}
.login-logo i { font-size: 3rem; color: var(--miel-medio); filter: drop-shadow(0 0 12px rgba(44,237,224,0.4)); }
.login-logo h1 {
  color: var(--miel-claro); font-size: 1.6rem;
  margin-top: 0.5rem; margin-bottom: 0.2rem;
}
.login-logo p { color: var(--gris-texto); font-size: 0.9rem; margin: 0; }
.login-logo img { filter: drop-shadow(0 0 12px rgba(44,237,224,0.4)); margin-bottom: 0.3rem; }
.login-volver {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin-top: 1.5rem; font-size: 0.85rem; color: var(--gris-texto);
  text-decoration: none; transition: color 0.15s;
}
.login-volver:hover { color: var(--miel-claro); }
.form-control:focus {
  border-color: var(--miel-medio);
  box-shadow: 0 0 0 3px rgba(44, 237, 224, .15);
}

/* ===== Página pública ===== */
.landing-hero {
  background-color: #1C8FD6;
  background-image:
    var(--gradiente-miel),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='129.9'%20height='225'%20viewBox='0%200%20129.9%20225'%3E%3Cg%20fill='none'%20stroke='%23FFFFFF'%20stroke-opacity='0.10'%20stroke-width='1.4'%3E%3Cpath%20d='M64.95%20112.5%20L0%20150%20L-64.95%20112.5%20L-64.95%2037.5%20L0%200%20L64.95%2037.5%20Z'/%3E%3Cpath%20d='M194.85%20112.5%20L129.9%20150%20L64.95%20112.5%20L64.95%2037.5%20L129.9%200%20L194.85%2037.5%20Z'/%3E%3Cpath%20d='M129.9%20225%20L64.95%20262.5%20L0%20225%20L0%20150%20L64.95%20112.5%20L129.9%20150%20Z'/%3E%3Cpath%20d='M129.9%200%20L64.95%2037.5%20L0%200%20L0%20-75%20L64.95%20-112.5%20L129.9%20-75%20Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
  background-size: cover, 129.9px 225px;
  color: var(--blanco);
  padding: 5rem 0;
  text-align: center;
}
.landing-hero h1 { color: var(--blanco); font-size: 3rem; margin-bottom: 1rem; }
.landing-hero p { font-size: 1.2rem; opacity: 0.95; }
.landing-hero i.hexagono {
  font-size: 5rem;
  color: var(--miel-suave);
  margin-bottom: 1rem;
}
.landing-section { padding: 4rem 0; }
.landing-section h2 { text-align: center; color: var(--miel-oscuro); margin-bottom: 2.5rem; }
.feature-card {
  background: linear-gradient(160deg, var(--superficie-2), var(--superficie));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 12px;
  padding: 1.8rem 1.2rem;
  text-align: center;
  height: 100%;
  border: 1px solid var(--gris-medio);
  transition: transform .2s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-card); }
.feature-card .icono {
  width: 60px; height: 60px;
  background: var(--gradiente-miel);
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blanco); font-size: 1.6rem;
  margin-bottom: 1rem;
}
.feature-card h5 { color: var(--miel-claro); font-weight: 700; margin-bottom: 0.5rem; }
.feature-card p { color: var(--gris-texto); font-size: 0.9rem; margin: 0; }

/* ===== Flash messages ===== */
.alert-flash { border-radius: 8px; padding: 0.7rem 1rem; }

/* ===== Mapa de geolocalización ===== */
.mapa-picker {
  width: 100%; height: 220px; border-radius: 10px;
  border: 1px solid var(--gris-medio); margin-top: .4rem;
  z-index: 1;
}
.mapa-preview {
  width: 100%; height: 260px; border-radius: 12px;
  border: 1px solid var(--gris-medio); margin-bottom: 1rem;
  z-index: 1;
}
.btn-geo {
  background: var(--miel-suave); border: 1px solid rgba(44,237,224,0.4);
  color: var(--miel-claro); font-weight: 600; font-size: .82rem;
  border-radius: 8px; padding: .35rem .7rem;
}
.btn-geo:hover { background: rgba(44,237,224,0.22); color: var(--negro-texto); }
.geo-status { font-size: .78rem; color: var(--gris-texto); margin-top: .3rem; min-height: 1.1em; }

/* ===== Chips de producto de colmena ===== */
.chip-producto {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: 50px;
  font-size: .74rem; font-weight: 700;
  background: var(--miel-suave); color: var(--miel-claro);
  border: 1px solid rgba(44,237,224,0.35);
}
.grid-productos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .6rem;
}
.card-producto {
  background: linear-gradient(160deg, var(--superficie-2), var(--superficie));
  border: 1px solid var(--gris-medio);
  border-radius: 10px; padding: .8rem; text-align: center;
  box-shadow: var(--sombra-sutil);
}
.card-producto .icono-prod { font-size: 1.3rem; color: var(--miel-claro); }
.card-producto .valor-prod { font-weight: 800; font-size: 1.05rem; color: var(--negro-texto); }
.card-producto .nombre-prod { font-size: .74rem; color: var(--gris-texto); text-transform: uppercase; letter-spacing: .03em; }

/* ===== Wizard de pasos (formularios simples para uso a campo) ===== */
.wizard-progreso {
  display: flex; align-items: center; gap: 6px;
  padding: 1rem 1.2rem 0.4rem;
}
.wizard-progreso .punto {
  flex: 1; height: 6px; border-radius: 4px;
  background: var(--gris-medio); transition: background .2s ease;
}
.wizard-progreso .punto.hecho,
.wizard-progreso .punto.actual { background: var(--gradiente-miel); }

.wizard-paso { display: none; padding: 1.2rem 1.4rem; }
.wizard-paso.activo { display: block; }
.wizard-paso h6 {
  color: var(--gris-texto); font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem;
}

/* Botones grandes de opción (elegir producto / tipo / estado con un toque) */
.opciones-grandes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.7rem;
}
.opcion-grande {
  background: var(--superficie); border: 2px solid var(--gris-medio);
  border-radius: 14px; padding: 1.1rem 0.8rem; text-align: center;
  cursor: pointer; transition: all .15s ease; user-select: none;
  min-height: 92px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
}
.opcion-grande i { font-size: 1.8rem; color: var(--miel-medio); }
.opcion-grande span { font-weight: 700; font-size: 0.95rem; color: var(--negro-texto); }
.opcion-grande:hover { border-color: var(--miel-claro); transform: translateY(-2px); }
.opcion-grande.seleccionada {
  border-color: var(--miel-claro); background: var(--miel-suave);
  box-shadow: var(--sombra-sutil);
}
.opcion-grande.seleccionada i,
.opcion-grande.seleccionada span { color: var(--miel-claro); }

/* Variante para estado sanitario (verde/ambar/rojo) */
.opcion-grande.ok:hover, .opcion-grande.ok.seleccionada { border-color: var(--verde-ok); background: rgba(82,214,138,0.10); }
.opcion-grande.ok.seleccionada i, .opcion-grande.ok.seleccionada span { color: var(--verde-ok); }
.opcion-grande.obs.seleccionada { border-color: var(--miel-claro); }
.opcion-grande.mal:hover, .opcion-grande.mal.seleccionada { border-color: var(--rojo-error); background: rgba(255,107,94,0.10); }
.opcion-grande.mal.seleccionada i, .opcion-grande.mal.seleccionada span { color: var(--rojo-error); }

/* Cantidad con stepper +/- grande, para no tener que tipear en el campo */
.cantidad-stepper {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 0.8rem 0;
}
.cantidad-stepper button {
  width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid var(--miel-medio); background: var(--superficie);
  color: var(--miel-claro); font-size: 1.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.cantidad-stepper button:active { background: var(--miel-suave); }
.cantidad-stepper input {
  width: 110px; text-align: center; font-size: 1.8rem; font-weight: 800;
  border: none; border-bottom: 3px solid var(--miel-medio); background: transparent;
  color: var(--negro-texto);
}
.cantidad-stepper input:focus { outline: none; }

/* Botones de navegación del wizard, grandes y con espacio para el pulgar */
.wizard-nav {
  display: flex; gap: 0.6rem; padding: 0.8rem 1.4rem 1.2rem;
  border-top: 1px solid var(--gris-medio);
}
.btn-wizard {
  flex: 1; padding: 0.85rem 1rem; border-radius: 10px;
  font-weight: 700; font-size: 1rem; border: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-wizard.siguiente, .btn-wizard.guardar { background: var(--gradiente-miel); color: var(--blanco); }
.btn-wizard.atras { background: var(--superficie); color: var(--gris-texto); border: 2px solid var(--gris-medio); flex: 0 0 auto; width: 60px; }
.btn-wizard.omitir { background: transparent; color: var(--gris-texto); text-decoration: underline; }

.resumen-wizard { background: var(--miel-suave); border: 1px solid rgba(44,237,224,0.2); border-radius: 12px; padding: 1rem; font-size: 0.95rem; }
.resumen-wizard div { padding: 0.3rem 0; border-bottom: 1px solid rgba(44,237,224,0.12); display: flex; justify-content: space-between; }
.resumen-wizard div:last-child { border-bottom: none; }
.resumen-wizard .etiqueta { color: var(--gris-texto); font-weight: 600; }
.resumen-wizard .valor { font-weight: 700; color: var(--negro-texto); }

/* ===== Landing / presentación empresarial ===== */
.chip-hero {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.15); color: var(--blanco);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 0.4rem 1rem; border-radius: 50px;
  font-size: 0.85rem; font-weight: 600;
}
.seccion-oscura {
  background: rgba(0, 0, 0, 0.28); color: var(--negro-texto);
  padding: 4rem 0;
  border-top: 1px solid var(--gris-medio);
  border-bottom: 1px solid var(--gris-medio);
}
.seccion-oscura h2 { color: var(--miel-claro); }
.seccion-oscura p { color: rgba(255,255,255,0.75); }

.tarjeta-diferencial {
  background: linear-gradient(160deg, var(--superficie-2), var(--superficie));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--gris-medio);
  border-radius: 16px;
  padding: 2rem 1.6rem; height: 100%;
  border-top: 4px solid var(--miel-medio);
  box-shadow: var(--sombra-sutil);
}
.tarjeta-diferencial .num {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em;
  color: var(--miel-medio); text-transform: uppercase;
}
.tarjeta-diferencial h4 { color: var(--miel-claro); margin: 0.4rem 0 0.7rem; }
.tarjeta-diferencial p { color: var(--gris-texto); font-size: 0.92rem; margin: 0; }

.flujo-linea {
  display: flex; flex-wrap: wrap; gap: 0; justify-content: center;
  counter-reset: paso;
}
.flujo-paso {
  flex: 1 1 150px; text-align: center; padding: 1rem 0.6rem; position: relative;
}
.flujo-paso .circulo {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--gradiente-miel); color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin: 0 auto 0.8rem;
}
.flujo-paso h6 { color: var(--negro-texto); font-weight: 700; margin-bottom: 0.2rem; }
.flujo-paso p { color: var(--gris-texto); font-size: 0.82rem; margin: 0; }
.flujo-paso:not(:last-child)::after {
  content: ''; position: absolute; top: 28px; right: -10%;
  width: 20%; height: 2px; background: var(--miel-claro);
  display: none;
}
@media (min-width: 768px) {
  .flujo-paso:not(:last-child)::after { display: block; }
}

.stat-pitch {
  text-align: center; padding: 1.5rem 1rem;
}
.stat-pitch .num { font-size: 2.6rem; font-weight: 800; color: var(--miel-claro); line-height: 1; }
.stat-pitch .label { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }

.mapa-bloque {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--miel-suave); border: 1px solid var(--miel-claro);
  border-radius: 50px; padding: 0.5rem 1.1rem; font-weight: 700;
  color: var(--miel-oscuro); font-size: 0.85rem; margin: 0.25rem;
}


/* ===== Marca con logo + botón instalar PWA (BeeUy) ===== */
.navbar-apicultura .brand .brand-logo{
  height:34px; width:auto; display:block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.btn-instalar-app{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--gradiente-claro); color:#04141F;
  font-weight:700; font-size:.82rem; border:none;
  border-radius:999px; padding:7px 14px; cursor:pointer;
  box-shadow: var(--sombra-sutil);
}
.btn-instalar-app:hover{ filter:brightness(1.06); }

/* ===== Login: botón instalar app + ayuda iOS ===== */
.btn-instalar-login{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(44,237,224,.12); color:var(--miel-oscuro);
  border:1px solid rgba(92,242,232,.32); border-radius:12px;
  padding:11px; font-weight:700; font-size:.9rem; cursor:pointer;
}
.btn-instalar-login:hover{ background:rgba(44,237,224,.20); color:var(--miel-oscuro); }
.login-ios-ayuda{
  margin-top:12px; text-align:center; font-size:.8rem;
  color:var(--gris-texto); line-height:1.5;
}