/* ===================================================== HELPDESK — SISTEMA DE DISEÑO 4 temas con nombre (no claro/oscuro genérico) via [data-theme="…"] en . Cada tema define su propia paleta completa (superficie, texto, marca, semántica), así que cambiar de tema nunca deja colores a medias. ===================================================== */ :root{ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --sidebar-w: 248px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow-md: 0 8px 24px rgba(16,24,40,.08); --shadow-lg: 0 16px 40px rgba(16,24,40,.14); } /* ---------- Índigo (claro) — tema por defecto ---------- */ :root, [data-theme="indigo"]{ --bg: #f3f4f9; --surface: #ffffff; --surface-2: #f8f9fc; --border: #e3e5ef; --text: #12142b; --text-muted: #666a8a; --primary: #4f46e5; --primary-hover: #4338ca; --primary-fg: #ffffff; --primary-tint: #eef0fd; --ring: rgba(79,70,229,.18); --sidebar-bg: #14152b; --sidebar-bg-2: #1b1c38; --sidebar-text: #a7a9c9; --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(129,122,255,.18); --sidebar-border: rgba(255,255,255,.06); --sidebar-overlay: rgba(255,255,255,.05); --sidebar-overlay-strong: rgba(255,255,255,.12); --success-bg:#e6f7ee; --success-fg:#0b8a4a; --success-dot:#12b76a; --warning-bg:#fff4e5; --warning-fg:#b25e00; --warning-dot:#f79009; --danger-bg:#fdecec; --danger-fg:#c81e1e; --danger-dot:#f04438; --info-bg:#eef0fd; --info-fg:#3730a3; --info-dot:#4f46e5; --neutral-bg:#eef0f4; --neutral-fg:#4b5165; --neutral-dot:#94a3b8; } /* ---------- Medianoche (oscuro, misma marca índigo) ---------- */ [data-theme="medianoche"]{ --bg: #0b0c17; --surface: #12132a; --surface-2: #171836; --border: #262848; --text: #eceefb; --text-muted: #9497c2; --primary: #7c74ff; --primary-hover: #948dff; --primary-fg: #10091f; --primary-tint: #201f47; --ring: rgba(124,116,255,.28); --sidebar-bg: #07070f; --sidebar-bg-2: #0d0e1d; --sidebar-text: #8d90bd; --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(124,116,255,.22); --sidebar-border: rgba(255,255,255,.06); --sidebar-overlay: rgba(255,255,255,.05); --sidebar-overlay-strong: rgba(255,255,255,.12); --success-bg:#0f2a1f; --success-fg:#4ade80; --success-dot:#34d399; --warning-bg:#332107; --warning-fg:#fbbf24; --warning-dot:#f59e0b; --danger-bg:#340f10; --danger-fg:#fb7185; --danger-dot:#f43f5e; --info-bg:#1c1c46; --info-fg:#a5b4fc; --info-dot:#818cf8; --neutral-bg:#1b1c33; --neutral-fg:#a3a6c9; --neutral-dot:#7d81ab; } /* ---------- Esmeralda (claro, acento verde) ---------- */ [data-theme="esmeralda"]{ --bg: #f2f9f6; --surface: #ffffff; --surface-2: #edf7f2; --border: #d9ece2; --text: #0e2b21; --text-muted: #5c7c70; --primary: #059669; --primary-hover: #047857; --primary-fg: #ffffff; --primary-tint: #e2f5ec; --ring: rgba(5,150,105,.18); --sidebar-bg: #06281f; --sidebar-bg-2: #0a3327; --sidebar-text: #9bcdb8; --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(16,185,129,.20); --sidebar-border: rgba(255,255,255,.07); --sidebar-overlay: rgba(255,255,255,.05); --sidebar-overlay-strong: rgba(255,255,255,.12); --success-bg:#e2f5ec; --success-fg:#04724d; --success-dot:#059669; --warning-bg:#fdf1de; --warning-fg:#9a5b00; --warning-dot:#e08a00; --danger-bg:#fbe7e6; --danger-fg:#b3261e; --danger-dot:#dc4c41; --info-bg:#e4f1fb; --info-fg:#1d5c8a; --info-dot:#3b93d1; --neutral-bg:#e9f1ed; --neutral-fg:#4d685d; --neutral-dot:#8caa9c; } /* ---------- Grafito (oscuro, neutro) ---------- */ [data-theme="grafito"]{ --bg: #0c0d0f; --surface: #151719; --surface-2: #1b1d20; --border: #292c30; --text: #e7e8ea; --text-muted: #96999f; --primary: #5b8def; --primary-hover: #7ba3f2; --primary-fg: #0a1424; --primary-tint: #16233b; --ring: rgba(91,141,239,.25); --sidebar-bg: #08090a; --sidebar-bg-2: #0e1011; --sidebar-text: #93969c; --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(91,141,239,.16); --sidebar-border: rgba(255,255,255,.06); --sidebar-overlay: rgba(255,255,255,.05); --sidebar-overlay-strong: rgba(255,255,255,.12); --success-bg:#132119; --success-fg:#5fd394; --success-dot:#3fb87a; --warning-bg:#241d0f; --warning-fg:#e3b64d; --warning-dot:#d19a2c; --danger-bg:#271414; --danger-fg:#ec7a75; --danger-dot:#dd5850; --info-bg:#141c2c; --info-fg:#8fb2f2; --info-dot:#5b8def; --neutral-bg:#1c1e21; --neutral-fg:#9a9ea6; --neutral-dot:#6b6f77; } /* ---------- Perla (claro, con barra lateral clara -no oscura como los otros 4-; acento cálido en ámbar) ---------- */ [data-theme="perla"]{ --bg: #faf8f5; --surface: #ffffff; --surface-2: #f6f2ea; --border: #e8e1d4; --text: #241f18; --text-muted: #7a7266; --primary: #92400e; --primary-hover: #78350f; --primary-fg: #ffffff; --primary-tint: #fdf1e2; --ring: rgba(146,64,14,.18); /* A diferencia de los otros 4 temas (sidebar oscura + texto claro), aquí la sidebar es clara -por eso --sidebar-text-active es oscuro y --sidebar-overlay usa negro translúcido en vez de blanco: un overlay blanco sobre fondo blanco sería invisible. */ --sidebar-bg: #ffffff; --sidebar-bg-2: #f7f3ea; --sidebar-text: #6b6459; --sidebar-text-active: #241f18; --sidebar-active-bg: rgba(146,64,14,.10); --sidebar-border: #ece5d7; --sidebar-overlay: rgba(36,31,24,.045); --sidebar-overlay-strong: rgba(36,31,24,.08); --success-bg:#e6f7ee; --success-fg:#0b8a4a; --success-dot:#12b76a; --warning-bg:#fff4e5; --warning-fg:#b25e00; --warning-dot:#f79009; --danger-bg:#fdecec; --danger-fg:#c81e1e; --danger-dot:#f04438; --info-bg:#eef0fd; --info-fg:#3730a3; --info-dot:#4f46e5; --neutral-bg:#f1ede4; --neutral-fg:#57503f; --neutral-dot:#a39a89; } /* ---------- Intevra (tema corporativo, por defecto) — paleta tomada directo de intevra.com.co: fondo #080b14, degradado de marca #6d8dff -> #8b5cf6 y texto secundario #93a0c4 (mismos valores exactos que usa el sitio, no una aproximación). ---------- */ [data-theme="intevra"]{ --bg: #080b14; --surface: #10162b; --surface-2: #161d38; --border: #232b4d; --text: #e9ecf9; --text-muted: #93a0c4; --primary: #6d8dff; --primary-hover: #8b5cf6; --primary-fg: #ffffff; --primary-tint: #1b2350; --ring: rgba(109,141,255,.28); --sidebar-bg: #05070f; --sidebar-bg-2: #0b0f22; --sidebar-text: #93a0c4; --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(109,141,255,.20); --sidebar-border: rgba(255,255,255,.06); --sidebar-overlay: rgba(255,255,255,.05); --sidebar-overlay-strong: rgba(255,255,255,.12); --success-bg:#0f2a1f; --success-fg:#4ade80; --success-dot:#34d399; --warning-bg:#332107; --warning-fg:#fbbf24; --warning-dot:#f59e0b; --danger-bg:#340f10; --danger-fg:#fb7185; --danger-dot:#f43f5e; --info-bg:#1c1c46; --info-fg:#a5b4fc; --info-dot:#818cf8; --neutral-bg:#1b1c33; --neutral-fg:#a3a6c9; --neutral-dot:#7d81ab; } /* ---------- Color de la barra lateral (independiente del tema) ---------- Personalización de Mi Perfil > Apariencia: reemplaza el par de variables --sidebar-bg/--sidebar-bg-2 (y el resto de --sidebar-*) que cada tema de arriba ya define, sin tocar el resto de la paleta del tema. 'tema' (el valor por defecto) no tiene bloque propio: al no coincidir ningún selector, el sidebar sigue usando el color que trae el tema activo. Van DESPUÉS de los 6 temas a propósito -misma especificidad, gana el que aparece último en el archivo-. */ [data-sidebar-color="azul"]{ --sidebar-bg:#050b18; --sidebar-bg-2:#0d1b34; --sidebar-text:#93a4c9; --sidebar-text-active:#ffffff; --sidebar-active-bg:rgba(59,130,246,.22); --sidebar-border:rgba(255,255,255,.07); --sidebar-overlay:rgba(255,255,255,.05); --sidebar-overlay-strong:rgba(255,255,255,.12); } [data-sidebar-color="purpura"]{ --sidebar-bg:#0d0620; --sidebar-bg-2:#1c1040; --sidebar-text:#a99cd9; --sidebar-text-active:#ffffff; --sidebar-active-bg:rgba(168,85,247,.22); --sidebar-border:rgba(255,255,255,.07); --sidebar-overlay:rgba(255,255,255,.05); --sidebar-overlay-strong:rgba(255,255,255,.12); } [data-sidebar-color="esmeralda"]{ --sidebar-bg:#03130d; --sidebar-bg-2:#0a2419; --sidebar-text:#8fc9ac; --sidebar-text-active:#ffffff; --sidebar-active-bg:rgba(16,185,129,.22); --sidebar-border:rgba(255,255,255,.07); --sidebar-overlay:rgba(255,255,255,.05); --sidebar-overlay-strong:rgba(255,255,255,.12); } [data-sidebar-color="ambar"]{ --sidebar-bg:#170f03; --sidebar-bg-2:#2e1e06; --sidebar-text:#d3b789; --sidebar-text-active:#ffffff; --sidebar-active-bg:rgba(245,158,11,.22); --sidebar-border:rgba(255,255,255,.07); --sidebar-overlay:rgba(255,255,255,.05); --sidebar-overlay-strong:rgba(255,255,255,.12); } [data-sidebar-color="rosado"]{ --sidebar-bg:#1a0512; --sidebar-bg-2:#320c22; --sidebar-text:#d996af; --sidebar-text-active:#ffffff; --sidebar-active-bg:rgba(244,63,94,.22); --sidebar-border:rgba(255,255,255,.07); --sidebar-overlay:rgba(255,255,255,.05); --sidebar-overlay-strong:rgba(255,255,255,.12); } [data-sidebar-color="carbon"]{ --sidebar-bg:#0a0a0d; --sidebar-bg-2:#17171c; --sidebar-text:#a3a8b8; --sidebar-text-active:#ffffff; --sidebar-active-bg:rgba(148,163,184,.20); --sidebar-border:rgba(255,255,255,.07); --sidebar-overlay:rgba(255,255,255,.05); --sidebar-overlay-strong:rgba(255,255,255,.12); } /* ===================================================== */ *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family:var(--font); background:var(--bg); color:var(--text); font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased; } a{ color:var(--primary); text-decoration:none; } a:hover{ color:var(--primary-hover); } h1,h2,h3{ margin:0; letter-spacing:-.01em; } ::selection{ background:var(--ring); } /* ---------- Layout ---------- */ .shell{ display:flex; min-height:100vh; } /* El posicionamiento (fijo+oculto en móvil, estático en desktop), el backdrop y la animación de apertura los resuelve el propio componente Offcanvas de Bootstrap (.offcanvas-lg en el HTML); aquí solo se sobreescribe su aspecto visual para que combine con el resto del tema. OJO: el selector es ".sidebar" a secas -NO ".sidebar.offcanvas"-. El HTML usa la variante responsive de Bootstrap (.offcanvas-lg), nunca la clase base ".offcanvas", así que ".sidebar.offcanvas" jamás coincidía con nada: la sidebar quedaba con el fondo/color por defecto de Bootstrap (mapeados a --bg/--text, los del contenido, no --sidebar-bg/--sidebar-text). Pasaba desapercibido en los temas oscuros (--bg también oscuro, por pura coincidencia) pero rompía la legibilidad en Índigo y Esmeralda (contenido claro, sidebar pensada oscura). */ .sidebar{ --bs-offcanvas-width: var(--sidebar-w); --bs-offcanvas-border-color: transparent; background:linear-gradient(180deg, var(--sidebar-bg-2), var(--sidebar-bg) 60%); color:var(--sidebar-text); flex-shrink:0; } /* Efecto "Sólido" de Mi Perfil > Apariencia: un solo color en vez del degradado por defecto. El !important es necesario -no por el selector de arriba, sino porque Bootstrap le pone "background-color:transparent!important" a .offcanvas-lg (la propia .sidebar) desde los 992px; con background-color explícito (no el shorthand "background", que Bootstrap no toca porque solo apunta a background-color) y el mismo peso !important, gana la regla de mayor especificidad -esta, por el selector descendiente-. */ [data-sidebar-efecto="solido"] .sidebar{ background-image:none; background-color:var(--sidebar-bg) !important; } /* En escritorio la sidebar queda fija a la altura de la ventana -en vez de crecer con .main y desplazarse junto con el contenido-, igual que .topbar (position:sticky). Sin esto, en páginas largas (p.ej. el detalle de un caso legal con varias pestañas) la sidebar se desplazaba hacia arriba con el scroll y el usuario terminaba viendo "menos menú" que contenido central. */ @media (min-width: 992px){ .sidebar{ /* Ancho explícito, el mismo que usa el offcanvas por debajo de 992px. Hasta acá la sidebar de escritorio no tenía ninguno: --sidebar-w solo alimenta --bs-offcanvas-width, que Bootstrap usa en modo offcanvas (móvil), así que como ítem flex con flex-shrink:0 su ancho lo decidía el contenido -y daba ~248px de pura casualidad, por el largo de "Intevra Workspace"-. Con el logo de la empresa y su nombre ahí (que cada empresa elige), eso se convertía en una barra que se ensancha sola: medido 605px con un nombre de razón social largo. */ width:var(--sidebar-w); position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto; } } .brand{ display:flex; align-items:center; gap:.6rem; padding:1.35rem 1.25rem 1rem; color:var(--sidebar-text-active); font-weight:700; font-size:1.05rem; transition:opacity .15s ease; } a.brand:hover{ color:var(--sidebar-text-active); opacity:.85; } .brand-mark{ width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg, var(--primary), var(--primary-hover)); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 14px var(--ring); } .brand-mark svg{ width:17px; height:17px; } .brand-mark img{ width:100%; height:100%; object-fit:contain; } /* Con logo propio de la empresa el cuadro deja de ser un badge (sin fondo ni sombra, que son del ícono por defecto) y pasa a ser el logo en sí, bastante más grande: 30px alcanzaban para un ícono decorativo, no para una marca legible. Y ahí el logo va solo, sin el nombre al lado (ver templates/base.html): el logo YA es la marca de la empresa, y repetir el nombre al lado obligaba a apretar uno de los dos en los 248px de la barra. Sin alto ni ancho fijos en el contenedor, solo topes: así entra igual un logo cuadrado (48x48) que uno apaisado (hasta el ancho de la barra), sin deformarse ni encogerse dentro de una caja cuadrada. */ .brand-mark.has-logo{ background:none; box-shadow:none; border-radius:0; width:auto; height:auto; max-width:100%; max-height:48px; } /* Alto explícito (no "auto" con un tope): un SVG suele venir sin tamaño intrínseco -solo viewBox-, y ahí "height:auto" lo deja en el tamaño por defecto de un reemplazado sin dimensiones (300x150), ignorando el max-height. Con alto fijo, ancho automático y object-fit:contain, entran igual un SVG, un PNG cuadrado y uno apaisado, sin deformarse. */ .brand-mark.has-logo img{ width:auto; height:48px; max-width:100%; object-fit:contain; } /* Solo aparece cuando la empresa todavía no subió su logo. Aun así puede ser una razón social larga: que parta de línea antes que desbordar la barra. */ .brand-nombre{ min-width:0; overflow-wrap:anywhere; line-height:1.25; } .nav-section-label{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%; background:none; border:none; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--sidebar-text); opacity:.55; padding:1.1rem 1.25rem .4rem; font-weight:600; cursor:pointer; transition:opacity .15s ease; } .nav-section-label:hover{ opacity:.85; } .nav-section-chevron{ width:14px; height:14px; flex-shrink:0; transition:transform .2s ease; } .nav-section.collapsed .nav-section-chevron{ transform:rotate(-90deg); } .nav-section-body{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .22s ease; } .nav-section-body > .nav-links{ overflow:hidden; min-height:0; } .nav-section.collapsed .nav-section-body{ grid-template-rows:0fr; } .nav-links{ list-style:none; margin:0; padding:0 .75rem; display:flex; flex-direction:column; gap:2px; } .nav-link{ display:flex; align-items:center; gap:.65rem; padding:.55rem .75rem; border-radius:var(--radius-sm); color:var(--sidebar-text); font-size:.88rem; font-weight:500; border-left:3px solid transparent; transition:background .15s ease, color .15s ease, border-color .15s ease; } .nav-link svg{ width:17px; height:17px; flex-shrink:0; opacity:.85; transition:opacity .15s ease, transform .15s ease; } .nav-link:hover{ background:var(--sidebar-overlay); color:var(--sidebar-text-active); } .nav-link:hover svg{ opacity:1; transform:translateX(1px); } .nav-link.active{ background:var(--sidebar-active-bg); color:var(--sidebar-text-active); border-left-color:var(--primary); font-weight:600; } .nav-link.active svg{ opacity:1; } /* Subgrupo dentro de un nav-section (p. ej. "Cargues", "Asesores" bajo Comisiones): un divisor de texto, no un botón -a diferencia de .nav-section-label no colapsa nada, solo ordena visualmente una lista larga en bloques más fáciles de escanear. */ .nav-subgroup-label{ font-size:.64rem; text-transform:uppercase; letter-spacing:.07em; color:var(--sidebar-text); opacity:.45; font-weight:700; padding:.75rem .75rem .2rem; } .nav-subgroup-label:first-child{ padding-top:.15rem; } .sidebar-user{ display:flex; align-items:center; gap:.65rem; margin:.4rem .75rem; padding:.6rem .7rem; border-radius:var(--radius-sm); background:var(--sidebar-overlay); border:1px solid var(--sidebar-border); transition:background .15s ease; } .sidebar-user:hover{ background:var(--sidebar-overlay-strong); } .sidebar-user .avatar{ background:linear-gradient(135deg, var(--primary), var(--primary-hover)); } .sidebar-user-info{ min-width:0; flex:1; } .sidebar-user-name{ /* display:block porque es un : overflow/text-overflow no aplican a un elemento inline, así que el ellipsis de acá abajo no recortaba nada -un nombre largo simplemente ensanchaba la barra entera, que hasta ahora no tenía ancho fijo en escritorio-. */ display:block; font-size:.83rem; font-weight:600; color:var(--sidebar-text-active); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sidebar-user-role{ font-size:.72rem; color:var(--sidebar-text); opacity:.8; } .sidebar-bottom{ margin-top:auto; } .sidebar-footer{ padding:1rem 1.25rem 1.25rem; border-top:1px solid var(--sidebar-border); font-size:.74rem; color:var(--sidebar-text); opacity:.6; } .main{ flex:1; min-width:0; display:flex; flex-direction:column; } .topbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.75rem; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(6px); position:sticky; top:0; z-index:20; } .page-title{ font-size:1.15rem; font-weight:700; } .topbar-actions{ display:flex; align-items:center; gap:.6rem; } .content{ padding:1.75rem; max-width:1180px; width:100%; margin:0 auto; } /* Efecto de "entrada" al navegar a una página nueva desde el menú -como una transición de diapositivas, con un ligero rebote al asentarse-. Cada navegación del sidebar es una carga de página normal (no hay hx-boost), así que esta animación se dispara sola en cada .content nuevo, sin JS. Va dentro de prefers-reduced-motion:no-preference -mismo patrón que el resto de animaciones "decorativas" de este archivo- y solo anima transform, nunca opacity (ver nota en ANIMACIONES SUAVES más abajo). */ @media (prefers-reduced-motion:no-preference){ .content{ animation:pageEnter .5s cubic-bezier(.22, 1.32, .4, 1); } } @keyframes pageEnter{ 0%{ transform:translateY(22px) scale(.985); } 55%{ transform:translateY(-4px) scale(1.002); } 100%{ transform:translateY(0) scale(1); } } /* ---------- Botones ---------- */ .btn{ display:inline-flex; align-items:center; gap:.45rem; border:1px solid transparent; border-radius:var(--radius-sm); padding:.5rem .95rem; font-size:.85rem; font-weight:600; cursor:pointer; font-family:inherit; transition:background .12s ease, border-color .12s ease, transform .05s ease; white-space:nowrap; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--primary); color:var(--primary-fg); } .btn-primary:hover{ background:var(--primary-hover); color:var(--primary-fg); } .btn-ghost{ background:transparent; border-color:var(--border); color:var(--text); } .btn-ghost:hover{ background:var(--surface-2); color:var(--text); } .btn-sm{ padding:.35rem .7rem; font-size:.78rem; } .btn-sidebar{ background:var(--sidebar-overlay); border:1px solid var(--sidebar-border); color:var(--sidebar-text-active); } .btn-sidebar:hover{ background:var(--sidebar-overlay-strong); color:var(--sidebar-text-active); } /* ---------- Tarjetas ---------- */ .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); } .card-body{ padding:1.35rem; } /* ---------- Dropzone (Mis documentos) ---------- */ .dropzone{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; padding:2rem 1rem; border:2px dashed var(--border); border-radius:var(--radius); color:var(--text-muted); cursor:pointer; text-align:center; transition:background .12s ease, border-color .12s ease, color .12s ease; } .dropzone:hover{ border-color:var(--primary); color:var(--text); } .dropzone.drag-over{ background:var(--primary-tint); border-color:var(--primary); color:var(--text); } .dropzone-texto{ font-size:.85rem; } /* ---------- Explorador (Mis documentos) ---------- */ .explorer-toolbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.7rem; margin-bottom:1.1rem; } .explorer-breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; font-size:.85rem; min-width:0; } .explorer-crumb{ color:var(--text-muted); white-space:nowrap; border-radius:6px; padding:.15rem .35rem; transition:background .12s ease, color .12s ease; } .explorer-crumb:hover{ color:var(--text); background:var(--surface-2); } .explorer-crumb-actual{ color:var(--text); font-weight:700; } .explorer-crumb.drag-over{ background:var(--primary-tint); color:var(--primary); outline:2px dashed var(--primary); outline-offset:-2px; } .explorer-crumb-sep{ color:var(--text-muted); } .explorer-controles{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } .explorer-vista-toggle{ display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; } .explorer-vista-toggle .btn{ border-radius:0; border:none; padding:.35rem .5rem; } .explorer-vista-toggle .btn.active{ background:var(--primary); color:var(--primary-fg); } .explorer-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.8rem; } .explorer-item{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:1rem .6rem .7rem; border:1px solid var(--card-border, var(--border)); border-radius:var(--radius-sm); background:var(--surface); text-align:center; transition:border-color .12s ease, background .12s ease, transform .12s ease; } .explorer-item:hover{ border-color:var(--primary); } .explorer-item.dragging{ opacity:.4; } .explorer-carpeta.drag-over{ background:var(--primary-tint); border-color:var(--primary); outline:2px dashed var(--primary); outline-offset:-4px; } .explorer-item-link{ display:flex; flex-direction:column; align-items:center; gap:.4rem; width:100%; min-width:0; } .explorer-item-icon{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--neutral-bg); color:var(--neutral-fg); flex:0 0 auto; } .explorer-icon-carpeta{ background:var(--warning-bg); color:var(--warning-fg); } .explorer-icon-pdf{ background:var(--danger-bg); color:var(--danger-fg); } .explorer-icon-imagen{ background:var(--success-bg); color:var(--success-fg); } .explorer-icon-hoja_calculo{ background:var(--success-bg); color:var(--success-fg); } .explorer-icon-presentacion{ background:var(--warning-bg); color:var(--warning-fg); } .explorer-icon-video, .explorer-icon-audio{ background:var(--info-bg); color:var(--info-fg); } .explorer-icon-documento{ background:var(--info-bg); color:var(--info-fg); } .explorer-item-nombre{ font-size:.82rem; font-weight:600; word-break:break-word; overflow-wrap:anywhere; line-height:1.3; } .explorer-item-meta{ display:flex; align-items:center; justify-content:center; gap:.3rem; flex-wrap:wrap; } .explorer-item-acciones{ display:flex; align-items:center; gap:.3rem; margin-top:.2rem; } /* Vista de lista: filas en vez de tarjetas de cuadrícula */ .explorer-grid.vista-lista{ grid-template-columns:1fr; gap:0; } .explorer-grid.vista-lista .explorer-item{ flex-direction:row; align-items:center; justify-content:flex-start; text-align:left; border-radius:0; border-left:none; border-right:none; border-top:none; padding:.6rem .4rem; } .explorer-grid.vista-lista .explorer-item:first-child{ border-top:1px solid var(--card-border, var(--border)); } .explorer-grid.vista-lista .explorer-item-link{ flex-direction:row; align-items:center; justify-content:flex-start; flex:1; min-width:0; } .explorer-grid.vista-lista .explorer-item-icon{ width:30px; height:30px; } .explorer-grid.vista-lista .explorer-item-icon svg{ width:15px; height:15px; } .explorer-grid.vista-lista .explorer-item-nombre{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .explorer-grid.vista-lista .explorer-item-meta{ flex:0 0 auto; justify-content:flex-end; } .explorer-grid.vista-lista .explorer-item-acciones{ margin-top:0; } @media (max-width:640px){ .explorer-grid{ grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); } } /* ---------- Selección múltiple (checkbox por ítem + barra de acciones masivas) ---------- */ .explorer-item-check{ position:absolute; top:.35rem; left:.35rem; z-index:2; opacity:0; transition:opacity .12s ease; display:flex; background:var(--surface); border-radius:4px; padding:.1rem; } .explorer-item:hover .explorer-item-check, .explorer-item.selected .explorer-item-check{ opacity:1; } .explorer-item-check input{ width:1.05rem; height:1.05rem; margin:0; cursor:pointer; accent-color:var(--primary); } .explorer-item.selected{ border-color:var(--primary); background:var(--primary-tint); } .explorer-item.previsualizando{ border-color:var(--primary); background:var(--primary-tint); } .explorer-grid.vista-lista .explorer-item-check{ position:static; opacity:1; margin-right:.6rem; padding:0; background:transparent; } .selection-bar{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; background:var(--primary-tint); border:1px solid var(--primary); border-radius:var(--radius-sm); padding:.55rem .8rem; margin-bottom:1rem; } .selection-bar-count{ font-size:.85rem; font-weight:600; color:var(--primary); margin-right:auto; } /* ---------- Vista con previsualización (dos columnas) ---------- */ .explorer-body{ display:block; } .explorer-body.con-previsualizacion{ display:grid; grid-template-columns:minmax(240px, 360px) 1fr; gap:1.2rem; align-items:start; } .explorer-body.con-previsualizacion .explorer-grid{ grid-template-columns:1fr; gap:0; } /* La columna angosta no alcanza para el detalle completo de cada fila -pills de tipo/tamaño/fecha, selector "Mover a…"-: se recorta a lo esencial (ícono, nombre, compartir/eliminar) para que el nombre no se aplaste a 0 de ancho compitiendo por espacio con esos controles. */ .explorer-body.con-previsualizacion .explorer-item-meta{ display:none; } .explorer-body.con-previsualizacion [data-mover-documento]{ display:none; } .explorer-preview-pane{ border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.1rem; position:sticky; top:1rem; } .explorer-preview-empty{ color:var(--text-muted); font-size:.85rem; text-align:center; margin:0; } .explorer-preview-header{ display:flex; align-items:center; gap:.6rem; width:100%; margin-bottom:.9rem; } .explorer-preview-titulo{ font-weight:600; font-size:.88rem; word-break:break-word; line-height:1.3; } .explorer-preview-pane img, .explorer-preview-pane video{ max-width:100%; max-height:65vh; border-radius:var(--radius-sm); } .explorer-preview-pane iframe{ width:100%; height:65vh; border:none; border-radius:var(--radius-sm); } .explorer-preview-pane audio{ width:100%; } @media (max-width:760px){ .explorer-body.con-previsualizacion{ grid-template-columns:1fr; } .explorer-preview-pane{ position:static; } } .stat-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.9rem; margin-bottom:1.25rem; } .stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.15rem; box-shadow:var(--shadow-sm); } .stat-label{ font-size:.76rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; } .stat-value{ font-size:1.7rem; font-weight:700; margin-top:.25rem; } .stat-card.accent .stat-value{ color:var(--primary); } @media (max-width: 900px){ .stat-grid{ grid-template-columns:repeat(2, 1fr); } } /* ---------- Tarjetas KPI (dashboard de inicio) ---------- */ .kpi-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.9rem; margin-bottom:1.25rem; } .kpi-card{ display:flex; align-items:center; gap:.85rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:var(--shadow-sm); } .kpi-icon{ flex-shrink:0; width:2.6rem; height:2.6rem; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; } .kpi-icon-primary{ background:var(--primary-tint); color:var(--primary); } .kpi-icon-warning{ background:var(--warning-bg); color:var(--warning-fg); } .kpi-icon-danger{ background:var(--danger-bg); color:var(--danger-fg); } .kpi-icon-success{ background:var(--success-bg); color:var(--success-fg); } .kpi-value{ font-size:1.55rem; font-weight:700; line-height:1.15; } .kpi-label{ font-size:.78rem; color:var(--text-muted); font-weight:600; } @media (max-width: 900px){ .kpi-grid{ grid-template-columns:repeat(2, 1fr); } } /* ---------- Listas del dashboard: "Próximos vencimientos" / "Actividad reciente" (punto de color + título + fecha) ---------- */ .timeline-list{ display:flex; flex-direction:column; gap:.7rem; } .timeline-item{ display:flex; align-items:flex-start; gap:.65rem; } .timeline-dot{ flex-shrink:0; width:.55rem; height:.55rem; border-radius:50%; margin-top:.4rem; } .timeline-dot-danger{ background:var(--danger-dot); } .timeline-dot-warning{ background:var(--warning-dot); } .timeline-dot-info{ background:var(--info-dot); } .timeline-dot-success{ background:var(--success-dot); } .timeline-dot-neutral{ background:var(--neutral-dot); } .timeline-body{ min-width:0; } .timeline-title{ font-size:.85rem; font-weight:600; line-height:1.3; } .timeline-sub{ font-size:.76rem; margin-top:.1rem; } .dashboard-split{ display:grid; grid-template-columns:minmax(200px, 280px) 1fr; gap:1.5rem; } @media (max-width: 760px){ .dashboard-split{ grid-template-columns:1fr; } } /* ---------- Pestañas "Mi unidad / Compartido conmigo / Documentos compartidos" ---------- */ .explorer-tabs{ display:flex; gap:.3rem; margin-bottom:1rem; border-bottom:1px solid var(--border); flex-wrap:wrap; } .explorer-tab{ display:flex; align-items:center; gap:.4rem; padding:.55rem .85rem; font-size:.85rem; font-weight:600; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .12s ease, border-color .12s ease; white-space:nowrap; } .explorer-tab:hover{ color:var(--text); } .explorer-tab.active{ color:var(--primary); border-bottom-color:var(--primary); } /* ---------- Modal "Compartir" ---------- */ .compartir-form-row{ display:flex; gap:.5rem; flex-wrap:wrap; } .compartir-form-row .input{ min-width:0; } .compartir-lista-items{ list-style:none; margin:.9rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem; } .compartir-lista-items li{ display:flex; align-items:center; gap:.5rem; padding:.4rem .6rem; background:var(--surface-2); border-radius:8px; font-size:.85rem; } .compartir-lista-items li > span:first-child{ flex:1; } /* ---------- Tabla ---------- */ .table-wrap{ overflow-x:auto; } table.data{ width:100%; border-collapse:collapse; font-size:.87rem; } table.data thead th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700; background:var(--surface-2); padding:.75rem 1rem; border-bottom:1px solid var(--border); white-space:nowrap; } table.data td{ padding:.8rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; } table.data tbody tr:last-child td{ border-bottom:none; } table.data tbody tr:hover{ background:var(--surface-2); } .ticket-link{ font-weight:700; color:var(--text); } .ticket-link:hover{ color:var(--primary); } .empty-row{ text-align:center; color:var(--text-muted); padding:2.5rem 1rem; } /* ---------- Insignias / pills ---------- */ .pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.24rem .65rem; border-radius:999px; font-size:.74rem; font-weight:700; } .pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; } .pill-success{ background:var(--success-bg); color:var(--success-fg); } .pill-warning{ background:var(--warning-bg); color:var(--warning-fg); } .pill-danger{ background:var(--danger-bg); color:var(--danger-fg); } .pill-info{ background:var(--info-bg); color:var(--info-fg); } .pill-neutral{ background:var(--neutral-bg); color:var(--neutral-fg); } .role-tag{ font-size:.7rem; font-weight:700; padding:.15rem .55rem; border-radius:999px; background:var(--primary-tint); color:var(--primary); } /* ---------- Formularios ---------- */ .field{ margin-bottom:1.1rem; } .field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.4rem; color:var(--text); } .field-hint{ font-size:.76rem; color:var(--text-muted); margin-top:.35rem; } .input, select.input, textarea.input{ width:100%; font-family:inherit; font-size:.88rem; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.6rem .75rem; transition:border-color .12s ease, box-shadow .12s ease; } .input:focus, select.input:focus, textarea.input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); } textarea.input{ resize:vertical; min-height:120px; } select.input{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23808498' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right .7rem center; background-size:12px 9px; padding-right:2.2rem; } /* ---------- Alertas / mensajes ---------- */ .alert{ padding:.75rem 1rem; border-radius:var(--radius-sm); font-size:.85rem; margin-bottom:1rem; border:1px solid transparent; } .alert-success{ background:var(--success-bg); color:var(--success-fg); } .alert-error, .alert-danger{ background:var(--danger-bg); color:var(--danger-fg); } .alert-info{ background:var(--info-bg); color:var(--info-fg); } .alert-warning{ background:var(--warning-bg); color:var(--warning-fg); } /* ---------- Selector de temas / menú de usuario (los desplegables en sí son el componente Dropdown de Bootstrap; aquí solo se tematiza el disparador, el panel y las opciones) ---------- */ .theme-trigger, .user-trigger{ display:flex; align-items:center; gap:.5rem; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:var(--radius-sm); padding:.4rem .65rem; cursor:pointer; font-family:inherit; font-size:.8rem; font-weight:600; } .theme-trigger:hover, .user-trigger:hover{ background:var(--surface-2); } .user-trigger{ border-radius:999px; border-color:transparent; padding:.3rem .5rem .3rem .3rem; } .theme-swatch{ width:14px; height:14px; border-radius:50%; background:var(--primary); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--surface) 60%, transparent); } .dropdown-menu{ --bs-dropdown-bg: var(--surface); --bs-dropdown-border-color: var(--border); --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-bg: var(--surface-2); --bs-dropdown-link-hover-color: var(--text); --bs-dropdown-box-shadow: var(--shadow-lg); border-radius:var(--radius); padding:.4rem; } .theme-menu-bs{ width:210px; } .user-menu-bs{ width:230px; } .theme-option{ display:flex; align-items:center; gap:.6rem; border-radius:var(--radius-sm); font-size:.83rem; } .theme-option.selected{ background:var(--primary-tint); color:var(--primary); font-weight:700; } .theme-dot{ width:16px; height:16px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--border); } .avatar{ width:32px; height:32px; border-radius:50%; background:linear-gradient(145deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #000 45%)); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); color:var(--primary-fg); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; flex-shrink:0; overflow:hidden; } .avatar img{ width:100%; height:100%; object-fit:cover; } .avatar-xs{ width:20px; height:20px; font-size:.62rem; } .avatar-sm{ width:40px; height:40px; font-size:1rem; } .avatar-lg{ width:76px; height:76px; font-size:1.8rem; } .user-menu-header{ padding:.4rem .5rem .7rem; border-bottom:1px solid var(--border); margin-bottom:.4rem; } .user-menu-header .name{ font-weight:700; font-size:.88rem; color:var(--text); } .user-menu-header .email{ font-size:.76rem; color:var(--text-muted); } .logout-btn{ width:100%; display:flex; align-items:center; gap:.5rem; border:none; background:transparent; padding:.55rem .5rem; border-radius:var(--radius-sm); color:var(--danger-fg); font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer; } .logout-btn:hover{ background:var(--danger-bg); } /* ---------- Login ---------- */ .auth-shell{ min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; background:var(--bg); perspective:1800px; } /* Movimiento 3d de toda la página -sigue el mouse-: el plano completo (.auth-shell, sin animación propia) rota sobre su eje vía JS, y la tarjeta va un paso más allá con su propio wrapper (.auth-card-tilt, tampoco animado) que se adelanta en Z e inclina un poco distinto - así da sensación de profundidad en capas en vez de un solo bloque rígido girando-. Ninguno de los dos elementos que reciben el transform por JS tiene "animation" propia, por la misma razón que .auth-card.is-shake más abajo: JS y una animación CSS peleando por el mismo "transform" en el mismo elemento se pisan. */ @media (prefers-reduced-motion:no-preference){ .auth-shell{ transform-style:preserve-3d; transition:transform .15s ease-out; will-change:transform; } .auth-form-panel{ transform-style:preserve-3d; } .auth-card-tilt{ transform-style:preserve-3d; transition:transform .15s ease-out; will-change:transform; } } .auth-brand-panel{ background:linear-gradient(160deg, var(--sidebar-bg-2), var(--sidebar-bg) 65%); color:var(--sidebar-text-active); display:flex; flex-direction:column; justify-content:space-between; padding:3rem; position:relative; overflow:hidden; } /* Fondo con vida propia: grilla de puntos a la deriva + dos manchas de luz que respiran -todo transform/opacity para no pesarle al render-, apagado entero si el usuario prefiere menos movimiento. */ .auth-bg-grid{ position:absolute; inset:-2px; background-image: radial-gradient(var(--sidebar-text) 1px, transparent 1px); background-size:28px 28px; opacity:.09; z-index:0; } .auth-bg-blob{ position:absolute; border-radius:50%; filter:blur(70px); z-index:0; pointer-events:none; } .auth-bg-blob-1{ width:520px; height:520px; background:radial-gradient(circle, var(--primary) 0%, transparent 70%); opacity:.4; right:-180px; bottom:-220px; } .auth-bg-blob-2{ width:360px; height:360px; background:radial-gradient(circle, var(--info-dot) 0%, transparent 70%); opacity:.3; left:-130px; top:-110px; } @media (prefers-reduced-motion:no-preference){ .auth-bg-grid{ animation:auth-grid-drift 50s linear infinite; } .auth-bg-blob-1{ animation:auth-blob-drift-1 17s ease-in-out infinite; } .auth-bg-blob-2{ animation:auth-blob-drift-2 21s ease-in-out infinite; } } @keyframes auth-grid-drift{ from{ background-position:0 0; } to{ background-position:280px 140px; } } @keyframes auth-blob-drift-1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-36px,-44px) scale(1.12); } } @keyframes auth-blob-drift-2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(28px,32px) scale(1.1); } } /* Constelación de nodos -la "imagen de fondo" pedida-: cada punto deriva en su propio ciclo (duración/retraso distintos por nodo, ver estilo inline) para que el conjunto se sienta vivo y no un solo bloque moviéndose en bloque. */ .auth-bg-network{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.55; } .auth-network-lines line{ opacity:.16; } .auth-node{ transform-box:fill-box; transform-origin:center; } @media (prefers-reduced-motion:no-preference){ .auth-node{ animation:auth-node-drift var(--dur,9s) ease-in-out var(--delay,0s) infinite alternate; } .auth-network-lines line{ animation:auth-line-pulse 7s ease-in-out infinite; } .auth-network-lines line:nth-child(3n){ animation-delay:1.4s; animation-duration:8.5s; } .auth-network-lines line:nth-child(3n+1){ animation-delay:2.8s; animation-duration:6.4s; } } @keyframes auth-node-drift{ from{ transform:translate(0,0); } to{ transform:translate(var(--dx), var(--dy)); } } @keyframes auth-line-pulse{ 0%,100%{ opacity:.1; } 50%{ opacity:.3; } } .auth-brand-copy{ position:relative; z-index:1; } .auth-brand-headline{ font-size:2rem; font-weight:800; max-width:26ch; line-height:1.25; position:relative; z-index:1; } .auth-brand-sub{ color:var(--sidebar-text); margin-top:.9rem; max-width:36ch; font-size:.92rem; position:relative; z-index:1; } .auth-module-chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.7rem; position:relative; z-index:1; } .auth-module-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:var(--sidebar-text-active); font-size:.76rem; font-weight:600; backdrop-filter:blur(6px); white-space:nowrap; } .auth-module-chip svg{ width:14px; height:14px; flex-shrink:0; opacity:.9; } /* Entrada escalonada del panel de marca -cada bloque aparece un poco después del anterior- y luego los chips de módulo quedan flotando suavemente, cada uno con su propio ritmo para que no se vean sincronizados como un solo bloque rígido. */ @media (prefers-reduced-motion:no-preference){ .auth-brand-panel .brand, .auth-brand-headline, .auth-brand-sub, .auth-module-chips{ opacity:0; animation:auth-fade-up .7s cubic-bezier(.16,1,.3,1) forwards; } .auth-brand-panel .brand{ animation-delay:.05s; } .auth-brand-headline{ animation-delay:.15s; } .auth-brand-sub{ animation-delay:.32s; } .auth-module-chips{ animation-delay:.48s; } .auth-module-chip{ animation:auth-float 4.6s ease-in-out .9s infinite; } .auth-module-chip:nth-child(2){ animation-delay:1.3s; animation-duration:5.3s; } .auth-module-chip:nth-child(3){ animation-delay:1.7s; animation-duration:4.9s; } } @keyframes auth-fade-up{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } } @keyframes auth-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } } .auth-form-panel{ display:flex; align-items:center; justify-content:center; padding:2rem; } .auth-card-tilt{ width:100%; max-width:360px; } .auth-card{ width:100%; max-width:360px; } @media (prefers-reduced-motion:no-preference){ .auth-card{ opacity:0; animation:auth-fade-up .6s cubic-bezier(.16,1,.3,1) .15s forwards; } /* Con credenciales inválidas hacen falta LAS DOS animaciones -la tarjeta igual tiene que aparecer (fade-up) y además temblar-, así que van juntas en una sola declaración: un .is-shake con su propio "animation" de una sola animación REEMPLAZARÍA a auth-fade-up en vez de sumarse (mismo shorthand, misma propiedad), dejando la tarjeta en opacity:0 para siempre -eso pasó acá, ver commit-. El temblor arranca justo cuando el fade-up ya terminó (.15s + .6s). */ .auth-card.is-shake{ animation: auth-fade-up .6s cubic-bezier(.16,1,.3,1) .15s forwards, auth-shake .4s cubic-bezier(.36,.07,.19,.97) .75s both; } } .auth-card h1{ font-size:1.4rem; font-weight:800; margin-bottom:.3rem; } .auth-card p.lead{ color:var(--text-muted); font-size:.88rem; margin:0 0 1.5rem; } /* Ícono dentro del campo -usuario/contraseña-: solo en este formulario, .input-with-icon no toca el resto de .input del sitio. */ .input-icon-wrap{ position:relative; } .input-icon{ position:absolute; left:.8rem; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-muted); pointer-events:none; } .input-with-icon{ padding-left:2.35rem; } @keyframes auth-shake{ 10%,90%{ transform:translateX(-1px); } 20%,80%{ transform:translateX(3px); } 30%,50%,70%{ transform:translateX(-6px); } 40%,60%{ transform:translateX(6px); } } /* Spinner del botón "Entrar" mientras se verifican las credenciales. */ .btn-spinner{ display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; margin-right:.45rem; vertical-align:-2px; animation:btn-spin .6s linear infinite; } @keyframes btn-spin{ to{ transform:rotate(360deg); } } /* Confirmación de login correcto: un check que aparece con un "estallido" de puntos de color a su alrededor -mismo espíritu que el estado "Confirmed!" del prototipo de referencia-, visible el instante antes de navegar a la página de destino. */ .auth-success{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem; padding:3rem 0; } .auth-success-burst{ position:relative; width:64px; height:64px; } .auth-success-check{ width:64px; height:64px; border-radius:50%; background:var(--success-dot, #22c55e); display:flex; align-items:center; justify-content:center; animation:auth-check-pop .5s cubic-bezier(.34,1.56,.64,1) both; } .auth-success-dot{ position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:50%; background:var(--dc); transform:translate(-50%,-50%); opacity:0; animation:auth-confetti .75s ease-out .08s both; } .auth-success-texto{ font-weight:600; font-size:.9rem; color:var(--text-muted); } @keyframes auth-check-pop{ 0%{ transform:scale(0); opacity:0; } 60%{ transform:scale(1.15); opacity:1; } 100%{ transform:scale(1); } } @keyframes auth-confetti{ 0%{ transform:translate(-50%,-50%) scale(.4); opacity:0; } 35%{ opacity:1; } 100%{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity:0; } } @media (max-width: 860px){ .auth-shell{ grid-template-columns:1fr; } .auth-brand-panel{ display:none; } } /* ---------- Utilidades ---------- */ .stack{ display:flex; flex-direction:column; } .row-between{ display:flex; align-items:center; justify-content:space-between; } .gap-sm{ gap:.5rem; } .mb-lg{ margin-bottom:1.5rem; } .text-muted{ /* !important porque Bootstrap 5.3 todavía trae su propia .text-muted -marcada como obsoleta, pero presente- con el gris oscuro de su modo claro Y con !important, así que le ganaba a esta regla aunque el tema se cargue después. Resultado: texto casi negro sobre fondo casi negro (contraste 1.3:1) en cada "hace 7 días", cada ayuda de formulario y cada subtítulo de la aplicación. */ color:var(--text-muted) !important; } .grid-2{ display:grid; grid-template-columns:2fr 1fr; gap:1.25rem; align-items:start; } @media (max-width: 900px){ .grid-2{ grid-template-columns:1fr; } } /* ---------- Sidebar móvil ---------- La visibilidad del botón que abre el offcanvas la resuelven las utilidades de Bootstrap (d-lg-none) directamente en el HTML; aquí solo quedan los ajustes de layout que no son parte del offcanvas. */ @media (max-width: 991.98px){ .content{ padding:1.1rem; } .stat-grid{ grid-template-columns:1fr 1fr; } .topbar{ padding:.75rem 1rem; flex-wrap:nowrap; } .page-title{ font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38vw; } .topbar-actions{ gap:.4rem; } .topbar-actions > a.btn-primary{ display:none; } .theme-trigger span:not(.theme-swatch){ display:none; } .theme-trigger{ padding:.45rem; } } /* ===================================================== PUENTE BOOTSTRAP -> TOKENS DEL TEMA Bootstrap se usa como framework de componentes (offcanvas, modal, dropdown, toast); en vez de dejar sus colores por defecto, sus variables de tema se ligan a las nuestras para que herede la paleta del data-theme activo automáticamente en todos sus componentes, sin overrides puntuales por cada uno. ===================================================== */ :root{ --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-border-color: var(--border); --bs-primary: var(--primary); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface-2); --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-hover); --bs-modal-bg: var(--surface); --bs-modal-color: var(--text); --bs-modal-header-border-color: var(--border); --bs-modal-footer-border-color: var(--border); --bs-offcanvas-bg: var(--surface); --bs-offcanvas-color: var(--text); --bs-toast-bg: var(--surface); --bs-toast-color: var(--text); --bs-toast-border-color: var(--border); --bs-toast-header-bg: var(--surface-2); --bs-toast-header-color: var(--text); --bs-font-sans-serif: var(--font); } [data-theme="medianoche"] .btn-close, [data-theme="grafito"] .btn-close{ filter: invert(1) grayscale(100%) brightness(1.6); } .modal-content{ border-radius:var(--radius); border-color:var(--border); } .toast{ background:var(--surface); color:var(--text); border-color:var(--border); box-shadow:var(--shadow-md); } .toast-success{ border-left:3px solid var(--success-dot); } .toast-danger{ border-left:3px solid var(--danger-dot); } .toast-info{ border-left:3px solid var(--info-dot); } .shortcut-row{ display:flex; align-items:center; gap:.75rem; padding:.4rem 0; font-size:.86rem; border-bottom:1px solid var(--border); } .shortcut-row:last-child{ border-bottom:none; } .shortcut-row span{ color:var(--text-muted); } .shortcut-hint{ margin-top:.35rem; font-size:.68rem; opacity:.55; } kbd{ background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; padding:.12rem .4rem; font-size:.78rem; font-family:inherit; box-shadow:none; } /* ===================================================== ANIMACIONES SUAVES ===================================================== */ /* Solo anima transform, nunca opacity: si el motor de animación se queda "colgado" antes de arrancar (pestaña en segundo plano, prefers-reduced-motion, etc.) el contenido nunca debe quedar invisible -a lo sumo se ve sin el pequeño desplazamiento-. */ @keyframes fadeIn{ from{ transform:translateY(4px); } to{ transform:translateY(0); } } .fade-in{ animation:fadeIn .25s ease; } .htmx-indicator{ opacity:0; transition:opacity .15s ease; } .htmx-request.htmx-indicator, .htmx-request .htmx-indicator{ opacity:1; } .spinner{ width:16px; height:16px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--primary); animation:spin .6s linear infinite; display:inline-block; } @keyframes spin{ to{ transform:rotate(360deg); } } /* ===================================================== BARRA DE FILTROS + SELECTOR DE VISTA ===================================================== */ .filters-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:1rem; } .search-wrap{ position:relative; flex:1 1 240px; min-width:200px; color:var(--text-muted); } .search-wrap svg{ position:absolute; left:.7rem; top:50%; transform:translateY(-50%); pointer-events:none; } .search-input{ padding-left:2.1rem !important; width:100%; } /* select.filter-select (compuesto, no solo .filter-select): tiene que igualar la especificidad de "select.input" -línea ~425- para poder ganarle el ancho; una clase sola no le gana a elemento+clase aunque venga después en el archivo. */ select.filter-select{ width:auto; min-width:130px; flex:0 0 auto; font-size:.83rem; padding:.5rem .7rem; } .view-tabs{ display:inline-flex; gap:2px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:3px; margin-bottom:1rem; } .view-tab{ display:flex; align-items:center; gap:.4rem; border:none; background:transparent; color:var(--text-muted); font-family:inherit; font-size:.83rem; font-weight:600; padding:.45rem .8rem; border-radius:calc(var(--radius-sm) - 2px); cursor:pointer; transition:background .12s ease, color .12s ease; } .view-tab:hover{ color:var(--text); } .view-tab.active{ background:var(--surface); color:var(--primary); box-shadow:var(--shadow-sm); } @media (max-width: 640px){ select.filter-select{ min-width:0; width:auto; flex:1 1 45%; } .view-tabs{ width:100%; overflow-x:auto; } } /* ===================================================== INDICADORES: pills pequeños y puntos de color ===================================================== */ .pill-xs{ padding:.12rem .5rem; font-size:.66rem; } .pill-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; flex-shrink:0; } .pill-dot-info{ background:var(--info-dot); } .pill-dot-warning{ background:var(--warning-dot); } .pill-dot-success{ background:var(--success-dot); } .pill-dot-danger{ background:var(--danger-dot); } .pill-dot-neutral{ background:var(--neutral-dot); } .tag-row{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.3rem; } /* ===================================================== FLUJO DE VALIDACIÓN: pasos verticales conectados por una línea, para mostrar en qué parte del proceso una cuenta pasó, quedó pendiente o no cumplió (ver comisiones/services.py::calcular_comision_checklist). Vive dentro de un popover de Bootstrap -ver initPopovers en app.js-, así que también sobreescribe las variables de --bs-popover-* para que se vea con los colores del tema activo, no el blanco de Bootstrap. ===================================================== */ .popover{ --bs-popover-max-width: 320px; --bs-popover-bg: var(--surface); --bs-popover-border-color: var(--border); --bs-popover-header-bg: var(--surface); --bs-popover-header-color: var(--text); --bs-popover-header-border-color: var(--border); --bs-popover-body-color: var(--text); --bs-popover-border-radius: var(--radius); --bs-popover-arrow-color: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.18); } .flujo-validacion{ position:relative; } .flujo-paso{ position:relative; padding:0 0 .85rem 1.3rem; } .flujo-paso:last-child{ padding-bottom:0; } .flujo-paso::before{ content:''; position:absolute; left:.24rem; top:1rem; bottom:-.1rem; width:2px; background:var(--border); } .flujo-paso:last-child::before{ display:none; } .flujo-punto{ position:absolute; left:0; top:.2rem; width:.6rem; height:.6rem; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border); } .flujo-paso-cumple .flujo-punto{ background:var(--success-dot); box-shadow:0 0 0 1px var(--success-dot); } .flujo-paso-pendiente .flujo-punto{ background:var(--warning-dot); box-shadow:0 0 0 1px var(--warning-dot); } .flujo-paso-no_cumple .flujo-punto{ background:var(--danger-dot); box-shadow:0 0 0 1px var(--danger-dot); } .flujo-paso-no_aplica .flujo-punto{ background:var(--neutral-dot); box-shadow:0 0 0 1px var(--neutral-dot); opacity:.6; } .flujo-etiqueta{ font-weight:600; font-size:.82rem; } .flujo-paso-no_aplica .flujo-etiqueta{ opacity:.6; } /* ===================================================== VISTA LISTA (compacta) ===================================================== */ .ticket-list{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .ticket-row{ display:flex; align-items:center; gap:.85rem; padding:.75rem 1.1rem; border-bottom:1px solid var(--border); color:var(--text); text-decoration:none; transition:background .12s ease; } .ticket-row:last-child{ border-bottom:none; } .ticket-row:hover{ background:var(--surface-2); color:var(--text); } .ticket-row-main{ flex:1; min-width:0; } .ticket-row-title{ font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ticket-row-meta{ font-size:.78rem; color:var(--text-muted); margin-top:.15rem; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; } .ticket-row-agente{ font-size:.82rem; min-width:110px; text-align:right; } .ticket-row-fecha{ font-size:.78rem; min-width:70px; text-align:right; } @media (max-width: 720px){ .ticket-row{ flex-direction:column; align-items:flex-start; gap:.35rem; } .ticket-row-main{ width:100%; } .ticket-row-title{ white-space:normal; overflow:visible; text-overflow:clip; } .ticket-row-agente, .ticket-row-fecha{ text-align:left; min-width:0; width:auto; font-size:.74rem; color:var(--text-muted); } } /* ===================================================== VISTA KANBAN ===================================================== */ .kanban-board{ display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem; align-items:flex-start; } .kanban-column{ flex:0 0 280px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); display:flex; flex-direction:column; max-height:calc(100vh - 300px); min-height:200px; } .kanban-column-header{ display:flex; align-items:center; gap:.5rem; padding:.8rem .9rem; font-size:.82rem; font-weight:700; border-bottom:1px solid var(--border); } .kanban-column-count{ margin-left:auto; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:.05rem .5rem; font-size:.72rem; color:var(--text-muted); } .kanban-column-body{ flex:1; overflow-y:auto; padding:.6rem; display:flex; flex-direction:column; gap:.6rem; transition:background .12s ease; min-height:80px; } .kanban-column-body.drag-over{ background:var(--primary-tint); outline:2px dashed var(--primary); outline-offset:-4px; border-radius:var(--radius-sm); } .kanban-empty{ text-align:center; color:var(--text-muted); font-size:.78rem; padding:1.2rem 0; } .kanban-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.7rem .8rem; cursor:grab; box-shadow:var(--shadow-sm); transition:box-shadow .15s ease, transform .15s ease, opacity .15s ease; } .kanban-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); } .kanban-card:active{ cursor:grabbing; } .kanban-card.dragging{ opacity:.35; } .kanban-card.just-dragged{ animation:cardDropped .35s ease; } @keyframes cardDropped{ 0%{ transform:scale(.96); opacity:.5; } 100%{ transform:scale(1); opacity:1; } } .kanban-card-top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.4rem; } .kanban-card-numero{ font-size:.72rem; font-weight:700; color:var(--text-muted); } .kanban-card-title{ font-size:.86rem; line-height:1.35; margin-bottom:.4rem; } .kanban-card-footer{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; margin-top:.55rem; font-size:.76rem; } .kanban-card-agente{ display:flex; align-items:center; gap:.4rem; } /* ===================================================== VISTA CALENDARIO ===================================================== */ .calendar-view{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; } .calendar-nav{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:.9rem; } .calendar-month-label{ font-weight:700; font-size:1rem; min-width:160px; text-align:center; } .calendar-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; } .calendar-grid-header{ margin-bottom:4px; font-size:.72rem; font-weight:700; text-transform:uppercase; color:var(--text-muted); text-align:center; } .calendar-day{ min-height:92px; min-width:0; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.35rem; display:flex; flex-direction:column; gap:.2rem; } .calendar-day-fuera{ opacity:.4; } .calendar-day-hoy{ border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); } .calendar-day-num{ font-size:.76rem; font-weight:700; margin-bottom:.15rem; } .calendar-chip{ display:block; width:100%; min-width:0; max-width:100%; font-size:.66rem; font-weight:700; padding:.1rem .35rem; border-radius:4px; border:none; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; cursor:pointer; font-family:inherit; } .calendar-more{ font-size:.64rem; color:var(--text-muted); } @media (max-width: 720px){ .calendar-day{ min-height:60px; } .calendar-month-label{ min-width:0; font-size:.88rem; } .calendar-grid-header{ font-size:.6rem; } } /* ================================================= PORTAL DEL CLIENTE: adjuntos, firma de conformidad, calificación ================================================= */ .attachment-row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-size:.85rem; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.5rem .8rem; } .attachment-row a{ display:flex; align-items:center; gap:.4rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .signature-pad{ width:100%; height:160px; display:block; border:1.5px dashed var(--border); border-radius:var(--radius-sm); background:var(--surface-2); touch-action:none; cursor:crosshair; } .signature-pad.has-signature{ border-style:solid; } .signature-preview{ max-width:100%; height:auto; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; } .star-rating{ display:flex; gap:.3rem; } .star-rating .star-btn{ background:transparent; border:none; padding:.3rem; line-height:0; cursor:pointer; color:var(--border); min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; } .star-rating .star-btn svg{ width:26px; height:26px; } .star-rating .star-btn.active{ color:var(--warning-dot); } .star-rating .star-btn.readonly{ cursor:default; } .rating-display{ display:flex; gap:.15rem; align-items:center; } .rating-display svg{ width:18px; height:18px; color:var(--border); } .rating-display svg.active{ color:var(--warning-dot); } /* ===================================================== PESTAÑAS del detalle de caso (Actuaciones/Documentos/Correo): evita que la tarjeta se extienda indefinidamente hacia abajo -antes las tres secciones se apilaban siempre visibles a la vez-. ===================================================== */ .tabs{ display:flex; gap:.2rem; border-bottom:1px solid var(--border); margin-bottom:1.1rem; } .tab-btn{ display:inline-flex; align-items:center; gap:.4rem; background:transparent; border:none; border-bottom:2px solid transparent; padding:.6rem .3rem; margin-right:1rem; font-size:.85rem; font-weight:600; color:var(--text-muted); cursor:pointer; transition:color .12s ease, border-color .12s ease; } .tab-btn:hover{ color:var(--text); } .tab-btn.active{ color:var(--primary); border-bottom-color:var(--primary); } .tab-count{ font-size:.72rem; font-weight:700; color:var(--text-muted); background:var(--surface-2); border-radius:999px; padding:.05rem .45rem; } .tab-btn.active .tab-count{ color:var(--primary); } .tab-dot{ width:7px; height:7px; border-radius:50%; background:var(--danger-dot); display:inline-block; } .tab-panel[hidden]{ display:none; } /* ===================================================== CORREO: correos vinculados con aviso de respuesta nueva ===================================================== */ .correo-item{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:.7rem .9rem; font-size:.85rem; } .correo-item-unread{ border-color:var(--warning-dot); background:var(--warning-bg); } /* ===================================================== CORREO: caja de respuesta (estilo compose de Gmail) - adjuntar es un ícono, no el nativo, y CC/CCO son enlaces que revelan su campo en vez de estar siempre visibles. ===================================================== */ .compose{ display:flex; flex-direction:column; gap:.5rem; } .compose-textarea{ resize:vertical; } .compose-recipient-row{ display:flex; align-items:center; gap:.5rem; } .compose-recipient-label{ font-size:.76rem; font-weight:700; color:var(--text-muted); width:34px; flex-shrink:0; } .compose-recipient-row .input{ flex:1; } .compose-files{ display:flex; flex-wrap:wrap; gap:.4rem; } .compose-files:empty{ display:none; } .compose-file-chip{ display:inline-flex; align-items:center; gap:.35rem; max-width:220px; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:.2rem .5rem .2rem .65rem; font-size:.76rem; color:var(--text); } .compose-file-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .compose-file-chip button{ background:transparent; border:none; cursor:pointer; color:var(--text-muted); display:flex; align-items:center; padding:0; line-height:0; flex-shrink:0; } .compose-file-chip button:hover{ color:var(--danger-fg); } .compose-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; } .compose-toolbar-left{ display:flex; align-items:center; gap:.15rem; } .compose-icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:transparent; border:none; padding:0; color:var(--text-muted); cursor:pointer; transition:background .12s ease, color .12s ease; } .compose-icon-btn:hover{ background:var(--surface-2); color:var(--text); } .compose-icon-btn.htmx-request svg{ animation:spin .6s linear infinite; } .compose-text-btn{ background:transparent; border:none; cursor:pointer; font-size:.76rem; font-weight:700; color:var(--text-muted); padding:.4rem .55rem; border-radius:var(--radius-sm); transition:background .12s ease, color .12s ease; } .compose-text-btn:hover{ background:var(--surface-2); color:var(--text); } .compose-text-btn.active{ color:var(--primary); } /* ===================================================== EDITOR ENRIQUECIDO (redactar/responder correos) ===================================================== */ .rte{ border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); } .rte-toolbar{ display:flex; align-items:center; gap:.1rem; padding:.3rem .35rem; border-bottom:1px solid var(--border); background:var(--surface-2); } .rte-btn{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; background:transparent; border:none; border-radius:6px; color:var(--text-muted); cursor:pointer; font-size:.8rem; transition:background .12s ease, color .12s ease; } .rte-btn:hover{ background:var(--surface); color:var(--text); } .rte-btn b, .rte-btn i, .rte-btn u{ pointer-events:none; } .rte-sep{ width:1px; height:16px; background:var(--border); margin:0 .25rem; } .rte-body{ min-height:100px; max-height:320px; overflow-y:auto; padding:.6rem .7rem; font-size:.88rem; line-height:1.55; outline:none; } .rte-body:empty::before{ content:attr(data-placeholder); color:var(--text-muted); } .rte-body img{ max-width:100%; border-radius:4px; margin:.3rem 0; display:block; } .rte-body ul, .rte-body ol{ padding-left:1.4rem; margin:.3rem 0; } .rte-body a{ color:var(--primary); } /* ===================================================== CORREO: bandeja tipo inbox (lista + previsualización) ===================================================== */ .inbox{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.04); } .inbox-toolbar{ display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; border-bottom:1px solid var(--border); background:var(--surface-2); flex-shrink:0; } .inbox-toolbar .search-wrap{ flex:1 1 auto; min-width:0; } .inbox-toolbar .search-input{ border-color:transparent; background:var(--surface); } .inbox-toolbar .search-input:focus{ border-color:var(--primary); } .inbox-body{ display:grid; grid-template-columns:minmax(240px, 340px) 1fr; height:440px; } /* Pantalla global de Correos: a diferencia del widget embebido en un caso (altura fija de 440px, comparte espacio con el resto del detalle), aquí el inbox es el contenido de toda la página -se estira para aprovechar el alto disponible, como en Outlook-. */ .inbox-standalone .inbox-body{ height:calc(100vh - 260px); min-height:440px; } .inbox-list{ overflow-y:auto; border-right:1px solid var(--border); background:var(--surface-2); scrollbar-width:thin; } .inbox-list::-webkit-scrollbar{ width:8px; } .inbox-list::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; } .inbox-item{ display:flex; gap:.6rem; width:100%; text-align:left; padding:.75rem .9rem; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s ease; position:relative; } .inbox-item:hover{ background:var(--primary-tint); } .inbox-item.active{ background:var(--primary-tint); } .inbox-item.active::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--primary); } .inbox-item-avatar{ flex-shrink:0; margin-top:.1rem; } .inbox-item-body{ min-width:0; flex:1; } .inbox-item-top{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; font-size:.79rem; } .inbox-item-from{ font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .inbox-item-date{ color:var(--text-muted); font-size:.72rem; white-space:nowrap; flex-shrink:0; } .inbox-item-subject{ font-size:.83rem; font-weight:500; margin-top:.2rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .inbox-item-snippet{ font-size:.76rem; color:var(--text-muted); margin-top:.2rem; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .inbox-item .pill{ margin-top:.4rem; } .inbox-preview{ overflow-y:auto; background:var(--surface); scrollbar-width:thin; } .inbox-preview::-webkit-scrollbar{ width:8px; } .inbox-preview::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; } .inbox-preview-empty{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; text-align:center; padding:1.5rem; color:var(--text-muted); } .inbox-preview-empty svg{ opacity:.35; } .inbox-preview-body{ display:flex; flex-direction:column; height:100%; } .inbox-preview-header{ display:flex; gap:.8rem; align-items:flex-start; padding:1.1rem 1.3rem 1rem; border-bottom:1px solid var(--border); flex-shrink:0; } .inbox-preview-subject{ font-size:1.05rem; font-weight:600; margin:0 0 .35rem; line-height:1.35; } .inbox-preview-meta{ min-width:0; flex:1; } .inbox-preview-content{ padding:1.1rem 1.3rem; font-size:.88rem; line-height:1.55; overflow-y:auto; flex:1; } .inbox-preview-content p{ margin:0 0 .8rem; } .inbox-preview-content p:last-child{ margin-bottom:0; } .inbox-preview-content img{ max-width:100%; height:auto; border-radius:4px; } .inbox-preview-actions{ display:flex; align-items:center; gap:.6rem; padding:.8rem 1.3rem; border-top:1px solid var(--border); background:var(--surface-2); flex-shrink:0; } @media (max-width: 640px){ .signature-pad{ height:140px; } .attachment-row{ flex-direction:column; align-items:flex-start; } .inbox-body, .inbox-standalone .inbox-body{ grid-template-columns:1fr; height:auto; } .inbox-list{ border-right:none; border-bottom:1px solid var(--border); max-height:240px; } .inbox-preview{ height:340px; } } /* ================================================= TOUR GUIADO (onboarding paso a paso) El elemento resaltado se "recorta" con un box-shadow de spread gigante sobre sí mismo -en vez de un overlay+máscara SVG aparte-, así el resto de la pantalla queda oscurecido y el objetivo del paso actual, iluminado, sin dos capas de DOM que sincronizar. ================================================= */ .tour-highlight{ position:relative; z-index:9001; border-radius:var(--radius-sm); box-shadow:0 0 0 4px var(--primary), 0 0 0 9999px rgba(10,12,24,.6); transition:box-shadow .15s ease; } .tour-tooltip{ position:fixed; z-index:9002; max-width:300px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:1rem 1.1rem; font-size:.85rem; line-height:1.5; } .tour-tooltip-eyebrow{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--primary); font-weight:700; margin-bottom:.3rem; } .tour-tooltip-title{ font-size:.95rem; font-weight:700; margin:0 0 .4rem; } .tour-tooltip-texto{ color:var(--text-muted); margin:0 0 .9rem; } .tour-tooltip-actions{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; } .tour-tooltip-nav{ display:flex; gap:.4rem; } /* ---------- Mensajería (chat interno) ---------- */ .conversaciones-lista{ display:flex; flex-direction:column; gap:.15rem; } .conversacion-item{ display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem; border-radius:var(--radius-sm); color:var(--text); text-decoration:none; } .conversacion-item:hover{ background:var(--surface-2); color:var(--text); } .conversacion-item.unread{ background:var(--primary-tint); } .conversacion-item.unread .conversacion-nombre{ font-weight:800; } .conversacion-item.unread .conversacion-preview{ color:var(--text); font-weight:500; } .conversacion-nombre{ font-weight:600; } .conversacion-preview{ font-size:.82rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .conversacion-estado{ font-size:.72rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .conversacion-estado.online{ color:var(--success-dot, #22c55e); font-weight:600; } .conversacion-meta{ margin-left:auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; flex-shrink:0; } /* Envoltorio genérico avatar+punto de presencia, reusado en la lista de conversaciones, el header de una conversación abierta y el popup flotante -no solo en el widget de contactos-. */ .chat-presence{ position:relative; display:inline-flex; flex-shrink:0; } .chat-presence-dot{ position:absolute; bottom:0; right:0; width:10px; height:10px; border-radius:50%; background:var(--text-muted); border:2px solid var(--surface); } .chat-presence-dot.online{ background:var(--success-dot, #22c55e); } .chat-header{ display:flex; align-items:center; gap:.7rem; padding:.9rem 1rem; background:var(--surface); border:1px solid var(--border); border-bottom:none; border-radius:var(--radius) var(--radius) 0 0; } .chat-header-info{ display:flex; flex-direction:column; min-width:0; } .chat-header-nombre{ font-weight:700; font-size:.95rem; } .chat-header-estado{ font-size:.76rem; color:var(--text-muted); } .chat-header-estado.online{ color:var(--success-dot, #22c55e); font-weight:600; } .chat-header + .chat-thread{ border-radius:0 0 var(--radius) var(--radius); border-top:none; } .chat-thread{ display:flex; flex-direction:column; gap:.5rem; height:55vh; overflow-y:auto; padding:1rem; background:var(--surface-2); border-radius:var(--radius); border:1px solid var(--border); } .chat-bubble{ max-width:70%; padding:.55rem .8rem; border-radius:var(--radius); font-size:.88rem; line-height:1.45; } .chat-bubble-mia{ align-self:flex-end; background:var(--primary); color:var(--primary-fg); border-bottom-right-radius:4px; } .chat-bubble-otro{ align-self:flex-start; background:var(--surface); border:1px solid var(--border); border-bottom-left-radius:4px; } .chat-bubble-hora{ font-size:.68rem; opacity:.7; margin-top:.25rem; display:inline-flex; align-items:center; gap:.2rem; } .chat-bubble-check{ display:inline-flex; opacity:.75; } .chat-bubble-check.leido{ opacity:1; color:#4fc3f7; } .chat-compose{ display:flex; gap:.6rem; margin-top:.8rem; } .chat-compose textarea{ flex:1; resize:none; } /* ---------- Widget flotante de chat (estilo Messenger) ---------- */ .chat-widget-launcher{ position:fixed; right:20px; bottom:20px; z-index:1200; width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg, var(--primary), var(--primary-hover)); color:var(--primary-fg); border:none; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); cursor:pointer; } .chat-widget-launcher:hover{ filter:brightness(1.08); } .chat-widget-launcher #chat-widget-badge{ position:absolute; top:-4px; right:-4px; } .chat-widget-launcher #chat-widget-badge:empty{ display:none; } .chat-widget-panel{ position:fixed; right:20px; bottom:84px; z-index:1200; width:280px; max-height:380px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; } .chat-widget-panel-header{ padding:.7rem .9rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-weight:600; font-size:.85rem; flex-shrink:0; } .chat-widget-contactos{ overflow-y:auto; } .chat-widget-contacto{ display:flex; align-items:center; gap:.6rem; width:100%; padding:.55rem .9rem; border:none; background:transparent; text-align:left; cursor:pointer; color:var(--text); } .chat-widget-contacto:hover{ background:var(--surface-2); } .chat-widget-avatar-wrap{ position:relative; flex-shrink:0; } .chat-widget-dot{ position:absolute; bottom:-1px; right:-1px; width:9px; height:9px; border-radius:50%; background:var(--text-muted); border:2px solid var(--surface); } .chat-widget-dot.online{ background:var(--success-dot, #22c55e); } .chat-widget-contacto-info{ min-width:0; display:flex; flex-direction:column; } .chat-widget-contacto-nombre{ font-size:.83rem; font-weight:600; } .chat-widget-contacto-preview{ font-size:.74rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; } .chat-popup{ position:fixed; right:312px; bottom:84px; z-index:1200; width:300px; height:380px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; } .chat-popup-header{ padding:.6rem .8rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-size:.83rem; font-weight:600; flex-shrink:0; } .chat-popup-header-user{ display:flex; align-items:center; gap:.5rem; } .chat-popup-close{ background:transparent; border:none; color:var(--text-muted); font-size:1.2rem; line-height:1; cursor:pointer; padding:.15rem .5rem; border-radius:var(--radius-sm); } .chat-popup-close:hover{ background:var(--surface-2); color:var(--text); } .chat-popup-thread{ flex:1; height:auto; border:none; border-radius:0; } .chat-popup-compose{ margin:0; padding:.6rem; border-top:1px solid var(--border); flex-shrink:0; } .chat-popup-compose textarea{ font-size:.83rem; } @media (max-width: 768px){ .chat-widget-launcher, .chat-widget-panel, .chat-popup{ display:none !important; } } /* ============================================================ MÓDULO DE INVENTARIO ------------------------------------------------------------ Estas clases faltaban en el tema y las páginas del módulo las usaban igual: sin definirlas, el navegador caía en sus estilos por defecto (un

gigante, listas con viñetas,

 desbordado), que
   es exactamente lo que hacía ver el módulo como HTML sin diseño.
   Se definen acá, una vez, en vez de repetir estilos en línea página
   por página.
   ============================================================ */

.card-title{
  font-size:1.02rem;
  font-weight:700;
  margin:0 0 .9rem;
}
.card-title .conteo{ font-size:.8rem; font-weight:600; color:var(--text-muted); margin-left:.35rem; }

.page-subtitle{
  font-size:.85rem;
  color:var(--text-muted);
  margin:.15rem 0 0;
}

.lista-simple{ list-style:none; padding:0; margin:0; }
.lista-simple li{
  padding:.55rem 0;
  border-bottom:1px solid var(--border);
  font-size:.88rem;
}
.lista-simple li:last-child{ border-bottom:0; }

.code-block{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.7rem .85rem;
  font-size:.82rem;
  overflow-x:auto;
  margin:0;
  white-space:pre-wrap;
  word-break:break-all;
}

/* ---------- Cabecera y pestañas del módulo ---------- */

.modulo-encabezado{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.9rem;
}
.modulo-acciones{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }

/* Solo el encabezado DENTRO del espacio de trabajo de Proyectos -no el
   de Inventario, que comparte la misma clase-: una franja con el color
   del tablero de fondo, para que se sepa en qué tablero se está sin
   leer el título. */
.proy-espacio-contenido .modulo-encabezado{
  padding:1.1rem 1.3rem;
  border-radius:var(--radius);
  background:linear-gradient(120deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), var(--surface) 65%);
  border:1px solid var(--border);
}

.modulo-tabs{
  display:flex;
  gap:.2rem;
  flex-wrap:wrap;
  border-bottom:1px solid var(--border);
  margin-bottom:1.4rem;
}
.modulo-tab{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.6rem .9rem;
  font-size:.86rem;
  font-weight:600;
  color:var(--text-muted);
  text-decoration:none;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .12s ease, border-color .12s ease;
}
.modulo-tab svg{ width:15px; height:15px; }
.modulo-tab:hover{ color:var(--text); }
.modulo-tab.activa{ color:var(--primary); border-bottom-color:var(--primary); }

/* ---------- Rejillas ----------
   min-width:0 en los hijos NO es decorativo: un