:root {
--azul-marino: #0D47A1;
--azul-electrico: #027BFF;
--verde: #10b981;
--naranja: #FFB74D;
--gris-claro: #f3f4f6;
--gris-borde: #e5e7eb;
--texto: #1f2937;
--texto-secundario: #6b7280;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: url('../images/fondo.jpg') no-repeat center center fixed;
background-size: cover;
min-height: 100vh;
color: var(--texto);
}

body.dark {
background: url('../images/fondo-dark.jpg') no-repeat center 65% fixed;
background-size: 100% auto;
}

body::before {
content: "";
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(6px);
z-index: -1;
}

body.dark::before {
background: rgba(0, 0, 0, 0.2);
}

/* Dark theme styles */
body.dark .header { background: rgba(30,41,59,0.95); }
body.dark .card { background: rgba(30,41,59,0.92); color: #e5e7eb; }
body.dark .card-title { color: #93c5fd; }
body.dark .form-label { color: #9ca3af; }
body.dark .form-input { background: #1e293b; border-color: #475569; color: #e5e7eb; }
body.dark .form-input::placeholder { color: #6b7280; }
body.dark .welcome h1, body.dark .welcome p { color: #fff; }
body.dark .tab { background: rgba(255,255,255,0.1); }
body.dark .tab.active { background: rgba(30,41,59,0.9); color: #93c5fd; }
body.dark .user-name { color: #93c5fd; }
body.dark .trip-item, body.dark .address-item { border-color: #475569; background: rgba(30,41,59,0.6); }
body.dark .trip-date { background: #1e293b; }
body.dark .trip-date-day { color: #93c5fd; }
body.dark .address-icon { background: #1e293b; }
body.dark .address-icon svg { color: #93c5fd; }
body.dark .address-label { color: #e5e7eb; }
body.dark .address-text { color: #9ca3af; }
body.dark .icon-btn { background: #374151; border-color: #475569; }
body.dark .icon-btn svg { color: #e5e7eb; }
body.dark .icon-btn:hover { background: #475569; }
body.dark .icon-btn.delete:hover { background: #7f1d1d; border-color: #991b1b; }
body.dark .icon-btn.edit:hover { background: #1e3a5f; border-color: #2563eb; }
#addrSuggestions { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; max-height: 220px; overflow-y: auto; z-index: 9999; box-shadow: 0 14px 34px rgba(16,42,67,.18); }
#addrSuggestions .addr-sug-item { padding: 10px 14px; cursor: pointer; font-size: 14px; border-bottom: 1px solid #f3f4f6; color: #1f2937; transition: background 0.15s; }
#addrSuggestions .addr-sug-item:last-child { border-bottom: none; }
#addrSuggestions .addr-sug-item:hover { background: #f0f4ff; }
body.dark #addrSuggestions { background: #1e293b; border-color: #475569; box-shadow: 0 14px 34px rgba(0,0,0,.4); }
body.dark #addrSuggestions .addr-sug-item { color: #e5e7eb; border-color: #334155; }
body.dark #addrSuggestions .addr-sug-item:hover { background: #334155; }
body.dark .empty-state { color: #9ca3af; }
body.dark .modal { background: #1e293b; color: #e5e7eb; }
body.dark .btn-secondary { background: #374151; color: #e5e7eb; }
body.dark .trip-leg { background: #1e293b; color: #cbd5e1; }
body.dark .trip-leg-title { color: #e5e7eb; }
body.dark .trip-pay-btn.reserve { background: rgba(34,197,94,0.15); color: #4ade80; border-color: #166534; }
body.dark .trip-pay-btn.balance { background: rgba(59,130,246,0.15); color: #60a5fa; border-color: #1e40af; }
body.dark .trip-pay-btn.paid { background: #374151; color: #9ca3af; border-color: #475569; }

/* Header */
.header {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
padding: 0 24px;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 100;
}

.header-left {
display: flex;
align-items: center;
gap: 16px;
}

.logo {
height: 40px;
}

.back-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: var(--gris-claro);
border: none;
border-radius: 8px;
color: var(--texto);
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}

.back-btn:hover { background: #e5e7eb; }

.header-user {
display: flex;
align-items: center;
gap: 12px;
}

.user-name {
font-weight: 600;
color: var(--azul-marino);
}

.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--azul-marino);
object-fit: cover;
}

.user-avatar-initials {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e0e7ff;
border: 2px solid var(--azul-marino);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: var(--azul-marino);
}

/* Main Layout */
.main {
max-width: 1200px;
margin: 0 auto;
padding: 24px;
}

.welcome {
color: white;
margin-bottom: 24px;
}

.welcome h1 {
font-size: 28px;
font-weight: 800;
margin-bottom: 4px;
}

.welcome p {
opacity: 0.9;
}

/* Tabs */
.tabs {
display: flex;
gap: 8px;
margin-bottom: 24px;
flex-wrap: wrap;
}

.tab {
padding: 12px 24px;
background: rgba(255,255,255,0.2);
border: none;
border-radius: 12px;
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
}

.tab:hover { background: rgba(255,255,255,0.3); }
.tab.active { background: white; color: var(--azul-marino); }

.tab svg { width: 20px; height: 20px; }

/* Content Cards */
.content {
display: none;
}

.content.active {
display: block;
}

.card {
background: white;
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
margin-bottom: 20px;
}

.card-title {
font-size: 18px;
font-weight: 700;
color: var(--azul-marino);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}

.card-title svg { width: 24px; height: 24px; }

/* Form Styles */
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}

@media (max-width: 600px) {
.form-grid { grid-template-columns: 1fr; }
}

/* Mobile dark mode: night mountain scene */
@media (max-width: 960px) {
body.dark {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 500' preserveAspectRatio='none'%3E%3Cpath d='M0,500 L0,280 C100,180 220,240 380,160 C540,80 660,180 820,120 C980,60 1100,160 1260,120 C1360,100 1440,150 1440,170 L1440,500Z' fill='%23162640' opacity='.45'/%3E%3Cpath d='M0,500 L0,340 C140,260 300,310 460,240 C620,170 780,260 940,220 C1100,180 1260,240 1440,260 L1440,500Z' fill='%23111d30' opacity='.7'/%3E%3Cpath d='M0,500 L0,390 C160,350 340,370 520,340 C700,310 880,350 1060,330 C1180,320 1340,360 1440,370 L1440,500Z' fill='%230a101c'/%3E%3C/svg%3E") no-repeat bottom center / 100% 55% fixed,
radial-gradient(ellipse at 50% 100%, rgba(25,50,80,0.5) 0%, transparent 65%) fixed,
linear-gradient(180deg, #060a12 0%, #0b1120 35%, #101b2e 65%, #0e1525 100%) fixed !important;
}
}

/* Mobile responsive header */
@media (max-width: 768px) {
.header { padding: 0 12px; height: 56px; }
.logo { height: 32px; }
.header-left { gap: 8px; }
.user-name { display: none; }
.header-user { gap: 6px; }
#logoutBtn { padding: 8px; margin-left: 4px !important; font-size: 0; gap: 0; }
#logoutBtn svg { width: 18px; height: 18px; }
.back-btn { padding: 6px 10px; font-size: 13px; }
.back-btn svg { width: 14px; height: 14px; }
.main { padding: 16px 12px; }
.welcome h1 { font-size: 22px; }
.welcome p { font-size: 14px; }
.tabs { gap: 6px; flex-wrap: wrap; }
.tab { font-size: 13px; padding: 8px 12px; }
}

.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}

.form-group.full { grid-column: 1 / -1; }

.form-label {
font-size: 14px;
font-weight: 600;
color: var(--texto-secundario);
}

.form-input {
padding: 12px 14px;
border: 1px solid var(--gris-borde);
border-radius: 10px;
font-size: 15px;
transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
outline: none;
border-color: var(--azul-electrico);
box-shadow: 0 0 0 3px rgba(2,123,255,0.1);
}

.form-input:disabled {
background: var(--gris-claro);
color: var(--texto-secundario);
}

.btn {
padding: 12px 24px;
border: none;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
}

.btn-primary {
background: var(--azul-marino);
color: white;
}

.btn-primary:hover { background: #1565C0; }

.btn-secondary {
background: var(--gris-claro);
color: var(--texto);
}

.btn-secondary:hover { background: #e5e7eb; }

.btn-success {
background: var(--verde);
color: white;
}

.btn-success:hover { background: #059669; }

.btn-danger {
background: #dc2626;
color: white;
}

.btn-danger:hover { background: #b91c1c; }

.btn-outline-danger {
background: transparent;
border: 2px solid #dc2626;
color: #dc2626;
}

.btn-outline-danger:hover {
background: #dc2626;
color: white;
}

/* Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}

.modal-overlay.active { display: flex; }

.modal {
background: var(--card-bg);
border-radius: 16px;
max-width: 450px;
width: 100%;
padding: 24px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}

.modal-header svg {
width: 32px;
height: 32px;
color: #dc2626;
}

.modal-header h3 {
font-size: 1.25rem;
color: #dc2626;
}

.modal-body {
margin-bottom: 20px;
}

.modal-body p {
color: var(--texto-secundario);
margin-bottom: 16px;
line-height: 1.5;
}

.modal-footer {
display: flex;
gap: 12px;
justify-content: flex-end;
}

.delete-warning {
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 10px;
padding: 12px;
margin-bottom: 16px;
}

body.dark .delete-warning {
background: rgba(220,38,38,0.1);
border-color: rgba(220,38,38,0.3);
}

.delete-warning p {
color: #dc2626 !important;
font-size: 13px;
margin: 0 !important;
}

.form-actions {
display: flex;
gap: 12px;
margin-top: 20px;
}

/* Trips List */
.trips-list {
display: flex;
flex-direction: column;
gap: 16px;
}

.trip-item {
border: 1px solid var(--gris-borde);
border-radius: 12px;
padding: 16px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: start;
}

.trip-date-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}

.trip-date {
min-width: 60px;
text-align: center;
background: var(--azul-marino);
color: #fff;
padding: 8px 10px;
border-radius: 8px;
}

.trip-date-day {
font-size: 20px;
font-weight: 700;
}

.trip-date-month {
font-size: 12px;
opacity: 0.85;
}

.trip-content {
min-width: 0;
}

.trip-route-text {
font-weight: 600;
margin-bottom: 4px;
word-break: break-word;
}

.trip-meta {
font-size: 13px;
color: #6b7280;
}

.trip-assignment {
font-size: 13px;
color: #60a5fa;
margin-top: 4px;
}

.trip-price {
font-size: 14px;
font-weight: 700;
color: #22c55e;
margin-top: 4px;
}

.trip-notes {
font-size: 12px;
color: #9ca3af;
margin-top: 4px;
word-break: break-word;
}

.trip-expiry {
font-size: 11px;
margin-top: 4px;
}

.trip-edit-btn {
padding: 4px 10px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
border: 1px solid #3b82f6;
background: transparent;
color: #3b82f6;
cursor: pointer;
margin-top: 6px;
transition: background 0.2s, color 0.2s;
}

.trip-edit-btn:hover {
background: #3b82f6;
color: #fff;
}

.trip-status-col {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}

.trip-status-badge {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}

@media (max-width: 600px) {
.trip-item {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
}
.trip-date-col {
grid-row: 1;
grid-column: 1;
flex-direction: row;
gap: 8px;
}
.trip-status-col {
grid-row: 1;
grid-column: 2;
justify-self: end;
align-self: center;
}
.trip-content {
grid-row: 2;
grid-column: 1 / -1;
}
.trip-route-text {
font-size: 14px;
}
.trip-legs {
flex-direction: column;
}
}

.trip-payment {
display: flex;
gap: 8px;
margin-top: 10px;
flex-wrap: wrap;
justify-content: center;
padding-top: 10px;
border-top: 1px solid var(--gris-borde);
}

.trip-legs {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 6px;
}

.trip-leg {
font-size: 12px;
color: #6b7280;
padding: 6px 10px;
background: #f8fafc;
border-radius: 6px;
border-left: 3px solid var(--azul-marino);
}

.trip-leg.return {
border-left-color: #f59e0b;
}

.trip-leg-title {
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
color: #1f2937;
}

.trip-pay-btn {
padding: 6px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
border: none;
transition: all 0.2s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}

.trip-pay-btn.reserve {
background: #f0fdf4;
color: #15803d;
border: 1px solid #86efac;
}

.trip-pay-btn.reserve:hover:not(.paid) {
background: #22c55e;
color: #fff;
}

.trip-pay-btn.balance {
background: #eff6ff;
color: #1d4ed8;
border: 1px solid #93c5fd;
}

.trip-pay-btn.balance:hover:not(.paid) {
background: #3b82f6;
color: #fff;
}

.trip-pay-btn.total {
background: #fefce8;
color: #a16207;
border: 1px solid #fde047;
}

.trip-pay-btn.total:hover:not(.paid) {
background: #eab308;
color: #fff;
}

.trip-pay-btn.paid {
background: #f0fdf4;
color: #16a34a;
cursor: default;
border: 1px solid #86efac;
opacity: 0.85;
}

.trip-pay-btn.refund {
background: #fef2f2;
color: #dc2626;
border: 1px solid #fca5a5;
font-size: 11px;
}

.trip-pay-btn.refund:hover {
background: #ef4444;
color: #fff;
}

.empty-state {
text-align: center;
padding: 40px;
color: var(--texto-secundario);
}

.empty-state svg {
width: 64px;
height: 64px;
margin-bottom: 16px;
opacity: 0.5;
}

/* Addresses */
.address-item {
border: 1px solid var(--gris-borde);
border-radius: 12px;
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}

.address-info {
display: flex;
align-items: center;
gap: 12px;
}

.address-icon {
width: 40px;
height: 40px;
background: var(--gris-claro);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}

.address-icon svg { width: 20px; height: 20px; color: var(--azul-marino); }

.address-label {
font-weight: 600;
margin-bottom: 2px;
}

.address-text {
font-size: 14px;
color: var(--texto-secundario);
}

.address-actions {
display: flex;
gap: 8px;
}

.icon-btn {
width: 36px;
height: 36px;
border: 1px solid var(--gris-borde);
background: white;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}

.icon-btn:hover { background: var(--gris-claro); }
.icon-btn.delete:hover { background: #fee2e2; border-color: #fecaca; }

.icon-btn svg { width: 18px; height: 18px; }

/* Modal */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}

.modal-overlay.show { display: flex; }

.modal {
background: white;
border-radius: 16px;
padding: 24px;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow: visible;
}

.modal-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
}

/* Message */
.message {
padding: 12px 16px;
border-radius: 10px;
margin-bottom: 16px;
display: none;
}

.message.show { display: block; }
.message.success { background: #d1fae5; color: #065f46; }
.message.error { background: #fee2e2; color: #991b1b; }

/* Loading */
.loading {
display: none;
text-align: center;
padding: 40px;
}

.loading.show { display: block; }

.spinner {
width: 40px;
height: 40px;
border: 3px solid var(--gris-claro);
border-top-color: var(--azul-marino);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 16px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===== TRIPS TOGGLE (Próximos / Realizados) ===== */
.trips-toggle {
    display: flex;
    background: rgba(13,71,161,0.08);
    border: 1px solid rgba(13,71,161,0.15);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
    position: relative;
}

body.dark .trips-toggle {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}

.trips-toggle-slider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: calc(50% - 4px);
    border-radius: 9px;
    background: var(--azul-marino);
    transition: left 0.35s cubic-bezier(0.4,0,0.2,1);
}

body.dark .trips-toggle-slider {
    background: rgba(59,130,246,0.35);
}

.trips-toggle-slider.upcoming { left: 4px; }
.trips-toggle-slider.completed { left: calc(50% + 1px); }

.trips-toggle-btn {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
    color: var(--texto-secundario);
    white-space: nowrap;
}

.trips-toggle-btn.active {
    color: #fff;
}

body.dark .trips-toggle-btn {
    color: rgba(255,255,255,0.45);
}

body.dark .trips-toggle-btn.active {
    color: #fff;
}

.trips-panel {
    animation: tripsFadeIn 0.25s ease;
}

@keyframes tripsFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}