/* --- PALETA: "Atlas de viaje" — azul noche, petróleo y coral --- */
:root {
    --bg-1: #f8eeee;
    --bg-2: #dde8f3;
    --ink: #1c2b3a;
    --navy: #16243b;
    --navy-deep: #0f1b2e;
    --petrol: #1f6f78;
    --petrol-deep: #113f45;
    --coral: #ef6f5b;
    --coral-deep: #d85a47;
    --gold: #f0a93d;
    --gold-deep: #d6900f;
    --emerald: #2e9e6d;
    --emerald-deep: #237a54;
    --card: #ffffff;
    --row-alt: #f4f8fb;
    --border: #152636;
    --selected: #e4f0fb;
    --petrol-trans: rgba(31, 111, 120, 0.75);
    --petrol-deep-trans: rgba(15, 52, 58, 0.75);
}

.footer-copyright {
    font-family: Arial, sans-serif;
    text-align: center;
    font-size: 15px;
    margin-top: 30px;
    margin-bottom: 10px;
    padding: 10px;
    color: white;
}

.footer-copyright .author-name a {
    color: #ff7a66;
    text-decoration: none;
    font-weight: bold;
}

.footer-copyright .author-name a:hover {
    text-decoration: underline;
}

html {
    background-color: var(--navy-deep); 
}

body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    padding: 15px;
    margin: 0 auto;
    max-width: 1000px;
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('/static/fondos.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* --- CORRECCIÓN DE PANELES --- */
#eco-panel, #notas-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#content {
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 25px rgba(22, 36, 59, 0.12);
    margin: 0 auto 20px auto;
}

h1 {
    text-align: center;
    color: rgb(82, 183, 82);
    margin-top: 10px;
    font-size: 3.5em;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 0 rgba(2, 128, 2, 0.4);
}

h1 span {
    color: var(--coral);
    text-shadow: 1px 1px 0 rgba(128, 44, 31, 0.4);
}

/* --- NAVEGACIÓN PRINCIPAL SIN FONDO BLANCO --- */
.main-nav {
    display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;
    margin-bottom: 30px;
}
.main-nav button {
    background: var(--navy); color: white;
    padding: 16px 20px; font-size: 1.15em; border-radius: 12px; border: none;
    cursor: pointer; font-weight: bold; transition: all 0.2s ease;
    flex: 1; min-width: 200px; text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.main-nav button:hover { filter: brightness(1.2); }

.main-nav button.active-iti {
    background: linear-gradient(135deg, var(--petrol) 0%, var(--petrol-deep) 100%);
    transform: scale(1.02);
    box-shadow: 0 6px 15px rgba(31, 111, 120, 0.4);
}
.main-nav button.active-eco {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
    color: var(--navy-deep);
    transform: scale(1.02);
    box-shadow: 0 6px 15px rgba(240, 169, 61, 0.4);
}
.main-nav button.active-notas {
    background: linear-gradient(135deg, var(--emerald) 0%, var(--emerald-deep) 100%);
    transform: scale(1.02);
    box-shadow: 0 6px 15px rgba(46, 158, 109, 0.4);
}

/* --- PANTALLA DE LOGIN --- */
#login-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 100000; display: flex; background-color: #333333;
}

.login-left {
    flex: 1; display: flex; justify-content: center; align-items: center; 
    padding: 20px; background-color: #161616;
}

.login-right {
    flex: 1; 
    background-image: url('/static/fondo_login.jpg');
    background-size: cover; background-position: center;
}

.login-card {
    background: white; padding: 50px 40px; border-radius: 20px;
    width: 100%; max-width: 560px; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.login-card h2 {
    color: #1a1a1a; font-weight: 500; margin: 0 0 10px 0; font-size: 1.6em;
}

.login-divider {
    height: 3px; background-color: #e0e0e0; margin: 0 auto 30px auto; width: 100%;
}

.login-input {
    width: 100%; padding: 12px 20px; margin-bottom: 20px;
    border-radius: 30px; border: 1px solid #777; background-color: #ececec;
    font-size: 1em; text-align: center; box-sizing: border-box; color: #333;
    font-family: inherit;
}

.login-input::placeholder { color: #333; }
.login-input:focus { outline: none; border-color: #00cbb4; background-color: #fff; }

.login-btn {
    background-color: #00cbb4; color: white; border: none; padding: 12px 40px;
    border-radius: 30px; font-size: 1.15em; font-weight: normal; cursor: pointer;
    transition: transform 0.2s, filter 0.2s; margin-top: 15px; letter-spacing: 0.5px;
}

.login-btn:hover { filter: brightness(1.05); transform: scale(1.05); }

/* En móviles, ocultamos la foto para que el login ocupe toda la pantalla */
@media (max-width: 768px) { 
    .login-right { display: none; } 
}

/* --- BANNERS DE SECCIÓN (Flotantes) --- */
.section-banner {
    text-align: center;
    padding: 16px 24px;
    border-radius: 14px;
    font-size: 1.25em;
    font-weight: bold;
    margin-bottom: 25px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    letter-spacing: 0.5px;
}
.banner-iti { background: linear-gradient(135deg, var(--petrol) 0%, var(--petrol-deep) 100%); color: white; }
.banner-eco { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: var(--navy-deep); }
.banner-notas { background: linear-gradient(135deg, var(--emerald) 0%, var(--emerald-deep) 100%); color: white; }

.controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.controls p {
    width: 100%;
    text-align: center;
    margin: 5px 0 0 0;
    font-size: 0.9em;
    color: white;
}

button {
    padding: 10px 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: medium;
    flex-grow: 1;
    max-width: 180px;
    color: white;
    box-shadow: 0 3px 0 rgba(0,0,0,0.18);
    transition: transform 0.1s, box-shadow 0.1s, filter 0.15s;
}

button:hover { filter: brightness(1.06); }

button:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 rgba(0,0,0,0.18);
}

.add    { background: var(--emerald); }
.delete { background: var(--coral); }
.save   { background: var(--gold); color: var(--navy-deep); }
.pdf    { background: var(--petrol); }

table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
    border-style: hidden;
}

th, td {
    border: 1px solid var(--border);
    padding: 12px;
}

th {
    background: var(--navy);
    color: white;
    text-align: left;
    font-weight: bold;
    font-size: 1.05em;
    border: 1px solid var(--navy-deep);
}

tbody tr:not(.day-header):nth-child(even) {
    background: hsla(206, 100%, 93%, 0.4); 
}

tbody tr:not(.day-header):hover {
    background: #ffd7d1;
}

.day-header {
    background: linear-gradient(90deg, var(--petrol) 0%, var(--petrol-deep) 100%);
    color: white;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
    cursor: pointer;
    letter-spacing: 0.5px;
}

.day-header td {
    border: 1px solid var(--petrol-deep);
}

.hidden { display: none !important; }

.selected {
    outline: 2px solid var(--petrol-deep);
    background-color: var(--selected) !important;
}

.drag-handle {
    cursor: grab;
    text-align: center;
    color: #9ab0c2;
    font-size: 1.2em;
    width: 30px;
    user-select: none;
    background-color: hsla(208, 100%, 84%, 0.4);
}

.handle-header { width: 30px; }

.sortable-ghost {
    opacity: 0.5;
    background-color: var(--selected) !important;
}

/* Flecha de los días */
.day-arrow {
    font-size: 1.1em;
    display: inline-block;
    cursor: pointer;
    padding: 2px 15px;
    user-select: none;
    color: var(--gold);
    font-weight: bold;
    transition: filter 0.15s, transform 0.1s;
}
.day-arrow:hover { filter: brightness(1.2); transform: scale(1.1); }

/* ============================================
   SECCIÓN ECONÓMICA
   ============================================ */

.eco-section {
    margin-bottom: 28px;
}

.eco-section:last-child {
    margin-bottom: 0;
}

.eco-section h3 {
    color: var(--navy);
    font-size: 1.1em;
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gold);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Viajeros --- */
.viajeros-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.viajero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-2);
    border: 1.5px solid #b0c8de;
    border-radius: 24px;
    padding: 5px 8px 5px 12px;
}

.viajero-input {
    border: none;
    background: transparent;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--navy);
    width: 90px;
    outline: none;
    font-family: inherit;
}

.btn-chip-remove {
    background: var(--coral);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 0.75em;
    color: white;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 0 !important;
    max-width: none !important;
    box-shadow: none;
    transition: filter 0.1s;
}

.btn-chip-remove:hover { filter: brightness(1.1); }
.btn-chip-remove:active { transform: none; }

.btn-eco {
    flex-grow: 0 !important;
    max-width: none !important;
    font-size: 0.9em;
    padding: 8px 14px;
    border-radius: 9px;
}

.btn-eco.add    { background: var(--emerald); color: white; }
.btn-eco.save   { background: var(--gold); color: var(--navy-deep); }
.btn-eco.pdf    { background: var(--petrol); color: white; }
.btn-eco.del    { background: var(--coral); color: white; }

.eco-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* --- Tabla de gastos --- */
.eco-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #c8d8e8;
}

.eco-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
}

.eco-table th {
    background: var(--navy);
    color: white;
    padding: 10px 14px;
    text-align: left;
    font-size: 0.93em;
    font-weight: 700;
    border: 1px solid var(--navy-deep);
}

.eco-table td {
    border: 1px solid #d0dde8;
    padding: 7px 10px;
    vertical-align: middle;
}

.eco-table tbody tr:nth-child(even) td { background: var(--row-alt); }
.eco-table tbody tr:hover td { background: #fff3f1; }

.eco-input {
    border: 1px solid #c0d0de;
    border-radius: 7px;
    padding: 6px 9px;
    font-size: 0.9em;
    font-family: inherit;
    color: var(--navy);
    background: white;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.eco-input:focus {
    outline: none;
    border-color: var(--petrol);
    box-shadow: 0 0 0 2px rgba(31,111,120,0.15);
}

.eco-input.importe {
    width: 90px;
    text-align: right;
}

.eco-select {
    border: 1px solid #c0d0de;
    border-radius: 7px;
    padding: 6px 9px;
    font-size: 0.9em;
    font-family: inherit;
    background: white;
    color: var(--navy);
    cursor: pointer;
    width: 100%;
    transition: border-color 0.15s;
}

.eco-select:focus {
    outline: none;
    border-color: var(--petrol);
}

.td-importe {
    white-space: nowrap;
}

.td-importe .euro {
    color: #888;
    font-size: 0.9em;
    margin-left: 4px;
}

.td-delete { width: 42px; text-align: center; }

.btn-row-del {
    background: var(--coral) !important;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.85em;
    padding: 5px 9px;
    color: white;
    flex-grow: 0 !important;
    max-width: none !important;
    box-shadow: none;
    transition: filter 0.1s;
}

.btn-row-del:hover { filter: brightness(1.1); }
.btn-row-del:active { transform: none; box-shadow: none; }

/* --- Liquidación / Resumen --- */
.summary-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.stat-card {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: white;
    border-radius: 12px;
    padding: 16px 20px;
    flex: 1;
    min-width: 140px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.stat-label {
    font-size: 0.8em;
    opacity: 0.75;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.stat-value {
    font-size: 1.55em;
    font-weight: 800;
    margin-top: 6px;
    letter-spacing: -0.5px;
}

.eco-section h4 {
    color: var(--navy);
    font-size: 0.97em;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.75;
}

.balances-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.balance-card {
    border-radius: 12px;
    padding: 16px;
    border: 2px solid transparent;
    text-align: center;
}

.balance-card.creditor {
    background: linear-gradient(135deg, #edfaf3 0%, #d4f5e4 100%);
    border-color: var(--emerald);
}

.balance-card.debtor {
    background: linear-gradient(135deg, #fff2ef 0%, #ffe0d9 100%);
    border-color: var(--coral);
}

.balance-card.neutral {
    background: linear-gradient(135deg, #eef6fb 0%, #dceef8 100%);
    border-color: var(--petrol);
}

.balance-name {
    font-weight: 700;
    font-size: 1.05em;
    color: var(--navy);
    margin-bottom: 6px;
}

.balance-paid {
    font-size: 0.82em;
    color: #667;
    margin-bottom: 3px;
}

.balance-share {
    font-size: 0.82em;
    color: #667;
    margin-bottom: 8px;
}

.balance-amount {
    font-weight: 700;
    font-size: 0.97em;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
}

.creditor .balance-amount {
    color: var(--emerald-deep);
    background: rgba(46,158,109,0.12);
}

.debtor .balance-amount {
    color: var(--coral-deep);
    background: rgba(239,111,91,0.12);
}

.neutral .balance-amount {
    color: var(--petrol-deep);
    background: rgba(31,111,120,0.1);
}

.transfers-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.transfer-card {
    background: white;
    border: 1.5px solid #e0e8f0;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.transfer-from {
    color: var(--coral-deep);
    font-weight: 700;
    font-size: 1em;
}

.transfer-arrow {
    color: #aab;
    font-size: 0.9em;
    flex: 1;
    text-align: center;
}

.transfer-to {
    color: var(--emerald-deep);
    font-weight: 700;
    font-size: 1em;
}

.transfer-amount {
    margin-left: auto;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
    color: var(--navy-deep);
    border-radius: 20px;
    padding: 5px 14px;
    font-weight: 800;
    font-size: 1.05em;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.eco-empty-state {
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    font-size: 0.95em;
}

.eco-empty-state.settled {
    background: linear-gradient(135deg, #edfaf3 0%, #d4f5e4 100%);
    border: 2px solid var(--emerald);
    color: var(--emerald-deep);
    font-weight: 600;
}

.eco-empty-state.info {
    background: linear-gradient(135deg, #eef6fb 0%, #dceef8 100%);
    border: 2px solid var(--petrol);
    color: var(--petrol-deep);
}

.eco-divider {
    border: none;
    border-top: 1px solid #e0eaf2;
    margin: 20px 0;
}

/* --- ESTILOS DE TARJETAS DE NOTAS --- */
.nota-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; }
.nota-card {
    background: var(--bg-1); border-left: 4px solid var(--gold);
    padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex; flex-direction: column; justify-content: space-between;
}
.nota-card.tipo-archivo { border-left-color: var(--petrol); }
.nota-card h4 { margin: 0 0 10px 0; color: var(--navy-deep); font-size: 1.1em; }
.nota-card p { font-size: 0.9em; color: #444; white-space: pre-wrap; margin: 0 0 15px 0; flex-grow: 1; }
.nota-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ddd; padding-top: 10px;}
.nota-date { font-size: 0.75em; color: #888; }


/* --- MODAL PREVISUALIZACIÓN --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 27, 46, 0.85); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(4px);
}
.modal-overlay.hidden { display: none !important; }

.modal-content {
    background: var(--card); width: 90%; max-width: 900px; height: 85vh;
    border-radius: 14px; display: flex; flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6); overflow: hidden;
    animation: modalFadeIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalFadeIn { 
    from { opacity: 0; transform: translateY(30px) scale(0.95); } 
    to { opacity: 1; transform: translateY(0) scale(1); } 
}

.modal-header {
    padding: 16px 24px; background: var(--navy); color: white;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px solid var(--gold);
}
.modal-header h3 { margin: 0; font-size: 1.3em; display: flex; align-items: center; gap: 10px; }

.modal-close {
    background: transparent; border: none; color: white; font-size: 1.8em; cursor: pointer;
    padding: 0; transition: color 0.2s, transform 0.2s; box-shadow: none !important; 
    width: auto !important; flex-grow: 0 !important; max-width: none !important; line-height: 1;
}
.modal-close:hover { color: var(--coral); transform: scale(1.1); filter: none; }

.modal-body {
    flex: 1; padding: 24px; overflow-y: auto; background: var(--bg-1);
    display: flex; flex-direction: column;
}

.modal-body iframe {
    width: 100%; flex-grow: 1; border: none; border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); background: white;
}

.modal-text-content {
    white-space: pre-wrap; font-size: 1.1em; color: var(--ink); line-height: 1.6;
    background: white; padding: 20px; border-radius: 8px; border-left: 4px solid var(--gold);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}