/*
  COMPONENTES: CARDS
  Fase 38

  Dueño de:
  - tarjetas reutilizables de hubs y juegos
  - cards de pozos
  - estados visuales internos de cards

  Mantener este archivo antes de styles.css mientras exista CSS legacy.
*/

/* ── CARDS ── */
     .phub-card  {
         background: var(--theme-white);
         border: 1.5px solid rgba(11,29,58,.09);
         border-radius: 18px;
         overflow: hidden;
         box-shadow: 0 6px 20px rgba(11,29,58,.06);
         transition: transform .18s, box-shadow .18s;
         text-decoration: none;
         display: flex;
         flex-direction: column;

}
     .phub-card:hover  {
         transform: translateY(-3px);
         box-shadow: 0 12px 28px rgba(11,29,58,.11);

}

/* header de la card */
     .phub-card-head  {
         background: var(--color-marino);
         padding: 14px 16px 12px;
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: 8px;

}
     .phub-card-name  {
         font-family: var(--theme-font-body);
         font-size: .82rem;
         font-weight: 900;
         text-transform: uppercase;
         letter-spacing: .05em;
         color: var(--theme-white);
         line-height: 1.25;

}
     .phub-card-region  {
         font-size: .62rem;
         font-weight: 700;
         color: rgba(255,255,255,.55);
         text-transform: uppercase;
         letter-spacing: .06em;
         margin-top: 2px;

}
     .phub-card-flag  {
         font-size: 1.3rem;
         line-height: 1;
         flex-shrink: 0;

}

/* cuerpo: número cabeza */
     .phub-card-body  {
         padding: 16px 18px 14px;
         flex: 1;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         text-align: center;
         min-height: 90px;

}
     .phub-card-label  {
         font-size: .64rem;
         font-weight: 800;
         text-transform: uppercase;
         letter-spacing: .09em;
         color: var(--color-gris);
         margin-bottom: 4px;

}
     .phub-card-cabeza  {
         font-family: var(--theme-font-number);
         font-size: 2.4rem;
         font-weight: 700;
         color: var(--color-rojo);
         line-height: 1;
         letter-spacing: -.02em;

}
     .phub-card-cabeza.loading  {
         font-size: 1.4rem;
         color: var(--color-gris);
         opacity: .4;
         animation: pulse 1.4s ease-in-out infinite;

}
     .phub-card-turno  {
         font-size: .66rem;
         font-weight: 700;
         color: var(--color-gris);
         margin-top: 5px;
         letter-spacing: .04em;

}

/* footer de la card */
     .phub-card-footer  {
         border-top: 1px solid rgba(11,29,58,.07);
         padding: 11px 16px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 8px;

}
     .phub-card-turnos-mini  {
         display: flex;
         gap: 4px;
         flex-wrap: wrap;

}
     .phub-dot  {
         width: 7px;
         height: 7px;
         border-radius: 50%;
         background: var(--color-gris-claro);
         border: 1.5px solid rgba(11,29,58,.15);
         transition: background .2s;

}
     .phub-dot.tiene-dato  {
         background: #22c55e;
         border-color: var(--theme-green);

}
     .phub-ver-btn  {
         font-size: .68rem;
         font-weight: 800;
         text-transform: uppercase;
         letter-spacing: .06em;
         color: var(--color-marino);
         white-space: nowrap;
         display: flex;
         align-items: center;
         gap: 4px;

}
     .phub-ver-btn::after  {
         content: '→';
         font-size: .8rem;

}
     @keyframes pulse  {
         0%, 100%  {
     opacity: .35;

  }
         50%        {
     opacity: .65;

  }

}

/* disclaimer */
     .phub-disclaimer  {
         text-align: center;
         font-size: .75rem;
         color: var(--color-gris);
         margin-top: 32px;
         line-height: 1.55;
         opacity: .8;

}
     @media (max-width: 600px)  {
         .phub-grid  {
     grid-template-columns: 1fr 1fr;
     gap: 12px;

  }
         .phub-card-cabeza  {
     font-size: 2rem;

  }
         .phub-card-body  {
     min-height: 76px;
     padding: 12px 10px 10px;

  }
         .phub-card-head  {
     padding: 12px 12px 10px;

  }
         .phub-card-footer  {
     padding: 9px 12px;

  }

}
     @media (max-width: 380px)  {
         .phub-grid  {
     grid-template-columns: 1fr;

  }

}


/* Cards con sombra suave */
     .card {
  background:var(--theme-white);
  border-radius:16px;
  border:1px solid rgba(11,29,58,.07);
  padding:22px 20px 20px;
  margin-bottom:18px;
  text-align:center;
  box-shadow:0 6px 18px rgba(11,29,58,.055)
}
     .card-azul {
  border-color:#EAECF2
}
     .card h2 {
  font-family: var(--theme-font-body);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--theme-navy);
  margin:0 0 4px
}
     .card-sub {
  font-family: var(--theme-font-body);
  font-size:.75rem;
  color:var(--theme-muted-2);
  margin-bottom:14px;
  text-align:center
}


/* Cards de pozos */
.pozo-card {
  background:var(--theme-white);
  border:1px solid rgba(11,29,58,.07);
  border-radius:14px;
  padding:16px;
  text-align:left;
  box-shadow:0 4px 14px rgba(11,29,58,.04)
}
     .pozo-card span {
  display:block;
  font-family: var(--theme-font-body);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--theme-muted)
}
     .pozo-card strong {
  display:block;
  font-family: var(--theme-font-body);
  font-size:1.05rem;
  color:var(--theme-navy);
  margin-top:5px
}