/* Theme: planruta - only tokens and font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');

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

/* Headings typography */
/* H1: Nike Combat Stencil (fallback visible: Black Ops One) */
h1, .brand-title {
  font-family: 'Black Ops One', 'Nike Combat Stencil', 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--pb-text);
  font-style: italic;
}

h2, h3 {
  font-family: 'Nike Combat Stencil', 'Black Ops One', 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--pb-text);
  font-style: italic;
}

h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 700; }

h4 {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  color: var(--pb-text);
}

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

strong, b {
  font-weight: 700; /* Poppins Bold */
}

p { font-weight: 400; }

/* Accent span within brand title (Plan DE RUTA) */
.brand-title .brand-accent {
  color: var(--pb-primary);
}

.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-surface);
}

/* 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 .table,
.formulario-main .table th,
.formulario-main .table td {
  color: var(--pb-surface);
}

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

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

.form-control,
.form-select {
  background-color: var(--pb-text);
  color: var(--pb-surface);
}

/* Color del placeholder */
.form-control::placeholder,
.form-select::placeholder {
  color: var(--pb-surface);
  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-surface);
  text-decoration: none;
}