/* Layout general */ #mloc-root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .mloc-header { margin-bottom: 10px; } .mloc-title { background: -webkit-linear-gradient(90deg, #0a00cc, #000594); background: linear-gradient(90deg, #0a00cc, #000594); color: #ffffff !important; text-align: left; border: solid 1px #000474; border-radius: 15px; padding: 10px 10px; margin: 0 0 6px 0; font-size: 1.5rem !important; font-weight: 600 !important; } .mloc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } /* Columna izquierda */ .mloc-col.left {} .mloc-label { display:block; font-weight:600; margin-bottom:6px; } .mloc-input { width: 100%; padding: 10px 12px; border: 1px solid #d0d7de; border-radius: 8px; outline: none; margin-bottom: 10px; } .mloc-input:focus { border-color:#6c8bf5; box-shadow: 0 0 0 3px rgba(108,139,245,0.15); } .mloc-btn { border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 600; cursor: pointer; } .mloc-btn.primary { background: -webkit-linear-gradient(90deg, #0a00cc, #000594); background: linear-gradient(90deg, #0a00cc, #000594); color: #ffffff; height: 40px; width: 200px; border-radius: 5px; transition: all 0.4s ease; } .mloc-btn.primary:hover { opacity: .95; } .mloc-btn.danger { background:#ef3a2d; color:#fff; } .mloc-btn.success { background:#1fa84f; color:#fff; } .mloc-btn[disabled] { opacity:.6; cursor:not-allowed; } .mloc-sep { margin: 14px 0; border: none; border-top:1px solid #eee; } .mloc-dropwrap {} .mloc-dropzone { border: 2px dashed #c7c7c7; border-radius: 10px; min-height: 120px; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6px; color:#707070; user-select:none; transition: .15s ease all; margin-bottom: 10px; } .mloc-dropzone.is-dragover { background:#f8fbff; border-color:#8db7ff; } .mloc-dropzone span { font-weight:600; } .mloc-dropzone small { opacity:.9; } .mloc-selected { color:#666; margin-bottom: 10px; } .mloc-selected-name { margin-left: 8px; } .mloc-drop-texts { display: flex; flex-direction: column; flex-wrap: nowrap; } /* Columna derecha */ .mloc-list-head { font-weight:700; margin-bottom:8px; } .mloc-doc-list { display:flex; flex-direction:column; gap:10px; } .mloc-empty { color:#999; font-style: italic; padding: 6px 0; } .mloc-item { display:flex; align-items:center; gap:10px; padding:2px 2px; border: none; border-bottom:1px solid #bdbdbd !important; border-radius:0; background:#fff; cursor:pointer; } .mloc-item input[type="checkbox"] { margin:0; cursor:pointer; } .mloc-item .mloc-name { flex:1; } .mloc-item .mloc-icons { display:flex; align-items:center; gap:6px; } .mloc-files-btn { position: relative; border:0; background:transparent; padding:0; cursor:pointer; } .mloc-dot { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:12px; font-weight:700; color:#fff; } .mloc-dot.green { background:#16a34a; } .mloc-dot.gray { background:#a1a1aa; } /* Tooltip */ .mloc-tooltip { display:none; } .mloc-tooltip.is-open { display:block; } /* Versión portal: lo posicionaremos por JS en con position:fixed */ .mloc-tooltip{ display:none; position: fixed; /* clave: sale del flujo de contenedores con overflow */ min-width: 260px; max-height: 300px; overflow:auto; background:#ffffff; color:#141414; border: solid 1px #000594; border-radius:12px; box-shadow: 0 8px 30px rgba(0,0,0,.3); z-index: 100000; /* por encima del modal y acordeón */ } .mloc-tip-head{ padding:10px 12px; font-weight:700; border-bottom:1px solid rgba(0,0,0,.08); } .mloc-tip-body{ padding:8px 12px; } .mloc-file-row{ padding:8px 6px; border-radius:8px; } .mloc-file-row a{ color:#030303; text-decoration:none; } .mloc-file-row:hover{ background: rgba(0,0,0,.04); } .mloc-no-files{ padding:10px 6px; color:#6b7280; } /*EL MODAL*/ /* ===== Modal lateral ===== */ .mloc-modal { position: fixed; inset: 0; z-index: 99998; display: none; /* hidden by default */ } .mloc-modal.open { display: block; } .mloc-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); } .mloc-panel { position: absolute; left: 0; top: 0; height: 100vh; width: 60vw; /* 60% de pantalla */ max-width: 980px; /* límite opcional */ min-width: 320px; background: #ffffff; box-shadow: 6px 0 28px rgba(0,0,0,.28); transform: translateX(-100%); transition: transform .25s ease-in-out; padding: 16px; overflow: auto; z-index: 99999; /* por encima del overlay */ } .mloc-modal.open .mloc-panel { transform: translateX(0); } .mloc-close { position: sticky; top: 0; float: right; font-size: 28px; line-height: 1; padding: 4px 10px; margin: -6px -6px 8px 0; border: solid 1px; border-radius: 20px; background: #cc1616; color: #ffffff; /* rojo */ cursor: pointer !important; } .mloc-close:hover { opacity: 0.9; } /* Evitar scroll del body cuando el modal está abierto */ body.mloc-no-scroll { overflow: hidden; } /*MOSTRAR DOCUMENTOS ANTES DE SUBIR ARCHIVOS*/ /* ===== Cola de pre-visualización ===== */ .mloc-queue { margin: 8px 0 10px 0; border: 1px dashed #e6e6e6; border-radius: 8px; padding: 8px 10px; background: #fafafa; } .mloc-queue-empty { color: #9aa2aa; font-size: 13px; } .mloc-queue-list { list-style: none; margin: 0; padding: 0; display:flex; flex-direction: column; gap: 6px; max-height: 180px; overflow: auto; } .mloc-queue-item { display:flex; align-items:center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 6px 10px; } .mloc-queue-name { font-size: 13px; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mloc-queue-remove { border: none; background: #ef4444; /* rojo */ color: #fff; width: 24px; height: 24px; border-radius: 999px; cursor: pointer; line-height: 1; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; } .mloc-queue-remove:hover { opacity: .9; } /*ICONO UPLOAD*/ .mloc-dropzone .fa-cloud-upload-alt, .mloc-dropzone .fa-cloud-arrow-up { font-size: 40px; color: #6b7280; margin-bottom: 8px; transition: color .25s ease, transform .25s ease; } .mloc-dropzone.is-dragover .fa-cloud-upload-alt, .mloc-dropzone.is-dragover .fa-cloud-arrow-up { color: #2563eb; transform: translateY(-4px); } /*ICONO DOWLOAND*/ /* ===== Ícono de descarga en tooltip ===== */ .mloc-file-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px; border-radius: 8px; } .mloc-download-btn { color: #a5b4fc; /* lavanda */ text-decoration: none; font-size: 16px; transition: color 0.2s ease; } .mloc-download-btn:hover { color: #60a5fa; /* azul claro al pasar el mouse */ } .mloc-file-link { flex: 1; color: #e5e7eb; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /*DIVISOR DE LOS DOCUMENTOS DEFAULT*/ .mloc-divider { border: 0; border-top: 1px dashed #e5e7eb; margin: 6px 0 4px 0; } /*EL DOWLOAND ZIP*/ .mloc-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; margin-bottom: 8px; } .mloc-zip-all { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; font-size: 13px; background: #0f172a; color: #e5e7eb; padding: 6px 10px; border-radius: 8px; transition: background .2s ease, transform .2s ease; } .mloc-zip-all:hover { background: #1e293b; transform: translateY(-1px); } .mloc-zip-all .fa { font-size: 14px; } /*texto divisorio*/ .mloc-subsection { color: #000000; font-weight: 700; text-align: center; } /* ===== "Your Documents" con scroll vertical ===== */ .mloc-customs-vert { display: flex; flex-direction: column; gap: 10px; max-height: 280px; /* ajusta a gusto: 220–360px */ overflow-y: auto; overflow-x: hidden; padding-right: 4px; /* deja espacio para el scrollbar */ } /* Estética del scrollbar (opcional) */ .mloc-customs-vert::-webkit-scrollbar { width: 8px; } .mloc-customs-vert::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 8px; } .mloc-customs-vert:hover::-webkit-scrollbar-thumb { background: #9ca3af; } /* Asegura que los items ocupen el ancho */ .mloc-customs-vert .mloc-item { width: 100%; } /*EL BUSCADOR*/ /* ===== Toolbar de "Your Documents": buscador + contador ===== */ .mloc-customs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 8px 0; } .mloc-search { flex: 1; padding: 8px 10px; border: 1px solid #d0d7de; border-radius: 8px; outline: none; font-size: 14px; } .mloc-search:focus { border-color: #6c8bf5; box-shadow: 0 0 0 3px rgba(108,139,245,0.15); } .mloc-customs-counter { min-width: 80px; text-align: right; color: #6b7280; font-size: 13px; font-weight: 600; } /*EL ACORDEON*/ /* ===== Accordion: Default Documents ===== */ .mloc-accordion { background: #f9fafb; /* gris muy claro */ border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 10px; overflow: hidden; /* oculta body durante animación */ } /* Header tipo Bootstrap */ .mloc-accordion-header { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(90deg, #0a00cc, #000594); border: 0; outline: none; cursor: pointer; font-weight: 700; color: #ffffff; transition: background .2s ease; } .mloc-accordion-header:hover { background: #e5e7eb; } .mloc-accordion-header:focus { background: linear-gradient(90deg, #0a00cc, #000594); color: #ffffff !important; } .mloc-accordion-icon { font-size: 14px; color: #6b7280; transition: transform .25s ease; } /* Body con transición vertical */ .mloc-accordion-body { background: #ffffff; border-top: 1px solid #e5e7eb; padding: 10px 12px; display: block; max-height: 0; /* colapsado por defecto (lo abrimos via .open y JS) */ overflow: hidden; transition: max-height .28s ease; } /* Estado abierto: rota el chevron */ .mloc-accordion.open .mloc-accordion-icon { transform: rotate(180deg); } /* Desactiva transición temporalmente cuando inicializamos abierto */ .mloc-accordion-body.no-transition { transition: none !important; }