/* Xcan - estilos comunes (sitio, app y panel) */
:root {
  --ns-verde: #15803d;
  --ns-verde-oscuro: #14532d;
  --ns-verde-claro: #dcfce7;
  --ns-fondo: #f6faf7;
  --ns-texto: #1c2a21;
  --ns-gris: #5b6b61;
  --ns-borde: #dfe9e2;

  --nota-verde: #16a34a;
  --nota-amarillo: #eab308;
  --nota-rojo: #dc2626;
  --nota-sin: #94a3b8;

  --bs-primary: var(--ns-verde);
  --bs-primary-rgb: 21, 128, 61;
  --bs-link-color: var(--ns-verde);
  --bs-link-color-rgb: 21, 128, 61;
  --bs-link-hover-color: var(--ns-verde-oscuro);
  --bs-body-color: var(--ns-texto);
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body { background: var(--ns-fondo); color: var(--ns-texto); }

.btn-primary {
  --bs-btn-bg: var(--ns-verde); --bs-btn-border-color: var(--ns-verde);
  --bs-btn-hover-bg: var(--ns-verde-oscuro); --bs-btn-hover-border-color: var(--ns-verde-oscuro);
  --bs-btn-active-bg: var(--ns-verde-oscuro); --bs-btn-active-border-color: var(--ns-verde-oscuro);
  --bs-btn-disabled-bg: var(--ns-verde); --bs-btn-disabled-border-color: var(--ns-verde);
}
.btn-outline-primary {
  --bs-btn-color: var(--ns-verde); --bs-btn-border-color: var(--ns-verde);
  --bs-btn-hover-bg: var(--ns-verde); --bs-btn-hover-border-color: var(--ns-verde);
  --bs-btn-active-bg: var(--ns-verde-oscuro); --bs-btn-active-border-color: var(--ns-verde-oscuro);
}
.text-primary { color: var(--ns-verde) !important; }
.bg-primary { background-color: var(--ns-verde) !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #86c79c; box-shadow: 0 0 0 .2rem rgba(21, 128, 61, .18);
}
.form-check-input:checked { background-color: var(--ns-verde); border-color: var(--ns-verde); }

/* Marca */
.ns-marca { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; letter-spacing: -.02em; color: var(--ns-texto); text-decoration: none; }
.ns-marca img { width: 32px; height: 32px; }
.ns-marca span b { color: var(--ns-verde); }

/* Semaforo */
.nota { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; font-weight: 700; font-size: .9rem; color: #fff; background: var(--nota-sin); }
.nota-verde { background: var(--nota-verde); }
.nota-amarillo { background: var(--nota-amarillo); color: #3b2f00; }
.nota-rojo { background: var(--nota-rojo); }
.punto { width: .75rem; height: .75rem; border-radius: 50%; display: inline-block; background: var(--nota-sin); flex: none; }
.punto-verde { background: var(--nota-verde); }
.punto-amarillo { background: var(--nota-amarillo); }
.punto-rojo { background: var(--nota-rojo); }

.nivel { font-size: .8rem; padding: .2rem .55rem; border-radius: 999px; font-weight: 600; border: 1px solid transparent; }
.nivel-bajo { background: #dcfce7; color: #166534; }
.nivel-medio { background: #fef9c3; color: #713f12; }
.nivel-alto { background: #fee2e2; color: #991b1b; }

/* ---------------- Sitio ---------------- */
.sitio-nav { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ns-borde); }
.hero { padding: 4.5rem 0 3.5rem; background: radial-gradient(1200px 500px at 85% -10%, #c7f0d4 0%, transparent 60%), var(--ns-fondo); }
.hero h1 { font-weight: 800; letter-spacing: -.03em; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; }
.hero .lead { color: var(--ns-gris); font-size: 1.15rem; max-width: 34rem; }
.etiqueta { display: inline-flex; align-items: center; gap: .4rem; background: var(--ns-verde-claro); color: var(--ns-verde-oscuro); font-weight: 600; font-size: .85rem; padding: .3rem .8rem; border-radius: 999px; }

.telefono { width: 290px; max-width: 100%; margin: 0 auto; border-radius: 2.2rem; background: #0f1a13; padding: .7rem; box-shadow: 0 30px 60px -20px rgba(20, 83, 45, .45); }
.telefono-pantalla { background: #fff; border-radius: 1.7rem; overflow: hidden; padding: 1.1rem; }
.telefono .demo-img { height: 120px; border-radius: 1rem; background: linear-gradient(135deg, #f1f5f2, #e3efe7); display: flex; align-items: center; justify-content: center; color: var(--ns-verde); font-size: 3rem; }

.seccion { padding: 4.5rem 0; }
.seccion h2 { font-weight: 800; letter-spacing: -.02em; }
.seccion .sub { color: var(--ns-gris); max-width: 40rem; }
.seccion-blanca { background: #fff; border-top: 1px solid var(--ns-borde); border-bottom: 1px solid var(--ns-borde); }
.tarjeta { background: #fff; border: 1px solid var(--ns-borde); border-radius: 1.1rem; padding: 1.5rem; height: 100%; }
.tarjeta .icono { width: 46px; height: 46px; border-radius: .8rem; display: flex; align-items: center; justify-content: center; background: var(--ns-verde-claro); color: var(--ns-verde); font-size: 1.35rem; margin-bottom: 1rem; }
.paso-num { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--ns-verde); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

.independencia { background: var(--ns-verde-oscuro); color: #eafff0; }
.independencia h2 { color: #fff; }
.independencia .item { border-left: 3px solid #4ade80; padding-left: 1rem; }

.plan { background: #fff; border: 1px solid var(--ns-borde); border-radius: 1.25rem; padding: 2rem; height: 100%; }
.plan-premium { border: 2px solid var(--ns-verde); position: relative; box-shadow: 0 20px 40px -24px rgba(20, 83, 45, .5); }
.plan .precio { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }
.plan ul { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.plan li { padding: .35rem 0; display: flex; gap: .55rem; }
.plan li i { color: var(--ns-verde); }

.pie { background: #0f1a13; color: #b7c7bd; padding: 3rem 0 2rem; font-size: .95rem; }
.pie a { color: #e7f5ec; }
.pie .ns-marca { color: #fff; }

/* ---------------- App ---------------- */
.app-body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); min-height: 100vh; }
.app-cabecera { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--ns-borde); padding: .65rem 1rem; padding-top: calc(.65rem + env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; }
.app-contenido { max-width: 560px; margin: 0 auto; padding: 1rem; }
.app-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: #fff; border-top: 1px solid var(--ns-borde); display: flex; padding-bottom: env(safe-area-inset-bottom); }
.app-nav button { flex: 1; border: 0; background: none; padding: .55rem 0 .5rem; color: var(--ns-gris); font-size: .75rem; display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.app-nav button i { font-size: 1.35rem; }
.app-nav button.activo { color: var(--ns-verde); font-weight: 700; }
.vista { display: none; }
.vista.activa { display: block; }

.camara { position: relative; background: #0b130e; border-radius: 1.2rem; overflow: hidden; aspect-ratio: 3 / 4; max-height: 60vh; width: 100%; }
.camara video { width: 100%; height: 100%; object-fit: cover; display: block; }
.camara .marco { position: absolute; inset: 22% 10%; border: 3px solid rgba(255,255,255,.9); border-radius: 1rem; box-shadow: 0 0 0 9999px rgba(0,0,0,.35); pointer-events: none; }
.camara .linea { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: #4ade80; box-shadow: 0 0 12px #4ade80; animation: barrido 2s ease-in-out infinite; pointer-events: none; }
@keyframes barrido { 0%, 100% { transform: translateY(-60px); } 50% { transform: translateY(60px); } }
.camara .aviso { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #e2efe6; text-align: center; padding: 1.5rem; gap: .75rem; }

.resultado-cab { display: flex; gap: 1rem; align-items: flex-start; }
.resultado-img { width: 96px; height: 96px; border-radius: .9rem; background: #fff; border: 1px solid var(--ns-borde); object-fit: contain; flex: none; }
.resultado-img.vacia { display: flex; align-items: center; justify-content: center; color: #9db0a4; font-size: 2rem; }
.nota-grande { border-radius: 1.1rem; padding: 1.1rem 1.2rem; color: #fff; display: flex; align-items: center; gap: 1rem; background: var(--nota-sin); }
.nota-grande.nota-verde { background: var(--nota-verde); }
.nota-grande.nota-amarillo { background: var(--nota-amarillo); color: #3b2f00; }
.nota-grande.nota-rojo { background: var(--nota-rojo); }
.nota-grande .semaforo { display: flex; flex-direction: column; gap: .3rem; background: rgba(0,0,0,.18); padding: .4rem; border-radius: 999px; }
.nota-grande .semaforo span { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.35); }
.nota-grande.nota-rojo .semaforo span:nth-child(1),
.nota-grande.nota-amarillo .semaforo span:nth-child(2),
.nota-grande.nota-verde .semaforo span:nth-child(3) { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.8); }
.bloque { background: #fff; border: 1px solid var(--ns-borde); border-radius: 1rem; padding: 1rem; margin-top: .9rem; }
.bloque h3 { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; }
.alerta-personal { background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239; border-radius: 1rem; padding: .8rem 1rem; margin-top: .9rem; }

.lista-prod { list-style: none; padding: 0; margin: 0; }
.lista-prod li { background: #fff; border: 1px solid var(--ns-borde); border-radius: .9rem; padding: .6rem .75rem; margin-bottom: .5rem; display: flex; gap: .75rem; align-items: center; cursor: pointer; }
.lista-prod li:hover { border-color: #a7d7b6; }
.lista-prod img, .lista-prod .sin-img { width: 48px; height: 48px; border-radius: .6rem; object-fit: contain; background: #f4f7f5; flex: none; }
.lista-prod .sin-img { display: flex; align-items: center; justify-content: center; color: #9db0a4; }
.lista-prod .txt { flex: 1; min-width: 0; }
.lista-prod .txt b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-prod .txt small { color: var(--ns-gris); }

.sin-conexion { background: #fef3c7; color: #78350f; font-size: .85rem; text-align: center; padding: .35rem; display: none; }
body.offline .sin-conexion { display: block; }

/* ---------------- Panel ---------------- */
.admin-body { background: #f3f6f4; }
.admin-nav { background: var(--ns-verde-oscuro); }
.admin-nav .nav-link { color: #cfe9d7; }
.admin-nav .nav-link.active, .admin-nav .nav-link:hover { color: #fff; }
.admin-tarjeta { background: #fff; border: 1px solid var(--ns-borde); border-radius: .9rem; padding: 1.25rem; }
.admin-num { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ns-gris); }
.miniatura { width: 40px; height: 40px; object-fit: contain; border-radius: .4rem; background: #f4f7f5; }