/* Theme: communion - tokens and typography */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  --pb-bg: #1C1B1B;
  --pb-surface: transparent;
  --pb-text: #FFFFFF;
  --pb-text-muted: rgba(255, 255, 255, 0.75);
  --pb-border: #3a3a3a;
  --pb-primary: #D034F6;
  --pb-accent: #DE3130;
  --pb-font: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Gradient background */
body {
  background: linear-gradient(180deg, #7F79B8 0%, #000003 100%);
  color: var(--pb-text);
}

/* Headings */
h1, h2, h3 { color: var(--pb-text); }
h1 { font-family: var(--pb-font); font-weight: 700; }
h2 { font-family: var(--pb-font); font-weight: 700; }
h3 { font-family: var(--pb-font); font-style: italic; font-weight: 700; }

/* Text */
p, li, input, label, span, small, .form-control, .form-select {
  font-family: var(--pb-font);
  color: var(--pb-text);
}

strong, b { font-weight: 700; }

.formulario-main {
  background-color: var(--pb-text);
}

.form-section {
  background-color: var(--pb-text);
}

.form-section h1,
.form-section h2,
.form-section p,
.form-section label
 {
  color: var(--pb-bg);
}

/* Ensure readable text on light backgrounds inside forms area */
.formulario-main,
.formulario-main p,
.formulario-main span,
.formulario-main li,
.formulario-main h1,
.formulario-main h2,
.formulario-main h3,
.formulario-main h4,
.formulario-main h5,
.formulario-main h6,
.formulario-main label,
.formulario-main .table,
.formulario-main .table th,
.formulario-main .table td {
  color: var(--pb-bg);
}

.formulario-main a {
  color: var(--pb-bg);
}

.tbl-new > thead {
  border-top: 3px solid var(--pb-primary);
  border-bottom: 3px solid var(--pb-primary);
}

/* Color del placeholder */
.form-control::placeholder,
.form-select::placeholder {
  color: var(--pb-bg);
  opacity: 0.7; /* opcional, para dar efecto suave */
}

.form-check-input {
  border: 1px solid var(--pb-primary);
}

.form-check-input:checked {
  background-color: var(--pb-primary);
  border-color: var(--pb-primary);
}

body.theme-form .modal-content {
  background: var(--pb-text);
  color: var(--pb-bg);
}

.modal-content a {
  color: var(--pb-border);
  text-decoration: none;
}