/* =====================================================
   PICKFLOW - ESTILOS DEL SITIO PÚBLICO
   Página institucional (index.php) y resultado del
   formulario de contacto. Mobile-first.
   ===================================================== */

:root {
    --navy: #142544;
    --navy-oscuro: #0b1629;
    --navy-tarjeta: #1b2f54;
    --azul: #3265B7;
    --verde: #20C95A;
    --verde-hover: #18ad4c;
    --celeste: #42BFF3;
    --naranja: #F5A623;
    --fondo: #F3F6FA;
    --blanco: #FFFFFF;
    --texto: #142544;
    --texto-2: #55657D;
    --borde: #E2E8F0;
    --radio: 18px;
    --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(20, 37, 68, .07);
}

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--texto);
    background: var(--blanco);
}

h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; color: inherit; }
:where(a, button, input, textarea):focus-visible { outline: 3px solid #FFBF47; outline-offset: 3px; }

/* En pantallas muy anchas el contenido aprovecha más el ancho */
@media (min-width: 1400px) { .container { max-width: 1440px; } }

/* ---------- Navegación ---------- */
.sitio-nav {
    background: rgba(13, 26, 49, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    padding: 8px 0;
}
/* logo-blanco.png ya viene recortado: se muestra a su tamaño, sin transform, y no toca el borde de la pantalla */
.sitio-logo { height: 54px; width: auto; margin: 3px 0; }
.sitio-nav .nav-link { color: rgba(255, 255, 255, .78); font-weight: 500; font-size: .95rem; padding: 10px 12px !important; border-radius: 8px; }
.sitio-nav .nav-link:hover, .sitio-nav .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .06); }
/* Cambio de idioma: bandera + código (EN / ES) */
.sitio-nav .idioma-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .04em; }
.idioma-bandera { width: 24px; height: 16px; border-radius: 3px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.btn-ingresar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--verde);
    color: var(--navy);
    font-weight: 700;
    font-size: .95rem;
}
.btn-ingresar:hover { background: var(--verde-hover); color: var(--navy); }
@media (max-width: 991.98px) {
    .sitio-nav .navbar-collapse { padding: 12px 0 16px; }
    .btn-ingresar { margin-top: 8px; width: 100%; justify-content: center; }
}

/* ---------- Botones ---------- */
.btn-verde, .btn-contorno, .btn-confirmar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 12px 26px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
}
.btn-verde { background: var(--verde); color: var(--navy); border: 0; }
.btn-verde:hover, .btn-verde:focus { background: var(--verde-hover); color: var(--navy); }
.btn-contorno { border: 2px solid rgba(255, 255, 255, .35); color: #fff; background: transparent; }
.btn-contorno:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .06); }

/* ---------- Etiquetas pequeñas sobre los títulos ---------- */
.kicker { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .16em; color: var(--azul); margin-bottom: 12px; }
.kicker-verde { color: var(--verde); }
.kicker-celeste { color: var(--celeste); }

/* ---------- Portada ---------- */
.portada {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 80% 30%, rgba(32, 201, 90, .16), transparent 35%),
        radial-gradient(circle at 10% 90%, rgba(50, 101, 183, .35), transparent 45%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(160deg, var(--navy) 0%, var(--navy-oscuro) 100%);
}
/* La portada ya no ocupa toda la pantalla: alto según su contenido para que no queden espacios vacíos */
.portada-fila { padding: 128px 0 80px; }
@media (min-width: 992px) { .portada-fila { padding: 150px 0 110px; } }
.portada-titulo { font-size: clamp(2.3rem, 1.4rem + 4vw, 4.2rem); line-height: 1.05; margin-bottom: 22px; color: #fff; }
.portada-titulo span { color: var(--verde); display: block; }
.portada-texto { font-size: 1.15rem; color: rgba(255, 255, 255, .75); max-width: 560px; margin-bottom: 32px; }

/* Tarjeta de ejemplo de la hoja de ruta */
.tarjeta-picking {
    max-width: 420px;
    margin: 0 auto;
    padding: 26px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
    transform: rotate(-2deg);
}
.tarjeta-picking-cabecera { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 26px; }
.punto-estado { width: 12px; height: 12px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 6px rgba(32, 201, 90, .2); }
.tarjeta-picking-etiqueta { font-size: .75rem; letter-spacing: .16em; color: rgba(255, 255, 255, .6); }
.tarjeta-picking-codigo {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.7rem);
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
    margin: 4px 0 26px;
}
.btn-confirmar { width: 100%; border: 0; background: #fff; color: var(--navy); transition: background-color .2s, color .2s; }
.btn-confirmar:hover { background: #E8EEF8; }
/* Estado fijo de la tarjeta de la portada: solo muestra, no se puede tocar */
.btn-confirmar.confirmada, .btn-confirmar.confirmada:hover { background: #20c95a; color: #082713; cursor: default; user-select: none; }

/* ---------- Secciones ---------- */
.seccion { padding: 84px 0; }
.seccion-gris { background: var(--fondo); }
.seccion-oscura { background: var(--navy); color: #fff; }
.seccion-titulo { max-width: 680px; margin-bottom: 42px; }
.seccion-titulo h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem); margin-bottom: 10px; }
.seccion-titulo p { color: var(--texto-2); font-size: 1.08rem; margin: 0; }
.seccion-oscura .seccion-titulo p { color: rgba(255, 255, 255, .7); }

/* Tarjetas informativas */
.tarjeta-info {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 30px;
    box-shadow: var(--sombra);
}
.tarjeta-info h3 { font-size: 1.45rem; margin: 16px 0 10px; }
.tarjeta-info p { color: var(--texto-2); }
.tarjeta-problema { border-top: 5px solid var(--naranja); }
.tarjeta-solucion { border-top: 5px solid var(--verde); }

.etiqueta { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.etiqueta-naranja { background: #FFF1DC; color: #9A5B00; }
.etiqueta-verde { background: #E4F8EC; color: #0F7A37; }
.etiqueta-azul { background: #EAF1FB; color: var(--azul); }

.lista-simple { list-style: none; padding: 18px 0 0; margin: 18px 0 0; border-top: 1px solid var(--borde); display: grid; gap: 10px; }
.lista-simple li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.tarjeta-problema .lista-simple i { color: #E07B00; }
.tarjeta-solucion .lista-simple i { color: #0F9A45; }

.lista-protocolo { list-style: none; padding: 0; margin: 18px 0 0; counter-reset: paso; display: grid; gap: 10px; }
.lista-protocolo li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--fondo); font-weight: 600; }
.lista-protocolo li::before {
    counter-increment: paso;
    content: counter(paso);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--navy);
    color: #fff;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lista-protocolo strong { display: block; line-height: 1.3; }
.lista-protocolo small { display: block; margin-top: 3px; color: var(--texto-2); font-weight: 400; font-size: .86rem; line-height: 1.45; }
.lista-protocolo li::before { margin-top: 1px; }

/* Información operativa */
.operativa-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.operativa-icono {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--navy);
    color: #fff;
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tarjeta-operativa h3 { margin: 18px 0 6px; }
.tarjeta-operativa .operativa-resumen { margin: 0; font-size: .95rem; line-height: 1.5; }

/* Trazabilidad: estados de un pedido */
.estados-encabezado { display: flex; align-items: flex-start; gap: 16px; }
.tarjeta-estados h3 { margin: 0 0 4px; }
.tarjeta-estados p { margin: 0; }
.estados-pedido { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.estados-pedido li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 12px; background: var(--fondo); }
.estados-pedido li:not(:last-child)::after {
    content: "\F285";
    font-family: bootstrap-icons;
    position: absolute;
    right: -11px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--blanco);
    border: 1px solid var(--borde);
    color: var(--azul);
    font-size: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.estados-pedido strong { display: block; line-height: 1.3; }
.estados-pedido small { display: block; margin-top: 3px; color: var(--texto-2); font-size: .86rem; line-height: 1.45; }
.estado-punto { width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; flex-shrink: 0; }
.estado-pendiente { background: var(--naranja); }
.estado-picking { background: var(--azul); }
.estado-validar { background: var(--celeste); }
.estado-completado { background: var(--verde); }
@media (max-width: 991.98px) {
    .estados-pedido { grid-template-columns: 1fr 1fr; }
    .estados-pedido li::after { display: none; }
}
@media (max-width: 575.98px) {
    .estados-pedido { grid-template-columns: 1fr; }
}

/* Zonas del depósito */
.tarjeta-zona {
    height: 100%;
    padding: 28px;
    border-radius: var(--radio);
    background: var(--navy-tarjeta);
    border: 1px solid rgba(255, 255, 255, .08);
    border-top: 4px solid var(--color-zona);
}
.tarjeta-zona > i {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--color-zona);
    background: color-mix(in srgb, var(--color-zona) 16%, transparent);
}
.tarjeta-zona h3 { font-size: 1.35rem; margin: 18px 0 8px; color: #fff; }
.tarjeta-zona p { color: rgba(255, 255, 255, .7); margin: 0; }
.zona-celeste { --color-zona: var(--celeste); }
.zona-naranja { --color-zona: var(--naranja); }
.zona-verde { --color-zona: var(--verde); }

/* Pasos del proceso */
.proceso { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.proceso li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
    border: 1px dashed rgba(255, 255, 255, .18);
    text-align: center;
    font-weight: 600;
}
.proceso li > i { font-size: 1.8rem; color: var(--verde); }
.proceso-numero {
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: .75rem;
    font-weight: 800;
    color: rgba(255, 255, 255, .45);
}
@media (min-width: 768px) {
    .proceso { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .proceso li:not(:last-child)::after {
        content: "\F285";
        font-family: "bootstrap-icons";
        position: absolute;
        right: -13px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--verde);
        z-index: 1;
    }
}

/* Galería */
.tarjeta-galeria {
    margin: 0;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--blanco);
    border: 1px solid var(--borde);
    box-shadow: var(--sombra);
}
.galeria-imagen { position: relative; aspect-ratio: 4 / 3; background: #E7ECF3; overflow: hidden; }
.galeria-imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tarjeta-galeria:hover .galeria-imagen img { transform: scale(1.04); }
.galeria-reemplazo { display: none; }
.galeria-imagen.sin-imagen .galeria-reemplazo {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--texto-2);
}
.galeria-reemplazo i { font-size: 2rem; }
.tarjeta-galeria figcaption { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; font-weight: 700; }
.tarjeta-galeria figcaption small { font-size: .72rem; font-weight: 800; color: var(--azul); background: #EAF1FB; padding: 3px 8px; border-radius: 6px; }

/* Contacto */
.formulario-contacto {
    background: var(--fondo);
    border-radius: var(--radio);
    padding: 28px;
}
.formulario-contacto label { font-size: .75rem; font-weight: 800; letter-spacing: .12em; color: var(--texto-2); margin-bottom: 6px; }
.formulario-contacto .form-control { min-height: 50px; border-radius: 12px; border-color: #D5DDE8; background: #fff; }
.formulario-contacto .form-control:focus { border-color: var(--azul); box-shadow: 0 0 0 .2rem rgba(50, 101, 183, .18); }

.tarjeta-equipo {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 32px;
    border-radius: var(--radio);
    color: #fff;
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-oscuro) 100%);
}
.equipo-dato { margin-bottom: 22px; position: relative; z-index: 1; }
.equipo-dato span { font-size: .74rem; font-weight: 800; letter-spacing: .16em; color: var(--verde); }
.equipo-dato h3 { font-size: 1.8rem; margin: 4px 0 0; }
.equipo-dato p { margin: 4px 0 0; color: rgba(255, 255, 255, .85); }
.equipo-dato i { color: var(--celeste); margin-right: 6px; }
.equipo-decoracion { position: absolute; right: -10px; bottom: -30px; font-size: 9rem; color: rgba(255, 255, 255, .05); }
.equipo-redes { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.equipo-redes a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    transition: background-color .2s;
}
.equipo-redes a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.equipo-redes i { color: var(--celeste); margin: 0; font-size: 1.1rem; }
/* El texto del enlace no hereda el estilo de las etiquetas en mayúscula de .equipo-dato span */
.equipo-redes span { font-size: inherit; font-weight: inherit; letter-spacing: normal; color: inherit; }

/* Mapa de la institución */
.mapa-institucion { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); box-shadow: var(--sombra); background: var(--fondo); }
.mapa-institucion iframe { display: block; width: 100%; height: 320px; border: 0; }
@media (max-width: 575.98px) { .mapa-institucion iframe { height: 260px; } }

/* Pie */
.sitio-pie { background: var(--navy-oscuro); color: rgba(255, 255, 255, .7); padding: 22px 0; font-size: .92rem; }
.sitio-pie .sitio-logo { height: 39px; margin: 2px 0; }
.pie-separador { color: rgba(255, 255, 255, .3); }

/* Animación de entrada de las tarjetas (la activa js/script.js) */
@media (prefers-reduced-motion: no-preference) {
    .animar .tarjeta-info, .animar .tarjeta-zona, .animar .tarjeta-galeria { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
    .animar .visible { opacity: 1; transform: none; }
}

/* Resultado del formulario de contacto */
.pagina-resultado { min-height: 100vh; display: flex; align-items: center; background: var(--fondo); padding: 24px 0; }
.resultado { max-width: 560px; margin: 0 auto; text-align: center; }
.resultado h1 { font-size: 1.8rem; }
.resultado-icono {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    background: #E4F8EC;
    color: #0F7A37;
}
.resultado-icono.error { background: #FDECEE; color: #C62828; }

@media (max-width: 575.98px) {
    .seccion { padding: 64px 0; }
    .tarjeta-info, .tarjeta-zona, .formulario-contacto, .tarjeta-equipo { padding: 22px; }
}