/* W3.CSS Dark Mode - Joycar Rent */
/* Selector: body.w3-black sobrescribe todos los colores */

body.w3-black {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
}

/* Contenedores principales */
body.w3-black .w3-white {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
}

body.w3-black .w3-card {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #444444 !important;
}

body.w3-black .w3-container {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
}

body.w3-black .w3-sidebar {
  background-color: #1f1f1f !important;
  color: #e0e0e0 !important;
}

body.w3-black main {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
}

/* Colores de backgrounds alternativos */
body.w3-black .w3-light-grey {
  background-color: #333333 !important;
  color: #e0e0e0 !important;
}

body.w3-black .w3-bar {
  background-color: #2a2a2a !important;
}

body.w3-black .w3-bar-block {
  background-color: #1f1f1f !important;
}

/* Borders */
body.w3-black .w3-border,
body.w3-black .w3-border-right,
body.w3-black .w3-border-bottom,
body.w3-black .w3-border-left,
body.w3-black .w3-border-light-grey {
  border-color: #444444 !important;
}

body.w3-black .w3-border-blue {
  border-color: #66b3ff !important;
}

/* Inputs y formularios */
body.w3-black .w3-input,
body.w3-black .w3-select,
body.w3-black textarea {
  background-color: #333333 !important;
  color: #e0e0e0 !important;
  border-color: #555555 !important;
}

body.w3-black .w3-input:focus,
body.w3-black .w3-select:focus,
body.w3-black textarea:focus {
  background-color: #3a3a3a !important;
  border-color: #66b3ff !important;
}

/* Tablas */
body.w3-black .w3-table-all {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
}

body.w3-black .w3-table-all thead {
  background-color: #333333 !important;
  color: #e0e0e0 !important;
}

body.w3-black .w3-table-all th {
  background-color: #333333 !important;
  color: #e0e0e0 !important;
}

body.w3-black .w3-table-all tbody tr {
  border-bottom-color: #444444 !important;
}

body.w3-black .w3-table-all tbody tr:hover {
  background-color: #383838 !important;
}

body.w3-black .w3-striped tbody tr:nth-child(odd) {
  background-color: #2a2a2a !important;
}

body.w3-black .w3-striped tbody tr:nth-child(even) {
  background-color: #333333 !important;
}

/* Textos */
body.w3-black p,
body.w3-black h1,
body.w3-black h2,
body.w3-black h3,
body.w3-black h4,
body.w3-black h5,
body.w3-black h6,
body.w3-black label,
body.w3-black legend,
body.w3-black span {
  color: #e0e0e0 !important;
}

body.w3-black .w3-text-dark {
  color: #e0e0e0 !important;
}

body.w3-black .w3-text-grey {
  color: #b0b0b0 !important;
}

body.w3-black .w3-text-blue {
  color: #66b3ff !important;
}

/* Botones */
body.w3-black .w3-button {
  color: #ffffff !important;
  background-color: #555555 !important;
}

body.w3-black .w3-button:hover {
  background-color: #666666 !important;
}

body.w3-black .w3-blue {
  background-color: #0066cc !important;
  color: #ffffff !important;
}

body.w3-black .w3-blue:hover {
  background-color: #0052a3 !important;
}

body.w3-black .w3-red {
  background-color: #cc0000 !important;
  color: #ffffff !important;
}

body.w3-black .w3-red:hover {
  background-color: #990000 !important;
}

/* Links */
body.w3-black a {
  color: #66b3ff !important;
}

body.w3-black a:hover {
  color: #99ccff !important;
}

/* Details/Summary */
body.w3-black details {
  background-color: transparent !important;
}

body.w3-black summary {
  background-color: #333333 !important;
  color: #e0e0e0 !important;
}

body.w3-black summary:hover {
  background-color: #444444 !important;
}

/* Listas */
body.w3-black .w3-ul {
  background-color: transparent !important;
}

body.w3-black .w3-ul li {
  border-color: #444444 !important;
  color: #e0e0e0 !important;
}

/* Fieldset */
body.w3-black fieldset {
  border-color: #444444 !important;
}

/* HR */
body.w3-black hr {
  border-color: #444444 !important;
}

/* Footer */
body.w3-black footer {
  background-color: #1f1f1f !important;
  color: #e0e0e0 !important;
}

/* Placeholders */
body.w3-black ::placeholder {
  color: #888888 !important;
}

/* Scrollbar */
body.w3-black ::-webkit-scrollbar {
  width: 12px;
}

body.w3-black ::-webkit-scrollbar-track {
  background: #1a1a1a;
}

body.w3-black ::-webkit-scrollbar-thumb {
  background: #444444;
  border-radius: 6px;
}

body.w3-black ::-webkit-scrollbar-thumb:hover {
  background: #555555;
}