/* ============================================================
estilos.css — Sistema Integral de Condominios (Colombia)
Mismo sistema visual de celularesmedellin.com: paleta azul profundo
(marca) + naranja (acción/alerta), Bootstrap 5 + Font Awesome.
Portado de CMS_celularesmedellin/assets/css/estilos.css, podando lo
propio de un marketplace (chat, tienda, buscador flotante, Google,
suscripción Nequi) y agregando lo propio de este dominio (paneles por
rol, estados de bitácora/tareas/inspecciones).
============================================================ */
:root{
--cm-azul: #123262;
--cm-azul-2: #1a3f7a;
--cm-naranja: #FF7A1A;
--cm-naranja-2:#E8620A;
--cm-ambar: #F59E0B;
--cm-verde: #16A34A;
--cm-wa: #25D366;
--cm-gris: #F4F6F9;
--cm-texto: #1F2937;
}
body{
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--cm-texto);
}
.container{ --bs-gutter-x: 2rem; }
/* ── Reasignar el "primary" de Bootstrap ── */
:root{
--bs-primary: var(--cm-azul);
--bs-primary-rgb: 18,50,98;
--bs-primary-text-emphasis: var(--cm-azul);
--bs-primary-bg-subtle: #dbe3ee;
--bs-primary-border-subtle: #9fb0c9;
--bs-link-color: var(--cm-azul);
--bs-link-color-rgb: 18,50,98;
--bs-link-hover-color: var(--cm-naranja-2);
--bs-link-hover-color-rgb: 232,98,10;
}
.btn-primary{
--bs-btn-bg:var(--cm-azul); --bs-btn-border-color:var(--cm-azul);
--bs-btn-hover-bg:var(--cm-azul-2); --bs-btn-hover-border-color:var(--cm-azul-2);
--bs-btn-active-bg:var(--cm-azul-2); --bs-btn-active-border-color:var(--cm-azul-2);
--bs-btn-disabled-bg:var(--cm-azul); --bs-btn-disabled-border-color:var(--cm-azul);
}
.btn-outline-primary{
--bs-btn-color:var(--cm-azul); --bs-btn-border-color:var(--cm-azul);
--bs-btn-hover-bg:var(--cm-azul); --bs-btn-hover-border-color:var(--cm-azul);
--bs-btn-active-bg:var(--cm-azul); --bs-btn-active-border-color:var(--cm-azul);
--bs-btn-disabled-color:var(--cm-azul); --bs-btn-disabled-border-color:var(--cm-azul);
}
/* ── Navbar ── */
.cm-navbar{ background: linear-gradient(90deg, var(--cm-azul), var(--cm-azul-2)); }
.cm-navbar .nav-link{ font-weight:500; white-space:nowrap; }
.cm-navbar .nav-link.active{ color:#fff !important; border-bottom:2px solid var(--cm-naranja); }
.cm-navbar .dropdown-menu{ z-index:1030; }
@media(min-width:992px){
.cm-navbar .navbar-nav .nav-link{ padding-left:.6rem; padding-right:.6rem; }
.cm-navbar .navbar-collapse{ flex-wrap:wrap; row-gap:.35rem; }
}
.navbar-collapse.show{ background: var(--cm-azul); padding:12px; border-radius:8px; }
.navbar-collapse.show .nav-item,
.navbar-collapse.collapsing .nav-item{ margin-bottom:.2rem; }
.navbar-collapse.show .nav-item:last-child,
.navbar-collapse.collapsing .nav-item:last-child{ margin-bottom:0; }
.navbar-collapse.show .navbar-nav .btn,
.navbar-collapse.collapsing .navbar-nav .btn{
width:100%; justify-content:center; margin-top:.15rem;
padding:.5rem 1rem; font-size:1rem;
}
/* ── Aviso de modo fantasma (suplantación superadmin→admin→empleado) ── */
.cm-fantasma{
background:#B91C1C; color:#fff; padding:.55rem 0; font-size:.85rem; font-weight:600;
text-align:center;
}
.cm-fantasma i{ color:#FCA5A5; }
.cm-fantasma-salir{
display:inline-flex; align-items:center;
color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
padding:.15rem .7rem; border-radius:20px; text-decoration:none; font-weight:700;
transition:background .15s;
}
.cm-fantasma-salir:hover{ background:rgba(255,255,255,.3); color:#fff; }
/* ── Barra de subpaneles (submenú de módulos del administrador) ── */
.cm-subnav{ background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.cm-sub{
display:inline-flex; align-items:center;
padding:.4rem .9rem; border-radius:30px;
font-size:.9rem; font-weight:600; text-decoration:none;
color:var(--cm-azul); background:var(--cm-gris);
border:1px solid transparent; transition:all .15s;
}
.cm-sub:hover{ background:#e6ecf5; color:var(--cm-azul); transform:translateY(-1px); }
.cm-sub.activo{ background:var(--cm-azul); color:#fff; }
/* ── Tarjetas de métrica del dashboard ── */
.cm-metrica{
border:none; border-radius:14px; background:#fff;
border-top:3px solid var(--cm-azul);
box-shadow:0 4px 14px rgba(15,44,89,.08);
transition:transform .2s, box-shadow .2s;
}
.cm-metrica:hover{ transform:translateY(-3px); box-shadow:0 8px 22px rgba(15,44,89,.14); }
a.cm-metrica, a.cm-metrica:hover{ color:var(--cm-texto); }
.cm-metrica-activa{ outline:2px solid var(--cm-naranja); outline-offset:-1px; }
.cm-ico{
width:46px; height:46px; border-radius:12px;
display:flex; align-items:center; justify-content:center;
font-size:1.15rem; color:#fff; background:var(--cm-azul);
transition:transform .2s;
}
.cm-metrica:hover .cm-ico{ transform:scale(1.08) rotate(-4deg); }
.cm-badge-kpi{
display:flex; align-items:center; justify-content:center;
width:26px; height:26px; border-radius:50%; flex-shrink:0;
font-size:.85rem; font-weight:700; padding:0;
}
.cm-metrica .cm-valor{ font-size:1.7rem; font-weight:700; line-height:1.1; }
.cm-metrica .cm-etiqueta{ font-size:.82rem; color:#6B7280; text-transform:uppercase; letter-spacing:.03em; }
/* Rejilla de 3 tarjetas por fila en celular (admin_dashboard.php): tarjetas más compactas. */
@media (max-width: 575.98px){
.cm-kpi-3 .card-body{ padding:.6rem .45rem; }
.cm-kpi-3 .cm-ico{ width:30px; height:30px; border-radius:8px; font-size:.8rem; margin-bottom:.35rem !important; }
.cm-kpi-3 .cm-valor{ font-size:1.4rem; font-weight:700; line-height:1.15; overflow-wrap:anywhere; }
.cm-kpi-3 .cm-valor-largo{ font-size:1.1rem; } /* montos en pesos ($1.250.000) */
.cm-kpi-3 .cm-etiqueta{ font-size:.74rem; letter-spacing:0; line-height:1.2; text-transform:none; font-weight:600; }
}
/* Escritorio: 6 tarjetas por fila, más angostas — montos en pesos más pequeños para que no se desborden. */
@media (min-width: 992px){
.cm-kpi-3 .cm-valor{ overflow-wrap:anywhere; }
.cm-kpi-3 .cm-valor-largo{ font-size:1.2rem; }
.cm-kpi-3 .cm-etiqueta{ font-size:.74rem; letter-spacing:.01em; line-height:1.25; }
}
/* Variantes de color del ícono, una por módulo del sistema. */
.ico-empleados{ background:var(--cm-azul); }
.ico-edificios{ background:#0891B2; }
.ico-bitacora{ background:#7C3AED; }
.ico-asistencia{ background:var(--cm-verde); }
.ico-tareas{ background:var(--cm-ambar); }
.ico-novedades{ background:#EF4444; }
.ico-inventario{ background:#059669; }
.ico-pedidos{ background:var(--cm-naranja); }
.ico-inspecciones{ background:#0D9488; }
.ico-domestico{ background:#DB2777; }
.ico-entregas{ background:#0EA5E9; }
.ico-visitas{ background:#6366F1; }
.cm-metrica:has(.ico-empleados){ border-top-color:var(--cm-azul); }
.cm-metrica:has(.ico-edificios){ border-top-color:#0891B2; }
.cm-metrica:has(.ico-bitacora){ border-top-color:#7C3AED; }
.cm-metrica:has(.ico-asistencia){ border-top-color:var(--cm-verde); }
.cm-metrica:has(.ico-tareas){ border-top-color:var(--cm-ambar); }
.cm-metrica:has(.ico-novedades){ border-top-color:#EF4444; }
.cm-metrica:has(.ico-inventario){ border-top-color:#059669; }
.cm-metrica:has(.ico-pedidos){ border-top-color:var(--cm-naranja); }
.cm-metrica:has(.ico-inspecciones){ border-top-color:#0D9488; }
.cm-metrica:has(.ico-domestico){ border-top-color:#DB2777; }
.cm-metrica:has(.ico-entregas){ border-top-color:#0EA5E9; }
.cm-metrica:has(.ico-visitas){ border-top-color:#6366F1; }
/* ── Estados (bitácora, tareas, pedidos, inspecciones) ──
Mismo lenguaje de color en todo el sistema: verde = resuelto/bueno,
ámbar = pendiente/regular, rojo = malo/incidencia, gris = na/inactivo. */
.cm-estado{
display:inline-flex; align-items:center; gap:.35rem;
padding:.3rem .7rem; border-radius:30px;
font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
}
.cm-estado-bueno, .cm-estado-activo, .cm-estado-entregado{ background:#DCFCE7; color:#166534; }
.cm-estado-regular, .cm-estado-pendiente, .cm-estado-empieza { background:#FEF3C7; color:#92400E; }
.cm-estado-malo, .cm-estado-inactivo, .cm-estado-falta { background:#FEE2E2; color:#991B1B; }
.cm-estado-na, .cm-estado-termina { background:#E5E7EB; color:#374151; }
/* ── Tarjeta de producto (inventario / catálogo de pedidos) ── */
.cm-producto{
border:1px solid #C7CED9; border-radius:14px; overflow:hidden;
background:#fff; height:100%; transition:transform .2s, box-shadow .2s;
}
.cm-producto:hover{ transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.1); }
.cm-producto .cm-img{
aspect-ratio:4/3; width:100%; object-fit:cover; background:var(--cm-gris);
}
.cm-producto .cm-sinimg{
aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
background:var(--cm-gris); color:#9CA3AF; font-size:2.4rem;
}
.cm-precio{ font-size:1.15rem; font-weight:700; color:var(--cm-naranja-2); }
.cm-precio-color{ color:var(--cm-naranja-2); }
/* ── Botones ── */
.btn-cm{ background:var(--cm-azul); border-color:var(--cm-azul); color:#fff; }
.btn-cm:hover{ background:var(--cm-azul-2); border-color:var(--cm-azul-2); color:#fff; }
.btn-wa{ background:var(--cm-wa); border-color:var(--cm-wa); color:#fff; }
.btn-wa:hover{ background:#1eb958; border-color:#1eb958; color:#fff; }
/* ── Tarjetas de acción del panel empleado (empleado_dashboard.php) ──
Mismo lenguaje visual que las tarjetas del panel empleado de la versión
MX (grandes, redondeadas, con sombra e ícono a la derecha), llevado a
Bootstrap: sin usar Tailwind. */
.cm-accion{
border:none; border-radius:1rem; padding:1.5rem;
display:flex; align-items:center; justify-content:space-between; gap:.75rem;
text-align:left; box-shadow:0 10px 22px rgba(0,0,0,.12);
transition:transform .15s, box-shadow .15s;
}
.cm-accion:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.18); }
.cm-accion:active{ transform:scale(.97); }
.cm-accion:disabled{ opacity:.6; transform:none; box-shadow:none; }
.cm-accion .cm-accion-ico{ font-size:2rem; opacity:.4; flex-shrink:0; }
.cm-accion.cm-accion-sm{ padding:1rem; }
.cm-accion.cm-accion-sm .cm-accion-ico{ font-size:1.5rem; }
/* ── Insignia con pulso (badges "Entregas"/"Inspector" del panel empleado) ── */
@keyframes cm-pulso{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.cm-pulso{ animation:cm-pulso 2s ease-in-out infinite; }
/* ── Portada pública ── */
.cm-hero{
background:linear-gradient(135deg, var(--cm-azul) 0%, #2c1f4a 60%, var(--cm-naranja) 100%);
color:#fff; padding:3rem 0 2.5rem;
}
.cm-hero-titulo{ font-size:clamp(2.2rem, 5vw, 3.2rem); letter-spacing:-.02em; }
.cm-chip{
display:inline-flex; align-items:center; gap:.4rem;
padding:.45rem 1rem; border-radius:30px; text-decoration:none;
background:rgba(255,255,255,.15); color:#fff; font-weight:600; font-size:.9rem;
border:1px solid rgba(255,255,255,.25); transition:background .15s;
}
.cm-chip:hover{ background:rgba(255,255,255,.28); color:#fff; }
/* ── Footer ── */
.cm-footer{ background:var(--cm-azul); color:#D1D5DB; }
.cm-footer a{ color:#9CD8F5; text-decoration:none; }
.cm-footer a:hover{ text-decoration:underline; }
/* ── Utilidades ── */
.cm-vacio{
text-align:center; padding:3rem 1rem; color:#6B7280;
border:2px dashed #D1D5DB; border-radius:14px; background:#fff;
}
.cm-vacio > i{ font-size:2.5rem; color:#9CA3AF; }
/* ── Botón flotante "Volver arriba" ── */
.cm-arriba{
position:fixed; bottom:1.5rem; right:1.5rem; z-index:1090;
width:48px; height:48px; border-radius:50%; border:2px solid var(--cm-naranja); cursor:pointer;
background:var(--cm-azul); color:#fff;
display:flex; align-items:center; justify-content:center;
box-shadow:0 4px 16px rgba(18,50,98,.4);
opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
transition:opacity .25s, transform .2s, background .15s;
}
.cm-arriba.visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.cm-arriba:hover{ background:var(--cm-azul-2); border-color:var(--cm-naranja-2); transform:translateY(0) scale(1.08); }
@media(max-width:575.98px){
.cm-arriba{ bottom:1rem; right:1rem; width:44px; height:44px; }
}
/* ── Botón flotante "Compartir" (solo páginas públicas, footer_publico.php) ──
Copiado de CMS_AmobladoMedellin (includes/footer.php), pero a la IZQUIERDA:
la derecha ya la ocupa .cm-arriba. En celular abre la hoja nativa del sistema;
en computador, el panel con las redes. */
.cm-compartir-flot{
position:fixed; bottom:1.5rem; left:1.5rem; z-index:1090;
width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
background:var(--cm-naranja); color:#fff; font-size:1.15rem;
display:flex; align-items:center; justify-content:center;
box-shadow:0 4px 16px rgba(255,122,26,.45); transition:background .15s, transform .2s;
}
.cm-compartir-flot:hover{ background:var(--cm-naranja-2); transform:scale(1.08); }
.cm-compartir-panel{
position:fixed; bottom:5.2rem; left:1.5rem; width:220px; z-index:1090;
max-height:calc(100vh - 7rem); overflow-y:auto;
background:#fff; border-radius:16px; box-shadow:0 10px 35px rgba(0,0,0,.18);
padding:8px; display:flex; flex-direction:column; gap:2px;
}
.cm-compartir-panel[hidden]{ display:none !important; }
.cm-cp-cab{ display:flex; align-items:center; justify-content:space-between; padding:4px 6px 6px 10px; margin-bottom:2px; border-bottom:1px solid #f1f5f9; font-size:.8rem; font-weight:700; color:#64748b; }
.cm-cp-cerrar{ border:none; background:none; width:28px; height:28px; border-radius:50%; color:#64748b; cursor:pointer; }
.cm-cp-cerrar:hover{ background:#f1f5f9; color:#1e293b; }
.cm-cp-opt{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:10px; border:none; background:none; text-align:left; font-family:inherit; cursor:pointer; text-decoration:none; color:#1e293b; font-size:.88rem; font-weight:600; }
.cm-cp-opt:hover{ background:#f1f5f9; color:#1e293b; }
.cm-cp-ic{ width:28px; height:28px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.8rem; }
.cm-cp-opt:focus-visible, .cm-cp-cerrar:focus-visible, .cm-compartir-flot:focus-visible{ outline:2px solid var(--cm-naranja); outline-offset:2px; }
@media(max-width:575.98px){
.cm-compartir-flot{ bottom:1rem; left:1rem; width:44px; height:44px; }
.cm-compartir-panel{ bottom:4.4rem; left:1rem; }
}
@media print{ .cm-compartir-flot, .cm-compartir-panel{ display:none !important; } }
/* Con un modal de Bootstrap abierto, este botón (z-index:1090) queda por
encima del modal (z-index~1055) y tapa sus botones de acción (p. ej.
"Guardar cambios" en los modales de edición). */
body.modal-open .cm-arriba{ display:none; }
/* Blindaje adicional para modales largos (p. ej. "Actualizar expediente"):
un límite fijo en vh no depende de que toda la cadena de ancestros tenga
una altura definida, así que el scroll interno del modal-body siempre
aparece sin impedir que el modal se vea completo en pantallas bajas. */
.modal-dialog-scrollable .modal-content{ max-height:85vh; }
/* Bug real detrás del recorte: .modal-content es flex-column y necesita que
.modal-body/.modal-footer sean sus hijos DIRECTOS para poder encogerlos y
darle scroll interno solo al body. En este proyecto casi todo modal envuelve
body+footer en un