: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: la pantalla de busqueda ya tiene su propio logo grande en el encabezado,
   asi que aqui no hace falta nada. Cuando se muestra un resultado (el encabezado se oculta),
   el logo se muestra fijo en un espacio propio arriba -ver body.sr-modo-resultado abajo-, para
   que nunca quede tapado por la tarjeta de datos (que antes ocupaba la misma zona central). */

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

body.sr-modo-resultado::before{
  content:"";
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 68px;
  background-image: url('/images/logo.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .55;
  pointer-events: none;
  z-index: 5;
}
body.sr-modo-resultado .sr-pagina{
  padding-top: 96px;
}

/* ---------- 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 6px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--sr-naranja);
}
.sr-tarjeta-foto img{ width:100%; height:100%; object-fit: cover; display:block; cursor: zoom-in; }
.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-foto-ayuda{
  font-size: .68rem;
  color: var(--sr-texto-suave);
  margin-bottom: 12px;
}

.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; }

/* Las 3 estrellas siempre muestran sus 3 colores; la que corresponde al nivel actual del
   operador se destaca (mas grande, opaca y con resplandor); las otras dos quedan atenuadas. */
.sr-estrellas{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap: 10px;
  margin: 16px 0 6px;
}
.sr-estrellas i{
  font-size: 1.5rem;
  opacity: .3;
  transition: all .2s ease;
}
.sr-estrella-verde{ color: var(--sr-verde); }
.sr-estrella-amarillo{ color: var(--sr-amarillo); }
.sr-estrella-rojo{ color: var(--sr-rojo); }
.sr-estrella-activa{
  opacity: 1;
  font-size: 2.5rem;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
}

.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; }
.sr-dato-telefono{
  color: var(--sr-naranja-oscuro) !important;
  font-size: .95rem !important;
}
.sr-dato-telefono i{ margin-right: 5px; }

/* ---------- Foto ampliada (doble clic) ---------- */
.sr-lightbox{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(10,14,20,.92);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sr-lightbox.sr-lightbox-abierto{ display:flex; }
.sr-lightbox img{
  max-width: 100%;
  max-height: 100%;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

/* ---------- 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; }
}