.eventos-main {
  max-width: 980px;
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
}

.eventos-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.eventos-header__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 0.4rem;
}

.eventos-header__title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

/* ===== Grid de eventos ===== */
.eventos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.evento-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.evento-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -24px rgba(35, 43, 57, 0.35);
}

.evento-card__categoria {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  background: rgba(179, 149, 94, 0.12);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.8rem;
}

.evento-card__titulo {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 0.35rem;
  color: var(--ink);
}

.evento-card__fecha {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.evento-card__slug {
  font-size: 0.78rem;
  color: var(--gold);
  margin: 0;
  font-weight: 500;
}

.evento-card__slug--pendiente {
  color: var(--text-muted);
  font-weight: 400;
}

/* ===== Estado vacío ===== */
.eventos-empty {
  text-align: center;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 3rem 1.5rem;
}

.eventos-empty__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 0.4rem;
  color: var(--ink);
}

.eventos-empty__sub {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
}

/* ===== Card de creación (2 pasos) ===== */
.crear-evento-card{
    position:relative;
    width:min(720px,calc(100vw - 32px));
    max-height:90vh;
    overflow-y:auto;

    background:var(--white);
    border:1px solid var(--line);
    border-radius:18px;

    padding:2.5rem;

    box-shadow:0 30px 70px rgba(0,0,0,.25);
}

.crear-evento-card__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
}

.crear-evento-card__close:hover {
  color: var(--ink);
}

.crear-evento-step {
  display: none;
}

.crear-evento-step.is-active {
  display: block;
}

.crear-evento-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
}

/* ===== Selector de categoría (chips) ===== */
.categoria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.categoria-chip {
  padding: 1rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.categoria-chip:hover {
  border-color: var(--gold);
}

.categoria-chip.is-selected {
  border-color: var(--gold);
  background: rgba(179, 149, 94, 0.14);
  color: var(--ink);
  font-weight: 600;
}

/* ===== Steps indicator (reusa el patrón de registro.html) ===== */
.steps-indicator {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.steps-indicator__dot {
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.2s ease;
}

.steps-indicator__dot.is-active,
.steps-indicator__dot.is-done {
  background: var(--gold);
}

/* ===== Link "volver" en mi-evento.html ===== */
.evento-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 1.25rem;
}

.evento-back:hover {
  color: var(--ink);
}

@media (max-width: 560px) {
  .eventos-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .crear-evento-card {
    padding: 1.75rem;
  }
}

/* ==========================================================================
   Responsive — Netbook / Tablet / Mobile
   Breakpoints: 1024px (netbook), 768px (tablet), 480px (mobile)
   ========================================================================== */

/* ===== Netbook (≤1024px) ===== */
@media (max-width: 1024px) {
  .eventos-main {
    padding: 2rem 1.5rem 4rem;
  }

  .eventos-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* ===== Tablet (≤768px) ===== */
@media (max-width: 768px) {
  .eventos-main {
    padding: 1.75rem 1.25rem 4rem;
  }

  .eventos-header__title {
    font-size: 1.6rem;
  }

  .eventos-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
  }

  .categoria-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

/* ===== Mobile (≤480px) ===== */
@media (max-width: 480px) {
  .eventos-main {
    padding: 1.5rem 1rem 3.5rem;
  }

  .eventos-header__title {
    font-size: 1.4rem;
  }

  .eventos-grid {
    grid-template-columns: 1fr;
  }

  .evento-card {
    padding: 1.25rem;
  }

  .crear-evento-card {
    padding: 1.4rem;
    width: min(720px, calc(100vw - 24px));
  }

  .categoria-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  .categoria-chip {
    padding: 0.85rem 0.6rem;
    font-size: 0.85rem;
  }

  .crear-evento-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.75rem;
  }

  .crear-evento-actions .btn {
    width: 100%;
    text-align: center;
  }

  .modal-overlay {
    padding: 12px;
    align-items: flex-end;
  }
}

.modal-overlay{
    position:fixed;
    inset:0;

    background:rgba(24,28,36,.55);

    display:flex;
    justify-content:center;
    align-items:center;

    padding:24px;

    z-index:9999;

    backdrop-filter:blur(4px);
}

.modal-overlay.is-hidden{
    display:none;
}

body.modal-open{
    overflow:hidden;
}

.evento-skeleton{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:1.5rem;
}

.skeleton{
    border-radius:8px;
    background:linear-gradient(
        90deg,
        #ececec 25%,
        #f7f7f7 50%,
        #ececec 75%
    );
    background-size:200% 100%;
    animation:skeleton-loading 1.3s infinite;
}

.skeleton--chip{
    width:90px;
    height:22px;
    margin-bottom:18px;
}

.skeleton--title{
    width:70%;
    height:26px;
    margin-bottom:14px;
}

.skeleton--text{
    width:50%;
    height:16px;
    margin-bottom:10px;
}

.skeleton--small{
    width:35%;
    height:14px;
}

@keyframes skeleton-loading{
    from{
        background-position:200% 0;
    }
    to{
        background-position:-200% 0;
    }
}

/* ==========================================================================
   Skeleton genérico para páginas tipo "perfil" (mi-perfil.html,
   pestaña "Datos del evento" de mi-evento.html). Reusa la misma pieza
   base .skeleton de arriba — solo agrega los tamaños que faltaban
   (banner, avatar, badge, input, botón) para armar cards completas.
   ========================================================================== */

.perfil-skeleton-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:2rem 2.25rem;
    margin-bottom:1.5rem;
}

.perfil-skeleton-card--media{
    padding:0;
    border:none;
    background:none;
    margin-bottom:3.5rem;
}

.perfil-skeleton-card__header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1.25rem;
}

.skeleton--banner{
    width:100%;
    height:200px;
    border-radius:var(--radius);
}

.skeleton--avatar{
    width:88px;
    height:88px;
    border-radius:50%;
    margin:-2.5rem 0 0 1.5rem;
    border:4px solid var(--white);
}

.skeleton--badge{
    width:70px;
    height:20px;
    border-radius:999px;
    flex:none;
}

.skeleton--input{
    width:100%;
    height:42px;
    border-radius:10px;
    margin-bottom:1.1rem;
}

.skeleton--button{
    width:160px;
    max-width:100%;
    height:42px;
    border-radius:999px;
}

/* Modificador para skeletons sobre fondos oscuros (ej: rr-total-card) —
   mismo shimmer, pero con blancos translúcidos en vez de grises. */
.skeleton--on-dark{
    background:linear-gradient(
        90deg,
        rgba(255,255,255,.14) 25%,
        rgba(255,255,255,.24) 50%,
        rgba(255,255,255,.14) 75%
    );
    background-size:200% 100%;
}

@media (max-width: 560px) {
  .skeleton--avatar {
    margin-left: 1rem;
  }
}