:root{
  --sr-azul: #003b8a;
  --sr-azul-claro: #0060d6;
  --sr-naranja: #fb6602;
  --sr-naranja-oscuro: #d95400;
  --sr-gris-fondo: #f2f4f8;
  --sr-borde: #e1e5ee;
  --sr-texto: #1c2430;
  --sr-texto-suave: #6b7280;
  --sr-verde: #1fa855;
  --sr-amarillo: #e6a91b;
  --sr-rojo: #e2352b;
}

*{ box-sizing: border-box; }

html, body{
  margin:0;
  padding:0;
  background: var(--sr-gris-fondo);
  color: var(--sr-texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Logo de fondo: fijo, centrado, muy tenue y sin capturar clics, para que nunca
   interfiera con la lectura de los datos que se muestran encima. */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background-image: url('/images/logo.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(300px, 65vw) auto;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}

.sr-pagina{
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 24px 18px 40px;
}

/* ---------- Encabezado ---------- */
.sr-encabezado{ text-align:center; margin-bottom: 22px; }
.sr-logo{ width: 96px; height: 96px; object-fit: contain; margin-bottom: 8px; }
.sr-titulo{
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--sr-azul);
  margin: 4px 0 2px;
}
.sr-subtitulo{
  font-size: .85rem;
  color: var(--sr-texto-suave);
  margin: 0;
}

/* ---------- Formulario de busqueda ---------- */
.sr-form{ margin-bottom: 18px; }
.sr-label{
  display:block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--sr-azul);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.sr-buscador{
  display:flex;
  gap: 8px;
}
.sr-input{
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .04em;
  border: 2px solid var(--sr-borde);
  border-radius: 12px;
  background: #fff;
  color: var(--sr-texto);
  text-transform: uppercase;
}
.sr-input:focus{
  outline: none;
  border-color: var(--sr-azul-claro);
  box-shadow: 0 0 0 3px rgba(0,96,214,.15);
}
.sr-boton{
  flex-shrink: 0;
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 0 20px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--sr-azul-claro), var(--sr-azul));
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.sr-boton:active{ transform: scale(.97); }

/* ---------- Mensajes ---------- */
.sr-alerta{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: .92rem;
  margin-bottom: 16px;
}
.sr-alerta-error{ background:#fdecea; color:#8a271f; border:1px solid #f3c6c1; }
.sr-alerta-vacio{ background:#fff6e8; color:#7a5210; border:1px solid #f5ddad; }

/* ---------- Contenedor tridimensional de la tarjeta de resultado ----------
   .sr-tarjeta-3d le da la perspectiva (el "punto de fuga" 3D); .sr-tarjeta es
   la cara visible, inclinada en el espacio; el ::before es una segunda capa
   detras, mas oscura y desplazada, que simula el "canto"/grosor de una
   tarjeta fisica; el ::after es un brillo tipo cristal sobre la cara. */
.sr-tarjeta-3d{
  perspective: 1400px;
  padding: 10px 0 26px;
}
.sr-tarjeta{
  position: relative;
  background: linear-gradient(165deg, #ffffff 0%, #f7f9fd 100%);
  border-radius: 20px;
  padding: 26px 22px 22px;
  text-align: center;
  transform-style: preserve-3d;
  transform: rotateX(6deg) rotateY(-7deg);
  transition: transform .35s ease;
  box-shadow:
    0 2px 0 rgba(255,255,255,.6) inset,
    0 1px 2px rgba(0,59,138,.10),
    6px 14px 18px rgba(0,59,138,.14),
    14px 34px 40px rgba(0,59,138,.20),
    22px 54px 60px rgba(0,59,138,.16);
}
.sr-tarjeta:active{ transform: rotateX(2deg) rotateY(-2deg) scale(.99); }

/* "Canto" de la tarjeta: una segunda capa mas oscura, del mismo tamaño,
   apenas desplazada hacia abajo-derecha y detras en el eje Z. */
.sr-tarjeta::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(165deg, var(--sr-azul-claro), var(--sr-azul));
  transform: translate(7px, 10px) translateZ(-26px);
  z-index: -1;
}

/* Brillo tipo cristal sobre la cara visible */
.sr-tarjeta::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 32%);
  pointer-events: none;
}

.sr-tarjeta > *{ position: relative; }

@media (hover:hover){
  .sr-tarjeta-3d:hover .sr-tarjeta{ transform: rotateX(2deg) rotateY(-2deg); }
}
.sr-tarjeta-foto{
  width: 108px;
  height: 108px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--sr-naranja);
}
.sr-tarjeta-foto img{ width:100%; height:100%; object-fit: cover; display:block; }
.sr-foto-vacia{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background: var(--sr-gris-fondo);
  color: var(--sr-texto-suave);
  font-size: 2.4rem;
}

.sr-tarjeta-nombre{ font-size: 1.25rem; font-weight: 800; color: var(--sr-azul); line-height:1.25; }
.sr-tarjeta-apodo{ font-size: .95rem; color: var(--sr-naranja-oscuro); font-style: italic; margin-top:2px; }

.sr-estrellas{ margin: 14px 0 4px; font-size: 1.6rem; letter-spacing: 4px; }
.sr-estrellas-verde{ color: var(--sr-verde); }
.sr-estrellas-amarillo{ color: var(--sr-amarillo); }
.sr-estrellas-rojo{ color: var(--sr-rojo); }

.sr-nivel-texto{ font-size: .85rem; font-weight: 700; margin-bottom: 18px; }
.sr-nivel-texto-verde{ color: var(--sr-verde); }
.sr-nivel-texto-amarillo{ color: #ad7e0f; }
.sr-nivel-texto-rojo{ color: var(--sr-rojo); }

.sr-datos{ text-align: left; margin: 0; }
.sr-datos dt{
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sr-texto-suave);
  margin-top: 14px;
}
.sr-datos dt:first-child{ margin-top: 0; }
.sr-datos dd{
  margin: 2px 0 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--sr-azul);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sr-borde);
}
.sr-datos dd:last-of-type{ border-bottom: none; }

/* ---------- Boton para volver a buscar (limpia la pantalla) ---------- */
.sr-boton-volver{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  width: 100%;
  margin-top: 20px;
  padding: 14px 16px;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--sr-azul);
  background: #fff;
  border: 2px solid var(--sr-azul);
  border-radius: 12px;
  transition: background .15s ease, color .15s ease;
}
.sr-boton-volver:active{ background: var(--sr-azul); color:#fff; }
@media (hover:hover){
  .sr-boton-volver:hover{ background: var(--sr-azul); color:#fff; }
}

/* ---------- Pie ---------- */
.sr-pie{
  text-align:center;
  font-size: .75rem;
  color: var(--sr-texto-suave);
  margin-top: 28px;
}

/* ---------- Pantallas mas anchas: la tarjeta no se ve "flotando" tan sola ---------- */
@media (min-width: 540px){
  .sr-pagina{ padding-top: 48px; }
}