/* =========================================
   EMPEREAN SPA — Módulo Pantallas Streaming
   ========================================= */

/* ── Cards ─────────────────────────────── */
.pt-card {
  border: 1.5px solid #f0e6ff;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #fdfaff;
}

/* ── Stats grid ─────────────────────────── */
.pt-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.pt-stat-card {
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
}

.pt-stat-value {
  font-size: 1.4rem;
  font-weight: 900;
}

.pt-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #636e72;
  margin-top: 3px;
}

/* ── Badges ─────────────────────────────── */
.pt-badge {
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.pt-badge-green  { background: #e8fdf5; color: #00b894; }
.pt-badge-yellow { background: #fff9e6; color: #e17055; }
.pt-badge-red    { background: #fff0f0; color: #d63031; }
.pt-badge-purple { background: #f3e8ff; color: var(--primary); }
.pt-badge-gray   { background: #f8f2ff; color: #636e72; }

/* ── Form elements ──────────────────────── */
.pt-field { margin-bottom: 12px; }

.pt-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #636e72;
  display: block;
  margin-bottom: 5px;
}

.pt-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e0d0f0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.88rem;
  box-sizing: border-box;
  outline: none;
  background: white;
}

.pt-select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e0d0f0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.82rem;
  box-sizing: border-box;
  outline: none;
  background: white;
}

.pt-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Buttons ────────────────────────────── */
.pt-btn {
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 8px;
}

.pt-btn-primary {
  background: linear-gradient(135deg, var(--primary), #8a2b8a);
  color: white;
}

.pt-btn-outline {
  background: white;
  color: var(--primary);
  border: 1.5px solid #e0d0f0 !important;
}

.pt-btn-danger {
  background: #fff0f0;
  color: #d63031;
}

.pt-btn-full {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 800;
}

/* ── Bottom-sheet modal ─────────────────── */
.pt-sheet {
  background: white;
  border-radius: 22px 22px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 30px rgba(96, 32, 96, 0.15);
}

.pt-sheet-header {
  padding: 16px 18px 13px;
  border-bottom: 1px solid #f5f0fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.pt-sheet-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary);
}

.pt-sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 14px 18px 0;
}

.pt-sheet-footer {
  padding: 14px 18px 24px;
  flex-shrink: 0;
}

.pt-close-btn {
  background: #f3e8ff;
  color: var(--primary);
  border: none;
  border-radius: 99px;
  width: 32px;
  height: 32px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ── Info / highlight boxes ─────────────── */
.pt-info-box {
  background: #f8f2ff;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.pt-success-box {
  background: #e8fdf5;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  text-align: center;
}

.pt-gradient-card {
  background: linear-gradient(135deg, var(--primary), #8a2b8a);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  color: white;
}

/* ── List items ─────────────────────────── */
.pt-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fdfaff;
  border: 1px solid #f0e6ff;
  border-radius: 12px;
  margin-bottom: 6px;
}

.pt-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* ── Dots ───────────────────────────────── */
.pt-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 3px;
}

/* ── Empty state ────────────────────────── */
.pt-empty {
  text-align: center;
  padding: 40px 20px;
  color: #b2bec3;
}

.pt-empty-icon { font-size: 2.2rem; margin-bottom: 8px; }

.pt-empty p { margin: 0; font-size: 0.85rem; line-height: 1.5; }

/* ── Month picker (renovar) ─────────────── */
.pt-months-btn {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  border: 1.5px solid #e0d0f0;
  background: white;
  color: var(--primary);
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.pt-months-num {
  font-size: 3rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
}

/* ── Pantallas info strip ───────────────── */
.pt-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f2ff;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
}