/* Fibra IA — Corporate Visual System (Phase 1, additive)
 * Layers on top of the existing stylesheets. Does not remove or rename any
 * selector, id, data-attribute, or JS hook. Loaded LAST so its rules win
 * the cascade for shared classes without needing !important.
 */
:root{
  /* Corporate palette */
  --navy:#0b2540;
  --navy-soft:#eaf0f7;
  --blue-action:#1d5fd1;
  --blue-action-soft:#eaf2ff;
  --green:#08783c;
  --green-soft:#e8f8ee;
  --amber:#9a5b00;
  --amber-soft:#fff7e6;
  --red:#9f1239;
  --red-soft:#fff1f2;

  /* Typography scale */
  --font-size-xs:11px;
  --font-size-sm:13px;
  --font-size-base:15px;
  --font-size-lg:19px;
  --font-size-xl:24px;
  --line-height-base:1.45;

  /* Spacing scale */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
}

/* Base typography / contrast, additive only where not already set */
body{
  font-size:var(--font-size-base);
  line-height:var(--line-height-base);
  color:var(--text,var(--navy));
}

/* Corporate header/nav tone */
.app-header{background:var(--navy);color:#fff}
.app-header .brandline b{color:#fff}
.desktop-nav .nav-btn{color:#cfe0f5}
.desktop-nav .nav-btn.active,
.desktop-nav .nav-btn:hover{color:#fff;background:rgba(255,255,255,.12)}

/* Action buttons use the corporate action blue explicitly */
.primary-btn{background:var(--blue-action);border-color:var(--blue-action)}

/* Focus-visible: high-contrast ring on every interactive element,
 * consistent across desktop/tablet/mobile. */
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--blue-action);
  outline-offset:2px;
  border-radius:4px;
}

/* --- State treatment: loading / empty / error / success are visually
 * distinct so a user never has to read the copy to know what happened. */
.loading-state{
  color:var(--muted,#64748b);
  padding:var(--space-md);
  text-align:center;
  border-radius:10px;
  background:linear-gradient(90deg,#eef2f7 25%,#f7f9fb 37%,#eef2f7 63%);
  background-size:400% 100%;
  animation:corporate-loading-shimmer 1.4s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){
  .loading-state{animation:none}
}
@keyframes corporate-loading-shimmer{
  0%{background-position:100% 50%}
  100%{background-position:0 50%}
}

.empty-state{
  color:var(--muted,#64748b);
  padding:var(--space-md);
  text-align:center;
  border:1px dashed var(--border,#d9e4f1);
  border-radius:10px;
  background:#fbfcfe;
}

.error-box{
  color:var(--red);
  background:var(--red-soft);
  border:1px solid var(--red);
  border-radius:10px;
  padding:var(--space-sm) var(--space-md);
  font-weight:700;
}

.success-box,.login-success{
  color:var(--green)!important;
  background:var(--green-soft);
  border:1px solid var(--green);
  border-radius:10px;
  padding:var(--space-sm) var(--space-md);
  font-weight:700;
}

.login-error{
  color:var(--red)!important;
  background:var(--red-soft);
}

/* --- Consulta (search) screen: visual priority on address, official
 * coverage, recommended CTO, distance, availability and actions. Purely
 * presentational — no structural or attribute changes. */
.hero h1{color:#fff;font-size:var(--font-size-xl)}
.priority-card.registered-nearest{border-width:2px}
.priority-cto,.priority-distance{color:var(--navy);font-weight:800}

/* --- Responsive: desktop / tablet / mobile ---------------------------- */
/* Tablet band, additive alongside the existing 900px/720px breakpoints. */
@media (min-width:721px) and (max-width:1024px){
  .app-header{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"brand nav actions";
    align-items:center;
    gap:8px;
    padding:10px 16px;
  }
  .brandline{grid-area:brand;min-width:0}
  .desktop-nav{grid-area:nav;min-width:0;overflow:hidden;justify-content:center}
  .desktop-nav .nav-btn{padding:8px 6px;font-size:11px}
  .headstatus{grid-area:actions;margin-left:0;min-width:0;flex-wrap:nowrap;gap:4px}
  .user-badge{max-width:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .headstatus .ghost-btn{padding:0 9px}
  main{padding:14px 16px 90px}
  .priority-grid{grid-template-columns:1fr 1fr}
  .search-form{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
}

/* Mobile: ensure touch targets stay comfortable and nav stays legible. */
@media (max-width:720px){
  .app-header{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand actions";
    align-items:center;
    gap:8px;
  }
  .brandline{grid-area:brand;min-width:0}
  .brand-text{min-width:0}
  .brandline b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .headstatus{grid-area:actions;margin-left:0;min-width:0;flex-wrap:nowrap}
  .user-badge{max-width:132px}
  .mobile-nav{overflow:hidden;justify-content:stretch}
  .mobile-nav button{flex:1 1 0;min-width:0;padding:4px 2px}
  .primary-btn,.location-btn{min-height:44px}
  .mobile-nav button.active{color:var(--blue-action);background:var(--blue-action-soft)}
}

/* Desktop: cap line length for readability on wide viewports. */
@media (min-width:1025px){
  .hero-copy p{max-width:60ch}
}