:root {

            --primary-color: #007bff; --success-color: #28a745; --danger-color: #dc3545;

            --warning-color: #ffc107; --info-color: #17a2b8; --light-gray: #f8f9fa;

            --dark-gray: #343a40; --border-color: #dee2e6;

            --future-color: #a3d5ff; --past-color: #e0e0e0; --today-color: #d4edda;

            --past-reservation-color: #f8d7da; 

        }

        body {

            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

            background-color: #f4f6f9; margin: 0; padding: 20px;

        }

        .container {

            background-color: #ffffff; padding: 20px; border-radius: 8px;

            box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-bottom: 20px;

        }

        #app-header {

            display: flex; justify-content: space-between; align-items: center;

            padding: 10px 20px; background-color: var(--primary-color); color: white;

            border-radius: 8px; margin-bottom: 20px;

        }

        #app-title-group { display: flex; align-items: center; gap: 15px; }

        #app-logo { height: 40px; width: 40px; border-radius: 5px; background-color: #fff; object-fit: cover; }

        #app-title { font-size: 1.5rem; margin: 0; }

        #current-user-display { font-size: 0.8em; font-style: italic; }

        

        #main-layout {

            display: grid; grid-template-columns: 400px 1fr; gap: 20px; align-items: start;

        }

        @media (max-width: 900px) { #main-layout { grid-template-columns: 1fr; } }

        h2, h3 {

            color: var(--dark-gray); text-align: center; border-bottom: 2px solid #eee;

            padding-bottom: 10px; margin-top: 0; font-size: 1.25rem;

        }

        button, input[type="submit"] {

            display: inline-flex; align-items: center; justify-content: center; gap: 8px;

            width: auto; padding: 10px 15px; border: none; border-radius: 6px; cursor: pointer;

            font-size: 15px; font-weight: bold; margin-top: 10px; transition: background-color 0.2s;

            color: white;

        }

        .full-width { width: 100%; }

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

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

        .btn-secondary { background-color: #6c757d; }

        .btn-danger { background-color: var(--danger-color); }

        .btn-info { background-color: var(--info-color); }

        .btn-filter { background-color: var(--info-color); }

        .btn-filter.active { background-color: var(--primary-color); box-shadow: 0 0 5px var(--primary-color); }

        #btn-nuevo-cliente { background-color: var(--success-color); }



        input, select, textarea {

            width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; box-sizing: border-box;

        }

        input[type="color"] { padding: 2px; height: 40px; }

        textarea { resize: vertical; min-height: 80px; }

        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

        .form-group { margin-bottom: 5px; }

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

        .cliente-item, .reserva-item { 

            background-color: var(--light-gray); border: 1px solid var(--border-color); 

            padding: 15px; margin-bottom: 10px; border-radius: 8px; position: relative;

            display: flex; justify-content: space-between; align-items: center;

        }

        .reserva-main-info { flex-grow: 1; cursor: pointer; }

        .cliente-item.reciente { border: 2px solid var(--success-color); }

        .reserva-item:hover { background-color: #e9ecef; }

        .reserva-item.importada { border-left: 5px solid var(--warning-color); }

        .cliente-acciones, .reserva-acciones { display: flex; gap: 5px; }

        .icon-btn {

            background: none; border: none; cursor: pointer; font-size: 1.2rem; padding: 5px;

            color: #ccc; transition: color 0.2s, transform 0.2s; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;

        }

        .icon-btn:hover { color: #fff; transform: scale(1.2); }

        #app-header .icon-btn { color: white; }

        #app-header .icon-btn:hover { transform: scale(1.2); }

        .modal {

            position: fixed; z-index: 2500;

            left: 0; top: 0; width: 100%; height: 100%;

            overflow: auto; background-color: rgba(0,0,0,0.6);

        }

        .modal:not(.hidden) { display: flex; align-items: center; justify-content: center; }

        .modal-content {

            background-color: #fefefe; padding: 25px; border: 1px solid #888;

            width: 90%; max-width: 600px; border-radius: 8px; position: relative; max-height: 90vh; overflow-y: auto;

        }

        .modal-large { max-width: 800px; }

        .close-btn { color: #aaa; position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; }

        .hidden { display: none !important; }

        .calendar-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

        .calendar-nav h3 { font-size: 1.1em; border: none; margin: 0; }

        #calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background-color: var(--border-color); border: 1px solid var(--border-color); font-size: 0.8em; }

        .calendar-header, .calendar-day { background-color: white; padding: 5px; text-align: center; min-height: 35px; display: flex; align-items: center; justify-content: center; gap: 4px;}

        .calendar-header { font-weight: bold; background-color: var(--light-gray); }

        .calendar-day.today {

            background-color: var(--today-color) !important;

            border: 1px solid var(--success-color);

            font-weight: bold;

        }

        .calendar-day.past-reservation { background-color: var(--past-reservation-color); }

        .calendar-day.future { background-color: var(--future-color); }

        .calendar-day.active-day { background-color: var(--warning-color); font-weight: bold; cursor: help; }

        .calendar-day.has-reminder { cursor: pointer; font-weight: bold; }

        .calendar-day.has-reminder:hover { background-color: #e9ecef; }

        .recordatorio-completado span { text-decoration: line-through; color: #6c757d; }

     
        .tabs-nav {

            display: flex;

            border-bottom: 2px solid var(--border-color);

            margin-bottom: 20px;

            flex-wrap: wrap;

        }

        .tab-link {

            padding: 10px 20px;

            cursor: pointer;

            border: none;

            background-color: transparent;

            color: var(--primary-color);

            font-size: 1rem;

            font-weight: 500;

            border-bottom: 3px solid transparent;

            margin-bottom: -2px;

            margin-top: 0;

        }

        .tab-link:hover {

            background-color: var(--light-gray);

        }

        .tab-link.active {

            border-bottom-color: var(--primary-color);

            font-weight: bold;

            color: var(--dark-gray);

        }

        .tab-pane {

            
            animation: fadeIn 0.3s;

        }

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }



        .fullscreen-controls, .mapa-controls { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; }

        .mapa-filters-date { display: flex; gap: 10px; }

        .mapa-filters-rooms, #caja-filters, #eventos-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 0.9em; margin-top: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 8px;}

        
        #mapa-container, #clientes-container, #reservas-content-container, #caja-mayor-display, #eventos-log-container { 

            overflow: auto;

            flex-grow: 1;

            max-height: 70vh; 

        }

        #mapa-grid { display: grid; gap: 1px; }

        .mapa-header, .mapa-cell { position: relative; padding: 8px 5px; text-align: center; font-size: 0.85em; border: 1px solid var(--border-color); white-space: nowrap; }

        .mapa-header { font-weight: bold; background-color: var(--light-gray); position: sticky; top: 0; z-index: 5; }

        .mapa-cell.vacio { cursor: pointer; background-color: #fff; }

        .mapa-cell.vacio:hover { background-color: #f0f0f0; }

        .mapa-cell.ocupado-pasado { background-color: var(--past-reservation-color); color: #6c757d; font-weight: bold; cursor: pointer; }

        .mapa-cell.ocupado-futuro { background-color: var(--future-color); font-weight: bold; cursor: pointer; }

        .mapa-cell.ocupado-hoy { background-color: var(--today-color); font-weight: bold; cursor: pointer; }

        

        #context-menu, #template-selection-modal {
            position: absolute; z-index: 3000; background-color: white;
            border: 1px solid var(--border-color); box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            border-radius: 5px; padding: 5px 0;
        }

        #context-menu div, #template-list .template-item { padding: 8px 15px; cursor: pointer; }

        #context-menu div:hover, #template-list .template-item:hover { background-color: var(--light-gray); }

        .item-container, .config-list-item { border-bottom: 1px solid #eee; padding: 8px 0; display: flex; justify-content: space-between; align-items: center; }

        .item-container:last-child, .config-list-item:last-child { border-bottom: none; }

        

        .filtros-reservas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }

        .search-reserva-container { display: flex; gap: 10px; margin-bottom: 15px; }

        .config-section { margin-top: 20px; border-top: 1px solid var(--border-color); padding-top: 20px; }

        .config-section h3, .config-section h4 { text-align: left; border: none; font-size: 1.1rem; }

        .config-section h4 { font-size: 1rem; margin-top: 15px; margin-bottom: 5px;}

        #ical-import-section {

            margin-top: 20px; padding-top: 20px; border-top: 2px dashed #ccc;

        }

        #caja-mayor-display table, #eventos-log-container table, #mayor-content table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9em; }

        #caja-mayor-display th, #caja-mayor-display td, #eventos-log-container th, #eventos-log-container td, #mayor-content th, #mayor-content td { border: 1px solid #ddd; padding: 8px; text-align: left; }

        #caja-mayor-display th, #eventos-log-container th, #mayor-content th { background-color: var(--light-gray); }

        #caja-mayor-display .debe, #mayor-content .debe { color: var(--danger-color); text-align: right; }

        #caja-mayor-display .haber, #mayor-content .haber { color: var(--success-color); text-align: right; }

        #caja-mayor-display .saldo, #mayor-content .saldo { text-align: right; font-weight: bold; }

        

        

        #mayor-container {

            position: fixed; top: 0; left: 0; width: 100%; height: 100%;

            background: white; z-index: 2000; display: flex; flex-direction: column;

            padding: 20px; box-sizing: border-box;

        }

        #mayor-content { overflow: auto; flex-grow: 1; }

        #mayor-content tfoot { font-weight: bold; }


        @media print {
            html, body { height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: white; }
            body > *:not(#printable-area) { display: none !important; }
            #printable-area { display: block !important; position: static !important; width: 100% !important; margin: 0; padding: 0; }
            
            .printable-area { font-family: 'Times New Roman', Times, serif; color: black; font-size: 12pt; }
            .printable-area .presupuesto-print-content { font-size: 12pt; }
            .print-header { display: flex !important; visibility: visible; align-items: center; gap: 20px; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 20px; }
            .print-header img { width: 50px; height: 50px; visibility: visible; }
            .print-header h1 { margin: 0; font-size: 18pt; visibility: visible; }
            .printable-area h2, .printable-area h3 { text-align: left; border-bottom: 1px solid #000; color: black; font-size: 14pt; padding-bottom: 5px; margin-top: 25px; }
            .printable-area .print-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
            .printable-area .print-section { margin-bottom: 20px; page-break-inside: avoid; }
            .printable-area p { margin: 5px 0; line-height: 1.4; }
            .printable-area table { width: 100%; border-collapse: collapse; margin-top: 20px; page-break-inside: avoid; }
            .printable-area th, .printable-area td { border: 1px solid #000; padding: 8px; text-align: left; }
            .printable-area th { background-color: #eee; }
            .printable-area #firma-section { margin-top: 100px; padding-top: 20px; text-align: center; page-break-inside: avoid;}
            .printable-area #firma-linea { border-top: 1px solid black; width: 250px; margin: 0 auto; padding-top: 5px;}
            .no-print { display: none !important; }
        }
        
        .presupuesto-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }

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

        .room-form-container { border: 1px solid #ccc; border-radius: 8px; padding: 15px; margin-bottom: 15px; background-color: #fdfdfd; }

        .room-form-container h4 { margin-top: 0; border-bottom: 1px solid #eee; padding-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }

        .room-form-container h4 small { font-weight: normal; font-size: 0.8em; }

        .sticky-summary { position: sticky; top: 20px; }

        .presupuesto-totales { margin-top: 20px; border-top: 2px solid #333; padding-top: 10px; }

        .total-item { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 1.1em; }

        .grand-total { font-weight: bold; font-size: 1.3em; margin-top: 10px; color: var(--success-color); }

        .presupuesto-actions { display: flex; gap: 10px; margin-top: 20px; }

        .presupuesto-actions button { flex: 1; }


        .reserva-dato-habitacion,

        .reserva-dato-fechas {

            font-size: 12px !important;

            font-weight: bold;

        }

#calculadora-base-modal {

    
    z-index: 3001; 

}

.mapa-cell.bloqueado {
            background-color: #e0b0ff !important;
            color: #4a148c !important;
            font-weight: bold;
            cursor: pointer;
        }
        .calendar-day.dia-bloqueado {
            background-color: #e0b0ff !important;
            color: #4a148c !important;
            font-weight: bold;
            border: 1px solid #9c27b0;
        }
	.calendar-day.dia-bloqueado.today {
            border: 3px solid var(--warning-color) !important;
            box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
        }
.category-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    border: 1px solid rgba(0,0,0,0.2);
    vertical-align: middle;
}
.payment-indicator {
    position: absolute;
    top: 0px;            
    left: 3px;
    font-size: 15px;     
    font-weight: 900;    
    cursor: help;
    z-index: 2;          
    font-family: sans-serif;
        
    text-shadow: 
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff;
}
.edit-category-color {
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    cursor: pointer;
    background: none;
}
.edit-category-name {
    flex-grow: 1;
    margin: 0 !important;
    padding: 5px;
}

input.input-color-small {
    width: 50px; 
    padding: 2px; 
    height: 38px; 
    cursor: pointer;
}
#dolar-bar {
    background: #f8f9fa;
    padding: 5px 20px;
    border-bottom: 1px solid #ddd;
    font-size: 0.85em;
    color: #444;
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}
#dolar-oficial-info b { color: var(--primary-color); }
#dolar-blue-info b { color: #2e7d32; }

.sticky-header-container {
    position: sticky;
    top: 0;
    z-index: 100; 
    background-color: #f4f6f9; 
}
#app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 0 !important; 
    border-radius: 0 0 8px 8px; 
}

#dolar-bar.sticky {
    position: sticky;
    top: 60px; 
    z-index: 99;
}
.loader {
    border: 5px solid #f3f3f3; 
    border-top: 5px solid var(--primary-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px auto;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#loading-text {
    font-family: sans-serif;
    color: var(--dark-gray);
    font-size: 1.2rem;
}
    	#accesos-botones-container { transition: all 0.3s ease; display: flex; flex-direction: column; gap: 15px; margin-bottom: 15px; }
        #accesos-botones-container.minimized { flex-direction: row; justify-content: space-between; gap: 5px; margin-bottom: 15px; }
        #accesos-botones-container.minimized .btn-acceso { width: 32%; padding: 10px 0; font-size: 1.5rem; margin-top: 0; }
        #accesos-botones-container.minimized .btn-text { display: none; }
	.dropdown-item-ayuda { padding: 10px 15px; cursor: pointer; color: var(--dark-gray); font-size: 0.95em; }
        .dropdown-item-ayuda:hover { background-color: var(--light-gray); }