/* ============================================================
custom.css — Estilos del Panel de Administración OKmystay
Bootstrap 4 como base, colores neutros, sidebar izquierdo.
Variables de color inyectadas dinámicamente desde base.html.
============================================================ */
/* ---- Enlace discreto: navega pero SIN estética de link ----
Sin subrayado, hereda el color del contexto (no azul), solo el cursor
"dedo" al pasar por encima delata que es clicable. Para accesos directos
embebidos en cabeceras/etiquetas donde el azul subrayado distrae. */
a.link-plain,
a.link-plain:hover,
a.link-plain:focus {
color: inherit;
text-decoration: none;
}
a.link-plain { cursor: pointer; }
/* ---- Variables de color (valores por defecto, se sobreescriben en JS) ---- */
: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;
--accent-color: #2ecc71;
--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: var(--body-bg);
color: var(--text-color);
}
/* 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;
transition: transform 0.2s ease;
}
/* ===== TOGGLE DEL SIDEBAR EN ESCRITORIO ===== */
.sidebar-collapse-btn {
position: absolute;
top: 8px;
right: 8px;
background: transparent;
border: 1px solid rgba(255,255,255,0.15);
color: rgba(255,255,255,0.55);
border-radius: 4px;
padding: 1px 6px;
cursor: pointer;
font-size: 0.75rem;
line-height: 1.2;
transition: color 0.15s, border-color 0.15s;
z-index: 5;
}
.sidebar-collapse-btn:hover {
color: #fff;
border-color: rgba(255,255,255,0.4);
}
.sidebar-show-btn {
display: none;
position: fixed;
top: 12px;
left: 12px;
z-index: 200;
background: var(--sidebar-bg);
color: rgba(255,255,255,0.85);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 4px;
padding: 4px 9px;
cursor: pointer;
font-size: 0.85rem;
line-height: 1.3;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
transition: color 0.15s, background-color 0.15s;
}
.sidebar-show-btn:hover {
background: var(--sidebar-hover-bg);
color: #fff;
}
/* Cuando body.sidebar-collapsed: ocultar sidebar y ampliar contenido */
@media (min-width: 769px) {
body.sidebar-collapsed #sidebar-wrapper {
transform: translateX(-100%);
}
body.sidebar-collapsed #page-content-wrapper {
margin-left: 0;
}
/* Padding-left para que el contenido no quede tapado por el botón flotante */
body.sidebar-collapsed .content-area {
padding-left: 50px;
}
body.sidebar-collapsed .sidebar-show-btn {
display: block;
}
#page-content-wrapper {
transition: margin-left 0.2s ease;
}
}
/* Cabecera del sidebar */
.sidebar-heading {
padding: 1.2rem 1rem 0.8rem;
font-size: 1.1rem;
font-weight: 700;
color: #ecf0f1;
border-bottom: 1px solid rgba(255,255,255,0.1);
letter-spacing: 0.02em;
text-align: center;
}
/* Logo de empresa en la cabecera */
.sidebar-logo {
max-width: 140px;
max-height: 45px;
object-fit: contain;
display: block;
margin: 0 auto 4px;
filter: brightness(0) invert(1);
}
/* "OK" en color de marca */
.brand-ok { color: var(--brand-ok-color); }
.sidebar-clock {
font-size: 0.7rem;
font-weight: 400;
color: rgba(255,255,255,0.45);
margin-top: 0.2rem;
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
}
/* Nombre del usuario */
.sidebar-user {
padding: 0.7rem 1rem;
color: rgba(255,255,255,0.7);
font-size: 0.8rem;
}
/* Elementos del menú */
#sidebar-wrapper .list-group-item {
background-color: transparent;
border: none;
border-radius: 0;
color: rgba(255,255,255,0.8);
padding: 0.5rem 1rem;
font-size: 0.875rem;
transition: background-color 0.15s;
}
/* Root ve más items en el sidebar (Mantenimientos, Admin…), así que
apretamos un poco más la separación para que quepan sin scroll. */
body.is-super-admin #sidebar-wrapper .list-group-item {
padding: 0.35rem 1rem;
}
#sidebar-wrapper .list-group-item:hover {
background-color: var(--sidebar-hover-bg);
color: #fff;
text-decoration: none;
}
#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 antes del logout */
.sidebar-separator {
height: 1px;
background-color: rgba(255,255,255,0.1);
margin: 0.5rem 0;
}
/* Logout en rojo suave */
.sidebar-logout { color: rgba(255,150,150,0.85) !important; }
.sidebar-logout:hover { color: #fff !important; background-color: #c0392b !important; }
/* "Powered by OKmystay" pegado al fondo del sidebar, centrado y pequeño */
.sidebar-powered-by {
margin-top: auto;
text-align: center;
padding: 0.75rem 0.5rem;
font-size: 0.65rem;
line-height: 1;
}
.sidebar-powered-by a {
color: rgba(255,255,255,0.35);
text-decoration: none;
}
.sidebar-powered-by a:hover {
color: rgba(255,255,255,0.75);
text-decoration: none;
}
/* ============================================================
SELECTOR DE TEMA Y EMPRESA EN SIDEBAR
============================================================ */
.theme-selector {
padding: 0.6rem 1rem;
border-top: 1px solid rgba(255,255,255,0.1);
}
/* El selector de empresa va pegado al nick; su borde superior duplicaría
la raya que ya hay encima del nick. Lo quitamos solo en ese caso. */
.sidebar-user + .theme-selector {
border-top: none;
padding-top: 0;
}
/* El .sidebar-separator (antes del logout/tema) ya pinta una raya y deja
margen; el border-top del .theme-selector justo debajo duplicaría la
línea. Quitamos el borde redundante solo en ese caso. */
.sidebar-separator + .theme-selector {
border-top: none;
}
.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;
}
/* ============================================================
CONTENIDO PRINCIPAL
============================================================ */
#page-content-wrapper {
margin-left: var(--sidebar-width);
flex: 1;
min-width: 0;
}
/* Barra superior */
.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 */
.content-area {
padding: 1rem 1.5rem 2rem;
}
/* Top navbar oculta en escritorio: el sidebar ya identifica la página */
@media (min-width: 769px) {
.top-navbar { display: none; }
}
/* Cabecera de página más compacta */
.page-header h2 {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
/* ============================================================
TARJETAS DE ESTADÍSTICAS (dashboard)
============================================================ */
.stat-card {
border-radius: 6px;
border: 1px solid var(--border-color);
}
.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;
}
.stat-link {
display: block;
margin-top: 0.4rem;
color: var(--accent-blue);
}
/* Tarjeta compacta de resumen del dashboard: 3 líneas con label a la
izquierda y número en grande a la derecha (clicable). */
.dashboard-summary-line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
padding: 0.25rem 0;
}
.dashboard-summary-line + .dashboard-summary-line {
border-top: 1px solid var(--border-color);
}
.dashboard-summary-label {
flex: 1 1 auto;
letter-spacing: 0.06em;
}
.dashboard-summary-num {
flex: 0 0 auto;
font-size: 1.6rem;
font-weight: 700;
color: #343a40;
line-height: 1;
text-decoration: none;
}
.dashboard-summary-num:hover,
.dashboard-summary-num:focus {
color: var(--accent-blue);
text-decoration: none;
}
/* ============================================================
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 EXTRA PEQUEÑOS
============================================================ */
.btn-xs {
padding: 0.15rem 0.45rem;
font-size: 0.75rem;
line-height: 1.3;
border-radius: 3px;
}
/* Feedback del botón abrir */
.open-feedback {
font-size: 0.8rem;
vertical-align: middle;
}
/* ============================================================
CALENDARIO AGRUPADO (admin)
============================================================ */
.calendar-wrap { overflow-x: auto; }
.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;
padding: 4px;
min-height: 60px;
height: 60px;
}
/* Número del día */
.cal-day-num {
font-size: 0.75rem;
font-weight: 600;
color: #495057;
display: block;
text-align: right;
margin-bottom: 2px;
}
/* Día de hoy resaltado — borde izquierdo grueso + fondo levemente azul +
número del día en negrita y con badge circular. El borde es lo que
realmente "salta" sin teñir toda la caja, que dificultaba leer los
badges E/A/S. */
.cal-today {
background-color: #e3f0ff;
box-shadow: inset 4px 0 0 0 var(--accent-blue);
}
.cal-today .cal-day-num {
color: #fff;
background-color: var(--accent-blue);
font-weight: 700;
border-radius: 999px;
padding: 0 7px;
line-height: 1.35;
width: fit-content;
margin-left: auto;
}
/* Días fuera del mes */
.cal-outside { background-color: #fafafa; opacity: 0.5; }
/* Contador de reservas por día — badge central en la celda */
.cal-count {
display: block;
text-align: center;
font-size: 1.1rem;
font-weight: 700;
border-radius: 4px;
padding: 2px 4px;
margin-top: 2px;
cursor: default;
}
/* Colores según volumen: verde < 5, amarillo 5-9, rojo >= 10 */
.cal-count-low { color: #155724; background-color: #d4edda; }
.cal-count-medium { color: #856404; background-color: #fff3cd; }
.cal-count-high { color: #721c24; background-color: #f8d7da; }
/* Calendario de Amapola (/amapola/reservas): variante COMPACTA. Solo muestra
UN contador por día (no los 3 badges E/A/S del calendario de /reservas), así
que las celdas de 60px sobran -> a ~mitad de alto. Scopeado al contenedor
para NO afectar al calendario compartido de /reservas. */
/* Solo hay un número por día -> el calendario no necesita ocupar todo el
ancho del contenido. Acotamos el CARD ENTERO (cabecera con flechas +
rejilla) y lo centramos, así las flechas se ciñen al ancho real del
calendario en lugar de flotar en los bordes de un card a 100%. */
#amapola-calendar-card {
max-width: 560px;
/* Alineado a la izquierda (sin margin auto) para que cuadre con el
listado de abajo, que arranca pegado a la izquierda. */
}
#amapola-calendar-container .calendar-table td {
height: 34px;
min-height: 34px;
padding: 2px 5px;
}
#amapola-calendar-container .calendar-table th { padding: 3px 4px; }
#amapola-calendar-container .cal-day-num {
font-size: 0.7rem;
margin-bottom: 0;
line-height: 1.1;
}
#amapola-calendar-container .cal-count {
font-size: 0.85rem;
padding: 0 5px;
margin-top: 1px;
}
#amapola-calendar-container .cal-today .cal-day-num { line-height: 1.15; }
/* Tres badges por celda: entradas / activas / salidas */
.cal-badges {
display: flex;
flex-wrap: wrap;
gap: 2px;
margin-top: 2px;
}
.cal-badge {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 0.7rem;
font-weight: 700;
padding: 1px 4px;
border-radius: 3px;
line-height: 1.1;
cursor: default;
}
.cal-badge i { font-size: 0.7rem; }
.cal-badge-clickable { cursor: pointer; transition: filter 0.1s, transform 0.1s; }
.cal-badge-clickable:hover { filter: brightness(0.92); transform: translateY(-1px); }
.cal-badge-clickable:active { transform: translateY(0); }
/* Entradas: verde (mismo color que place-today-checkin del cleaners… aquí
uso el verde estándar de checkin) */
.cal-badge-in { background: #eafaf1; color: #1e8449; }
/* Salidas: naranja (mismo tono que place-today-checkout invertido) */
.cal-badge-out { background: #fef5ec; color: #b7570e; }
/* Activas: gradiente según volumen */
.cal-badge-active-low { background: #eaf4fb; color: #1a6fa0; }
.cal-badge-active-medium { background: #fff3cd; color: #856404; }
.cal-badge-active-high { background: #f8d7da; color: #721c24; }
/* Amapola: la celda ENTERA del día es clicable (no solo el badge) para
filtrar el listado por ese día. `cal-sel` marca el día seleccionado con
un contorno verde de marca; convive con `cal-today` (borde azul). */
.cal-clickable { cursor: pointer; }
.cal-clickable:hover { background-color: #eef4fb; }
.cal-sel { box-shadow: inset 0 0 0 2px var(--accent-color); }
.cal-today.cal-sel {
box-shadow: inset 4px 0 0 0 var(--accent-blue), inset 0 0 0 2px var(--accent-color);
}
/* ============================================================
AMAPOLA — AGENDA (timeline día por recurso, Fase 2)
Posiciones (top/height en px) las calcula el backend; aquí solo el
chrome. Escala vertical: _AGENDA_PX_PER_HOUR (routes/amapola.py).
============================================================ */
/* Layout de la página de agenda: columna flex que llena el viewport (en
escritorio el top-navbar está oculto, así que content-area arranca arriba).
El timeline (.amap-agenda-scroll) toma el hueco restante con flex y scrollea
DENTRO de sí mismo solo si el día no cabe -> la PÁGINA nunca scrollea y un
día que cabe no muestra ninguna barra. Sin medición JS ni offsets frágiles. */
@media (min-width: 769px) {
.amap-agenda-page {
display: flex;
flex-direction: column;
height: calc(100vh - 3rem); /* = padding vertical de .content-area (1rem+2rem) */
}
.amap-agenda-page > .page-header { flex: 0 0 auto; }
.amap-agenda-page > #amap-ajax-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
/* El timeline llena el resto; los controles de arriba y la nota de abajo
conservan su alto natural. */
#amap-ajax-body > .amap-agenda-scroll { flex: 1 1 auto; min-height: 0; }
}
.amap-agenda-scroll {
/* Scroll interno en ambos ejes. La cabecera sticky y las horas quedan
fijas dentro de este scroll. */
overflow: auto;
border: 1px solid var(--border-color);
border-radius: 6px;
background: #fff;
}
.amap-agenda-head {
display: flex;
border-bottom: 2px solid var(--border-color);
background: #f8f9fa;
position: sticky;
top: 0;
z-index: 3;
}
.amap-agenda-head-spacer { flex: 0 0 54px; width: 54px; }
.amap-agenda-col-head {
flex: 1 1 0;
min-width: 130px;
padding: 6px 8px;
text-align: center;
border-left: 1px solid #eee;
font-size: 0.8rem;
}
.amap-col-name {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Columna "hoy" en la vista semana */
.amap-agenda-col-head.amap-col-today {
background: #e3f0ff;
box-shadow: inset 0 -3px 0 0 var(--accent-blue);
}
.amap-agenda-body { display: flex; position: relative; }
.amap-agenda-hours { flex: 0 0 54px; width: 54px; position: relative; }
.amap-hour-label {
position: absolute;
right: 5px;
transform: translateY(-50%);
font-size: 0.65rem;
color: #999;
}
/* Horas comprimidas (madrugada / fuera de jornada): etiqueta y línea atenuadas */
.amap-hour-label.amap-hour-compressed { opacity: 0.4; font-size: 0.58rem; }
.amap-hour-line-compressed { border-top-color: #fafafa; }
.amap-agenda-lanes { display: flex; flex: 1 1 auto; position: relative; }
.amap-lane {
flex: 1 1 0;
min-width: 130px;
position: relative;
border-left: 1px solid #eee;
}
.amap-hour-line { position: absolute; left: 0; right: 0; border-top: 1px solid #f2f2f2; }
.amap-lane-window { position: absolute; left: 0; right: 0; background: #eef6ff; }
.amap-item {
position: absolute;
left: 3px;
right: 3px;
border-radius: 4px;
padding: 2px 5px;
overflow: hidden;
font-size: 0.68rem;
line-height: 1.15;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
cursor: default;
}
.amap-item-time { font-weight: 700; font-size: 0.62rem; opacity: 0.85; }
.amap-item-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amap-item-sub { color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amap-item-active { background: #d4edda; border-left: 3px solid #28a745; }
.amap-item-hold { background: #fff3cd; border-left: 3px solid #ffc107; }
.amap-item-busy {
background: repeating-linear-gradient(45deg, #f1f1f1, #f1f1f1 6px, #e6e6e6 6px, #e6e6e6 12px);
border-left: 3px solid #adb5bd;
color: #555;
}
/* Cuadraditos de la leyenda */
.amap-legend {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 3px;
vertical-align: middle;
margin-right: 2px;
}
.amap-legend-window { background: #eef6ff; border: 1px solid #cfe2ff; }
/* ============================================================
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;
}
/* ============================================================
TEMAS — variables aplicadas dinámicamente desde base.html
============================================================ */
#sidebar-wrapper { background-color: var(--sidebar-bg); }
#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);
}
.card, .modal-content { background-color: var(--card-bg); }
/* ============================================================
RESPONSIVE: hamburguesa 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;
}
}
/* ============================================================
PÁGINA DE PROPIEDADES — copiado de cleaners (mismo estilo)
============================================================ */
/* ===== BUSCADOR ===== */
.search-box {
position: relative;
}
.search-icon {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
color: #adb5bd;
pointer-events: none;
font-size: 14px;
z-index: 1;
}
.search-box .form-control {
padding-left: 32px;
border-radius: 8px;
font-size: 14px;
}
/* ===== FILTRO DE ACTIVIDAD ===== */
.activity-filter {
display: flex;
gap: 8px;
}
.btn-activity {
flex: 1;
padding: 8px 10px;
font-size: 13px;
font-weight: 600;
border-radius: 8px;
border: 1.5px solid var(--border-color);
background: #fff;
color: #6c757d;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
text-align: center;
}
.btn-activity.active {
background-color: #2c3e50;
border-color: #2c3e50;
color: #fff;
}
.btn-activity:not(.active):hover {
border-color: #2c3e50;
color: #2c3e50;
}
/* ===== FILTRO DE LOCALIDAD ===== */
.locality-filter {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.btn-locality {
background-color: #fff;
border: 1.5px solid var(--border-color);
border-radius: 20px;
padding: 5px 14px;
font-size: 13px;
color: #495057;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
white-space: nowrap;
}
.btn-locality:hover {
border-color: var(--accent-color);
color: #2c3e50;
}
.btn-locality.active {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: #fff;
font-weight: 600;
}
.locality-count {
display: inline-block;
background-color: rgba(0,0,0,0.12);
border-radius: 10px;
padding: 0 6px;
font-size: 11px;
margin-left: 4px;
font-weight: 700;
vertical-align: middle;
}
.btn-locality.active .locality-count,
.btn-activity.active .locality-count {
background-color: rgba(255,255,255,0.3);
}
/* ===== TARJETAS DE PROPIEDADES ===== */
.place-card {
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
background: #fff;
height: 100%;
position: relative; /* ancla del pin de Google Maps (.place-maps-link) */
}
/* Pin de Google Maps — hermano del de cabecera (no puede anidarse
dentro porque la cabecera entera ya es un enlace a la ficha). */
.place-maps-link {
position: absolute;
top: 6px;
right: 6px;
padding: 2px 4px;
line-height: 1;
z-index: 2;
border-radius: 4px;
}
.place-maps-link:hover {
background: rgba(0, 0, 0, 0.06);
}
.place-maps-link svg {
display: block;
width: 12px;
height: 17px;
}
/* Reserva hueco en la cabecera para que el nombre no quede bajo el pin */
.place-card-header.has-maps {
padding-right: 28px;
}
/* Propiedad desactivada (state=0) — solo la ve root; va al final del
listado, atenuada y con borde ámbar discontinuo + badge INACTIVA. */
.place-card-inactive {
opacity: 0.6;
border: 1px dashed #e0a800;
}
.place-card-inactive:hover { opacity: 0.9; }
.place-inactive-badge {
font-size: 0.62rem;
vertical-align: middle;
}
.place-card-header {
padding: 8px 10px;
background: #f1f3f5;
border-bottom: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 2px;
}
.place-name {
display: block;
font-size: 12px;
font-weight: 700;
color: #2c3e50;
line-height: 1.3;
word-break: break-word;
}
.place-name .place-id,
.place-name .place-locality {
font-weight: 400;
color: #6c757d;
}
/* Etiqueta con el tipo de propiedad (Apartamento, Parking, Taquillas…).
El color de fondo viene por tipo desde domopaco_place_types.color
(paleta pastel; inline style en la plantilla). Solo se pinta cuando el
listado tiene MÁS de un tipo (si no, sería ruido idéntico). El estilo de
aquí es el fallback cuando el tipo no tiene color asignado en BD. */
.place-type-badge {
display: inline-block;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
color: #6c757d;
background: #e9ecef;
border: 1px solid #dee2e6;
border-radius: 3px;
padding: 0 4px;
line-height: 1.4;
vertical-align: middle;
white-space: nowrap;
}
/* Nombre que ve el huésped en su panel (panel_name > channel_name > name),
solo cuando difiere del nombre interno mostrado en grande. */
.place-guest-name {
display: block;
font-size: 11px;
color: #6c757d;
line-height: 1.3;
word-break: break-word;
}
.place-guest-name .bi { opacity: 0.7; }
a.place-card-header {
text-decoration: none;
color: inherit;
transition: background-color 0.15s;
}
a.place-card-header:hover {
background: #e9ecef;
text-decoration: none;
color: inherit;
}
.place-address {
display: block;
font-size: 11px;
color: #6c757d;
line-height: 1.3;
word-break: break-word;
}
.place-card-body {
padding: 3px;
}
/* ===== CERRADURAS ===== */
/* Las cerraduras de una propiedad fluyen inline y envuelven, en lugar
de apilarse una por línea (cards parejas aunque haya 11 cerraduras).
Cada .lock-item sigue siendo una mini-columna chip + .lock-result,
así el feedback de apertura queda pegado a su propio chip al envolver. */
.locks-grid {
display: flex;
flex-wrap: wrap;
gap: 3px 5px;
align-items: flex-start;
}
.lock-item {
margin-bottom: 0;
}
/* Fila con el botón de abrir + el atajo "ver detalle" alineados.
El botón de abrir crece para ocupar el espacio disponible; el
atajo de detalle queda a la derecha con anchura fija. */
.lock-row {
gap: 4px;
}
.lock-row .btn-abrir {
flex: 1 1 auto;
width: auto;
}
.btn-abrir {
display: block;
width: 100%;
padding: 5px 6px;
font-size: 13px;
font-weight: 600;
background: #fff;
border: 1.5px solid var(--accent-color);
color: var(--accent-color);
border-radius: 6px;
text-align: center;
cursor: pointer;
transition: background-color 0.15s, color 0.15s;
white-space: normal;
word-break: break-word;
line-height: 1.3;
}
.btn-abrir:hover,
.btn-abrir:active {
background: var(--accent-color);
color: #fff;
}
.btn-abrir:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Atajo "→" al detalle de la cerradura, junto al botón de abrir.
En gris para no competir visualmente con el botón principal. */
.btn-lock-detail {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
padding: 0 6px;
font-size: 14px;
background: #fff;
border: 1.5px solid #ced4da;
color: #6c757d;
border-radius: 4px;
text-decoration: none;
}
.btn-lock-detail:hover,
.btn-lock-detail:focus {
background: #f8f9fa;
color: #495057;
border-color: #adb5bd;
text-decoration: none;
}
.lock-result {
font-size: 11px;
text-align: center;
}
.lock-result:not(:empty) {
min-height: 16px;
margin-top: 3px;
}
.no-locks {
font-size: 11px;
color: #adb5bd;
margin: 0;
}
/* ===== RESERVAS DE HOY ===== */
.place-today {
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid var(--border-color);
}
.place-today-item {
display: block;
font-size: 11px;
font-weight: 600;
padding: 2px 5px;
border-radius: 4px;
margin-bottom: 2px;
text-decoration: none;
}
.place-today-item:hover { opacity: 0.8; text-decoration: none; }
.place-today-checkout { background: #eafaf1; color: #1e8449; }
.place-today-checkin { background: #fef5ec; color: #b7570e; }
.place-today-active { background: #eaf4fb; color: #1a6fa0; }
.place-today-guests {
font-weight: 400;
opacity: 0.8;
}
.booking-extra-guest {
display: inline-block;
font-size: 11px;
font-weight: 500;
color: #6c757d;
margin-left: 4px;
}
.booking-extra-purchase {
display: inline-block;
font-size: 11px;
font-weight: 600;
color: #d68910;
margin-left: 4px;
}
/* ===== FICHA DETALLE DE PROPIEDAD ===== */
.detail-card {
border: 1px solid var(--border-color);
border-radius: 8px;
background: #fff;
overflow: hidden;
height: 100%;
}
/* Columna que APILA varios .detail-card en vertical (p.ej. Aforo + Camas en
la ficha de propiedad). El height:100% de arriba está pensado para 1 card
por columna (equipara la altura de la pareja L-R del grid); con dos cards
hermanos en una misma columna cada uno intentaría el 100% y se solaparían.
Aquí cada card toma su altura natural y se apilan. */
.detail-card-stack .detail-card { height: auto; }
.detail-card-header {
padding: 8px 12px;
background: #f1f3f5;
border-bottom: 1px solid var(--border-color);
font-size: 13px;
font-weight: 600;
color: #2c3e50;
}
.detail-card-body {
padding: 8px 12px;
}
/* Typeahead embebido en un .detail-card: el desplegable de resultados
(.live-results, position:absolute, cuelga bajo el input) debe poder
DESBORDAR el card hacia abajo. Sin esto, el overflow:hidden de .detail-card
(que existe para redondear las esquinas del header) recorta el desplegable a
la altura del propio card — que en fichas con poco contenido es minúscula,
dejando la lista de resultados aplastada en un scroll de 2-3 filas
("escondida"). Se compensa el radio de las esquinas superiores del header,
que antes clipaba el propio overflow:hidden.
Regla por id: garantiza el caso reportado (card de permisos) en TODOS los
navegadores. Va PRIMERO y en su propia regla — si se agrupara con el
selector :has() de abajo, un navegador sin soporte de :has() descartaría la
regla entera y perdería también este fallback. */
#user-perms-card { overflow: visible; }
#user-perms-card > .detail-card-header {
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
/* Regla GENERAL preventiva: cualquier .detail-card con un typeahead dentro.
:has() es dinámico (cubre cuerpos inyectados por AJAX) y degrada con gracia
en navegadores sin soporte (peor caso = el clip de siempre). En su propia
regla para no arrastrar el fallback de arriba si :has() no está soportado. */
.detail-card:has(.live-results) { overflow: visible; }
.detail-card:has(.live-results) > .detail-card-header {
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.detail-row {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 5px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 13px;
gap: 2px;
}
.detail-row:last-child { border-bottom: none; }
/* Dos .detail-row en la misma línea (p.ej. CP + Localidad, Coordenadas +
Google en la ficha de propiedad). El borde/padding de fila lo lleva el
pair; las filas interiores quedan sin borde y a mitad de ancho cada una. */
.detail-row-pair {
display: flex;
gap: 12px;
padding: 5px 0;
border-bottom: 1px solid #f0f0f0;
}
.detail-row-pair:last-child { border-bottom: none; }
.detail-row-pair > .detail-row {
flex: 1 1 0;
min-width: 0;
padding: 0;
border-bottom: none;
}
.detail-label {
color: #6c757d;
font-size: 12px;
}
.detail-value {
color: #2c3e50;
word-break: break-word;
}
.detail-value code {
background: #f1f3f5;
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
color: #2c3e50;
}
.upcoming-list {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.upcoming-row {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border-radius: 4px;
font-size: 12px;
color: #495057;
text-decoration: none;
background: #f8f9fa;
white-space: nowrap;
}
.upcoming-row:hover {
background: #e9ecef;
text-decoration: none;
color: #2c3e50;
}
.upcoming-dates {
font-weight: 600;
}
.upcoming-dates .bi-arrow-right {
margin: 0 2px;
}
.upcoming-guests {
color: #6c757d;
}
.upcoming-guests .bi-person {
margin-left: 2px;
}
/* ===== PROPIETARIOS (card de la ficha de propiedad) ===== */
.owner-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.owner-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px;
border: 1px solid #eef0f2;
border-radius: 8px;
background: #fbfcfd;
transition: background .12s ease, border-color .12s ease;
}
.owner-item:hover {
background: #f4f8f6;
border-color: #d8e6df;
}
.owner-avatar {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.5px;
color: #fff;
background: linear-gradient(135deg, #2ecc71, #27ae60);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
user-select: none;
}
.owner-body {
flex: 1 1 auto;
min-width: 0;
}
.owner-name {
font-size: 14px;
font-weight: 600;
color: #2c3e50;
line-height: 1.2;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.owner-name a {
color: #2c3e50;
text-decoration: none;
}
.owner-name a:hover {
color: #27ae60;
text-decoration: underline;
}
.owner-contacts {
margin-top: 4px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 14px;
font-size: 12.5px;
}
.owner-contact {
display: inline-flex;
align-items: center;
gap: 5px;
color: #5a6b7b;
text-decoration: none;
max-width: 100%;
}
.owner-contact span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.owner-contact:hover {
color: #27ae60;
text-decoration: none;
}
.owner-contact .bi {
color: #adb5bd;
flex: 0 0 auto;
}
.owner-contact:hover .bi { color: #27ae60; }
.owner-contact-phone {
display: inline-flex;
align-items: center;
gap: 8px;
}
.owner-contact-wa {
color: #25d366;
font-size: 14px;
line-height: 1;
text-decoration: none;
}
.owner-contact-wa:hover { color: #1da851; }
/* ===== AUTOCOMPLETE DE PROPIEDAD (financiero) ===== */
.property-autocomplete-wrap {
position: relative;
}
.autocomplete-results {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
background: #fff;
border: 1px solid var(--border-color);
border-top: none;
max-height: 280px;
overflow-y: auto;
box-shadow: 0 4px 8px rgba(0,0,0,0.08);
border-radius: 0 0 4px 4px;
}
.autocomplete-results li {
padding: 6px 10px;
font-size: 0.85rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
border-top: 1px solid #f1f3f5;
}
.autocomplete-results li:first-child {
border-top: none;
}
.autocomplete-results li:hover {
background: #f1f3f5;
}
.autocomplete-results .ac-name {
color: #2c3e50;
font-weight: 500;
}
.autocomplete-results .ac-locality {
color: #6c757d;
font-size: 0.75rem;
}
/* ===== FILAS DE RESERVA CANCELADA (en listados) ===== */
.booking-canceled td {
opacity: 0.6;
}
.booking-canceled td:hover {
opacity: 0.85;
}
/* ===== ENLACE A FICHA DE PROPIEDAD (sutil, en cualquier listado) =====
DEPRECATED — sustituir por el chip canónico .entity-chip-place
(macro place_link en _macros.html). Mantener mientras queden call
sites sin migrar. */
.property-link {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted rgba(0,0,0,0.25);
}
.property-link:hover,
.property-link:focus {
color: var(--accent-blue);
text-decoration: none;
border-bottom-color: var(--accent-blue);
}
/* ===== ENTITY CHIPS — accesos canónicos a propiedad / reserva =====
Patrón canónico para enlazar a la ficha de una entidad desde
cualquier listado o ficha. Usar siempre los macros place_link /
booking_link de _macros.html — no construir el HTML a mano.
Documentado en CLAUDE.md. */
.entity-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.1rem 0.5rem 0.1rem 0.4rem;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 4px;
background-color: transparent;
color: #212529;
font-size: 0.85em;
line-height: 1.4;
text-decoration: none !important;
white-space: nowrap;
vertical-align: baseline;
transition: background-color 0.12s ease, border-color 0.12s ease;
}
.entity-chip:hover {
background-color: rgba(0,0,0,0.04);
border-color: rgba(0,0,0,0.22);
color: #212529;
}
.entity-chip > i {
font-size: 0.95em;
flex-shrink: 0;
line-height: 1;
}
.entity-chip > span {
font-weight: 500;
}
.entity-chip-suffix {
color: #6c757d;
font-weight: 400;
}
.entity-chip-place > i { color: var(--brand-ok-color, #2980b9); }
.entity-chip-booking > i { color: #28a745; }
.entity-chip-lock-nav > i { color: var(--accent-color, #2ecc71); }
.entity-chip-lock-split { /* sin icono propio: lo lleva el botón interior */ }
/* Cerradura deshabilitada en su ficha (lock_state=0) pero todavía
asociada a la plaza: se muestra atenuada con strikethrough sobre
el nombre, sin botón abrir (chip 100% navegacional). El badge del
fabricante mantiene su color para que se reconozca de un vistazo. */
.entity-chip-lock-disabled-device {
opacity: 0.55;
}
.entity-chip-lock-disabled-device > span {
text-decoration: line-through;
}
.entity-chip-lock-disabled-device:hover {
opacity: 0.85;
}
/* Estados de conexión del chip (Cerraduras.md §9). Se aplican ENCIMA
de las variantes existentes (-nav, -split) — son ortogonales:
un chip puede ser split + offline, o nav + unknown.
- `offline` → borde rojo, icono wifi-off rojo a la izquierda.
- `unknown` → borde gris atenuado, icono question-circle gris.
El icono se inserta entre el lock_type_badge y el del
nombre con `.entity-chip-lock-off-icon`. */
.entity-chip-lock-offline {
border-color: #e74c3c;
}
.entity-chip-lock-offline.entity-chip-lock-split {
border-color: #e74c3c;
}
.entity-chip-lock-offline.entity-chip-lock-split:hover {
border-color: #e74c3c;
}
.entity-chip-lock-offline .entity-chip-lock-off-icon {
color: #e74c3c;
margin: 0 0.15rem 0 0.05rem;
font-size: 0.95em;
}
.entity-chip-lock-unknown {
border-color: #adb5bd;
opacity: 0.78;
}
.entity-chip-lock-unknown.entity-chip-lock-split {
border-color: #adb5bd;
}
.entity-chip-lock-unknown.entity-chip-lock-split:hover {
border-color: #adb5bd;
}
.entity-chip-lock-unknown .entity-chip-lock-off-icon {
color: #6c757d;
margin: 0 0.15rem 0 0.05rem;
font-size: 0.95em;
}
.entity-chip-lock-unknown:hover {
opacity: 1;
}
/* ===== LOCK TYPE BADGE — mini-badge circular con letra del fabricante.
Sustituye los antiguos badges textuales "Yacan/Omnitec/..." en
listados y dentro del lock_link. Una sola letra + color por
fabricante para identificar de un vistazo sin ocupar espacio. */
.lock-type-badge {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: 700;
color: #fff;
line-height: 1;
flex-shrink: 0;
font-family: ui-sans-serif, system-ui, sans-serif;
}
.lock-type-badge-sm { width: 18px; height: 18px; font-size: 10.5px; }
.lock-type-badge-md { width: 22px; height: 22px; font-size: 12.5px; }
.lock-type-badge-yacan { background-color: #17a2b8; } /* info / cyan */
.lock-type-badge-omnitec { background-color: #007bff; } /* primary / azul */
.lock-type-badge-ttlock { background-color: #6f42c1; } /* violeta */
.lock-type-badge-argonline { background-color: #343a40; } /* dark / negro */
.lock-type-badge-mando { background-color: #ffc107; color: #000; } /* warning / ambar */
.lock-type-badge-relais { background-color: #6c757d; } /* secondary / gris */
.lock-type-badge-unknown { background-color: #adb5bd; } /* fallback */
/* ===== PROMO CODE CHIP — split: código (→ ficha) + copiar =====
Cabecera de cada card de /modulos/codigos-promocionales. Mismo
lenguaje visual que los entity chips / lock split chip: una sola
pastilla con borde fino y dos zonas con hover independiente.
Zona izquierda = el código en monospace (link a la ficha);
zona derecha = botón de copiar al portapapeles, con animación
"pop" del icono al copiar (clase .copied desde JS). */
.promo-code-chip {
display: inline-flex;
align-items: stretch;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
overflow: hidden;
background-color: #fff;
line-height: 1.4;
vertical-align: middle;
}
.promo-code-chip-code {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.6rem;
font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-weight: 600;
font-size: 0.92rem;
letter-spacing: 0.5px;
color: #212529;
text-decoration: none !important;
transition: background-color 0.12s ease, color 0.12s ease;
}
.promo-code-chip-code:hover,
.promo-code-chip-code:focus {
background-color: rgba(0,0,0,0.05);
color: var(--brand-ok-color, #2980b9);
outline: none;
}
.promo-code-chip-copy {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 0.5rem;
background: transparent;
border: 0;
border-left: 1px solid rgba(0,0,0,0.12);
color: #6c757d;
font-size: 0.85rem;
cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease;
}
.promo-code-chip-copy:hover,
.promo-code-chip-copy:focus {
background-color: rgba(0,0,0,0.05);
color: #212529;
outline: none;
}
.promo-code-chip-copy.copied {
color: #28a745;
}
.promo-code-chip-copy.copied > i {
animation: promo-copy-pop 0.35s ease;
}
@keyframes promo-copy-pop {
0% { transform: scale(1); }
45% { transform: scale(1.4); }
100% { transform: scale(1); }
}
/* ===== REGIME BADGE — régimen contratado SA/AD (macro regime_badge).
Colores PROPIOS e intencionales: NO se reusan los de estado de
Bootstrap (verde=cobrado, ámbar=pendiente, rojo=error) para no
confundir un atributo de la reserva con un estado. Cada régimen su
color. Ver REGIME.md. */
.regime-badge { font-weight: 600; }
.regime-badge-sa { background-color: #607089; color: #fff; } /* azul pizarra — solo alojamiento */
.regime-badge-ad { background-color: #a9690d; color: #fff; } /* ámbar café — con desayuno */
.regime-badge-mp { background-color: #2a9d8f; color: #fff; } /* teal — media pensión */
.regime-badge-pc { background-color: #6f42c1; color: #fff; } /* púrpura — pensión completa */
.regime-badge-ti { background-color: #3b7a57; color: #fff; } /* verde bosque — todo incluido */
.regime-badge-other { background-color: #6c757d; color: #fff; } /* fallback */
/* ===== USER TYPE BADGE — tipo 6 "Profesional" (rol del panel del
profesional, Amapola §15). Color propio violeta, distinto de los 5
tipos Bootstrap (primary/secondary/success/warning/info). Mapeado en
el macro user_type_badge() de _macros.html y en el TYPE_BADGE del JS
de cerraduras_aperturas.html. */
.badge-profesional { background-color: #6f42c1; color: #fff; }
.badge-facturacion { background-color: #0f766e; color: #fff; } /* type 7 Facturación (VeriFactu) */
/* ===== FLASH / BLINK genérico — feedback "esto se ha refrescado" aunque el
contenido no cambie (botones ↻ de refresco). Reiniciable: en JS hacer
el.classList.remove('okms-flash'); void el.offsetWidth; el.classList.add('okms-flash'); */
@keyframes okms-flash-bg {
0% { background-color: rgba(46, 204, 113, 0.35); }
100% { background-color: transparent; }
}
.okms-flash { animation: okms-flash-bg 0.9s ease-out; border-radius: 3px; }
/* ===== INDICADOR "EN VIVO" — etiqueta discreta que avisa de que el
contenido se auto-refresca (punto verde que late). Pensado para la
esquina derecha de una cabecera de card. */
.okms-live-tag {
display: inline-flex; align-items: center; gap: 0.3em;
font-size: 0.72em; font-weight: 500; color: #6c757d;
white-space: nowrap; vertical-align: middle;
}
.okms-live-tag .okms-live-dot {
width: 7px; height: 7px; border-radius: 50%;
background-color: #2ecc71; display: inline-block;
animation: okms-live-pulse 2s ease-in-out infinite;
}
@keyframes okms-live-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); }
50% { opacity: 0.5; box-shadow: 0 0 0 4px rgba(46, 204, 113, 0); }
}
/* ===== OKMS REFRESH CHIP — chip "actualizado HH:MM:SSh / pausado" del
helper canónico de polling okms-poller.js (opción chipEl). Markup:
activo
Estados: (ninguno) = verde pulsante · .paused = gris sin animación ·
.error = rojo ("sin conexión — reintentando"). Generaliza el chip que
estrenó /tulipan (.tulipan-autorefresh-chip, migrable cuando se toque). */
.okms-refresh-chip {
font-size: 0.72rem;
color: #6c757d;
margin-left: 0.5rem;
white-space: nowrap;
vertical-align: middle;
}
.okms-refresh-chip .dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background-color: #28a745;
margin-right: 0.25rem;
vertical-align: middle;
animation: okms-chip-pulse 1.6s ease-in-out infinite;
}
.okms-refresh-chip.paused .dot { background-color: #adb5bd; animation: none; }
.okms-refresh-chip.error .dot { background-color: #e74c3c; animation: none; }
.okms-refresh-chip.error { color: #c0392b; }
@keyframes okms-chip-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* ===== TPV PROVIDER BADGE — etiqueta de la pasarela de pago.
Color fijo por proveedor, canónico (macro tpv_provider_badge). Colores
de marca aproximados: CECA azul-banca, RedSys naranja, Stripe morado. */
.tpv-prov-badge {
display: inline-block; padding: 0.15em 0.55em; border-radius: 4px;
font-size: 0.78em; font-weight: 600; line-height: 1.4;
color: #fff; white-space: nowrap; vertical-align: middle;
}
.tpv-prov-badge-ceca { background-color: #0d6efd; } /* azul banca */
.tpv-prov-badge-redsys { background-color: #e8710a; } /* naranja RedSys */
.tpv-prov-badge-stripe { background-color: #635bff; } /* morado Stripe */
.tpv-prov-badge-unknown { background-color: #adb5bd; } /* fallback */
/* Color del icono según estado de la reserva (domopaco_bookings.state).
Sigue la convención de colores del proyecto (CLAUDE.md): amarillo
para pendiente, rojo para error/cancelado, verde para hecho/activo. */
.entity-chip-booking-state-1 > i { color: #f39c12; } /* Pendiente */
.entity-chip-booking-state-2 > i { color: #e74c3c; } /* Cancelada */
.entity-chip-booking-state-3 > i { color: #28a745; } /* Activa */
.entity-chip-booking-state-4 > i { color: #6c757d; } /* Finalizada */
.entity-chip-disabled {
border-style: dashed;
color: #6c757d;
cursor: default;
}
.entity-chip-meta {
color: #6c757d;
font-size: 0.85em;
margin-left: 0.25rem;
}
/* ===== LOCK CHIP — split: zona "abrir" + flecha "detalle" =====
El chip se comporta como un split-button. La caja exterior
(.entity-chip-lock-split) lleva el border común y se anula su
propio padding para que cada zona interior tenga el suyo. */
.entity-chip-lock-split {
padding: 0;
gap: 0; /* anula el gap heredado de .entity-chip — las
dos zonas pegan a tope sin franja blanca */
overflow: hidden;
border-color: var(--accent-color, #2ecc71);
}
/* Hovers independientes por zona — anula el .entity-chip:hover
genérico para que el wrapper no cambie de bg/border al pasar por
encima; cada hijo gestiona su propio feedback. */
.entity-chip-lock-split:hover {
background-color: transparent;
border-color: var(--accent-color, #2ecc71);
color: inherit;
}
/* Zona izquierda: botón de abrir (acción primaria). Bg transparente
en reposo, verde + texto blanco al hover. */
.entity-chip-lock-action {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.15rem 0.55rem;
background: transparent;
border: 0;
color: var(--accent-color, #2ecc71);
font: inherit;
font-weight: 500;
cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease;
}
.entity-chip-lock-action > i { font-size: 0.95em; }
.entity-chip-lock-action:hover,
.entity-chip-lock-action:focus {
background-color: var(--accent-color, #2ecc71);
color: #fff;
outline: none;
}
/* Zona derecha: flecha al detalle. Estrecha, color muted en reposo,
gris claro al hover (independiente del hover de la apertura). */
.entity-chip-lock-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.4rem;
border-left: 1px solid rgba(0,0,0,0.1);
color: #6c757d;
text-decoration: none !important;
transition: background-color 0.12s ease, color 0.12s ease;
}
.entity-chip-lock-arrow:hover,
.entity-chip-lock-arrow:focus {
background-color: rgba(0,0,0,0.06);
color: #212529;
outline: none;
}
/* ===== TABLA DE AUDITORÍA ===== */
.audit-table tbody tr:hover {
background: #f8f9fa;
}
/* Todas las celdas de la auditoría alinean a la izquierda (defensivo
frente a cualquier text-align heredado de un contenedor padre). */
.audit-table td, .audit-table th { text-align: left; }
/* Columna izquierda: fecha/hora arriba, usuario debajo */
.audit-table .audit-meta {
width: 1%;
white-space: nowrap;
vertical-align: top;
padding-right: 12px;
}
.audit-table .audit-when {
font-size: 0.75rem;
color: #6c757d;
line-height: 1.2;
}
.audit-table .audit-who {
font-size: 0.78rem;
color: #495057;
font-weight: 600;
margin-top: 2px;
}
/* Columna derecha: comment_key (badge coloreado) arriba, detalle debajo */
.audit-table .audit-detail {
font-size: 0.78rem;
color: #495057;
margin-top: 3px;
word-break: break-word;
white-space: pre-wrap;
}
/* Badge del comment_key (color depende de categoría — ver audit_styles.py) */
.audit-key {
font-size: 0.72rem;
font-weight: 700;
padding: 2px 7px;
border-radius: 3px;
white-space: nowrap;
display: inline-block;
letter-spacing: 0.02em;
}
.audit-default { background: #f1f3f5; color: #495057; }
.audit-lifecycle { background: #2c3e50; color: #fff; }
.audit-lifecycle-cancel { background: #6c757d; color: #fff; }
.audit-error { background: #f8d7da; color: #721c24; }
.audit-modification { background: #fff3cd; color: #856404; }
.audit-payment { background: #d4edda; color: #155724; }
.audit-lock { background: #e2d4f0; color: #4a148c; }
.audit-notification { background: #d1ecf1; color: #0c5460; }
.audit-access { background: #e9ecef; color: #495057; }
/* Notas manuales escritas por un admin desde el panel (MANUAL_NOTE). */
.audit-manual-note { background: #fcefb6; color: #7a5a00; }
/* Filas de auditoría que son notas manuales — tinte amarillo claro
y separador izquierdo, para distinguirlas de los eventos automáticos. */
.audit-table tr.audit-row-note > td { background: #fffbe6; }
.audit-table tr.audit-row-note > td:first-child {
border-left: 3px solid #f0c419;
}
/* Caja de acciones encima de la tabla de auditoría — contiene el
botón "Añadir nota". */
.audit-actions {
padding: 0.4rem 0.6rem;
text-align: right;
border-bottom: 1px solid var(--border-color, #dee2e6);
background: #fafbfc;
}
.audit-actions .btn-add-note i { margin-right: 0.25em; }
/* ===== CABECERA COLLAPSABLE (audit) ===== */
.collapse-header {
cursor: pointer;
user-select: none;
}
.collapse-header:hover {
background: #f8f9fa;
}
.collapse-header .collapse-chevron {
transition: transform 0.2s;
}
.collapse-header[aria-expanded="true"] .collapse-chevron {
transform: rotate(180deg);
}
/* ===== LÍNEA DEL HUÉSPED / TARJETA DE GARANTÍA EN LA TARJETA PRINCIPAL ===== */
/* Check-in online se extrajo del dl principal a su propio card en la
sección CHECK-IN ONLINE (ver booking_detail.html). El antiguo
.checkin-online-line ya no se usa. */
.guest-line, .creditcard-line {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 8px;
}
/* Bloque del número de tarjeta (ocupa la línea completa, debajo del badge) */
.creditcard-line .cc-block {
flex-basis: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 8px;
}
.creditcard-line .cc-number {
background: #f1f3f5;
padding: 2px 8px;
border-radius: 4px;
letter-spacing: 0.5px;
font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.95em;
color: #212529;
}
.guest-line .guest-name { font-weight: 600; }
.guest-line .guest-phone, .guest-line .guest-email { color: #495057; }
/* Bandera junto al teléfono */
.phone-flag {
font-size: 1.05em;
margin-right: 2px;
}
/* Botones-icono compactos: solo el icono visible */
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 4px;
border: 1px solid var(--border-color);
color: #495057;
background: #fff;
text-decoration: none;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
font-size: 0.85rem;
}
.btn-icon:hover {
background: #2c3e50;
border-color: #2c3e50;
color: #fff;
text-decoration: none;
}
.btn-icon.btn-icon-wa:hover {
background: #25d366;
border-color: #25d366;
}
/* Botón extra-pequeño consistente con el icono */
.btn-xs {
padding: 2px 8px;
font-size: 0.75rem;
line-height: 1.4;
border-radius: 4px;
}
/* ===== MODAL DE EDICIÓN DE PAGO ===== */
/* Etiquetas (Tipo / Desc / Importe / TPV) con ancho fijo para que alineen */
.pay-edit-body .input-group-prepend .input-group-text {
min-width: 70px;
justify-content: flex-end;
font-size: 0.78rem;
background: #f1f3f5;
color: #495057;
}
/* Que el contenido del modal de edición scrollee si no cabe en pantalla */
.pay-edit-body { max-height: calc(100vh - 80px); overflow-y: auto; }
/* En móvil apaisado, permitir más altura todavía */
@media (max-height: 500px) {
.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 1rem); }
.pay-edit-body { max-height: calc(100vh - 70px); }
}
/* ===== ICONO DE AYUDA (i) + POPOVER ===== */
.help-icon {
color: #adb5bd;
margin-left: 4px;
cursor: pointer;
text-decoration: none;
font-size: 0.85em;
vertical-align: middle;
line-height: 1;
}
.help-icon:hover,
.help-icon:focus {
color: var(--accent-blue);
text-decoration: none;
outline: none;
}
/* El popover de Bootstrap por defecto es muy estrecho — lo ensancho */
.popover { max-width: 320px; font-size: 0.85rem; }
/* ===== PÁGINA DE AYUDA ===== */
.help-toc {
background: #f1f3f5;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 10px 14px;
font-size: 0.9rem;
line-height: 1.8;
}
.help-toc a {
color: var(--accent-blue);
margin-right: 6px;
}
.help-section {
border-top: 2px solid var(--border-color);
padding-top: 1.2rem;
margin-top: 1.5rem;
}
.help-section h3 {
font-size: 1.3rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 0.8rem;
}
.help-section h4 {
font-size: 1rem;
font-weight: 700;
color: #2c3e50;
margin-top: 1rem;
margin-bottom: 0.3rem;
scroll-margin-top: 60px;
}
.help-section h4:target {
background: #fff3cd;
padding: 4px 8px;
border-radius: 4px;
}
.help-section p {
color: #495057;
font-size: 0.9rem;
margin-bottom: 0.8rem;
}
/* Botón "Abrir pantalla / Ir a la pestaña" inyectado por JS en la cabecera de
cada sección de ayuda con pantalla destino (ver help.html + routes/help.py).
`display: flow-root` hace que la cabecera contenga su float y no se solape
con el párrafo siguiente. */
.help-section h2,
.help-section h3 {
display: flow-root;
}
.help-open-screen {
float: right;
font-size: 0.72rem;
font-weight: 600;
padding: 0.1rem 0.55rem;
margin-left: 0.75rem;
line-height: 1.6;
white-space: nowrap;
}
.help-open-screen i {
font-size: 0.85em;
}
/* ============================================================
AYUDA IAed — caja de preguntas en lenguaje natural (/ayuda)
============================================================ */
.help-ai-box {
background: #f8f9fb;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 0.9rem 1rem;
margin-bottom: 1.5rem;
}
.help-ai-bar {
display: flex;
align-items: center;
gap: 0.5rem;
}
.help-ai-icon {
color: #6f42c1;
font-size: 1.15rem;
flex: 0 0 auto;
}
.help-ai-box .form-control {
flex: 1 1 auto;
}
.help-ai-box #help-ai-send {
flex: 0 0 auto;
white-space: nowrap;
}
.help-ai-cap-note {
margin-top: 0.6rem;
color: #856404;
background: #fff3cd;
border: 1px solid #ffeeba;
border-radius: 6px;
padding: 0.4rem 0.6rem;
font-size: 0.85rem;
}
.help-ai-answer {
margin-top: 0.8rem;
background: #fff;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 0.8rem 1rem;
font-size: 0.9rem;
color: #333;
}
.help-ai-answer.help-ai-warn {
background: #fff3cd;
border-color: #ffeeba;
color: #856404;
}
.help-ai-text {
white-space: pre-wrap;
line-height: 1.5;
}
.help-ai-link {
margin-top: 0.7rem;
}
.help-ai-disclaimer {
margin: 0.6rem 0 0;
font-size: 0.75rem;
color: #8a929b;
}
/* ============================================================
LISTADO DE RESERVAS — barra de orden y responsive móvil
============================================================ */
/* Barra de pills de orden */
.bookings-sort-bar .btn-xs { font-size: 0.72rem; }
.bookings-sort-bar .sort-arrow { font-size: 0.7em; }
/* Cabeceras | con data-sort-pill: clicables, mismo comportamiento
visual que las pills (flecha al campo activo, hover sutil). El JS de
bookings_sort.js procesa cualquier elemento con data-sort-pill, así
que no hace falta cambiar nada del JS — solo estilos. */
th[data-sort-pill],
th [data-sort-pill] {
cursor: pointer;
user-select: none;
}
th[data-sort-pill]:hover,
th [data-sort-pill]:hover {
background-color: rgba(0,0,0,0.05);
}
th[data-sort-pill].active,
th [data-sort-pill].active {
background-color: rgba(0,0,0,0.08);
}
th[data-sort-pill] .sort-arrow,
th [data-sort-pill] .sort-arrow {
font-size: 0.7em;
color: #6c757d;
}
/* Centrar verticalmente todas las celdas del listado de reservas en
desktop. Algunas columnas (Propiedad/Localidad, Check-in+Check-out,
Importe+€/noche) tienen 2 líneas y otras solo 1; sin esto, las de 1
línea quedan pegadas arriba y la fila se ve descuadrada. */
#bookings-list-table tbody td,
#bookings-recent-table tbody td,
.bookings-search-table tbody td {
vertical-align: middle;
}
/* En móvil vertical (xs, < 576px), la tabla de reservas se condensa
a 3 columnas:
col 1 → Propiedad / Localidad / Huésped
col 2 → Check-in / Check-out / Nº noches
col 3 → Importe / Check-in online / [Ver]
Cada celda visible inyecta los datos extra mediante .booking-mobile-extra
(oculto en desktop). Las columnas Huésped, Check-out, Noches, Check-in
online y Ver llevan .booking-col-merge para ocultarse en móvil. */
.booking-mobile-extra { display: none; }
.booking-mobile-only { display: none; }
@media (max-width: 575.98px) {
/* Ocultar columnas que se fusionan dentro de las visibles */
.booking-col-merge { display: none !important; }
/* Mostrar inline-spans pensados solo para móvil */
.booking-mobile-only { display: inline; }
/* Mostrar bloques extra solo en móvil */
.booking-mobile-extra {
display: block;
margin-top: 0.25rem;
font-size: 0.8rem;
line-height: 1.25;
}
/* Tabla más compacta */
#bookings-list-table td,
#bookings-recent-table td,
.bookings-search-table td { padding: 0.4rem 0.3rem; vertical-align: top; }
/* Cabecera de la tabla pierde sentido con cols fusionadas → ocultar */
#bookings-list-table thead,
#bookings-recent-table thead,
.bookings-search-table thead { display: none; }
/* El botón Ver dentro del extra ocupa todo el ancho para tap fácil */
.booking-mobile-extra .btn { display: inline-block; }
}
/* ============================================================
DISPOSITIVOS — píldoras con estado de conexión
Cada item se muestra como una pastilla clicable. El color
indica si el equipo está en contacto con el sistema:
verde → ha dado señal en los últimos 150 segundos
rojo → más de 150 s sin contestar (pero menos de 15 días)
negro → más de 15 días sin señal (RIP)
============================================================ */
.items-list {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.item-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.6rem;
border-radius: 0.4rem;
font-size: 0.85rem;
line-height: 1.1;
text-decoration: none !important;
color: #fff !important;
transition: filter 0.15s ease, transform 0.15s ease;
}
.item-pill:hover { filter: brightness(1.08); transform: translateY(-1px); }
.item-pill .item-pill-name { font-weight: 600; }
.item-pill .item-pill-age { opacity: 0.75; font-size: 0.75rem; }
.item-pill-alive { background-color: #28a745; } /* verde — bootstrap success */
.item-pill-offline { background-color: #dc3545; } /* rojo — bootstrap danger */
.item-pill-rip { background-color: #212529; } /* negro — bootstrap dark */
/* Filas de la tabla de componentes son clicables (van a la gráfica) */
.component-row { cursor: pointer; }
.component-row .component-link { color: inherit; text-decoration: none; }
.component-row:hover .component-link { text-decoration: underline; }
/* Tarjetas de estadísticas en la pantalla de gráfica */
.stat-card {
padding: 0.5rem 0.75rem;
text-align: center;
height: 100%;
}
.stat-card .stat-label { font-size: 0.75rem; text-transform: uppercase; opacity: 0.7; }
.stat-card .stat-value { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.stat-card.stat-min .stat-value { color: #28a745; }
.stat-card.stat-avg .stat-value { color: #6c757d; }
.stat-card.stat-max .stat-value { color: #dc3545; }
.stat-card.stat-count .stat-value { color: #0d6efd; }
/* Chips de fuente del historial: el check ✓ aparece sólo cuando
el chip está activo, además del cambio btn-secondary / outline */
#history-card [data-source] .src-on-icon { display: none; }
#history-card [data-source].active .src-on-icon { display: inline-block; }
/* ============================================================
HISTORIAL DEL DISPOSITIVO
Cada fila lleva una banda fina de color a la izquierda según
la fuente del registro: gets (azul), orders (morado), comments
(gris). Las celdas de "Resultado" se truncan a una línea y se
expanden al hacer click en la fila.
============================================================ */
#history-table tbody tr {
cursor: pointer;
border-left: 3px solid transparent;
}
#history-table tbody tr.history-src-gets { border-left-color: #0d6efd; }
#history-table tbody tr.history-src-orders { border-left-color: #6f42c1; }
#history-table tbody tr.history-src-comments { border-left-color: #6c757d; }
#history-table .history-source {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
color: #fff;
font-size: 0.85rem;
margin-right: 0.25rem;
vertical-align: middle;
}
#history-table tbody tr.history-src-gets .history-source { background-color: #0d6efd; }
#history-table tbody tr.history-src-orders .history-source { background-color: #6f42c1; }
#history-table tbody tr.history-src-comments .history-source { background-color: #6c757d; }
/* Resultado: una línea con elipsis hasta que se hace click en la fila */
#history-table .history-result .history-text {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
#history-table tbody tr.expanded .history-result .history-text {
white-space: pre-wrap;
word-break: break-word;
}
/* ============================================================
AÑADIR RESERVA — desplegables de live search
============================================================ */
.live-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1050;
max-height: 280px;
overflow-y: auto;
background: var(--card-bg);
border: 1px solid var(--border-color);
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;
}
.live-item.active { background-color: #eef2ff; }
/* Typeahead de filtro (filter-typeahead.js): |