:root {
    --bg-color: #DFDBE5;
    --text-color: #333333;
    --card-bg: #ffffff;
    --border-color: #dddddd;
    --input-bg: #ffffff;
}

html.dark-mode {
    --bg-color: #121212;
    --text-color: #f1f1f1;
    --card-bg: #1e1e1e;
    --border-color: #444444;
    --input-bg: #2a2a2a;
}

body,
.card,
.navbar,
table, th, td,
input, select, textarea,
.stat-box,
.chat-box,
.chat-msg.theirs,
.tabs a,
.category-tile,
.badge-pendiente,
.badge-cotizado,
.badge-aceptado, .badge-finalizado, .badge-pagado,
.badge-rechazado, .badge-cancelado,
.badge-asignado, .badge-en_camino, .badge-en_proceso {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.card { background-color: var(--card-bg); border-color: var(--border-color); color: var(--text-color); }
.navbar { background-color: var(--card-bg); border-bottom: 1px solid var(--border-color); }
.navbar-links span, .navbar-links a { color: var(--text-color); }

html.dark-mode body {
  background-color: var(--bg-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

input, select, textarea {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.tabs a { color: var(--text-color); }
.tabs a.active { border-bottom-color: var(--text-color); }

html.dark-mode .category-tile,
html.dark-mode .tabs a {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-mode table th {
    background-color: #2a2a2a !important;
    color: var(--text-color) !important;
    border-bottom-color: var(--border-color) !important;
}
html.dark-mode table td {
    border-bottom-color: var(--border-color) !important;
}
html.dark-mode .stat-box {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-mode .badge-pendiente { background: #5a3c00 !important; color: #fef3c7 !important; }
html.dark-mode .badge-cotizado { background: #002868 !important; color: #dbeafe !important; }
html.dark-mode .badge-aceptado, html.dark-mode .badge-finalizado, html.dark-mode .badge-pagado { background: #00421a !important; color: #dcfce7 !important; }
html.dark-mode .badge-rechazado, html.dark-mode .badge-cancelado { background: #5c0000 !important; color: #fee2e2 !important; }
html.dark-mode .badge-asignado, html.dark-mode .badge-en_camino, html.dark-mode .badge-en_proceso { background: #2f006b !important; color: #ede9fe !important; }

html.dark-mode .chat-box { background-color: var(--input-bg) !important; border-color: var(--border-color) !important; }
html.dark-mode .chat-msg.theirs { background-color: #3a3a3a !important; border-color: var(--border-color) !important; color: var(--text-color) !important; }

html.dark-mode div[style*="background: #f8f9fa"],
html.dark-mode div[style*="background: #F0F4F8"],
html.dark-mode div[style*="background: #e9ecef"],
html.dark-mode div[style*="background:#FFF3EC"],
html.dark-mode div[style*="background:#FAFAFA"],
html.dark-mode div[style*="background-color: #fff8f8"],
html.dark-mode div[style*="background: #eee"],
html.dark-mode div[style*="background: rgba(220, 53, 69, 0.1)"] {
    background-color: #2a2a2a !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-mode h3[style*="color: #dc3545"],
html.dark-mode span[style*="color: #d9534f"] {
    color: #ff6b81 !important;
}
html.dark-mode h3[style*="color: #333"] {
    color: var(--text-color) !important;
}

html.dark-mode div[style*="background: #e8f5e9"],
html.dark-mode div[style*="background-color: #d4edda"] {
    background-color: #00421a !important; color: #dcfce7 !important; border-color: #166534 !important;
}
html.dark-mode div[style*="background-color: #f8d7da"] {
    background-color: #5c0000 !important; color: #fee2e2 !important; border-color: #991b1b !important;
}
html.dark-mode div[style*="background: #fff3cd"] {
    background-color: #5a3c00 !important; color: #fef3c7 !important; border-color: #92400E !important;
}

body.logged-in .card {
    background-color: transparent;
    box-shadow: none;
}
html.dark-mode body.logged-in .card {
    background-color: transparent;
}

body.logged-in .tabs a:not(.active) {
    background-color: #fff;
    border: 2px solid var(--reparo-orange);
    color: var(--reparo-orange);
    font-weight: 700;
}
html.dark-mode body.logged-in .tabs a:not(.active) {
    background-color: var(--card-bg) !important;
    border: 2px solid var(--reparo-orange);
    color: var(--reparo-orange) !important;
}

body.logged-in #botones-filtro .btn-outline {
    background-color: #fff;
}
html.dark-mode body.logged-in #botones-filtro .btn-outline {
    background-color: var(--card-bg) !important;
}