/* ServiAnuncios · Rediseño — Componentes compartidos (header, footer, drawer, modal, WhatsApp) */

/* Logo de marca */
.brand{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:0;line-height:1}
.brand__servi{color:var(--c-blue)}
.brand__nuncios{color:var(--c-navy)}
.brand__a{display:inline-flex;align-items:center;justify-content:center;width:1.35em;height:1.35em;margin:0 .12em;border-radius:50%;background:var(--c-accent);color:#fff;font-size:.72em;transform:translateY(-1px)}
.brand--light .brand__nuncios{color:#fff}

/* ===== Header ===== */
.hd{position:sticky;top:0;z-index:50;background:rgba(247,244,237,.9);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--c-line)}
.hd__row{display:flex;align-items:center;gap:18px;height:var(--header-h)}
.hd__loc{display:inline-flex;align-items:center;gap:6px;padding:.5em .9em;border-radius:var(--r-pill);background:#fff;border:1px solid var(--c-line);font-weight:600;color:var(--c-text-2);font-size:.92rem}
.hd__nav{margin-left:auto;display:flex;align-items:center;gap:22px}
/* La barra es una <ul>: la lista es la que reparte los items, el <nav> solo la contiene
   (y en movil ademas al boton de cerrar). */
.hd__nav-list{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.hd__link{font-weight:600;color:var(--c-text-2);white-space:nowrap}
.hd__link:hover{color:var(--c-blue)}
.hd__cta{margin-left:4px}
.hd__burger{display:none;margin-left:auto;color:var(--c-navy)}
.hd__burger .icon{width:26px;height:26px}
.icon--sm{width:16px;height:16px}

/* ===== Breadcrumb ===== */
.sa-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 18px;color:var(--c-mut);font-size:.92rem;line-height:1.3}
.sa-crumb a{color:var(--c-blue);font-weight:800;text-decoration:none}
.sa-crumb a:hover{color:var(--c-blue-700)}
.sa-crumb span{color:var(--c-navy);font-weight:800}
.sa-crumb .icon{width:14px;height:14px;color:var(--c-mut);stroke-width:2.4;flex:none}
.sa-crumb--on-dark a,.sa-crumb--on-dark span{color:#fff}
.sa-crumb--on-dark .icon{color:rgba(255,255,255,.72)}

/* Dropdown cuenta */
.hd__account{position:absolute;right:20px;top:64px;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:8px;min-width:200px;display:none}
.hd__account.show{display:block}
.hd__account li a{display:block;padding:.55em .8em;border-radius:8px;font-weight:600;color:var(--c-text-2)}
.hd__account li a:hover{background:var(--c-blue-050);color:var(--c-blue)}
.hd__account .dropdown-divider{height:1px;padding:0;margin:6px 0;background:var(--c-line)}

/* ===== Menú móvil (mismo <nav> del header, presentado como panel lateral) ===== */
/* En escritorio estos tres elementos no existen visualmente; el panel solo se arma bajo 860px. */
.hd__nav-close,.hd__nav-cats{display:none}
.hd__backdrop{position:fixed;inset:0;z-index:80;background:rgba(22,34,61,.45)}
.hd__backdrop[hidden]{display:none}
.hd__nav-label{margin:18px 0 8px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-mut)}
.hd__nav-cats ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.hd__nav-cats a{display:inline-block;padding:.5em .9em;border-radius:var(--r-pill);background:#fff;border:1px solid var(--c-line);font-weight:600;font-size:.9rem;color:var(--c-text-2)}

/* ===== Footer ===== */
.ft{margin-top:64px;background:var(--c-navy);color:#cfd6e6}
.ft__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px;padding-block:48px}
.ft__tag{margin-top:12px;color:#9aa6c0;font-size:.95rem;max-width:38ch}
.ft__col h4{color:#fff;font-size:1rem;margin-bottom:12px}
.ft__col ul li{margin-bottom:8px}
.ft__col a{color:#cfd6e6}
.ft__col a:hover{color:#fff}
.ft__cta{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:22px;align-self:start}
.ft__cta p{font-weight:700;color:#fff;margin-bottom:12px}
.ft__bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:18px;font-size:.85rem;color:#8b97b3}
.ft__bottom a{color:#cfd6e6}

/* ===== WhatsApp flotante ===== */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%;background:var(--c-green);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg)}
.wa-float:hover{background:var(--c-green-700)}

/* ===== Modal de acceso ===== */
.sa-modal{position:fixed;inset:0;z-index:100;display:none;overflow-y:auto;background:rgba(22,34,61,.5);padding:20px}
.sa-modal.is-open,.sa-modal.show,.sa-modal.in{display:block}
.modal-backdrop{display:none!important}
.sa-modal__dialog{width:100%;max-width:400px;margin:6vh auto}
.sa-modal__content{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.sa-modal__head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--c-line)}
.sa-modal__head h5{margin:0;font-family:var(--font-display);font-weight:800;color:var(--c-navy)}
.sa-modal__close{font-size:1.6rem;line-height:1;color:var(--c-mut)}
.sa-modal__body{padding:22px}
.sa-modal__body .form-group{margin-bottom:14px}
.sa-modal__body label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--c-text-2)}
.sa-modal__body .form-control{width:100%;padding:.75em .9em;border:1px solid var(--c-line);border-radius:var(--r-sm);background:var(--c-cream);font-size:1rem}
.sa-modal__body .form-control:focus{outline:none;border-color:var(--c-blue);background:#fff}
.sa-modal__body .d-none{display:none}
.sa-modal__body .text-danger{color:#d33;font-size:.85rem}
.boton-gmail-block{position:relative;margin-top:16px;text-align:center}
.boton-gmail-block .g-signin2{position:absolute!important;width:100%!important;height:100%!important;left:0;top:0;opacity:0;cursor:pointer}
.boton-gmail-block .g-signin2 *, .abcRioButton, .abcRioButtonLightBlue{width:100%!important;height:100%!important}
.boton-gmail{display:flex;align-items:center;justify-content:center;gap:8px;padding:.7em;border:1px solid var(--c-line);border-radius:var(--r-sm);font-weight:600;cursor:pointer}
.sa-modal__foot{margin:16px 0 0;text-align:center;color:var(--c-slate);font-size:.92rem}
.sa-modal__foot a{color:var(--c-blue);font-weight:600}

/* User Profile Header Widget */
.hd__user-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.hd__user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 6px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: .95rem;
  font-weight: 700;
  color: var(--c-navy);
  transition: background-color .2s;
}
.hd__user-btn:hover {
  background-color: rgba(26,91,212,0.06);
}
.hd__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.hd__avatar.tone-1 { background-color: #1a5bd4; }
.hd__avatar.tone-2 { background-color: #00a86b; }
.hd__avatar.tone-3 { background-color: #ff9800; }
.hd__avatar.tone-4 { background-color: #e91e63; }
.hd__avatar.tone-5 { background-color: #9c27b0; }
.hd__avatar.tone-6 { background-color: #00bcd4; }
.hd__username {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hd__account {
  top: 48px !important;
  right: 0 !important;
  min-width: 200px !important;
  padding: 6px 0 !important;
}
.hd__account li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
}
.hd__account li a .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
  fill: none;
  color: var(--c-mut);
  flex: none;
}
.hd__account li a:hover .icon {
  color: var(--c-blue);
}
.hd__account li a.logout-link:hover {
  color: #d33 !important;
}
.hd__account li a.logout-link:hover .icon {
  color: #d33;
}

/* ===== Responsive ===== */
@media(max-width:860px){
  /* backdrop-filter convierte al header en bloque contenedor de sus hijos position:fixed,
     lo que recortaba el panel a la altura del header. En movil el desenfoque no aporta. */
  .hd{backdrop-filter:none;-webkit-backdrop-filter:none}
  /* El mismo <nav> pasa a ser el panel lateral: nada de markup duplicado. */
  .hd__nav{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:81;width:min(88%,360px);margin:0;
    display:flex;flex-direction:column;align-items:stretch;gap:0;padding:16px 20px 28px;
    background:var(--c-cream);box-shadow:var(--shadow-lg);overflow-y:auto;
    transform:translateX(100%);transition:transform .2s ease;visibility:hidden}
  .hd__nav.is-open{transform:translateX(0);visibility:visible}
  /* La lista hereda la disposicion vertical del panel. */
  .hd__nav-list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .has-drawer .hd{z-index:82}
  .hd__nav .hd__link,.hd__nav .hd__cta{display:block;width:100%;box-sizing:border-box;
    padding:.85em 0;border-bottom:1px solid var(--c-line);border-radius:0;background:none;
    color:var(--c-navy);font-weight:700;font-size:1rem;text-align:left;white-space:normal}
  .hd__nav .hd__cta{margin:0;color:var(--c-accent-600);box-shadow:none}
  .hd__nav-close{display:inline-flex;align-self:flex-end;margin-bottom:6px;color:var(--c-navy)}
  .hd__nav-cats{display:block}
  /* La cuenta se despliega como lista plana; el dropdown flotante es solo de escritorio. */
  .hd__nav .hd__user-dropdown{display:flex;flex-direction:column}
  .hd__nav .hd__user-btn{padding:.85em 0;border-bottom:1px solid var(--c-line)}
  .hd__nav .hd__user-btn svg:last-child{display:none}
  .hd__nav .hd__account{position:static;display:block;min-width:0;padding:0;
    background:transparent;border:0;box-shadow:none}
  .hd__burger{display:inline-flex}
  .hd__loc{margin-left:auto}
  .ft__grid{grid-template-columns:1fr 1fr;gap:24px}
  .ft__brand{grid-column:1 / -1}
  .ft__cta{grid-column:1 / -1}
}
@media(max-width:520px){
  .ft__grid{grid-template-columns:1fr}
}