/* ============================================================ custom.css — Estilos propios del Panel de Propietarios Bootstrap 4 clásico como base; colores neutros (gris, blanco, azul suave). Sin frameworks adicionales. ============================================================ */ /* ---- Variables de color ---- */ /* Los valores reales se inyectan dinámicamente desde base.html via atributos data-* en el y este bloque JS en base.html. Aquí solo están los valores por defecto como fallback. */ :root { --sidebar-width: 220px; --sidebar-bg: #2c3e50; --sidebar-text: #ecf0f1; --sidebar-active-bg: #1a252f; --sidebar-hover-bg: #34495e; --brand-ok-color: #2980b9; --accent-blue: #3498db; --border-color: #dee2e6; --body-bg: #f8f9fa; --text-color: #343a40; --card-bg: #ffffff; } /* ============================================================ LAYOUT GENERAL ============================================================ */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.9rem; background-color: #f8f9fa; color: #343a40; } /* Wrapper principal: sidebar + contenido en fila */ #wrapper { min-height: 100vh; } /* ============================================================ SIDEBAR ============================================================ */ #sidebar-wrapper { width: var(--sidebar-width); min-height: 100vh; background-color: var(--sidebar-bg); flex-shrink: 0; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100%; overflow-y: auto; z-index: 100; } /* Cabecera del sidebar con nombre de la app */ .sidebar-heading { padding: 1.2rem 1rem 0.8rem; font-size: 1.1rem; font-weight: 700; color: var(--sidebar-text); border-bottom: 1px solid rgba(255,255,255,0.1); letter-spacing: 0.02em; } /* "OK" en azul para el logo */ .brand-ok { color: var(--brand-ok-color); } .sidebar-subheading { font-size: 0.7rem; font-weight: 400; color: rgba(255,255,255,0.5); margin-top: 0.15rem; text-transform: uppercase; letter-spacing: 0.08em; } /* Nombre del usuario en la sidebar */ .sidebar-user { padding: 0.7rem 1rem; color: rgba(255,255,255,0.7); font-size: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.08); } /* Elementos del menú lateral */ #sidebar-wrapper .list-group-item { background-color: transparent; border: none; border-radius: 0; color: rgba(255,255,255,0.8); padding: 0.75rem 1rem; font-size: 0.875rem; transition: background-color 0.15s; } #sidebar-wrapper .list-group-item:hover { background-color: var(--sidebar-hover-bg); color: #fff; text-decoration: none; } /* Ítem activo del menú */ #sidebar-wrapper .list-group-item.active { background-color: var(--sidebar-active-bg); color: #fff; font-weight: 600; border-left: 3px solid var(--brand-ok-color); } /* Separador visual antes del logout */ .sidebar-separator { height: 1px; background-color: rgba(255,255,255,0.1); margin: 0.5rem 0; } /* Ítem de logout con color suave de alerta */ .sidebar-logout { color: rgba(255,150,150,0.85) !important; } .sidebar-logout:hover { color: #fff !important; background-color: #c0392b !important; } /* ============================================================ CONTENIDO PRINCIPAL ============================================================ */ #page-content-wrapper { margin-left: var(--sidebar-width); flex: 1; min-width: 0; } /* Barra superior de la página */ .top-navbar { padding: 0.5rem 1.5rem; background: #fff; border-bottom: 1px solid var(--border-color) !important; min-height: 50px; } .page-title { font-size: 1rem; font-weight: 600; color: #495057; } /* Zona de contenido con padding generoso */ .content-area { padding: 1rem 1.5rem 2rem; } /* ============================================================ TARJETAS DE ESTADÍSTICAS (dashboard) ============================================================ */ .stat-card { border-radius: 6px; border: 1px solid var(--border-color); } /* Borde de color a la izquierda para indicar categoría */ .border-left-primary { border-left: 4px solid #007bff !important; } .border-left-success { border-left: 4px solid #28a745 !important; } .border-left-info { border-left: 4px solid #17a2b8 !important; } .border-left-warning { border-left: 4px solid #ffc107 !important; } .border-left-secondary{ border-left: 4px solid #6c757d !important; } .border-left-danger { border-left: 4px solid #dc3545 !important; } .stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.3rem; } .stat-value { font-size: 1.8rem; font-weight: 700; color: #343a40; line-height: 1.1; /* Nunca partir un importe a media cifra ("36.066,8 / 4€"): una sola línea + cifras tabulares. */ white-space: nowrap; font-variant-numeric: tabular-nums; } /* ---- Comparativa anual: 3 tarjetas en fila SIEMPRE (también en móvil) ---- El importe se escala con el ancho disponible (clamp con vw) para que quepa sin partirse ni desbordar; en escritorio queda más discreto que el 1.8rem del dashboard, tal y como se pidió. Solo afecta a estas tarjetas. */ .comparativa-cards .stat-value { font-size: clamp(0.85rem, 4vw, 1.4rem); } .comparativa-cards .card-body { padding: 0.7rem 0.5rem; } @media (max-width: 575.98px) { /* En móvil, recuperar ancho reduciendo los gutters (15px→5px): más sitio para el número manteniendo una separación mínima entre tarjetas. */ .comparativa-cards { margin-left: -5px; margin-right: -5px; } .comparativa-cards > [class*="col-"] { padding-left: 5px; padding-right: 5px; } .comparativa-cards .stat-label { font-size: 0.6rem; letter-spacing: 0.04em; } } .stat-link { display: block; margin-top: 0.4rem; color: var(--accent-blue); } /* ============================================================ TARJETAS DE PROPIEDAD ============================================================ */ .property-card { border-radius: 6px; border: 1px solid var(--border-color); box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .property-card .card-header { background-color: #f8f9fa; font-size: 0.9rem; } /* ============================================================ BOTONES DE TAMAÑO EXTRA PEQUEÑO ============================================================ */ .btn-xs { padding: 0.15rem 0.45rem; font-size: 0.75rem; line-height: 1.3; border-radius: 3px; } /* Feedback del botón abrir (spinner + texto resultado) */ .open-feedback { font-size: 0.8rem; vertical-align: middle; } /* ============================================================ CALENDARIO MENSUAL ============================================================ */ .calendar-wrap { overflow-x: auto; } /* Tabla del calendario */ .calendar-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .calendar-table th { text-align: center; padding: 6px 4px; font-size: 0.75rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--border-color); } .calendar-table td { vertical-align: top; border: 1px solid #e9ecef; /* Sin padding horizontal: las barras de reserva llegan al borde de la celda y enlazan con el día contiguo (franja continua). El número del día lleva su propio inset. */ padding: 2px 0; min-height: 70px; height: 70px; } /* Número del día dentro de cada celda */ .cal-day-num { font-size: 0.75rem; font-weight: 600; color: #495057; display: block; text-align: right; margin-bottom: 2px; padding: 0 4px; } /* Día de hoy resaltado */ .cal-today { background-color: #e8f4ff; } .cal-today .cal-day-num { color: var(--accent-blue); } /* Días fuera del mes actual (relleno) */ .cal-outside { background-color: #fafafa; opacity: 0.5; } /* Bloque de reserva dentro del calendario */ .cal-booking { display: block; font-size: 0.68rem; border-radius: 3px; padding: 1px 4px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; cursor: pointer; text-decoration: none; } .cal-booking:hover { opacity: 0.85; color: #fff; text-decoration: none; } /* ---- Barras de reserva CONTINUAS (una franja por reserva) ---- */ /* Contenedor de carriles: apila las barras de una celda en columna. Cada reserva ocupa siempre el mismo carril todos sus días, así su franja queda alineada de un día para otro. */ .cal-lanes { display: flex; flex-direction: column; gap: 2px; } /* Cada carril (barra completa, celda partida o hueco) mide lo mismo de alto */ .cal-lanes > * { height: 16px; } /* Barra de un día. Bordes rectos por defecto para que enlace con el día contiguo; solo se redondea el extremo REAL de la reserva. Estilo común a la barra completa (noche intermedia) y a las medias barras (entrada/salida). CORTE DE MEDIO DÍA (como los PMS): · check-in → media barra DERECHA (entra por la tarde) · check-out → media barra IZQUIERDA (sale por la mañana) así una salida y una entrada del mismo día caben en la misma celda partida. */ .cal-bar-full, .cal-half { display: block; height: 16px; line-height: 16px; font-size: 0.68rem; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; text-decoration: none; border-radius: 0; } .cal-bar-full { width: 100%; } .cal-bar-full:hover, .cal-half:hover { opacity: 0.85; color: #fff; text-decoration: none; } /* Celda partida en dos mitades: izquierda = salida, derecha = entrada. El gap deja 2px de aire en el centro entre la que sale y la que entra. */ .cal-lane-split { display: flex; gap: 2px; } .cal-half { /* flex 1 (en vez de 50% fijo) para que el gap central no desborde la celda; cada mitad ocupa (ancho - gap) / 2 y sigue llegando a su borde exterior. */ flex: 1 1 0; min-width: 0; } /* Redondeo del extremo real de la reserva: - entrada (media derecha): redondea por la izquierda (empieza en el centro) - salida (media izquierda): redondea por la derecha (termina en el centro) */ .cal-round-left { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .cal-round-right { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } /* Huecos transparentes que mantienen la alineación vertical de los carriles */ .cal-lane-empty, .cal-half-empty { background: transparent !important; pointer-events: none; } /* ============================================================ LISTADOS DE RESERVAS — filas clicables + responsive Toda la fila (.booking-row con data-href) es clicable → detalle de la reserva (el handler está en base.html, global). En móvil vertical (xs, < 576px) la tabla .bookings-list-table se condensa a 3 columnas: col 1 → Propiedad + Huésped (+ registrada, en "últimas") col 2 → Check-in + Check-out + Nº noches col 3 → Importe Las columnas fusionadas llevan .booking-col-merge para ocultarse en móvil; sus datos se muestran dentro de las columnas visibles mediante bloques .booking-mobile-extra (ocultos en escritorio). ============================================================ */ .booking-row { cursor: pointer; } .booking-mobile-extra { display: none; } @media (max-width: 575.98px) { /* Ocultar las columnas que se fusionan dentro de las visibles */ .bookings-list-table .booking-col-merge { display: none !important; } /* Mostrar los datos fusionados dentro de las celdas visibles */ .bookings-list-table .booking-mobile-extra { display: block; margin-top: 0.2rem; font-size: 0.8rem; line-height: 1.3; } /* Separar los datos en línea (check-out, noches…) cuando van juntos */ .bookings-list-table .booking-mobile-extra .text-nowrap + .text-nowrap { margin-left: 0.5rem; } /* La cabecera pierde sentido con columnas fusionadas → ocultarla */ .bookings-list-table thead { display: none; } /* Celdas alineadas arriba para el apilado vertical */ .bookings-list-table td { vertical-align: top; } } /* ============================================================ PÁGINA DE LOGIN ============================================================ */ .login-page { background-color: #f0f2f5; display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-wrapper { width: 100%; max-width: 380px; padding: 1rem; } .login-card { border: none; border-radius: 8px; } .login-brand { font-size: 1.8rem; font-weight: 700; color: #2c3e50; } /* Logo de la empresa en el login white-label (dominio propio del cliente, codigos.owners_host). Sobre fondo claro: SIN el filtro blanco del sidebar. */ .login-brand-logo { max-width: 220px; max-height: 70px; object-fit: contain; display: block; margin: 0 auto 6px; } /* ============================================================ RESPONSIVE: ocultar sidebar en móvil ============================================================ */ @media (max-width: 768px) { #sidebar-wrapper { display: none; position: fixed; top: 0; left: 0; height: 100%; z-index: 999; width: 220px; } #sidebar-wrapper.sidebar-open { display: flex; } #page-content-wrapper { margin-left: 0; } } /* ============================================================ TEMAS — variables aplicadas dinámicamente desde base.html ============================================================ */ body { background-color: var(--body-bg); color: var(--text-color); } /* Sidebar usa las variables de tema */ #sidebar-wrapper { background-color: var(--sidebar-bg); } #sidebar-wrapper .list-group-item { color: rgba(255,255,255,0.82); } #sidebar-wrapper .list-group-item:hover { background-color: var(--sidebar-hover-bg); } #sidebar-wrapper .list-group-item.active { background-color: var(--sidebar-active-bg); border-left-color: var(--brand-ok-color); } .brand-ok { color: var(--brand-ok-color); } .stat-link { color: var(--accent-blue); } /* Tarjetas usan el fondo de tema */ .card, .modal-content { background-color: var(--card-bg); } /* Bordes de tarjetas y tablas */ .card, .table, .border-color { border-color: var(--border-color) !important; } /* Selector de tema en el sidebar */ .theme-selector { padding: 0.6rem 1rem; border-top: 1px solid rgba(255,255,255,0.1); } .theme-selector select { width: 100%; background-color: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); border-radius: 4px; padding: 4px 6px; font-size: 0.78rem; cursor: pointer; } .theme-selector select:focus { outline: none; border-color: var(--brand-ok-color); } .theme-selector select option { background-color: #2c3e50; color: #fff; } .theme-selector-label { font-size: 0.68rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; display: block; } /* Logo de empresa en la cabecera del sidebar */ .sidebar-logo { max-width: 140px; max-height: 45px; object-fit: contain; display: block; margin-bottom: 4px; filter: brightness(0) invert(1); /* blanco para que se vea sobre el fondo oscuro */ } /* ============================================================ MANDOS DE GARAJE — card del dashboard (garage-mando.js) Portado del panel admin. Ver DOCUMENTACION.md §10. ============================================================ */ .garage-mando-tile { border: 1px solid rgba(40, 167, 69, 0.25); border-radius: 6px; padding: 0.75rem; background: rgba(40, 167, 69, 0.03); display: flex; flex-direction: column; } .garage-mando-tile .btn-open-mando { width: 100%; } .garage-mando-history li + li { margin-top: 2px; } /* ============================================================ PLANNING — timeline de ocupación (/reservas/planning) Filas = propiedades, columnas = días, barras = reservas. Portado del panel admin. ============================================================ */ .plan-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e3e6ea; border-radius: 6px; background: #fff; } .plan-grid { display: flex; flex-direction: column; } .plan-grid-row { display: flex; align-items: stretch; border-top: 1px solid #eef0f2; min-height: 30px; } .plan-grid-row:first-child { border-top: none; } /* Columna izquierda fija (nombre de propiedad) — sticky al hacer scroll horizontal. */ .plan-row-label { flex: 0 0 var(--plan-label-w, 140px); width: var(--plan-label-w, 140px); position: sticky; left: 0; z-index: 3; background: #fff; border-right: 2px solid #dfe3e7; padding: 3px 8px; font-size: 0.78rem; line-height: 1.15; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } /* Etiqueta del rango de fechas en la esquina (cabecera de la columna Propiedad): compacta, puede partir a 2 líneas. */ .plan-corner-range { font-weight: 700; font-size: 0.72rem; color: #34404b; white-space: normal; line-height: 1.05; } .plan-place-link { font-weight: 600; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plan-loc { font-size: 0.68rem; color: #8a939b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Pista de días (área donde se posicionan celdas y barras). */ .plan-track { position: relative; flex: 1 1 auto; min-height: 30px; } .plan-head .plan-track { min-height: 42px; } /* Celdas de fondo (una por día) — solo gridlines + resaltados. */ .plan-cell { position: absolute; top: 0; bottom: 0; border-right: 1px solid #eef0f2; pointer-events: none; } .plan-cell.plan-weekend { background: #f6f8fa; } .plan-cell.plan-today { background: rgba(26, 110, 224, 0.07); } /* Cabecera de días. */ .plan-head { background: #f8f9fb; position: sticky; top: 0; z-index: 4; } .plan-corner { background: #f8f9fb; z-index: 5; font-weight: 600; color: #55606b; font-size: 0.75rem; } .plan-daycol { position: absolute; top: 0; bottom: 0; border-right: 1px solid #e6e9ec; text-align: center; padding-top: 3px; font-size: 0.68rem; color: #6b7680; } .plan-daycol.plan-weekend { background: #eef1f4; } .plan-daycol.plan-today { background: rgba(26, 110, 224, 0.12); } .plan-dc-mon { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; color: #1a6ee0; line-height: 1; } .plan-dc-wd { line-height: 1; } .plan-dc-day { font-weight: 700; font-size: 0.8rem; color: #34404b; line-height: 1.1; } .plan-daycol.plan-today .plan-dc-day { color: #1a6ee0; } /* Barras de reserva. */ .plan-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; padding: 0 5px; display: flex; align-items: center; overflow: hidden; color: #fff; font-size: 0.72rem; font-weight: 600; line-height: 1; box-shadow: 0 1px 1px rgba(0,0,0,0.15); z-index: 2; text-decoration: none; transition: filter 0.12s ease; /* Inset horizontal (calc en el style inline) separa barras adyacentes; este min-width evita que una barra muy corta desaparezca. */ min-width: 8px; } .plan-bar:hover { filter: brightness(1.08); color: #fff; text-decoration: none; z-index: 6; } .plan-bar-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Barra que continúa fuera de la ventana: canto recto + flechita. */ .plan-cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; } .plan-cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; } .plan-cont-l::before { content: "‹"; position: absolute; left: 1px; opacity: 0.85; font-weight: 700; } .plan-cont-r::after { content: "›"; position: absolute; right: 1px; opacity: 0.85; font-weight: 700; } /* Colores por estado de reserva (convención del proyecto). */ .plan-bar-s1 { background: #f39c12; } /* pendiente */ .plan-bar-s3 { background: #28a745; } /* activa */ .plan-bar-s4 { background: #6c757d; } /* finalizada */ .plan-bar-s2 { background: #e74c3c; } /* cancelada (no debería aparecer) */ /* Pie de libres. */ .plan-foot { background: #f8f9fb; border-top: 2px solid #dfe3e7; font-weight: 700; } .plan-freecell { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: #2e7d32; border-right: 1px solid #eef0f2; } .plan-freecell.plan-today { background: rgba(26, 110, 224, 0.07); } .plan-freecell.plan-free-none { color: #c0392b; background: rgba(231, 76, 60, 0.08); } /* Leyenda. */ .plan-legend-item { margin-right: 0.85rem; white-space: nowrap; } .plan-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 3px; } /* ---- Typeahead del filtro multi-plaza (planning.js) ---- */ .live-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 1050; max-height: 280px; overflow-y: auto; background: var(--card-bg, #fff); border: 1px solid var(--border-color, #dee2e6); border-top: none; border-radius: 0 0 4px 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); } .live-item { padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 1px solid #f1f3f5; } .live-item:last-child { border-bottom: none; } .live-item:hover { background-color: #f8f9fa; } .live-empty { padding: 0.5rem 0.75rem; color: #6c757d; font-size: 0.85rem; font-style: italic; } /* Botón "✕" dentro del input de búsqueda del filtro. */ .maint-search-clear-btn { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); background: transparent; border: 0; padding: 0 4px; color: #adb5bd; cursor: pointer; line-height: 1; font-size: 0.95rem; } .maint-search-clear-btn:hover { color: #495057; } .maint-search-clear-input { padding-right: 28px !important; }