/* ============================================================
   AKDMY · Mi Credencial

   Proporción de carné real (85,6 × 54 mm, la de una tarjeta
   bancaria) para que al imprimirla y plastificarla encaje en
   cualquier portacredenciales.

   Dos aspectos según el rol:
     · ESTUDIANTE — violeta a magenta, la paleta de la marca
     · DOCENTE    — ámbar sobre tinta, para distinguirlos de un
                    vistazo a distancia, que es de lo que se trata
                    cuando alguien controla el acceso a un aula
   ============================================================ */

.cred {
  --cred-1: #5857d5;
  --cred-2: #ff4fd8;
  --cred-letra: #fff;

  position: relative;
  width: min(430px, 100%);
  aspect-ratio: 85.6 / 54;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  color: var(--cred-letra);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .18), transparent 55%),
    linear-gradient(125deg, var(--cred-1), var(--cred-2));
  box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .8),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}

.cred[data-tipo="profesor"] {
  --cred-1: #1a1a3e;
  --cred-2: #3b2a5e;
}

/* Una banda diagonal apenas visible, para que el plástico no
   parezca un rectángulo plano. */
.cred::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 45%, rgba(255, 255, 255, .07) 46%, transparent 62%);
  pointer-events: none;
}

/* --- cabecera ------------------------------------------------ */

.cred__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 8px;
}

.cred__logo { height: 26px; width: auto; }

.cred__tipo {
  padding: 4px 11px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.cred[data-tipo="profesor"] .cred__tipo {
  background: rgba(255, 192, 0, .2);
  border-color: rgba(255, 192, 0, .6);
  color: #ffd97a;
}

/* --- cuerpo -------------------------------------------------- */

.cred__cuerpo {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 13px;
  align-items: center;
  padding: 0 16px;
  min-height: 0;
}

.cred__foto {
  position: relative;
  width: 74px;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .3);
  flex: none;
}
.cred__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cred[data-tipo="profesor"] .cred__foto {
  border-color: rgba(255, 192, 0, .5);
}

.cred__iniciales {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .9;
}
.cred__sinfoto {
  position: absolute;
  bottom: 6px;
  font-size: .52rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .65;
}

.cred__datos { min-width: 0; }

.cred__nombre {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.cred__apellidos {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.cred__datos dl { margin: 0; display: grid; gap: 3px; }
.cred__datos dl > div { display: flex; gap: 7px; align-items: baseline; }
.cred__datos dt {
  min-width: 46px;
  flex: none;
  font-size: .55rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .7;
}
.cred__datos dd {
  margin: 0;
  font-size: .72rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .02em;
}

.cred__qr {
  width: 78px;
  height: 78px;
  flex: none;
  padding: 4px;
  border-radius: 8px;
  background: #fff;
}
.cred__qr svg { display: block; }

/* --- pie ----------------------------------------------------- */

.cred__pie {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px 12px;
  font-size: .58rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .8;
}
.cred__vigencia { font-weight: 700; opacity: 1; }

/* Vencida: se marca sin ambigüedad, que es el caso en el que
   alguien podría colarse a una clase. */
.cred[data-vencida] { filter: grayscale(.55); }
.cred[data-vencida] .cred__vigencia { color: #ffb3c0; }
.cred[data-vencida]::before {
  content: "VENCIDA";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: .3em;
  color: rgba(216, 50, 74, .55);
  transform: rotate(-14deg);
  pointer-events: none;
}

/* --- alrededor ----------------------------------------------- */

.cred__acciones { margin-top: 18px; }
.cred__acciones label { cursor: pointer; }
.cred__nota { max-width: 430px; margin-top: 12px; font-size: .82rem; }

@media (max-width: 460px) {
  .cred__cuerpo { gap: 9px; padding: 0 11px; }
  .cred__foto { width: 58px; height: 72px; }
  .cred__qr { width: 62px; height: 62px; }
  .cred__apellidos { font-size: .92rem; }
}

/* --- impresión ------------------------------------------------
   Se imprime la credencial y nada más: sin menú, sin botones,
   sin el resto del panel. */

@media print {
  body * { visibility: hidden !important; }
  #mi-credencial, #mi-credencial * { visibility: visible !important; }
  #mi-credencial {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  .cred {
    width: 85.6mm;
    box-shadow: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .cred__acciones, .cred__nota { display: none !important; }
}

/* ============================================================
   Ficha que ve quien verifica (verificar-datos.html)
   ============================================================ */

.verif {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 16px;
}

.verif__foto {
  width: 92px;
  height: 112px;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--pa-borde);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--pa-tenue);
}
.verif__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.verif dl { margin: 0; display: grid; gap: 9px; flex: 1; min-width: 0; }
.verif dl > div { display: grid; grid-template-columns: 116px 1fr; gap: 10px; align-items: baseline; }

.verif dt {
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pa-tenue);
}
.verif dd {
  margin: 0;
  font-size: .92rem;
  color: #fff;
  word-break: break-word;
}
.verif code {
  background: rgba(0, 0, 0, .3);
  padding: .1em .45em;
  border-radius: 5px;
  letter-spacing: .05em;
}

@media (max-width: 520px) {
  .verif { flex-direction: column; align-items: center; text-align: center; }
  .verif dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* El recuadro de la foto es ahora el botón de subirla. Se avisa con
   una cámara en la esquina, que aparece siempre —no solo al pasar
   por encima— porque en un móvil no hay "pasar por encima". */
label.cred__foto { cursor: pointer; }

.cred__camara {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(12, 12, 29, .78);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color .2s, transform .2s;
}
.cred__camara svg { width: 13px; height: 13px; }

label.cred__foto:hover .cred__camara {
  background: var(--pa-violeta);
  transform: scale(1.08);
}

/* Al imprimir el carné, la cámara sobra. */
@media print { .cred__camara { display: none; } }