/* =====================================================================
   Amigo Secreto - Estilos propios (complementan Bootstrap 5)
   ===================================================================== */

/* ---------- Variables de color ---------- */
:root {
    --app-rojo: #b02a37;
    --app-rojo-oscuro: #8a1f2b;
    --app-verde: #198754;
    --app-crema: #f6f2ec;
}

body {
    background: var(--app-crema);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

/* ---------- Barra de navegación ---------- */
.navbar-app {
    background: linear-gradient(90deg, var(--app-rojo-oscuro), var(--app-rojo));
}

/* ---------- Tarjetas ---------- */
.card { border: 0; border-radius: 14px; }
.card-header { background: #fff; border-bottom: 1px solid #eee; font-weight: 600; border-radius: 14px 14px 0 0 !important; }

.card-evento { transition: transform .15s, box-shadow .15s; }
.card-evento:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important; }

/* ---------- Pantallas de acceso (login, registro, portal) ---------- */
.auth-box { max-width: 440px; margin: 2rem auto; }
.auth-icono {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--app-rojo); color: #fff; font-size: 2rem;
    margin: 0 auto 1rem;
}

/* ---------- Código de participante ---------- */
.codigo-secreto {
    display: inline-block;
    font-family: SFMono-Regular, Consolas, monospace;
    font-size: 2.2rem; font-weight: 700; letter-spacing: .3rem;
    color: var(--app-rojo);
    border: 3px dashed var(--app-rojo);
    border-radius: 12px; padding: .4rem 1.4rem;
    background: #fff;
}
.codigo-mini { font-family: monospace; font-weight: 700; letter-spacing: .1rem; }

/* ---------- Amigo secreto revelado ---------- */
.amigo-revelado {
    background: linear-gradient(135deg, #fff, #fdeef0);
    border: 2px solid var(--app-rojo);
}
.amigo-nombre { font-size: 1.8rem; font-weight: 700; color: var(--app-rojo); }

/* ---------- Pasos del evento ---------- */
.pasos { display: flex; gap: .5rem; flex-wrap: wrap; }
.paso {
    flex: 1 1 140px; padding: .6rem .8rem; border-radius: 10px;
    background: #fff; border: 1px solid #e6e1d9; font-size: .9rem;
}
.paso.hecho { border-color: var(--app-verde); background: #eef8f2; }
.paso.hecho i { color: var(--app-verde); }

/* ---------- PIN ---------- */
.input-pin { font-size: 1.8rem; letter-spacing: .8rem; text-align: center; font-family: monospace; }

/* ---------- Tablas ---------- */
.table > :not(caption) > * > * { vertical-align: middle; }

/* ---------- Utilidades ---------- */
.text-rojo { color: var(--app-rojo) !important; }
.btn-rojo { background: var(--app-rojo); color: #fff; border-color: var(--app-rojo); }
.btn-rojo:hover { background: var(--app-rojo-oscuro); color: #fff; }
.copiable { cursor: pointer; }