/* CSVX04 · Identidad visual propia, añadida como capa modular y sin alterar funciones existentes */
:root{
  --csvx04-ink:#071b33;
  --csvx04-blue:#0b3358;
  --csvx04-orange:#ff7600;
  --csvx04-gold:#f4b72d;
  --csvx04-red:#ef3b50;
  --csvx04-focus:#0b6fd3;
}

/* Firma CSV: una ruta de cuatro puntos que representa las cuatro estaciones. */
.csvx-hub-head{position:relative;padding-bottom:22px}
.csvx-hub-head:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:min(330px,78%);
  height:9px;
  background:
    radial-gradient(circle at 4px 50%,var(--csvx04-gold) 0 4px,transparent 4.5px),
    radial-gradient(circle at 34% 50%,var(--csvx04-orange) 0 4px,transparent 4.5px),
    radial-gradient(circle at 67% 50%,var(--csvx04-red) 0 4px,transparent 4.5px),
    radial-gradient(circle at calc(100% - 4px) 50%,var(--csvx04-blue) 0 4px,transparent 4.5px),
    linear-gradient(90deg,rgba(244,183,45,.65),rgba(255,118,0,.65),rgba(239,59,80,.65),rgba(11,51,88,.65)) center/100% 2px no-repeat;
  opacity:.92;
}

.csvx-card,.csvx-chip,.csvx-official-links a,.csvx-ecosystem-link a{
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
.csvx-card{position:relative;overflow:hidden}
.csvx-card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,rgba(255,255,255,.76),transparent 42%);
  pointer-events:none;
}
.csvx-card:after{
  content:"";
  position:absolute;
  right:-34px;
  bottom:-34px;
  width:92px;
  height:92px;
  border-radius:50%;
  border:1px solid rgba(255,118,0,.11);
  box-shadow:0 0 0 14px rgba(244,183,45,.045),0 0 0 28px rgba(11,51,88,.025);
  pointer-events:none;
}
.csvx-card.csvx-emergency:after{border-color:rgba(255,255,255,.18);box-shadow:0 0 0 14px rgba(255,255,255,.06),0 0 0 28px rgba(255,255,255,.035)}
.csvx-card .csvx-icon{transform:translateZ(0)}
.csvx-card:hover .csvx-icon{transform:translateY(-2px) scale(1.035)}
.csvx-card .csvx-icon{transition:transform .22s ease}
.csvx-chip:hover,.csvx-chip:focus-visible{transform:translateY(-1px);box-shadow:0 8px 18px rgba(7,27,51,.07)}

/* Jerarquía y accesibilidad coherentes en los controles nuevos. */
.csvx-card:focus-visible,.csvx-chip:focus-visible,.csvx-official-links a:focus-visible,
.csvx-ecosystem-link a:focus-visible,.csvx-sharebar button:focus-visible,
.csvx03-inline-share button:focus-visible,.csvx03-sheet a:focus-visible,.csvx03-sheet button:focus-visible{
  outline:3px solid rgba(11,111,211,.48);
  outline-offset:3px;
}
.csvx-sharebar{box-shadow:0 16px 46px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.13)}
.csvx-sharebar button{min-height:40px}

/* Página Ecosistema Oficial: misma identidad, sin reconstruir su diseño. */
body.csvx04-ecosystem .hero{position:relative;overflow:hidden}
body.csvx04-ecosystem .hero:after{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:-150px;
  top:-180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,168,45,.18),transparent 69%);
  pointer-events:none;
}
body.csvx04-ecosystem .grid{position:relative}
body.csvx04-ecosystem .card{position:relative;overflow:hidden;isolation:isolate}
body.csvx04-ecosystem .card:after{
  content:"↗";
  position:absolute;
  right:18px;
  top:17px;
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:11px;
  background:rgba(7,27,51,.055);
  color:rgba(7,27,51,.55);
  font-weight:900;
  transition:transform .2s ease,background .2s ease;
}
body.csvx04-ecosystem .card.emergency:after{content:"☎";background:rgba(255,255,255,.15);color:#fff}
body.csvx04-ecosystem .card:hover:after{transform:translate(2px,-2px);background:rgba(255,118,0,.11)}
body.csvx04-ecosystem .card.emergency:hover:after{background:rgba(255,255,255,.22)}
body.csvx04-ecosystem .card:focus-visible,body.csvx04-ecosystem .back:focus-visible{
  outline:3px solid rgba(11,111,211,.48);
  outline-offset:4px;
}

@media(max-width:620px){
  .csvx-hub-head{padding-bottom:18px}
  .csvx-hub-head:after{width:210px;height:8px}
  .csvx-card:active,.csvx-chip:active{transform:scale(.985)}
  .csvx-sharebar{max-width:calc(100vw - 92px)}
}
@media(prefers-reduced-motion:reduce){
  .csvx-card .csvx-icon,.csvx-chip,body.csvx04-ecosystem .card:after{transition:none!important}
  .csvx-card:hover .csvx-icon,.csvx-chip:hover,body.csvx04-ecosystem .card:hover:after{transform:none!important}
}