/* ============================================================
   Portal de APIs · ULPGC — estilos institucionales
   Colores del Sistema de Diseño ULPGC (ulpgcds 1.0)
   ============================================================ */
:root{
  --azul:        #0066a1;   /* azul institucional ULPGC */
  --azul-oscuro: #023265;   /* cabecera y pie */
  --azul-claro:  #e5eff5;   /* fondos secundarios */
  --naranja:     #ffa100;   /* acento institucional */
  --texto:       #2d3133;
  --gris:        #565a5c;
  --linea:       #dddede;
  --fondo:       #f6f7f7;
  --blanco:      #ffffff;
  --radio: 10px;
  --ancho: 1080px;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--texto);background:var(--fondo);
     line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--azul)}

.skip{position:absolute;left:-9999px;top:0;background:var(--blanco);
      padding:.6rem 1rem;z-index:100;border-radius:6px}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px;border-radius:3px}

/* Barra institucional superior */
.topbar{background:#e6ebf3;color:var(--texto);border-bottom:3px solid var(--naranja)}
.topbar .inner{max-width:var(--ancho);margin:0 auto;display:flex;align-items:center;
               gap:1rem;padding:.55rem 1.25rem}

/* Logo institucional: imagen de fondo, spans accesibles pero invisibles */
#logo{
  display:flex;
  height: 80px;
  width:434px;          /* proporcional al viewBox 392.2×80.81 a 48 px de alto */
  flex-shrink:0;
  background:url(logo-ulpgc-si.svg) left center / contain no-repeat;
}
#logo a{flex:1;position:relative;text-decoration:none}
#logo a span{position:absolute;left:-9999px;white-space:nowrap}

.topbar .sep{width:1px;height:24px;background:var(--linea);flex-shrink:0}
.topbar .sub{font-size:1.5rem;font-weight:600;color:var(--azul-oscuro);letter-spacing:.01em}
.topbar a{color:var(--azul);text-decoration:none}

/* Cabecera (catálogo) */
.hero{background:var(--blanco);border-bottom:1px solid var(--linea)}
.hero .inner{max-width:var(--ancho);margin:0 auto;padding:2.6rem 1.25rem 2.2rem}
.hero h1{margin:0 0 .5rem;font-size:1.9rem;line-height:1.15;letter-spacing:-.01em}
.hero p{margin:0;max-width:62ch;color:var(--gris);font-size:1.02rem}

/* Catálogo */
main{max-width:var(--ancho);margin:0 auto;padding:2.2rem 1.25rem 3rem}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
         text-transform:uppercase;color:var(--azul);margin:0 0 1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.1rem}
.card{position:relative;background:var(--blanco);border:1px solid var(--linea);
      border-left:4px solid var(--azul);border-radius:var(--radio);
      padding:1.25rem;display:flex;flex-direction:column;
      transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(14,42,77,.10)}
.card h2{margin:0 0 .4rem;font-size:1.12rem}
.card h2 a{color:var(--texto);text-decoration:none}
.card h2 a::after{content:"";position:absolute;inset:0}  /* tarjeta clicable */
.card .resumen{margin:0 0 1rem;color:var(--gris);font-size:.93rem;flex:1}
.meta{display:flex;gap:.5rem;flex-wrap:wrap;font-family:var(--mono);
      font-size:.72rem;color:var(--gris)}
.tag{background:var(--azul-claro);color:var(--azul);padding:.18rem .5rem;
     border-radius:999px;letter-spacing:.02em}
.go{margin-top:.9rem;font-weight:600;font-size:.9rem;color:var(--azul)}
.card .base-url{margin:.3rem 0 .6rem;font-family:var(--mono);font-size:.72rem;
                color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .base-url span{color:var(--gris)}

/* Página de un servicio */
.svc-header{background:var(--blanco);color:var(--texto)}
.svc-header .inner{max-width:1280px;margin:0 auto;padding:1.1rem 1.25rem;
                   display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.back{color:var(--texto);text-decoration:none;font-size:.88rem;white-space:nowrap}
.back:hover{color:var(--texto);text-decoration:underline}
.svc-header h1{margin:0;font-size:1.15rem;font-weight:600}
.svc-header .desc{flex-basis:100%;color:var(--texto);font-size:1.1rem;max-width:85ch}
.svc-baseurl-wrap{flex-basis:100%;margin:.25rem 0 0;font-family:var(--mono);
                  font-size:.8rem;color:var(--gris)}
.svc-alias-wrap{flex-basis:100%;margin:.25rem 0 0;font-family:var(--mono);
                font-size:.8rem;color:var(--gris)}

#swagger-ui{max-width:1280px;margin:0 auto;padding:1rem .5rem 3rem}
.swagger-ui .topbar{display:none}          /* usamos nuestra cabecera */
.swagger-ui .info{margin:1.5rem 0}

/* Pie institucional */
footer{background:#e6ebf3 ;color:var(--texto);font-size:.85rem;text-align:center}
footer .inner{max-width:var(--ancho);margin:0 auto;padding:1.6rem 1.25rem}
footer a{color:#fff}
footer p{margin:.2rem 0}

@media (max-width:640px){ .hero h1{font-size:1.5rem} }
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* Estados de carga / error (catálogo y servicio) */
.estado{color:var(--gris);font-size:.95rem;grid-column:1/-1;margin:0}
.estado--error{color:#9a2a2a}
.estado code{font-family:var(--mono);background:#f0e3e3;padding:.05rem .35rem;border-radius:4px}

/* Etiquetas de entorno */
.env{display:inline-block;font-family:var(--mono);font-size:.66rem;font-weight:700;
     letter-spacing:.06em;text-transform:uppercase;padding:.2rem .55rem;
     border-radius:999px;border:1px solid transparent;white-space:nowrap}
.env--produccion{background:#e6f4ea;color:#1e7a34;border-color:#bfe3c9}
.env--preproduccion{background:#fdf0dc;color:#9a5b00;border-color:#f1d9a8}
.env--desarrollo{background:#e9eef7;color:#2a4e8e;border-color:#cbd8ee}
.svc-header .env{margin-left:.25rem}