:root {
      --bg: #0e0f13;
      --panel: #161a22;
      --nav: #1a1d25;
      --text: #eef1f6;
      --muted: #c8d0ff;
      --brand: #6c5ce7;
      --border: #2a2f3a;
      --danger: #ef5350;
    }
    html, body { background: var(--bg); color: var(--text); }
    nav { background: var(--nav); }
    .card { background: var(--panel); border: 1px solid var(--border); }
    .btn, .btn-small { background: var(--brand); }
    a, .breadcrumb { color: var(--muted); }
    .chip { background: #1f2430; color: var(--muted); border: 1px solid var(--border); }
    table.striped > tbody > tr:nth-child(odd) { background-color: #151924; }
    table.striped > tbody > tr { color: var(--text); }
    table thead { color: var(--muted); }
    .thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }

    /* Inputs y labels blancos */
    .input-field input[type=text],
    .input-field input[type=email],
    .input-field input[type=password],
    .input-field input[type=number],
    .input-field input[type=date],
    .input-field textarea {
      color: var(--text) !important;
      border-bottom: 1px solid var(--muted);
    }
    .input-field input::placeholder,
    .input-field textarea::placeholder { color: #bfc7ffb3 !important; }
    .input-field input:focus, .input-field textarea:focus {
      border-bottom: 1px solid var(--brand) !important; box-shadow: 0 1px 0 0 var(--brand) !important;
    }
    .input-field label { color: var(--muted) !important; }
    .input-field input:focus + label,
    .input-field textarea:focus + label { color: var(--brand) !important; }
    .caret { border-bottom-color: var(--brand) !important; }

    /* Select dark */
    .select-wrapper input.select-dropdown { color: var(--text) !important; }
    .dropdown-content.select-dropdown { background: var(--panel) !important; }
    .dropdown-content li > span { color: var(--text) !important; }
    .dropdown-content li:hover { background: #202633 !important; }
/* Fuerza texto blanco en inputs y labels */
input, textarea, select {
  color: #fff !important;
}

input::placeholder,
textarea::placeholder {
  color: #bbb !important; /* gris claro para placeholders */
}

.input-field label {
  color: #ccc !important; /* labels en gris claro */
}

/* Label flotante activo (cuando el input está enfocado o tiene texto) */
.input-field input:focus + label,
.input-field input.valid + label,
.input-field input:disabled + label {
  color: #fff !important;
}

/* Borde y underline */
.input-field input:focus {
  border-bottom: 1px solid var(--brand, #42a5f5) !important;
  box-shadow: 0 1px 0 0 var(--brand, #42a5f5) !important;
}