@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --kipmi-bg: #FFFFFF;
    --kipmi-bg-alt: #FFFFFF;
    --kipmi-ink: #16181B;
    --kipmi-ink-soft: #6B6258;
    --kipmi-primary: #FF6B4A;
    --kipmi-primary-dark: #E2532F;
    --kipmi-violeta: #5B4FE0;
    --kipmi-violeta-dark: #4438C2;
    --kipmi-line: #E7DFD0;
    --kipmi-blanco: #FFFFFF;

    --blob-amarillo: #F4B740;
    --blob-teal: #2BB6A3;
    --blob-rosa: #FF8FA3;
    --blob-cielo: #3FB8E8;
    --blob-violeta: #5B4FE0;
    --blob-coral: #FF6B4A;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--kipmi-ink);
    background: var(--kipmi-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; margin: 0 0 .5em; letter-spacing: -0.01em; line-height: 1.15; }

a { color: inherit; }

.marca-kipmi, .marca-kipmi-chica {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.marca-kipmi { font-size: 1.6rem; color: var(--kipmi-ink); display: inline-block; margin-bottom: 1rem; }
.marca-kipmi-chica { font-size: 1.1rem; color: var(--kipmi-blanco); }

.contenedor-centrado {
    max-width: 440px;
    margin: 8vh auto;
    padding: 2.2rem 1.8rem;
    text-align: center;
    background: var(--kipmi-blanco);
    border-radius: 28px;
    border: 1px solid var(--kipmi-line);
}

.contenedor-panel {
    max-width: 680px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}

.encabezado-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.enlace-discreto { color: var(--kipmi-ink); opacity: .6; text-decoration: none; font-size: .9rem; }
.enlace-discreto:hover { opacity: 1; }

/* ---------- Bloques / tarjetas funcionales (admin, super-admin) ---------- */
.bloque-panel {
    background: var(--kipmi-blanco);
    border: 1px solid var(--kipmi-line);
    border-radius: 24px;
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.3rem;
}

/* ---------- Tarjeta de identificación pública (pulsera) ---------- */
.fondo-landing { background: var(--kipmi-bg); min-height: 100vh; padding: 2.5rem 1rem; position: relative; }

.tarjeta-id {
    max-width: 420px;
    margin: 0 auto;
    background: var(--kipmi-blanco);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 18px 40px -20px rgba(22, 24, 27, .25);
    border: 1px solid var(--kipmi-line);
    position: relative;
    z-index: 2;
}

.banda-superior {
    background: var(--blob-violeta);
    padding: 1.2rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.tarjeta-id.tipo-adulto .banda-superior { background: var(--blob-coral); }
.tarjeta-id.tipo-mascota .banda-superior { background: var(--blob-teal); }

.etiqueta-tipo {
    color: var(--kipmi-blanco);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .9;
}

.titulo-landing { padding: 1.5rem 1.5rem 0; font-size: 1.6rem; }

.aviso-vencido {
    margin: 1rem 1.5rem 0;
    padding: .75rem 1rem;
    background: #FBEEE6;
    border: 1px solid #F2D3BC;
    border-radius: 14px;
    font-size: .85rem;
    color: #7A4626;
}

.campo-landing {
    padding: .9rem 1.5rem;
    border-top: 1px solid var(--kipmi-line);
}
.etiqueta-campo {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--kipmi-ink-soft);
    margin-bottom: .25rem;
}
.valor-campo { font-size: 1.02rem; line-height: 1.4; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.boton-whatsapp {
    background: #25D366;
    color: #fff;
    text-decoration: none;
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
}

.bloque-protegido { padding: 1.1rem 1.5rem 1.5rem; border-top: 1px solid var(--kipmi-line); }
.form-pin { margin-top: .8rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.form-pin input { flex: 1; min-width: 140px; }

.pie-landing { text-align: center; font-size: .75rem; color: var(--kipmi-ink-soft); padding: 1.1rem 0 1.5rem; }

/* ---------- Botones ---------- */
.boton {
    display: inline-block;
    padding: .75rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: .95rem;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: transform .12s ease, background .15s ease;
}
.boton:hover { transform: translateY(-1px); }
.boton:disabled { opacity: .5; cursor: default; transform: none; }
.boton-primario { background: var(--kipmi-primary); color: #fff; }
.boton-primario:hover { background: var(--kipmi-primary-dark); }
.boton-oscuro { background: var(--kipmi-ink); color: #fff; }
.boton-secundario { background: var(--kipmi-blanco); color: var(--kipmi-ink); border: 1.5px solid var(--kipmi-ink); }
.boton-google, .boton-meta { display: block; margin: .6rem 0; background: var(--kipmi-blanco); border: 1.5px solid var(--kipmi-line); color: var(--kipmi-ink); }
.botones-login { margin: 1.5rem 0; }

.formulario-tipo { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; text-align: left; margin-top: 1.2rem; }
.opcion-tipo { font-size: 1rem; }

.etiqueta-form { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .9rem; color: var(--kipmi-ink); }
.etiqueta-form input, .etiqueta-form textarea {
    display: block;
    width: 100%;
    margin-top: .4rem;
    padding: .65rem .8rem;
    border: 1.5px solid var(--kipmi-line);
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--kipmi-ink);
    background: var(--kipmi-bg);
}
.marca-protegido { margin-left: .3rem; }
.texto-ayuda { display: block; font-size: .78rem; font-weight: 400; color: var(--kipmi-ink-soft); margin-top: .3rem; }
.texto-error { color: #C0392B; font-size: .85rem; }
.texto-exito { color: var(--kipmi-violeta-dark); font-size: .9rem; }

.formulario-linea { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.formulario-linea input, .formulario-linea textarea { flex: 1; min-width: 200px; padding: .65rem .8rem; border: 1.5px solid var(--kipmi-line); border-radius: 12px; font-family: inherit; background: var(--kipmi-bg); }

.lista-pulseras { display: flex; gap: .5rem; overflow-x: auto; margin-bottom: 1.3rem; padding-bottom: .3rem; }
.chip-pulsera { white-space: nowrap; padding: .45rem 1rem; border-radius: 999px; background: var(--kipmi-blanco); border: 1.5px solid var(--kipmi-line); color: var(--kipmi-ink); text-decoration: none; font-size: .85rem; font-weight: 600; }
.chip-pulsera.activo { background: var(--kipmi-ink); color: #fff; border-color: var(--kipmi-ink); }

.cuadricula-qr { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.celda-qr { border: 1.5px solid var(--kipmi-line); border-radius: 16px; padding: .9rem; text-align: center; font-size: .8rem; }

/* ---------- Blobs decorativos (solo landing de venta / hero) ---------- */
.blob { position: absolute; z-index: 1; pointer-events: none; animation: flotar-blob 9s ease-in-out infinite; }
.blob-1 { top: -30px; left: -50px; width: 170px; animation-duration: 10s; animation-delay: 0s; }
.blob-2 { top: 14%; right: -60px; width: 130px; animation-duration: 8s; animation-delay: 1.2s; }
.blob-3 { top: 46%; left: -40px; width: 95px; animation-duration: 7s; animation-delay: 2.4s; }
.blob-4 { bottom: 18%; right: 6%; width: 110px; animation-duration: 9.5s; animation-delay: .6s; }
.blob-5 { bottom: -50px; left: 8%; width: 150px; animation-duration: 11s; animation-delay: 1.8s; }
.blob-6 { bottom: -40px; right: -50px; width: 190px; animation-duration: 8.5s; animation-delay: 3s; }
.blob-7 { top: 4%; left: 30%; width: 70px; animation-duration: 6.5s; animation-delay: .9s; }
.blob-8 { top: 60%; right: 28%; width: 80px; animation-duration: 7.5s; animation-delay: 2s; }

@keyframes flotar-blob {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.18) translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }

/* ---------- Landing de venta (marketing) ---------- */
.nav-marketing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.4rem 1.5rem;
    position: relative;
    z-index: 3;
}
.nav-marketing .acciones-nav { display: flex; gap: .8rem; align-items: center; }
.nav-marketing .acciones-nav a.enlace-login { font-weight: 600; text-decoration: none; color: var(--kipmi-ink); font-size: .95rem; }

.hero-marketing {
    position: relative;
    overflow: hidden;
    padding: 2rem 1.5rem 3rem;
    text-align: center;
    min-height: calc(100vh - 88px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-marketing .contenido-hero { max-width: 720px; margin: 0 auto; position: relative; z-index: 3; }
.hero-marketing h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.texto-hero { font-size: 1.15rem; color: var(--kipmi-ink-soft); max-width: 540px; margin: 0 auto 1.8rem; }

.mockup-pulsera {
    max-width: 760px;
    margin: 2.5rem auto 0;
    position: relative;
    z-index: 3;
}

.seccion-marketing {
    max-width: 1080px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem;
    text-align: center;
}
.seccion-marketing.fondo-alt { border-top: 1px solid var(--kipmi-line); border-bottom: 1px solid var(--kipmi-line); }
.subtitulo-seccion { color: var(--kipmi-ink-soft); margin-bottom: 2.5rem; font-size: 1.05rem; }
.sub-bloque-marketing { margin-bottom: 4.5rem; }
.sub-bloque-marketing:last-child { margin-bottom: 0; }
.seccion-marketing.fondo-alt .sub-bloque-marketing:first-child { margin-bottom: 7rem; }
.seccion-precios { padding-bottom: 1.5rem; }
.seccion-precios .sub-bloque-marketing { margin-bottom: 1.8rem; }

.cuadricula-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: left; }
@media (max-width: 760px) { .cuadricula-pasos { grid-template-columns: 1fr; } }
.paso-numero {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #fff;
    margin-bottom: 1rem; font-size: 1.1rem;
}
.paso:nth-child(1) .paso-numero { background: var(--blob-amarillo); }
.paso:nth-child(2) .paso-numero { background: var(--blob-teal); }
.paso:nth-child(3) .paso-numero { background: var(--blob-violeta); }

.cuadricula-tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 760px) { .cuadricula-tipos { grid-template-columns: 1fr; } }
.tarjeta-tipo-marketing {
    background: var(--kipmi-blanco);
    border-radius: 24px;
    padding: 2rem 1.5rem;
    border: 1.5px solid var(--kipmi-line);
    text-align: left;
}
.tarjeta-tipo-marketing .icono-tipo { font-size: 2rem; margin-bottom: .8rem; display: block; }

.cuadricula-precios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 760px; margin: 0 auto; }
@media (max-width: 760px) { .cuadricula-precios { grid-template-columns: 1fr; } }
.tarjeta-precio {
    background: var(--kipmi-blanco);
    border-radius: 28px;
    padding: 2.2rem 1.8rem;
    border: 1.5px solid var(--kipmi-line);
    text-align: left;
}
.tarjeta-precio.destacada { background: var(--kipmi-ink); color: #fff; border-color: var(--kipmi-ink); }
.tarjeta-precio.destacada .texto-ayuda { color: #C8C5C0; }
.precio-grande { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 2.6rem; margin: .6rem 0; }
.precio-grande span { font-size: 1rem; font-weight: 500; opacity: .7; }

.cta-final { text-align: center; }
.pie-marketing { text-align: center; padding: 1rem 1.5rem 3rem; color: var(--kipmi-ink-soft); font-size: .9rem; }
.pie-marketing a { text-decoration: none; margin: 0 .6rem; }

/* ---------- Mockup de teléfonos en el hero ---------- */
.telefonos-mockup { display: flex; justify-content: center; align-items: flex-end; position: relative; height: 420px; }
.telefono {
    width: 210px;
    background: var(--kipmi-ink);
    border-radius: 32px;
    padding: 8px;
    box-shadow: 0 24px 50px -20px rgba(22,24,27,.35);
    position: absolute;
}
.telefono-qr { left: calc(50% - 190px); top: 10px; transform: rotate(-7deg); z-index: 2; }
.telefono-resultado { left: calc(50% - 30px); top: 40px; transform: rotate(5deg); z-index: 3; }
.telefono-notch { width: 50px; height: 6px; background: rgba(255,255,255,.25); border-radius: 4px; margin: 6px auto 4px; }
.telefono-pantalla { background: var(--kipmi-blanco); border-radius: 24px; overflow: hidden; height: 380px; position: relative; }

.pantalla-qr { display: flex; align-items: center; justify-content: center; height: 100%; }
.mini-banda { background: var(--blob-violeta); padding: .6rem .9rem; display: flex; justify-content: space-between; align-items: baseline; }
.mini-banda span { color: #fff; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.mini-titulo { padding: .7rem .9rem .2rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1rem; }
.mini-campo { padding: .5rem .9rem; border-top: 1px solid var(--kipmi-line); }
.mini-etiqueta { display: block; font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; color: var(--kipmi-ink-soft); }
.mini-valor { font-size: .82rem; display: flex; align-items: center; gap: .4rem; }
.mini-whatsapp { background: #25D366; color: #fff; font-size: .58rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; }

/* ---------- Super-admin ---------- */
.cuadricula-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.6rem; }
@media (max-width: 760px) { .cuadricula-stats { grid-template-columns: repeat(2, 1fr); } }
.tarjeta-stat { background: var(--kipmi-blanco); border: 1.5px solid var(--kipmi-line); border-radius: 20px; padding: 1.2rem 1.3rem; }
.tarjeta-stat .numero-stat { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.9rem; display: block; }
.tarjeta-stat .etiqueta-stat { font-size: .8rem; color: var(--kipmi-ink-soft); }

.tabla-superadmin { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-superadmin th { text-align: left; padding: .6rem .7rem; color: var(--kipmi-ink-soft); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1.5px solid var(--kipmi-line); }
.tabla-superadmin td { padding: .65rem .7rem; border-bottom: 1px solid var(--kipmi-line); }
.tabla-superadmin tr:last-child td { border-bottom: none; }

.etiqueta-estado { padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; display: inline-block; }
.etiqueta-estado.activa { background: #E3F6EF; color: #137A5E; }
.etiqueta-estado.pendiente { background: #FBEEE6; color: #B4582A; }
.etiqueta-estado.inactiva { background: #F1EDE6; color: var(--kipmi-ink-soft); }

.pestanas-superadmin { display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.pestanas-superadmin a { padding: .5rem 1.1rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9rem; background: var(--kipmi-blanco); border: 1.5px solid var(--kipmi-line); color: var(--kipmi-ink); }
.pestanas-superadmin a.activa { background: var(--kipmi-ink); color: #fff; border-color: var(--kipmi-ink); }

.acciones-fila { display: flex; gap: .8rem; flex-wrap: wrap; }
.acciones-fila form { display: inline; }
.acciones-fila button { font-size: .82rem; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Botón de engrane en la landing pública ---------- */
.boton-engrane {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    font-size: 1rem;
    flex-shrink: 0;
}
.boton-engrane:hover { background: rgba(255,255,255,.35); }

/* ---------- Campo de teléfono con código de país (admin) ---------- */
.campo-telefono { display: flex; gap: .5rem; margin-top: .4rem; }
.campo-telefono select { flex: 0 0 auto; max-width: 45%; padding: .65rem .5rem; border: 1.5px solid var(--kipmi-line); border-radius: 12px; background: var(--kipmi-bg); font-family: inherit; font-size: .85rem; }
.campo-telefono input { flex: 1; margin-top: 0; }

/* ---------- Campos libres protegidos (admin) ---------- */
.campo-libre { border: 1.5px solid var(--kipmi-line); border-radius: 14px; padding: .8rem; margin-bottom: .8rem; }
.campo-libre input { width: 100%; border: none; border-bottom: 1px solid var(--kipmi-line); padding: .3rem 0; margin-bottom: .5rem; font-weight: 600; font-family: inherit; background: transparent; }
.campo-libre textarea { width: 100%; border: none; padding: .2rem 0; font-family: inherit; background: transparent; resize: vertical; }
.campo-libre input:focus, .campo-libre textarea:focus { outline: none; }

/* ---------- Lista de archivos (admin) ---------- */
.fila-archivo { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--kipmi-line); flex-wrap: wrap; }
.fila-archivo a { font-weight: 600; text-decoration: none; flex: 1; min-width: 140px; }
.fila-archivo select { padding: .35rem .5rem; border: 1.5px solid var(--kipmi-line); border-radius: 8px; font-family: inherit; font-size: .85rem; }

#grabadora-controles { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
#estado-grabacion { color: #C0392B; font-weight: 600; }

/* ---------- Logo ---------- */
.logo-kipmi { height: 34px; display: block; }
.logo-kipmi-centrado { height: 42px; display: block; margin: 0 auto 1.2rem; }
.logo-kipmi-chica { height: 22px; width: auto; display: block; }

/* Input de archivo accesible-oculto: más confiable en iOS que display:none */
.input-archivo-oculto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}