/* ===========================================================
   Padrón PJ — Estilo institucional "gob.ar" (full-bleed)
   Paleta: celeste #74ACDF · azul #0f3b66/#1d4e89 · blanco
   =========================================================== */
:root {
    --navy:      #0f3b66;
    --azul:      #1d4e89;
    --celeste:   #74ACDF;
    --tinta:     #1c2b40;
    --gris:      #5f6b7a;
    --gris-2:    #7f8b9a;
    --gris-3:    #9aa4b1;
    --linea:     #eef1f5;
    --borde:     #e2e6ec;
    --campo:     #f5f8fb;
    --verde-wsp: #1f9d55;
    --fuente:    'Archivo', 'Segoe UI', system-ui, sans-serif;
    --maxw:      720px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
    font-family: var(--fuente);
    color: var(--tinta);
    background: #fff;
    min-height: 100vh;
}

.site { min-height: 100vh; display: flex; flex-direction: column; }

.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Franja gubernamental ---------- */
.gov-strip { background: var(--navy); }
.gov-strip .container {
    display: flex; align-items: center; gap: 12px;
    padding-top: 9px; padding-bottom: 9px;
}
.gov-strip .l { color: #cfe0f2; font-size: 11.5px; letter-spacing: 1.5px; font-weight: 600; text-transform: uppercase; }
.gov-strip .r { margin-left: auto; color: #8fb4d9; font-size: 11.5px; }

/* ---------- Header ---------- */
.site-header { border-bottom: 2px solid var(--celeste); }
.site-header .container {
    display: flex; align-items: center; gap: 14px;
    padding-top: 16px; padding-bottom: 16px;
}
.site-header img { height: 48px; width: auto; display: block; }
.site-header .brand-right { margin-left: auto; display: flex; align-items: center; }
.site-header .brand-right img { height: 52px; width: auto; display: block; }

/* ---------- Contenido principal ---------- */
.main { flex: 1; padding: 40px 0 48px; }

/* ---------- Hero ---------- */
.hero { margin-bottom: 26px; }
.hero h1 {
    font-weight: 800;
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    color: var(--navy);
    letter-spacing: -.4px;
}
.hero .sub { font-size: 1rem; color: var(--gris); margin-top: 10px; max-width: 560px; }

/* ---------- Buscador ---------- */
.search { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.search-box {
    flex: 1;
    display: flex; align-items: center; gap: 9px;
    background: var(--campo);
    border: 1.5px solid #cdd8e4;
    border-radius: 9px;
    padding: 0 15px;
    min-height: 52px;
    order: 1;
    transition: border-color .15s, box-shadow .15s;
}
.search-box:focus-within {
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(29,78,137,.14);
    background: #fff;
}
.search-box i { font-size: 20px; color: var(--gris-2); }
.search-box input {
    flex: 1; border: none; background: transparent; outline: none;
    font-family: var(--fuente); font-size: 1.05rem; color: var(--tinta);
    padding: 14px 0; min-width: 0; letter-spacing: .3px;
}
.search-box input::placeholder { color: #9aa8ba; }

.btn {
    border: none; cursor: pointer;
    font-family: var(--fuente); font-weight: 600; font-size: .95rem;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    text-decoration: none; white-space: nowrap;
    transition: filter .15s, background .15s, transform .05s;
}
.btn:active { transform: scale(.98); }
.btn-buscar { background: var(--navy); color: #fff; padding: 0 26px; min-height: 52px; order: 2; }
.btn-buscar:hover { filter: brightness(1.15); }
.btn-buscar:disabled { opacity: .6; cursor: default; }

.hint { font-size: .82rem; color: var(--gris-2); order: 3; flex-basis: 100%; width: 100%; }

/* ---------- Resultado ---------- */
.resultado { margin-top: 4px; }

.persona {
    border: 1px solid var(--borde);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
    animation: aparecer .22s ease;
}
.p-head {
    display: flex; align-items: center; gap: 13px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--linea);
}
.avatar {
    width: 46px; height: 46px; border-radius: 8px;
    background: var(--navy); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px; flex-shrink: 0;
}
.p-id { flex: 1; min-width: 0; }
.p-id .p-name { font-weight: 800; font-size: 1.05rem; color: var(--tinta); }
.p-id .p-dni { font-size: .8rem; color: var(--gris-2); letter-spacing: .3px; }
.chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: #e5f0f9; color: var(--navy);
    font-size: 1.11rem; font-weight: 600;
    padding: 9px 18px; border-radius: 8px;
    white-space: nowrap;
}
.chip i { font-size: 1.11rem; }

.p-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea); }
.p-datos .dato { background: #fff; padding: 12px 18px; }
.p-datos .k { font-size: .68rem; letter-spacing: .6px; text-transform: uppercase; color: var(--gris-2); font-weight: 600; }
.p-datos .v { font-size: .95rem; font-weight: 600; color: var(--tinta); margin-top: 3px; }
.p-datos .v.muni { color: var(--azul); }

/* ---------- Acciones ---------- */
.acciones { display: flex; gap: 10px; }
.btn-wsp { flex: 1; background: var(--verde-wsp); color: #fff; padding: 13px; }
.btn-wsp:hover { filter: brightness(1.06); }
.btn-copy { border: 1.5px solid #cdd8e4; color: var(--azul); background: #fff; padding: 13px 18px; }
.btn-copy:hover { background: var(--campo); }

/* ---------- Estados ---------- */
.mensaje {
    padding: 15px 18px; border-radius: 9px; font-size: .95rem;
    margin-bottom: 14px; animation: aparecer .2s ease;
    border: 1px solid var(--borde); background: #fff;
}
.mensaje.error    { color: #a3402d; border-left: 4px solid #d05a3e; }
.mensaje.vacio    { color: var(--navy); border-left: 4px solid var(--celeste); background: #f4f8fc; }
.mensaje.cargando { color: var(--azul); border-left: 4px solid var(--azul); }

.spinner {
    display: inline-block; width: 15px; height: 15px;
    border: 2.5px solid rgba(29,78,137,.25);
    border-top-color: var(--azul);
    border-radius: 50%;
    animation: girar .7s linear infinite;
    vertical-align: -3px; margin-right: 8px;
}

.toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--navy); color: #fff;
    padding: 12px 22px; border-radius: 8px;
    font-size: .9rem; box-shadow: 0 10px 30px rgba(15,59,102,.3);
    opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .2s; z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--linea);
    background: #fafbfc;
    color: var(--gris-2);
    font-size: .8rem; line-height: 1.5;
}
.site-footer .container { padding-top: 18px; padding-bottom: 18px; }

@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Responsive / celular ---------- */
@media (max-width: 640px) {
    .container { padding: 0 16px; }
    .main { padding: 26px 0 32px; }
    .hero { margin-bottom: 20px; }
    .site-header img { height: 40px; }
    .site-header .brand-right img { height: 44px; }
    .gov-strip .r { display: none; }
    .search { flex-direction: column; gap: 10px; }
    .search-box { width: 100%; }
    .hint { order: 2; margin: 0; }
    .btn-buscar { width: 100%; order: 3; }
    .acciones { flex-direction: column; }
    .btn-copy { justify-content: center; }
}

/* ---------- Turnstile ---------- */
.ts-wrap { margin-top: 14px; max-width: 340px; }

/* ---------- Banner de cookies ---------- */
.cookie-banner {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
    width: calc(100% - 32px); max-width: 720px;
    background: #fff; border: 1px solid var(--borde);
    box-shadow: 0 10px 30px rgba(15,59,102,.18);
    border-radius: 12px; padding: 14px 16px;
    display: flex; align-items: center; gap: 14px;
    font-size: .85rem; color: var(--gris); z-index: 60;
}
.cookie-banner a { color: var(--azul); }
.cookie-banner[hidden] { display: none; }
.btn-cookie { background: var(--navy); color: #fff; padding: 10px 18px; flex-shrink: 0; }
.btn-cookie:hover { filter: brightness(1.12); }

/* ---------- Contenido de texto (privacidad) ---------- */
.prosa { max-width: 720px; }
.prosa h2 { font-size: 1.15rem; color: var(--navy); margin: 22px 0 8px; font-weight: 700; }
.prosa p { color: var(--tinta); line-height: 1.65; margin-bottom: 10px; font-size: .95rem; }
.prosa a { color: var(--azul); }

@media (max-width: 560px) {
    .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---------- Banner: acciones aceptar/rechazar ---------- */
.cookie-acciones { display: flex; gap: 8px; flex-shrink: 0; }
.btn-cookie-no { background: #eef1fa; color: var(--gris); padding: 10px 16px; }
.btn-cookie-no:hover { background: #e3e8f7; }
@media (max-width: 560px) {
    .cookie-acciones { width: 100%; }
    .cookie-acciones .btn { flex: 1; justify-content: center; }
}

/* ---------- Bloque de contacto (opt-in) ---------- */
.contacto {
    margin-top: 16px;
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: #f4f8fc;
    padding: 16px 18px;
}
.contacto-cab { font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 7px; }
.contacto-cab i { font-size: 19px; }
.contacto-sub { font-size: .88rem; color: var(--gris); margin: 4px 0 12px; }
.contacto-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contacto-form input[type="email"], .contacto-form input[type="tel"] {
    font-family: var(--fuente); font-size: .98rem; color: var(--tinta);
    background: #fff; border: 1.5px solid #cdd8e4; border-radius: 9px;
    padding: 12px 14px; outline: none; min-width: 0;
}
.contacto-form input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(29,78,137,.14); }
.contacto-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--gris); cursor: pointer; }
.contacto-check input { width: 17px; height: 17px; accent-color: var(--azul); }
.contacto-form .btn-buscar { grid-column: 1 / -1; width: 100%; }
.contacto-msg { grid-column: 1 / -1; font-size: .86rem; color: var(--gris); }
.contacto-msg.err { color: #a3402d; }
.contacto-ok { display: flex; align-items: center; gap: 8px; color: #1f6b2e; font-weight: 600; padding: 6px 0; }
.contacto-ok i { font-size: 20px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 480px) { .contacto-form { grid-template-columns: 1fr; } }

/* ---------- Formulario de afiliación ---------- */
.afil-cta { margin-top: 16px; }
.afil-cta .btn-buscar { width: 100%; }
.afil {
    margin-top: 16px; border: 1px solid var(--borde); border-radius: 12px;
    background: #f4f8fc; padding: 16px 18px; animation: aparecer .22s ease;
}
.afil-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.afil-form input:not([type="checkbox"]), .afil-form select {
    font-family: var(--fuente); font-size: .98rem; color: var(--tinta);
    background: #fff; border: 1.5px solid #cdd8e4; border-radius: 9px;
    padding: 12px 14px; outline: none; min-width: 0; width: 100%;
}
.afil-form input:not([type="checkbox"]):focus, .afil-form select:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(29,78,137,.14); }
.afil-form .contacto-check { align-items: flex-start; gap: 9px; }
.afil-form .contacto-check input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.afil-form select { height: 46px; appearance: auto; }
.af-campo { display: flex; flex-direction: column; gap: 5px; font-size: .78rem; color: var(--gris); font-weight: 600; }
.af-full { grid-column: 1 / -1; }
.af-ac { position: relative; }
.ac-box {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    background: #fff; border: 1px solid #cdd8e4; border-top: none;
    border-radius: 0 0 9px 9px; max-height: 220px; overflow: auto;
    box-shadow: 0 10px 24px rgba(15,59,102,.12);
}
.ac-item { padding: 10px 14px; font-size: .92rem; cursor: pointer; }
.ac-item:hover { background: #eef5fc; color: var(--azul); }

@media (max-width: 480px) { .afil-form { grid-template-columns: 1fr; } }

/* ===========================================================
   Corrección y Acople del Autocompletado de Google Places
   =========================================================== */

/* Contenedor principal flotante de Google */
.pac-container {
    background-color: #ffffff !important;
    border: 1px solid var(--borde) !important;
    border-radius: 9px !important;
    box-shadow: 0 10px 24px rgba(15, 59, 102, .12) !important;
    font-family: var(--fuente) !important;
    margin-top: 4px !important;
    z-index: 9999 !important;
}

/* Cada fila de sugerencia de dirección */
.pac-item {
    padding: 10px 14px !important;
    font-size: .92rem !important;
    color: var(--tinta) !important;
    cursor: pointer !important;
    border-top: 1px solid var(--linea) !important;
    display: flex !important;
    align-items: center !important;
}
.pac-item:first-child {
    border-top: none !important;
}

/* Al pasar el mouse por encima de una sugerencia */
.pac-item:hover {
    background-color: #eef5fc !important;
    color: var(--azul) !important;
}

/* Anula la inyección de pseudo-elementos de Tabler Icons en Google */
.pac-item::before, 
.pac-item::after,
.pac-item *::before,
.pac-item *::after {
    display: none !important;
    content: "" !important;
}

/* Estilo para el icono nativo de ubicación de Google */
.pac-icon {
    margin-right: 8px !important;
    margin-top: 0 !important;
}

/* Ajuste de color para el texto secundario (ej. "Buenos Aires, Argentina") */
.pac-item-query {
    font-size: .92rem !important;
    color: var(--tinta) !important;
}
.pac-matched {
    font-weight: 700 !important;
    color: var(--navy) !important;
}
/* ===========================================================
   Corrección Final Estricta para Google Places
   =========================================================== */
body .pac-container {
    background-color: #ffffff !important;
    border: 1px solid #e2e6ec !important;
    border-radius: 9px !important;
    box-shadow: 0 10px 24px rgba(15, 59, 102, .12) !important;
    font-family: 'Archivo', sans-serif !important;
    z-index: 9999 !important;
}

body .pac-item {
    padding: 10px 14px !important;
    font-size: .92rem !important;
    color: #1c2b40 !important;
    cursor: pointer !important;
    border-top: 1px solid #eef1f5 !important;
    display: flex !important;
    align-items: center !important;
}

body .pac-item:hover {
    background-color: #eef5fc !important;
    color: #1d4e89 !important;
}

/* Anulación absoluta de pseudo-elementos tipográficos */
body .pac-container,
body .pac-item,
body .pac-item *,
body .pac-item::before,
body .pac-item::after,
body .pac-item *::before,
body .pac-item *::after {
    content: none !important;
    content: "" !important;
    font-family: 'Archivo', sans-serif !important;
}

/* Forzar el icono de Google a su tamaño nativo */
body .pac-icon {
    width: 16px !important;
    height: 20px !important;
    margin-right: 10px !important;
    margin-top: 0 !important;
    background-size: 34px !important;
}