/* =========================================================
   TVPanel - Estilos del portal de clientes
   Extiende style.css con componentes específicos del área
   de clientes (dashboard, purchase, auth).
   ========================================================= */

/* ---------- Banner de bienvenida ---------- */
.client-banner{
  background: var(--color-bg-alt);
  border-bottom: 2px solid var(--color-border);
  padding: 12px 0;
  font-size: 14px;
  color: var(--color-text-light);
}
.client-banner strong{ color: var(--color-primary); }

/* ---------- Autenticación (Login / Register) ---------- */
.auth-container{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 60px 0;
}
.auth-box{
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 40px 36px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow);
}
.auth-box h2{
  text-align: center;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.auth-field{
  margin-bottom: 16px;
}
.auth-field label{
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--color-text);
}
.auth-field input{
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 2px solid var(--color-border);
  font-size: 15px;
  font-family: inherit;
  background: var(--color-bg-alt);
  color: var(--color-text);
}
.auth-field input:focus{
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
}
.auth-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.muted{
  color: var(--color-text-light);
  font-size: 14px;
}

/* ---------- Stats (Dashboard) ---------- */
.client-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.cstat{
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.cstat.active{
  border-color: var(--color-primary);
  background: var(--color-bg-alt);
}
.cstat.purchase{
  display: flex;
  align-items: center;
  justify-content: center;
}
.cstat-val{
  font-size: 36px;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 6px;
}
.cstat.active .cstat-val{ color: var(--color-secondary); }
.cstat-label{
  font-size: 13px;
  color: var(--color-text-light);
  font-weight: 600;
}

/* ---------- Cards genéricas ---------- */
.client-card{
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}
.client-card h2{
  font-size: 20px;
  color: var(--color-primary);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
}

/* ---------- Licencias ---------- */
.license-item{
  background: var(--color-bg-alt);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  transition: box-shadow .15s ease;
}
.license-item:hover{ box-shadow: var(--shadow-sm); }
.license-item.active{
  border-color: var(--color-primary);
  border-left: 5px solid var(--color-primary);
}
.license-item.expired{
  border-color: #F6C6C2;
  border-left: 5px solid #E74C3C;
  opacity: .85;
}
.license-item.suspended{
  border-color: #FCE4BB;
  border-left: 5px solid #F39C12;
  opacity: .85;
}
.license-item.pending{
  border-color: #FCE4BB;
  border-left: 5px solid #F39C12;
}
.license-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.license-key{
  background: var(--color-primary);
  color: #fff;
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  font-family: 'Courier New', monospace;
}
.license-plan{
  font-weight: 700;
  color: var(--color-secondary);
  font-size: 15px;
}
.license-details{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.ld-item{
  font-size: 13.5px;
  color: var(--color-text-light);
}
.ld-item strong{
  color: var(--color-text);
}
.license-config{
  border-top: 2px solid var(--color-border);
  padding-top: 14px;
  margin-top: 4px;
}
.license-config .auth-row{
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: flex-end;
}

/* ---------- Status tags (reutilizados del admin) ---------- */
.tag-active{ background:#E6F8EC; color:#1D8A45; padding:4px 12px; border-radius:50px; font-size:12px; font-weight:700; }
.tag-inactive{ background:#F1F3F5; color:#7A8794; padding:4px 12px; border-radius:50px; font-size:12px; font-weight:700; }
.tag-badge{ color:#fff; padding:3px 10px; border-radius:50px; font-size:11px; font-weight:700; }

/* ---------- Empty state ---------- */
.empty-state{
  text-align: center;
  padding: 40px 20px;
}
.empty-state p{
  font-size: 16px;
  margin-bottom: 20px;
}

/* ---------- Tabla de pagos ---------- */
.client-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}
.client-table th{
  background: var(--color-primary);
  color: #fff;
  text-align: left;
  padding: 12px 14px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.client-table th:first-child{ border-radius: 8px 0 0 0; }
.client-table th:last-child{ border-radius: 0 8px 0 0; }
.client-table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  color: var(--color-text);
}
.client-table tbody tr:nth-child(even){ background: var(--color-bg-alt); }
.client-table tbody tr:hover{ background: #E8F4FD; }
.method-tag{
  display: inline-block;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: .5px;
}
.table-scroll{ overflow-x: auto; }

/* ---------- Account info ---------- */
.account-info{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 30px;
}
.account-info div{
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14.5px;
}
.account-info strong{
  color: var(--color-text);
  margin-right: 6px;
}

/* ---------- Selección de plan (Purchase) ---------- */
.plan-selectable{
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.plan-selectable:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.plan-selectable.selected{
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.25), var(--shadow);
  transform: translateY(-4px);
}
.plan-selectable.selected .plan-select-btn{
  background: var(--color-secondary);
  color: #fff;
}
.plan-select-btn{
  transition: background .15s ease;
}

/* ---------- Métodos de pago (Purchase) ---------- */
.payment-methods-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 600px;
  margin: 0 auto;
}
.payment-method-card{
  display: block;
  cursor: pointer;
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: 14px;
  padding: 24px 16px;
  text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.payment-method-card:hover{
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.payment-method-card.selected{
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.25);
  background: var(--color-bg-soft);
}
.payment-method-card input[type="radio"]{ display: none; }
.pm-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pm-icon{ color: var(--color-primary); }
.pm-icon svg{ width: 40px; height: 40px; }
.pm-inner strong{
  font-size: 14px;
  color: var(--color-text);
}

/* ---------- Mensajes callback ---------- */
.callback-msg{
  text-align: center;
  padding: 14px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-weight: 600;
  font-size: 14px;
}
.callback-msg.success{ background: #E6F8EC; color: #1D8A45; border: 2px solid #B7EBC6; }
.callback-msg.error{ background: #FDECEC; color: #C0392B; border: 2px solid #F6C6C2; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px){
  .client-stats{ grid-template-columns: repeat(2, 1fr); }
  .license-details{ grid-template-columns: repeat(2, 1fr); }
  .payment-methods-grid{ grid-template-columns: repeat(2, 1fr); }
  .account-info{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .auth-row{ grid-template-columns: 1fr; }
  .license-config .auth-row{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .client-stats{ grid-template-columns: 1fr 1fr; }
  .license-details{ grid-template-columns: 1fr 1fr; }
  .auth-box{ padding: 28px 20px; }
  .client-card{ padding: 20px 16px; }
  .payment-methods-grid{ grid-template-columns: 1fr; max-width: 280px; }

  /* Tabla de pagos mobile */
  .client-table{ min-width: 0; }
  .client-table thead{ display: none; }
  .client-table tbody tr{
    display: block;
    margin-bottom: 14px;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff !important;
  }
  .client-table td{
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    text-align: right;
  }
  .client-table td:last-child{ border-bottom: none; }
  .client-table td::before{
    content: attr(data-label);
    font-weight: 700;
    color: var(--color-primary);
    text-align: left;
  }
}