/* Radar de Obra — mobile/header + profile polish v1 */

/* ---------- Header / navigation ---------- */
.topbar{
  gap:16px;
}
.top-actions{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
  flex:0 0 auto;
}
.top-actions .ghost{
  min-width:42px;
  min-height:42px;
}

.radar-primary-actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin:0 0 28px;
}
.radar-primary-actions #viewAlertas,
.radar-primary-actions #viewMyProjects{
  min-height:46px;
  padding:11px 18px;
  border-radius:14px;
}
.radar-primary-actions #viewAlertas{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff;
}
.radar-primary-actions #viewAlertas::before{
  content:'＋';
  font-size:19px;
  line-height:1;
  margin-right:7px;
}
.radar-primary-actions #viewMyProjects{
  background:#fff;
}

#interpretationHelp,
#viewAlertActivity,
#radarProfileButton,
.radar-user-menu-trigger{
  width:42px;
  height:42px;
  padding:0;
  display:inline-grid!important;
  place-items:center!important;
  border-radius:13px;
  font-size:18px;
  line-height:1;
  flex:0 0 auto;
}
#interpretationHelp{
  font-size:0!important;
}
#interpretationHelp::before{
  content:'?';
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  font-size:19px;
  line-height:1;
  font-weight:900;
  color:var(--brand);
}
#viewAlertActivity{
  position:relative;
  font-size:18px;
}
#radarProfileButton{
  font-size:0!important;
  text-align:center;
}
#radarProfileButton::before{
  content:'';
  display:block;
  width:20px;
  height:20px;
  margin:auto;
  background-position:center;
  background-repeat:no-repeat;
  background-size:20px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123f47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1.08-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6h.01A1.65 1.65 0 0 0 10 3.09V3a2 2 0 1 1 4 0v.09A1.65 1.65 0 0 0 15 4.6h.01a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9v.01A1.65 1.65 0 0 0 20.91 10H21a2 2 0 1 1 0 4h-.09A1.65 1.65 0 0 0 19.4 15z'/%3E%3C/svg%3E");
}
#logout{
  display:none!important;
}
.radar-user-menu-trigger{
  border:1px solid var(--line);
  background:var(--brand);
  color:var(--accent);
  font-weight:900;
  cursor:pointer;
}
.radar-user-menu-trigger:hover{
  background:var(--brand2);
}
.radar-user-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:80;
  width:min(270px,calc(100vw - 24px));
  padding:8px;
  border:1px solid #315158;
  border-radius:16px;
  background:#0b2429;
  box-shadow:0 18px 48px rgba(23,32,38,.16);
}
.radar-user-menu.hidden{display:none!important}
.radar-user-menu button{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#e8f6f2;
  text-align:left;
  font-weight:700;
}
.radar-user-menu button:hover{
  background:#164148;
}
.radar-user-menu .radar-menu-logout{
  margin-top:5px;
  padding-top:12px;
  border-top:1px solid #315158;
  border-radius:0 0 10px 10px;
  color:#ffc0ba;
}

/* ---------- Profile / onboarding ---------- */
.radar-profile-card{
  scrollbar-width:thin;
}
.radar-profile-card .logo.small{
  margin-bottom:12px;
}
.radar-profile-card h2{
  font-size:32px;
  letter-spacing:-.025em;
}
.radar-profile-intro{
  font-size:15px;
}
.radar-profile-account{
  padding:13px 14px!important;
  border:1px solid #e4eaec;
  background:#f7f9f9!important;
  border-radius:13px!important;
  line-height:1.45;
}
.radar-profile-optional-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  margin:0 auto 2px;
  padding:7px 11px;
  border:1px solid #dce6e7;
  border-radius:999px;
  background:#f8fbfb;
  color:var(--brand2);
  font-size:12px;
  font-weight:800;
}
.radar-profile-form label{
  gap:7px!important;
}
.radar-profile-form input{
  min-height:48px;
  border-radius:13px;
  padding:12px 14px;
}
.radar-profile-submit{
  min-height:50px;
  border-radius:14px;
  margin-top:4px!important;
}
.radar-profile-skip{
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 auto;
  padding:7px 8px;
  border:0;
  background:transparent;
  color:var(--brand2);
  font-weight:850;
  text-decoration:underline;
  text-underline-offset:4px;
}
.radar-profile-skip:hover{
  color:var(--brand);
}
.radar-profile-close{
  border:1px solid transparent!important;
  border-radius:50%!important;
}
.radar-profile-close:hover{
  border-color:var(--line)!important;
}

@media(max-width:720px){
  .topbar{
    padding:12px 12px;
    align-items:center;
    gap:8px;
  }
  .brand{
    gap:8px;
    min-width:0;
    flex:1 1 auto;
  }
  .brand .logo.small{
    flex:0 0 auto;
  }
  .brand>div:last-child{
    min-width:0;
  }
  .brand strong{
    display:block;
    font-size:13px;
    line-height:1.08;
    white-space:nowrap;
  }
  .brand small{
    font-size:11px;
    white-space:nowrap;
  }
  .top-actions{
    gap:4px;
    flex:0 0 auto;
  }
  #interpretationHelp,
  #viewAlertActivity,
  #radarProfileButton,
  .radar-user-menu-trigger{
    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
    border-radius:10px;
  }
  #interpretationHelp::before{font-size:18px}
  #radarProfileButton::before{width:19px;height:19px;background-size:19px 19px}
  .radar-user-menu{
    position:fixed;
    top:66px;
    right:12px;
    width:min(230px,calc(100vw - 24px));
  }
  .radar-primary-actions{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:10px;
    margin:-4px 0 24px;
  }
  .radar-primary-actions #viewAlertas,
  .radar-primary-actions #viewMyProjects{
    width:100%;
    min-height:48px;
    padding:10px 12px;
    white-space:nowrap;
  }

  /* On mobile the profile behaves like a true app screen, not a trapped modal. */
  .radar-profile-overlay{
    padding:0!important;
    align-items:stretch!important;
    background:#fff!important;
  }
  .radar-profile-card{
    width:100%!important;
    max-width:none!important;
    max-height:100dvh!important;
    min-height:100dvh;
    padding:22px 20px 30px!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .radar-profile-card .logo.small{
    width:44px;
    height:44px;
    border-radius:13px;
    font-size:22px;
    margin-bottom:18px;
  }
  .radar-profile-card .eyebrow{
    margin-top:0;
  }
  .radar-profile-card h2{
    font-size:34px;
    margin-right:44px;
  }
  .radar-profile-close{
    display:grid!important;
    place-items:center;
    top:16px!important;
    right:16px!important;
    width:40px!important;
    height:40px!important;
    background:#f4f7f7!important;
    color:var(--ink);
  }
  .radar-profile-form{
    gap:15px!important;
  }
  .radar-profile-submit{
    position:sticky;
    bottom:0;
    z-index:2;
    box-shadow:0 -8px 22px rgba(255,255,255,.9);
  }
}

@media(max-width:390px){
  .topbar{padding-left:10px;padding-right:10px;gap:6px}
  .brand{gap:7px}
  .brand .logo.small{width:36px;height:36px;font-size:18px}
  .brand strong{font-size:12.5px}
  .brand small{font-size:10.5px}
  .top-actions{gap:3px}
  #interpretationHelp,
  #viewAlertActivity,
  #radarProfileButton,
  .radar-user-menu-trigger{
    display:inline-grid!important;
    width:32px;
    height:32px;
    min-width:32px;
    min-height:32px;
    border-radius:9px;
  }
  .radar-primary-actions{
    grid-template-columns:1fr 1fr;
  }
}


/* QA 23/09 — menú de usuario oscuro en Obras Mayores */
#main .radar-user-menu{
  background:#0f2c31;
  border-color:#315158;
  box-shadow:0 18px 48px rgba(0,0,0,.34);
}
#main .radar-user-menu button{
  background:transparent;
  color:#eef8f5;
}
#main .radar-user-menu button:hover{
  background:#17383e;
  color:#ffffff;
}
#main .radar-user-menu .radar-menu-logout{
  border-top-color:#315158;
  color:#ff9292;
}


/* QA 23/09 — cabecera Mayores unificada con tema oscuro */
body:has(#main:not(.hidden)) .radar-vertical-nav button,
body:has(#main:not(.hidden)) .radar-vertical-mobile,
body:has(#main:not(.hidden)) .radar-user-menu-trigger{
  background:#0b2429!important;
  border:1px solid #159c90!important;
  color:#eef8f5!important;
  box-shadow:none!important;
}
body:has(#main:not(.hidden)) .radar-vertical-nav button:hover,
body:has(#main:not(.hidden)) .radar-vertical-mobile:hover,
body:has(#main:not(.hidden)) .radar-user-menu-trigger:hover{
  background:#103239!important;
  border-color:#2ed3c1!important;
  color:#ffffff!important;
}
body:has(#main:not(.hidden)) .radar-user-menu-trigger{
  font-weight:900!important;
}


/* QA 23/09 — remate visual Mayores: acciones, acento y espacio superior */
/* Acciones principales: sin bloques blancos dentro del tema oscuro */
#main .radar-primary-actions #viewMyProjects{
  background:#12343a!important;
  border:1px solid rgba(221,244,239,.16)!important;
  color:#eef8f5!important;
  box-shadow:none!important;
}
#main .radar-primary-actions #viewMyProjects:hover{
  background:#173f46!important;
  border-color:#2b666c!important;
  color:#ffffff!important;
}

/* Acento activo más apagado que el lima original */
#main #listView .view-switch-btn.active{
  background:#b8cf73!important;
  color:#10261f!important;
  border-color:#b8cf73!important;
  box-shadow:none!important;
}
#main #listView .view-switch-btn:hover{
  background:#193a40!important;
  color:#eef8f5!important;
}

/* Reducir la reserva excesiva debajo del header sticky */
#main > .page{
  padding-top:38px!important;
}
@media(max-width:820px){
  #main > .page{padding-top:30px!important}
}
@media(max-width:520px){
  #main > .page{
    padding-top:24px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
}


/* QA 23/09 — jerarquía cromática de fichas Mayores */
/* La ficha informa en tonos calmos; el CTA conserva el acento más visible. */
#main #listView .card{
  border-color:rgba(221,244,239,.16)!important;
}
#main #listView .card:hover{
  border-color:rgba(79,208,189,.36)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.18)!important;
}
#main #listView .badge.vigencia-activa{
  background:#4f7659!important;
  border-color:#6f9478!important;
  color:#f0f7f1!important;
}
#main #listView .rubro{
  background:rgba(83,133,126,.10)!important;
  border-color:rgba(114,164,156,.42)!important;
  color:#bdd3cf!important;
}
#main #listView .favorite-btn.saved{
  color:#b9d2cd!important;
  border-color:rgba(185,210,205,.30)!important;
}
#main #listView .open{
  background:#c9e66c!important;
  border-color:#c9e66c!important;
  color:#10261f!important;
  font-weight:850!important;
}
#main #listView .open:hover{
  background:#d4ee80!important;
  border-color:#d4ee80!important;
}


/* QA 24/09 — desktop fluido + CTA ficha + precio estable */
@media(min-width:1000px){
  #main > .page{
    width:min(1600px,calc(100vw - 48px))!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  #main #listView,
  #main #detailView{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }
  #main #listView{
    padding-left:clamp(24px,2.2vw,38px)!important;
    padding-right:clamp(24px,2.2vw,38px)!important;
  }
  #main #listView .open{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:42px!important;
    padding:10px 18px!important;
    border-radius:14px!important;
    line-height:1!important;
  }
  #detailView .public-detail-hero{
    grid-template-columns:minmax(0,1fr) 300px!important;
  }
  #detailView .public-detail-summary{
    width:300px!important;
    min-width:300px!important;
    max-width:300px!important;
    min-height:154px!important;
    box-sizing:border-box!important;
  }
  #detailView .public-detail-summary strong{
    font-size:clamp(21px,1.65vw,26px)!important;
    overflow-wrap:anywhere;
  }
}
@media(max-width:999px){
  #detailView .public-detail-summary{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
  }
}


/* 27/09 — fichas Mayores: acento verde integrado al tema oscuro */
#detailView .badge.vigencia-activa{
  background:#4f7659!important;
  border-color:#6f9478!important;
  color:#f0f7f1!important;
}
#detailView .public-detail-summary strong{
  color:#b8cf73!important;
}
#detailView .radar-mark{
  background:#6f9478!important;
  border-color:#86a98d!important;
  box-shadow:none!important;
}
#detailView .procurement-action{
  background:#12343a!important;
  color:#c7d9d6!important;
  border-color:rgba(183,226,221,.22)!important;
}
#detailView .procurement-action:hover,
#detailView .procurement-action:focus-visible{
  background:#17464d!important;
  color:#eef8f5!important;
  border-color:rgba(183,226,221,.36)!important;
}
#detailView .procurement-action.primary-action{
  background:#123f47!important;
  color:#b8cf73!important;
  border-color:rgba(184,207,115,.34)!important;
}
#detailView .rr-claim-entry .primary{
  background:#b8cf73!important;
  color:#10261f!important;
  border-color:#b8cf73!important;
  box-shadow:none!important;
}
#detailView .rr-claim-entry .primary:hover,
#detailView .rr-claim-entry .primary:focus-visible{
  background:#c2d688!important;
  border-color:#c2d688!important;
}


/* 2026-09-29 — acceso y ayuda global en modo oscuro Radar */
#auth.auth-shell{
  background:
    radial-gradient(circle at 18% 12%,rgba(18,63,71,.38) 0,transparent 34%),
    linear-gradient(145deg,#090c10 0%,#0b1116 58%,#0a0e12 100%)!important;
  color:#f4f7f8!important;
}
#auth .auth-card{
  background:#0f141a!important;
  border:1px solid #303943!important;
  color:#f4f7f8!important;
  box-shadow:0 24px 70px rgba(0,0,0,.45)!important;
}
#auth .auth-card h1,
#auth .auth-card label{
  color:#f4f7f8!important;
}
#auth .auth-card .muted{
  color:#aeb5bf!important;
}
#auth .auth-card .eyebrow{
  color:#72decf!important;
}
#auth .auth-card input{
  background:#141a21!important;
  border-color:#38434e!important;
  color:#f5f7f8!important;
  box-shadow:none!important;
}
#auth .auth-card input::placeholder{
  color:#7f8993!important;
}
#auth .auth-card input:focus{
  border-color:#1d5d67!important;
  box-shadow:0 0 0 3px rgba(29,93,103,.18)!important;
}
#auth .auth-card .primary{
  background:#1d5d67!important;
  color:#fff!important;
}
#auth .auth-card .primary:hover{
  background:#123f47!important;
}
#auth .auth-links,
#auth .auth-links span{
  color:#6f7a83!important;
}
#auth .auth-links button,
#auth .back,
#auth a[href="/proveedores.html"]{
  color:#72decf!important;
}
#auth .logo{
  background:#123f47!important;
  color:#d9ff58!important;
}

.interpretation-overlay{
  background:rgba(3,7,10,.78)!important;
  backdrop-filter:blur(6px);
}
.interpretation-card{
  background:#0f141a!important;
  border:1px solid #303943!important;
  color:#f4f7f8!important;
  box-shadow:0 26px 80px rgba(0,0,0,.55)!important;
}
.interpretation-card h2,
.interpretation-card strong{
  color:#f4f7f8!important;
}
.interpretation-card>p{
  color:#aeb5bf!important;
}
.interpretation-card .eyebrow{
  color:#72decf!important;
}
.interpretation-points>div{
  background:#141a21!important;
  border-color:#34404a!important;
}
.interpretation-points p{
  color:#b9c2c9!important;
}
.interpretation-points .source-dot{
  background:#6f9298!important;
}
.interpretation-points .radar-dot{
  background:#72decf!important;
  border-color:#72decf!important;
}
.interpretation-warning{
  background:#151b20!important;
  border-color:#37434c!important;
  color:#c8d0d6!important;
}
.interpretation-accept{
  background:#1d5d67!important;
  color:#fff!important;
}
.interpretation-accept:hover{
  background:#123f47!important;
}
@media(max-width:600px){
  #auth.auth-shell{padding:18px!important}
  #auth .auth-card{padding:28px 22px!important;border-radius:24px!important}
  .interpretation-card{border-radius:22px!important}
}