/* ═══════════════════════════════════════════════════════════════
RODSX — Gestor de Alojamientos (PMS)
Hoja propia del módulo. Se enlaza DESPUÉS de rodsx.css y reutiliza tal
cual las clases l-* de Lotificaciones (l-card, l-table, l-btn, l-badge,
l-stat, l-input…); aquí solo va lo que el módulo añade:
1. variables de estado 5. alertas (.a-alertas)
2. layout con menú lateral 6. pestañas (.a-tabs)
3. KPIs (.a-kpi-grid) 7. ficha de propiedad (.a-ficha)
4. gráficos CSS (.a-chart) 8. calendario (.a-cal-*)
9. utilidades 10. modo oscuro 11. responsive
Colores: siempre variables del tema (--bg, --white, --border, --ink,
--ink2, --muted, --accent, --gold). Los únicos literales son los de
ESTADO (verde/rojo) y van como tintes rgba para servir en claro y en
oscuro; el modo oscuro solo los aclara un poco (sección 10).
Marcado que esperan los gráficos (lo usan dashboard y reportes):
Barras verticales
Barras horizontales
Colores de barra: --ing (verde) --gas (rojo) --acc (azul, por defecto)
--gold (dorado) --muted (gris)
═══════════════════════════════════════════════════════════════ */
/* ─── 1. VARIABLES DE ESTADO ─────────────────────────────────── */
:root {
--a-verde: #059669;
--a-verde-bg: rgba(5,150,105,.14);
--a-rojo: #e0365a;
--a-rojo-bg: rgba(224,54,90,.12);
--a-oro-bg: rgba(201,149,74,.16);
--a-azul-bg: rgba(26,60,94,.12);
--a-rayas: repeating-linear-gradient(135deg, var(--bg) 0 5px, var(--border) 5px 8px);
}
/* ─── 2. LAYOUT ──────────────────────────────────────────────── */
/* Overlay a pantalla completa, como lotesOverlay (display:flex lo pone JS). */
#alojOverlay {
display:none; position:fixed; inset:0; z-index:6000;
background:var(--bg); flex-direction:column; overflow:hidden;
}
/* Menú lateral + cuerpo. En móvil el lateral desaparece y manda la tira
superior desplazable (l-mobile-nav); en escritorio (≥900px) al revés. */
.a-layout { display:flex; flex:1; min-height:0; }
.a-sidebar {
display:none; width:224px; flex-shrink:0; flex-direction:column; gap:4px;
padding:16px 12px; background:var(--white); border-right:1px solid var(--border);
overflow-y:auto; scrollbar-width:thin;
}
.a-sidebar .l-nav-btn {
width:100%; text-align:left; border-radius:10px; padding:9px 14px;
display:flex; align-items:center; justify-content:space-between; gap:8px;
border-color:transparent; background:transparent;
}
.a-sidebar .l-nav-btn:hover { background:var(--bg); border-color:var(--border); color:var(--ink); }
.a-sidebar .l-nav-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.a-sidebar-pie { margin-top:auto; padding:12px 6px 0; font-size:.68rem; color:var(--muted); line-height:1.4; }
.a-main, #alojBody {
flex:1; min-width:0; overflow-y:auto; padding:20px 24px 60px;
-webkit-overflow-scrolling:touch;
}
/* Contador de alertas que el núcleo cuelga del botón Dashboard. */
.a-nav-badge {
min-width:20px; height:20px; padding:0 6px; border-radius:10px;
background:var(--a-rojo); color:#fff; font-size:.65rem; font-weight:800;
display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.l-nav-btn.active .a-nav-badge { background:var(--white); color:var(--accent); }
/* El formulario de reserva (cotización en vivo) necesita más ancho que el
modal de lotes. */
#aModal .l-modal-box { max-width:720px; }
#aModal .l-modal-body { gap:12px; }
/* ─── 3. KPIs ────────────────────────────────────────────────── */
.a-kpi-grid {
display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
gap:12px; margin-bottom:20px;
}
.a-kpi-grid .l-stat { position:relative; overflow:hidden; cursor:default; }
.a-kpi-grid .l-stat.a-kpi--link { cursor:pointer; }
.a-kpi-grid .l-stat.a-kpi--link:hover { border-color:var(--gold); }
.a-kpi-ico { position:absolute; right:12px; top:10px; font-size:1.25rem; opacity:.3; }
.a-kpi-sub { font-size:.7rem; color:var(--muted); }
.a-kpi-delta { font-size:.68rem; font-weight:700; }
.a-kpi-delta--up { color:var(--a-verde); }
.a-kpi-delta--down { color:var(--a-rojo); }
.a-kpi-titulo { font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin:18px 0 8px; }
/* Filtros de rango (Hoy/Semana/Mes/Año/Personalizado) */
.a-rango { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.a-rango .l-input { width:auto; padding:6px 9px; font-size:.76rem; }
.a-rango-btns { display:inline-flex; background:var(--white); border:1.5px solid var(--border); border-radius:10px; padding:3px; gap:2px; }
.a-rango-btn {
border:none; background:none; padding:6px 12px; border-radius:7px; cursor:pointer;
font-family:'DM Sans',sans-serif; font-size:.76rem; font-weight:700; color:var(--muted); white-space:nowrap;
}
.a-rango-btn.active { background:var(--accent); color:#fff; }
/* ─── 4. GRÁFICOS CSS ────────────────────────────────────────── */
.a-chart { --a-chart-alto:180px; width:100%; }
.a-chart-titulo { font-size:.8rem; font-weight:700; color:var(--ink); margin-bottom:10px; }
/* verticales */
.a-chart--v .a-chart-area {
display:flex; gap:6px; align-items:flex-end; overflow-x:auto; padding-bottom:2px;
scrollbar-width:thin;
}
.a-chart-col { flex:1 1 0; min-width:26px; display:flex; flex-direction:column; justify-content:flex-end; }
.a-chart-val { height:16px; font-size:.6rem; text-align:center; color:var(--ink2); white-space:nowrap; overflow:hidden; }
.a-chart-bars {
height:var(--a-chart-alto); display:flex; align-items:flex-end; justify-content:center; gap:3px;
border-bottom:1px solid var(--border); padding:0 2px;
}
.a-chart-bar {
flex:1 1 0; max-width:30px; min-height:2px; border-radius:5px 5px 0 0;
background:var(--accent); transition:height .3s, filter .15s; position:relative;
}
.a-chart-bar:hover, .a-chart-fill:hover { filter:brightness(1.12); }
.a-chart-lbl { height:20px; line-height:20px; font-size:.65rem; text-align:center; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.a-chart-col--hoy .a-chart-lbl { color:var(--accent); font-weight:700; }
/* horizontales */
.a-chart--h .a-chart-row {
display:grid; grid-template-columns:minmax(80px, 150px) 1fr auto; gap:10px;
align-items:center; padding:5px 0; border-bottom:1px dashed var(--border);
}
.a-chart--h .a-chart-row:last-child { border-bottom:none; }
.a-chart-row-lbl { font-size:.76rem; font-weight:600; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.a-chart-track { height:12px; background:var(--bg); border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.a-chart-fill { height:100%; min-width:2px; border-radius:6px; background:var(--accent); transition:width .3s; }
.a-chart-row-val { font-size:.74rem; font-weight:700; color:var(--ink); white-space:nowrap; font-family:'Cormorant Garamond',serif; }
/* colores compartidos por barras, rellenos y puntos de leyenda */
.a-chart-bar--ing, .a-chart-fill.a-chart-bar--ing, .a-chart-dot.a-chart-bar--ing { background:var(--a-verde); }
.a-chart-bar--gas, .a-chart-fill.a-chart-bar--gas, .a-chart-dot.a-chart-bar--gas { background:var(--a-rojo); }
.a-chart-bar--acc { background:var(--accent); }
.a-chart-bar--gold { background:var(--gold); }
.a-chart-bar--muted{ background:var(--border); }
.a-chart-leyenda { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:.7rem; color:var(--muted); }
.a-chart-leyenda span { display:inline-flex; align-items:center; gap:5px; }
.a-chart-dot { display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--accent); }
.a-chart-vacio { padding:28px; text-align:center; color:var(--muted); font-size:.8rem; background:var(--bg); border-radius:10px; }
/* ─── 5. ALERTAS ─────────────────────────────────────────────── */
.a-alertas { display:flex; flex-direction:column; gap:6px; }
.a-alerta {
display:flex; align-items:center; gap:10px; padding:9px 12px;
background:var(--white); border:1px solid var(--border); border-left:4px solid var(--accent);
border-radius:10px; font-size:.78rem; color:var(--ink2); cursor:pointer; transition:background .15s;
}
.a-alerta:hover { background:var(--bg); }
.a-alerta--info { border-left-color:var(--accent); }
.a-alerta--aviso { border-left-color:var(--gold); }
.a-alerta--urgente { border-left-color:var(--a-rojo); }
.a-alerta-ico { font-size:1rem; flex-shrink:0; }
.a-alerta-txt { flex:1; min-width:0; }
.a-alerta-txt b { color:var(--ink); }
.a-alerta-ir { color:var(--muted); font-size:1.1rem; flex-shrink:0; }
.a-alertas-vacio { padding:18px; text-align:center; color:var(--muted); font-size:.8rem; background:var(--bg); border-radius:10px; }
/* ─── 6. PESTAÑAS ────────────────────────────────────────────── */
.a-tabs {
display:flex; gap:2px; overflow-x:auto; border-bottom:1px solid var(--border);
margin-bottom:16px; scrollbar-width:none;
}
.a-tabs::-webkit-scrollbar { display:none; }
.a-tab {
border:none; background:none; padding:9px 14px; margin-bottom:-1px; cursor:pointer;
font-family:'DM Sans',sans-serif; font-size:.8rem; font-weight:700; color:var(--muted);
border-bottom:2px solid transparent; white-space:nowrap; transition:color .15s, border-color .15s;
}
.a-tab:hover { color:var(--ink); }
.a-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.a-tab-panel { display:none; }
.a-tab-panel.active { display:block; }
/* ─── 7. FICHA DE PROPIEDAD / HUÉSPED ───────────────────────── */
.a-ficha { display:flex; flex-direction:column; gap:14px; }
.a-ficha-head { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.a-ficha-head > div { flex:1; min-width:200px; }
.a-ficha-titulo { font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:700; color:var(--ink); line-height:1.15; }
.a-ficha-sub { font-size:.78rem; color:var(--muted); margin-top:3px; }
.a-ficha-acciones { display:flex; gap:6px; flex-wrap:wrap; }
.a-ficha-fotos { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.a-ficha-fotos img {
height:170px; min-width:220px; max-width:320px; object-fit:cover; border-radius:12px;
border:1px solid var(--border); background:var(--bg); cursor:zoom-in; flex-shrink:0;
}
.a-ficha-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.a-ficha-grid .l-card { margin-bottom:0; }
.a-ficha-datos { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px 14px; }
.a-ficha-dato { display:flex; flex-direction:column; gap:2px; }
.a-ficha-k { font-size:.62rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.a-ficha-v { font-size:.86rem; color:var(--ink); font-weight:600; word-break:break-word; }
.a-ficha-servicios { display:flex; flex-wrap:wrap; gap:6px; }
.a-ficha-serv { padding:4px 10px; border-radius:20px; background:var(--bg); border:1px solid var(--border); font-size:.7rem; color:var(--ink2); }
.a-ficha-desc { font-size:.82rem; color:var(--ink2); line-height:1.55; white-space:pre-line; }
/* ─── 8. CALENDARIO ──────────────────────────────────────────── */
.a-cal { display:flex; flex-direction:column; }
.a-cal-barra { align-items:center; gap:10px; }
.a-cal-barra-izq, .a-cal-barra-der { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.a-cal-vistas { display:inline-flex; background:var(--white); border:1.5px solid var(--border); border-radius:10px; padding:3px; gap:2px; }
.a-cal-vista-btn {
border:none; background:none; padding:6px 12px; border-radius:7px; cursor:pointer;
font-family:'DM Sans',sans-serif; font-size:.76rem; font-weight:700; color:var(--muted); white-space:nowrap;
transition:background .15s, color .15s;
}
.a-cal-vista-btn:hover { color:var(--ink); }
.a-cal-vista-btn.active { background:var(--accent); color:#fff; }
.a-cal-nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.a-cal-titulo {
font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:700; color:var(--ink);
min-width:150px; text-align:center; white-space:nowrap;
}
.a-cal-fecha { width:auto; padding:5px 8px; font-size:.74rem; }
.a-cal-sel { width:auto; max-width:230px; padding:7px 10px; font-size:.78rem; }
.a-cal-check { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; color:var(--muted); white-space:nowrap; cursor:pointer; user-select:none; }
.a-cal-check input { accent-color:var(--accent); }
.a-cal-aviso {
padding:10px 14px; border-radius:10px; font-size:.78rem; color:var(--ink2); margin-bottom:12px;
background:var(--a-oro-bg); border:1px solid var(--gold);
}
.a-cal-aviso--inactiva { background:var(--bg); border-color:var(--border); color:var(--muted); }
.a-cal-nota { font-size:.74rem; color:var(--muted); margin-top:-6px; margin-bottom:12px; }
/* cuadrícula del mes: el fondo de borde + gap de 1px dibuja la rejilla sin
bordes dobles entre celdas */
.a-cal-grid {
display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:1px;
background:var(--border); border:1.5px solid var(--border); border-radius:14px; overflow:hidden;
box-shadow:var(--card-shadow);
}
.a-cal-dow {
background:var(--bg); padding:8px 6px; text-align:center;
font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
}
.a-cal-dow--finde { color:var(--gold); }
.a-cal-dia {
background:var(--white); min-height:104px; padding:6px; min-width:0;
display:flex; flex-direction:column; gap:4px; cursor:pointer; position:relative;
transition:background .15s;
}
.a-cal-dia:hover { background:var(--bg); }
.a-cal-dia:hover::after {
content:'+'; position:absolute; right:7px; top:3px; font-size:.95rem; font-weight:700;
color:var(--muted); opacity:.7; pointer-events:none;
}
.a-cal-dia--fuera { background:var(--bg); }
.a-cal-dia--fuera .a-cal-num { opacity:.4; }
.a-cal-dia--pasado .a-cal-num { color:var(--muted); }
.a-cal-dia--finde:not(.a-cal-dia--fuera) { background:color-mix(in srgb, var(--white) 94%, var(--gold)); }
.a-cal-dia--hoy { box-shadow:inset 0 0 0 2px var(--accent); }
.a-cal-dia--mant { background-image:var(--a-rayas); cursor:not-allowed; }
.a-cal-dia--mant:hover::after { content:''; }
.a-cal-num {
width:24px; height:24px; border-radius:50%; flex-shrink:0;
display:inline-flex; align-items:center; justify-content:center;
font-size:.72rem; font-weight:700; color:var(--ink2);
}
.a-cal-num--hoy { background:var(--accent); color:#fff; }
.a-cal-chips { display:flex; flex-direction:column; gap:3px; min-width:0; }
/* chips: el color de estado entra por dos variables (--chip-ink / --chip-bg)
que fijan las clases a-cal-chip--; la misma pareja la usan las
celdas de disponibilidad (a-cal-c-) */
.a-cal-chip {
--chip-ink:var(--muted); --chip-bg:var(--bg);
font-size:.66rem; font-weight:600; line-height:1.4; padding:2px 6px; border-radius:4px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
background:var(--chip-bg); color:var(--chip-ink); border-left:3px solid var(--chip-ink);
transition:filter .15s, transform .1s;
}
.a-cal-chip:hover { filter:brightness(.93); transform:translateX(1px); }
.a-cal-chip b { font-weight:800; }
.a-cal-chip--gold, .a-cal-c-gold { --chip-ink:var(--gold); --chip-bg:var(--a-oro-bg); }
.a-cal-chip--blue, .a-cal-c-blue { --chip-ink:var(--accent); --chip-bg:var(--a-azul-bg); }
.a-cal-chip--green, .a-cal-c-green { --chip-ink:var(--a-verde); --chip-bg:var(--a-verde-bg); }
.a-cal-chip--gray, .a-cal-c-gray { --chip-ink:var(--muted); --chip-bg:var(--bg); }
.a-cal-chip--red, .a-cal-c-red { --chip-ink:var(--a-rojo); --chip-bg:var(--a-rojo-bg); }
.a-cal-chip--bloqueo {
--chip-ink:var(--muted); --chip-bg:transparent;
background-image:var(--a-rayas); border-left-style:dashed; color:var(--ink2);
}
/* continuación de una estancia: sin el borde fuerte, que marca la entrada */
.a-cal-chip:not(.a-cal-chip--ini) { border-left-style:dotted; }
.a-cal-chip--ini { border-top-left-radius:9px; border-bottom-left-radius:9px; }
.a-cal-chip--fin { border-top-right-radius:9px; border-bottom-right-radius:9px; }
.a-cal-chip--off { opacity:.55; text-decoration:line-through; }
.a-cal-mas {
border:none; background:none; padding:0 4px; text-align:left; cursor:pointer;
font-family:inherit; font-size:.64rem; font-weight:700; color:var(--accent);
}
.a-cal-mas:hover { text-decoration:underline; }
/* leyenda */
.a-cal-leyenda { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:12px; font-size:.7rem; color:var(--muted); }
.a-cal-leyenda-item { display:inline-flex; align-items:center; gap:5px; }
.a-cal-sw { display:inline-block; width:16px; height:11px; padding:0; border-radius:3px; cursor:default; min-width:0; }
.a-cal-sw.a-cal-disp { width:14px; height:14px; border-radius:4px; }
.a-cal-sw-hoy { width:14px; height:14px; font-size:0; }
/* semana y día: tablas con la primera columna fija */
.a-cal-tabla { min-width:720px; table-layout:fixed; }
.a-cal-tabla th, .a-cal-tabla td { vertical-align:top; }
.a-cal-tabla th.a-cal-prop, .a-cal-tabla td.a-cal-prop,
.a-cal-disp-tabla th.a-cal-prop, .a-cal-disp-tabla td.a-cal-prop {
position:sticky; left:0; z-index:1; background:var(--white); width:170px; min-width:170px;
border-right:1px solid var(--border);
}
.a-cal-tabla th.a-cal-prop { background:var(--bg); }
.a-cal-tabla td.a-cal-celda { padding:6px; height:66px; cursor:pointer; transition:background .15s; }
.a-cal-tabla td.a-cal-celda:hover { background:var(--bg); }
.a-cal-tabla td.a-cal-celda--mant { background-image:var(--a-rayas); cursor:not-allowed; }
.a-cal-tabla .a-cal-hoy, .a-cal-disp-tabla .a-cal-hoy { background:var(--accent2); }
.a-cal-tabla th.a-cal-hoy { background:var(--accent2); }
.a-cal-dia-th { text-align:center; }
.a-cal-dia-th .a-cal-num { margin:2px auto 0; display:flex; }
.a-cal-dia-th-dow { display:block; }
.a-cal-th-sub { display:block; font-weight:400; text-transform:none; letter-spacing:0; font-size:.62rem; opacity:.8; }
.a-cal-hora { font-size:.6rem; color:var(--muted); margin-bottom:3px; text-transform:uppercase; letter-spacing:.05em; }
.a-cal-nada { font-size:.7rem; color:var(--border); }
.a-cal-nada--mas { color:var(--muted); opacity:0; transition:opacity .15s; }
.a-cal-celda:hover .a-cal-nada--mas { opacity:1; }
.a-cal-fila--mant td { opacity:.75; }
.a-cal-fila--mant td.a-cal-prop { opacity:1; }
.a-cal-prop-fila { display:flex; align-items:center; gap:8px; min-width:0; }
.a-cal-prop-foto {
width:30px; height:30px; border-radius:8px; object-fit:cover; flex-shrink:0;
background:var(--bg); border:1px solid var(--border);
display:inline-flex; align-items:center; justify-content:center; font-size:.9rem;
}
.a-cal-prop-txt { min-width:0; display:flex; flex-direction:column; gap:2px; }
.a-cal-prop-codigo { font-size:.7rem; font-weight:800; color:var(--accent); letter-spacing:.03em; }
.a-cal-prop-nombre { font-size:.76rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.a-cal-prop-txt .l-badge { align-self:flex-start; font-size:.58rem; padding:2px 7px; }
.a-cal-resumen { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; margin-bottom:14px; }
.a-cal-resumen .l-stat { padding:12px 14px; }
/* disponibilidad propiedad × día */
.a-cal-disp-tabla { border-collapse:separate; border-spacing:2px; width:100%; }
.a-cal-disp-tabla th {
padding:4px 2px; font-size:.6rem; font-weight:700; color:var(--muted); text-align:center;
text-transform:uppercase; letter-spacing:.03em; background:none; border-bottom:none;
}
.a-cal-disp-tabla th.a-cal-prop { text-align:left; padding:8px 14px; font-size:.67rem; }
.a-cal-disp-tabla td.a-cal-prop { padding:6px 14px; }
.a-cal-disp-th-dow { display:block; font-size:.55rem; opacity:.7; }
.a-cal-disp-th.a-cal-dow--finde { color:var(--gold); }
.a-cal-disp {
--chip-ink:var(--accent);
width:26px; min-width:26px; height:26px; padding:0; border-radius:5px; text-align:center;
font-size:.62rem; line-height:26px; cursor:pointer;
background:var(--bg); border:1px solid var(--border); color:#fff;
transition:transform .1s, border-color .15s;
}
.a-cal-disp:hover { transform:scale(1.08); }
.a-cal-disp--libre:hover { border-color:var(--accent); }
.a-cal-disp--ocu { background:var(--chip-ink); border-color:transparent; }
.a-cal-disp--out { background:linear-gradient(135deg, var(--muted) 50%, var(--bg) 50%); }
.a-cal-disp--cambio { background:linear-gradient(135deg, var(--muted) 50%, var(--chip-ink) 50%); border-color:transparent; }
.a-cal-disp--bloq { background-image:var(--a-rayas); color:var(--ink2); font-size:.6rem; }
.a-cal-disp--mant { background-image:var(--a-rayas); color:var(--muted); cursor:not-allowed; opacity:.6; }
.a-cal-disp--mant:hover { transform:none; }
.a-cal-disp--hoy { box-shadow:0 0 0 2px var(--accent); }
.a-cal-disp-th-pct, .a-cal-disp-pct { min-width:70px; font-size:.7rem; font-weight:700; color:var(--ink2); white-space:nowrap; text-align:center; }
.a-cal-disp-barra { height:5px; background:var(--border); border-radius:3px; overflow:hidden; margin-bottom:3px; }
.a-cal-disp-barra-fill { height:100%; background:var(--a-verde); border-radius:3px; }
.a-cal-disp-tot td { font-size:.62rem; color:var(--muted); text-align:center; padding:4px 0; font-weight:700; }
.a-cal-disp-tot td.a-cal-prop { text-align:left; font-size:.67rem; text-transform:uppercase; letter-spacing:.07em; }
.a-cal-disp-tot td.a-cal-disp-tot--lleno { color:var(--a-rojo); }
/* ─── 9. UTILIDADES ──────────────────────────────────────────── */
.a-vacio { text-align:center; padding:40px 20px; }
.a-vacio-ico { font-size:2rem; margin-bottom:10px; }
.a-vacio-titulo { font-family:'Cormorant Garamond',serif; font-size:1.2rem; color:var(--accent); font-weight:700; }
.a-vacio-txt { color:var(--muted); font-size:.82rem; margin:6px 0 14px; }
.a-nota { font-size:.72rem; color:var(--muted); padding:8px 12px; background:var(--bg); border-radius:8px; line-height:1.45; }
.a-muted { color:var(--muted); }
.a-money { font-family:'Cormorant Garamond',serif; font-weight:700; white-space:nowrap; }
.a-pos { color:var(--a-verde); }
.a-neg { color:var(--a-rojo); }
.a-right { text-align:right; }
.a-flex { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.a-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.a-grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.a-acciones { display:flex; gap:4px; flex-wrap:wrap; }
.a-cotizacion { background:var(--bg); border:1px dashed var(--border); border-radius:10px; padding:12px 14px; font-size:.8rem; }
.a-cotizacion-fila { display:flex; justify-content:space-between; gap:10px; padding:3px 0; }
.a-cotizacion-total { border-top:1px solid var(--border); margin-top:6px; padding-top:8px; font-weight:800; color:var(--ink); font-size:.92rem; }
.a-disp-ok { color:var(--a-verde); font-weight:700; font-size:.76rem; }
.a-disp-bad { color:var(--a-rojo); font-weight:700; font-size:.76rem; }
.a-check-list { display:flex; flex-direction:column; gap:5px; }
.a-check-list label { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--ink2); cursor:pointer; }
.a-check-list input { accent-color:var(--accent); }
.a-check-list .hecho { text-decoration:line-through; color:var(--muted); }
.a-servicios-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:6px 10px; }
.a-fotos-mini { display:flex; gap:6px; flex-wrap:wrap; }
.a-fotos-mini img { width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--border); background:var(--bg); }
.a-ficha-fotos a { flex-shrink:0; display:block; }
/* subida de fotos desde el dispositivo (formularios de propiedad y tarea):
botón-etiqueta que envuelve el input file (oculto pero accesible por
teclado) + cuadrícula de miniaturas de 72px con ✕ superpuesta */
.a-fotos-campo { display:flex; flex-direction:column; gap:8px; }
.a-fotos-barra { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.a-foto-btn { position:relative; display:inline-flex; align-items:center; gap:6px; cursor:pointer; overflow:hidden; }
.a-foto-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none; }
.a-foto-btn:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.a-fotos-nota { font-size:.72rem; color:var(--muted); }
.a-fotos-grid { display:flex; flex-wrap:wrap; gap:8px; }
.a-fotos-grid:empty { display:none; }
.a-foto-mini {
position:relative; width:72px; height:72px; border-radius:8px; overflow:hidden;
border:1px solid var(--border); background:var(--bg); flex-shrink:0;
}
.a-foto-mini img { width:100%; height:100%; object-fit:cover; display:block; }
.a-foto-mini--nueva { box-shadow:inset 0 0 0 2px var(--gold); }
.a-foto-quitar {
position:absolute; top:3px; right:3px; width:20px; height:20px; padding:0; border:none; border-radius:50%;
background:rgba(0,0,0,.6); color:#fff; font-size:.68rem; line-height:20px; text-align:center; cursor:pointer;
transition:background .15s;
}
.a-foto-quitar:hover { background:var(--a-rojo); }
.a-foto-nueva {
position:absolute; left:0; right:0; bottom:0; padding:1px 0; text-align:center;
background:rgba(0,0,0,.55); color:#fff; font-size:.55rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
.a-wa-menu { position:relative; display:inline-block; }
.a-wa-menu-lista {
position:absolute; right:0; top:100%; z-index:20; min-width:200px; margin-top:4px; padding:6px;
background:var(--white); border:1.5px solid var(--border); border-radius:10px; box-shadow:var(--card-shadow-hover);
display:none; flex-direction:column; gap:2px;
}
.a-wa-menu.open .a-wa-menu-lista { display:flex; }
.a-wa-menu-lista button {
border:none; background:none; text-align:left; padding:8px 10px; border-radius:7px; cursor:pointer;
font-family:'DM Sans',sans-serif; font-size:.78rem; color:var(--ink2);
}
.a-wa-menu-lista button:hover { background:var(--bg); color:var(--ink); }
/* ─── 10. MODO OSCURO ────────────────────────────────────────── */
/* Casi todo ya usa variables; aquí solo se aclaran los literales de estado
(sobre fondo oscuro el verde/rojo "de día" pierden contraste) y se
corrigen los fondos que las l-* traen en blanco literal. */
[data-theme="dark"] {
--a-verde: #34d399;
--a-verde-bg: rgba(52,211,153,.16);
--a-rojo: #f87171;
--a-rojo-bg: rgba(248,113,113,.16);
--a-oro-bg: rgba(212,169,85,.2);
--a-azul-bg: rgba(74,138,191,.22);
}
[data-theme="dark"] .a-sidebar,
[data-theme="dark"] .a-alerta,
[data-theme="dark"] .a-cal-dia,
[data-theme="dark"] .a-cal-vistas,
[data-theme="dark"] .a-rango-btns,
[data-theme="dark"] .a-wa-menu-lista { background:var(--white); border-color:var(--border); }
[data-theme="dark"] .a-cal-dia--fuera { background:var(--bg); }
[data-theme="dark"] .a-cal-dia--finde:not(.a-cal-dia--fuera) { background:color-mix(in srgb, var(--white) 92%, var(--gold)); }
[data-theme="dark"] .a-cal-dia:hover { background:var(--bg); }
[data-theme="dark"] .a-cal-tabla td.a-cal-prop,
[data-theme="dark"] .a-cal-disp-tabla td.a-cal-prop { background:var(--white); }
[data-theme="dark"] .a-cal-tabla th.a-cal-prop { background:var(--bg); }
[data-theme="dark"] .a-cal-disp { background-color:var(--bg); }
[data-theme="dark"] .a-cal-disp--ocu { background-color:var(--chip-ink); }
[data-theme="dark"] .a-cal-nada { color:var(--border); }
[data-theme="dark"] .a-kpi-ico { opacity:.45; }
[data-theme="dark"] .a-cal-chip--bloqueo, [data-theme="dark"] .a-cal-disp--bloq { color:var(--ink); }
/* rodsx.css pinta .l-btn-outline con fondo blanco literal: la etiqueta de
"Añadir fotos" y las miniaturas toman las variables del tema */
[data-theme="dark"] .a-foto-btn { background:var(--white); border-color:var(--border); color:var(--ink); }
[data-theme="dark"] .a-foto-mini { background:var(--bg); border-color:var(--border); }
[data-theme="dark"] .a-foto-quitar { background:rgba(0,0,0,.7); }
/* rodsx.css pinta .l-nav-btn y .l-mobile-nav con background:white literal y
no les da regla oscura. El lateral ya pone sus botones transparentes, pero
la tira móvil (#alojMobileNav) y las pestañas de Reportes (.a-tabs) quedaban
como píldoras blancas con texto gris claro sobre fondo oscuro. Solo se
cambia el fondo (borde y texto ya van con variables); :not(.active) deja
intacto el azul del botón activo y el lateral no entra en estos selectores,
así conserva su transparente/hover. */
[data-theme="dark"] #alojOverlay .l-mobile-nav { background:var(--white); }
[data-theme="dark"] #alojOverlay .l-mobile-nav .l-nav-btn:not(.active),
[data-theme="dark"] .a-tabs .l-nav-btn:not(.active) { background:var(--white); }
/* ─── 11. RESPONSIVE ─────────────────────────────────────────── */
@media (min-width: 900px) {
.a-sidebar { display:flex; }
#alojOverlay .l-mobile-nav { display:none; }
.a-ficha-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 899px) {
/* rodsx.css solo enseña la tira móvil por debajo de 820px; este módulo la
usa hasta 899px porque el lateral no cabe antes */
#alojOverlay .l-mobile-nav { display:flex; }
#alojOverlay .l-nav-strip { display:none; }
.a-main, #alojBody { padding:14px 14px 48px; }
.a-grid-2, .a-grid-3 { grid-template-columns:1fr; }
#aModal .l-modal-box { max-width:100%; }
}
@media (max-width: 700px) {
.a-kpi-grid { grid-template-columns:1fr 1fr; }
.a-cal-barra { flex-direction:column; align-items:stretch; }
.a-cal-barra-izq, .a-cal-barra-der { justify-content:space-between; }
.a-cal-titulo { min-width:0; font-size:1rem; }
.a-cal-sel { max-width:100%; flex:1; }
/* en pantallas estrechas los chips pasan a barras de color sin texto:
el nombre no cabe y la mancha de color ya dice qué hay */
.a-cal-grid .a-cal-dia { min-height:62px; padding:4px; gap:2px; }
.a-cal-grid .a-cal-chip { font-size:0; height:6px; padding:0; border-left:none; background:var(--chip-ink); border-radius:3px; }
.a-cal-grid .a-cal-chip--bloqueo { background:var(--muted); opacity:.5; }
.a-cal-grid .a-cal-mas { font-size:.58rem; padding:0; }
.a-cal-num { width:20px; height:20px; font-size:.66rem; }
.a-cal-dia:hover::after { content:''; }
.a-chart { --a-chart-alto:130px; }
.a-chart--h .a-chart-row { grid-template-columns:minmax(60px, 100px) 1fr auto; gap:6px; }
.a-ficha-fotos img { height:130px; min-width:170px; }
}
@media (max-width: 480px) {
.a-kpi-grid { gap:8px; }
.a-kpi-grid .l-stat { padding:12px; }
.a-kpi-grid .l-stat-val { font-size:1.25rem; }
.a-cal-vista-btn { padding:6px 9px; font-size:.7rem; }
.a-cal-resumen { grid-template-columns:1fr 1fr; }
}