/* CSV100 · Control de calidad final
   Última capa: semántica visual, consistencia responsive y prevención de regresiones. */

:root{
  --csv100-navy:#06172b;
  --csv100-blue:#0b4b86;
  --csv100-white:#ffffff;
  --csv100-line:#dbe3ea;
}

/* Never allow layout-wide accidental horizontal scrolling */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%}

/* ACTION PILLS: exactly two approved contrast systems */
a.csv-pill--navy,
button.csv-pill--navy,
.btn.csv-pill--navy,
input[type="submit"].csv-pill--navy{
  background:var(--csv100-navy)!important;
  background-image:none!important;
  color:var(--csv100-white)!important;
  -webkit-text-fill-color:var(--csv100-white)!important;
  border-color:var(--csv100-navy)!important;
}
.csv-pill--navy :is(span,strong,b,em,small,i){
  color:var(--csv100-white)!important;
  -webkit-text-fill-color:var(--csv100-white)!important;
}
.csv-pill--navy :is(svg,path,use){color:var(--csv100-white)!important;stroke:currentColor!important}

a.csv-pill--light,
button.csv-pill--light,
.btn.csv-pill--light,
.link.csv-pill--light{
  background:var(--csv100-white)!important;
  background-image:none!important;
  color:var(--csv100-navy)!important;
  -webkit-text-fill-color:var(--csv100-navy)!important;
  border-color:var(--csv100-line)!important;
}
.csv-pill--light :is(span,strong,b,em,small,i){
  color:var(--csv100-navy)!important;
  -webkit-text-fill-color:var(--csv100-navy)!important;
}
.csv-pill--light :is(svg,path,use){color:var(--csv100-navy)!important;stroke:currentColor!important}

/* All real button/link pills have adequate touch target and clear pointer */
:is(a,button).csv-pill--navy,
:is(a,button).csv-pill--light,
a.btn,button.btn{
  min-height:44px;
  cursor:pointer!important;
}

/* Informational chips/badges are explicitly NOT interactive */
:is(.help-chip,.v-badge,.manual-badge,.promo-live-badge,.station-visual-badge,.csv-cert-badge){
  cursor:default!important;
  transform:none!important;
  user-select:text;
}
:is(.help-chip,.v-badge,.manual-badge,.promo-live-badge,.station-visual-badge,.csv-cert-badge):hover{
  transform:none!important;
}

/* A service card only gets an interactive lift when it actually is a link/button */
.service-chip:not(a):not(button),
.card:not(a):not(button){
  cursor:default;
}
@media(hover:hover){
  .service-chip:not(a):not(button):hover{
    transform:none!important;
  }
}

/* JS actions must be real buttons but retain link/card appearance */
.csv-link-button{
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
footer .csv-link-button{
  display:block;
  color:inherit;
  opacity:.92;
  padding:4px 0;
}
.csv-contact-button{
  appearance:none;
  width:100%;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

/* Native upload input: readable, neutral and not confused with primary CTA */
.csv-file-input{
  width:100%;
  min-height:48px;
  padding:8px;
  border:1px solid var(--csv100-line);
  border-radius:14px;
  background:#fff;
  color:var(--csv100-navy);
}
.csv-file-input::file-selector-button{
  min-height:36px;
  margin-right:10px;
  padding:7px 12px;
  border:0;
  border-radius:999px;
  background:var(--csv100-navy);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

/* Card/grid composition: equal rhythm without forcing content heights */
.grid,
.service-cloud,
.contact-cards,
.csv99-quick-grid,
.csv99-station-cards,
.csv99-contact-grid{
  align-items:stretch;
}
.grid > .card,
.service-cloud > .service-chip,
.contact-cards > .contact-card,
.csv99-quick-grid > .csv99-quick-card,
.csv99-station-cards > .csv99-station-mini,
.csv99-contact-grid > .csv99-contact-action{
  min-width:0;
  height:100%;
}

/* Prevent text from forcing cards/buttons outside their grid tracks */
:is(.card,.service-chip,.contact-card,.csv99-quick-card,.csv99-station-mini,.csv99-contact-action,
     .btn,.csv-pill--navy,.csv-pill--light){
  overflow-wrap:anywhere;
}

/* HERO: approved 1536×1024 composition is itself 3:2, so show it uncropped */
body .hero-card.csv-brand-plaque .csv-logo-stage{
  width:100%!important;
  aspect-ratio:3/2!important;
  overflow:hidden!important;
}
body .hero-card.csv-brand-plaque .csv-logo-stage > .csv-logo-main{
  display:block!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:3/2!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Desktop/tablet/mobile grid synchronization */
@media(max-width:1100px){
  .csv99-station-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .service-cloud{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:650px){
  .csv99-station-cards,
  .service-cloud,
  .csv99-quick-grid,
  .csv99-contact-grid{grid-template-columns:1fr!important}
  :is(a,button).csv-pill--navy,
  :is(a,button).csv-pill--light,
  a.btn,button.btn{max-width:100%}
}

/* Landscape tablets: retain two-column hierarchy rather than oversized desktop tracks */
@media(min-width:651px) and (max-width:1100px) and (orientation:landscape){
  .csv99-quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .csv99-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Reduced motion: no usability depends on animation */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}