/* ============================================================
   PANEL — la portada de la zona privada
   Dos accesos grandes, con foto propia o un fondo de respaldo.
   ============================================================ */
.dz-plan .panel{
  background:#0B0E14;
  min-height:calc(100vh - 56px);
  padding:26px 0 60px;
}
.dz-plan .panel .container{max-width:520px}

.dz-plan .panel-titulo{
  font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.2em;
  color:rgba(255,255,255,.55);text-align:center;text-transform:uppercase;
  margin:0 0 22px;
}

.dz-plan .panel-tarjeta{
  position:relative;display:block;overflow:hidden;
  border-radius:20px;margin-bottom:14px;min-height:210px;
  cursor:pointer;isolation:isolate;
  transition:transform .3s ease, box-shadow .3s ease;
}
.dz-plan .panel-tarjeta:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.45)}

.dz-plan .panel-tarjeta img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.dz-plan .panel-tarjeta:hover img{transform:scale(1.05)}/* Oscurecido para que el rótulo se lea sobre cualquier foto */


.dz-plan .panel-tarjeta::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 50%,
    rgba(10,14,21,.15) 0%, rgba(10,14,21,.62) 100%);
}

.dz-plan .panel-rotulo{
  position:relative;z-index:1;height:100%;min-height:210px;
  display:grid;place-items:center;padding:24px 14px;
}
.dz-plan .panel-rotulo h2{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(22px,7.2vw,44px);letter-spacing:.01em;
  color:#fff;text-align:center;margin:0;line-height:1.05;
  /* Los rótulos son palabras largas: sin esto se salen de la tarjeta
     en pantallas estrechas. */
  max-width:100%;overflow-wrap:break-word;hyphens:none;
  /* Contorno como en la referencia: se lee sobre fondos claros */
  text-shadow:
     0 2px 18px rgba(0,0,0,.6),
    -1px -1px 0 rgba(0,0,0,.45), 1px -1px 0 rgba(0,0,0,.45),
    -1px  1px 0 rgba(0,0,0,.45), 1px  1px 0 rgba(0,0,0,.45);
}/* ---------- Fondos de respaldo, mientras no haya foto ---------- */


.dz-plan .panel-tarjeta--alimentacion{
  background:
    radial-gradient(60% 70% at 18% 22%, rgba(232,120,60,.55), transparent 62%),
    radial-gradient(55% 60% at 82% 78%, rgba(184,144,63,.55), transparent 60%),
    linear-gradient(140deg,#2A160F 0%,#48200F 55%,#1A0C08 100%);
}
.dz-plan .panel-tarjeta--entrenamiento{
  background:
    radial-gradient(60% 70% at 80% 20%, rgba(184,144,63,.5), transparent 60%),
    radial-gradient(55% 65% at 15% 85%, rgba(90,100,130,.45), transparent 62%),
    linear-gradient(140deg,#14171F 0%,#2A2F3C 55%,#0B0E14 100%);
}/* Trama diagonal sutil: da textura sin competir con el rótulo */

.dz-plan .panel-tarjeta:not(.con-foto) .panel-rotulo::before{
  content:'';position:absolute;inset:0;opacity:.13;
  background:repeating-linear-gradient(115deg,
    rgba(255,255,255,.9) 0 2px, transparent 2px 15px);
}/* ---------- Cifras bajo cada acceso ---------- */


.dz-plan .panel-datos{display:flex;gap:10px;margin:0 0 22px}
.dz-plan .panel-dato{
  flex:1;border-radius:12px;padding:11px 14px;
  font-family:var(--font-body);font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.dz-plan .panel-dato--fuerte{background:var(--red);color:#fff}
.dz-plan .panel-dato--suave{background:#fff;color:var(--ink)}/* ---------- Subir la foto ---------- */


.dz-plan .panel-foto{
  position:absolute;top:12px;right:12px;z-index:2;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:#fff;
  background:rgba(10,14,21,.5);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .2s, background .2s;
}
.dz-plan .panel-tarjeta:hover .panel-foto,
.dz-plan .panel-foto:focus-within{opacity:1}
.dz-plan .panel-foto:hover{background:var(--red)}
.dz-plan .panel-foto input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.dz-plan .panel-foto.cargando{opacity:1;background:var(--red)}
.dz-plan .panel-foto.fallo{opacity:1;background:#b91c1c}

.dz-plan .panel-pie{
  text-align:center;font-size:12.5px;color:rgba(255,255,255,.4);
  margin:26px 0 0;line-height:1.7;
}

@media (min-width:560px){
  .dz-plan .panel-tarjeta{min-height:250px}
  .dz-plan .panel-rotulo{min-height:250px}
}

/* La tarjeta de clientes: azul acero, para que no se confunda de un vistazo
   con las dos del plan. Solo la ve el administrador. */
.dz-plan .panel-tarjeta--clientes{
  background:
    radial-gradient(58% 68% at 20% 24%, rgba(70,110,160,.55), transparent 62%),
    radial-gradient(55% 60% at 80% 76%, rgba(30,50,80,.65), transparent 60%),
    linear-gradient(140deg,#0F1A26 0%,#1B2F45 55%,#080E15 100%);
}

/* Aquí vivía una regla que escondía el rótulo "CLIENTES": la foto que había
   antes traía esa palabra escrita dentro y salía dos veces. La foto de ahora
   no lleva texto, así que el rótulo tiene que verse como en las demás.
   Si algún día vuelves a poner una foto con letras dentro, la solución no es
   esconder el rótulo: es cambiar la foto. */

/* Solicitudes y pagos: dorado apagado, el respaldo mientras carga la foto. */
.dz-plan .panel-tarjeta--solicitudes{
  background:
    radial-gradient(58% 68% at 22% 26%, rgba(184,144,63,.45), transparent 62%),
    radial-gradient(55% 60% at 78% 74%, rgba(90,66,26,.6), transparent 60%),
    linear-gradient(140deg,#1C160C 0%,#332812 55%,#0B0E14 100%);
}