intercalado. */
body:not(.row-stripes) .config-entry { --row-stripe-color: transparent; }
.config-entry:nth-of-type(even) { background-color: var(--row-stripe-color); }
.config-entry:hover {
background: var(--surface-active-bg);
}
/* Sección activa (la que se muestra en el panel principal): acento gris neutro. */
.config-entry.active,
.config-entry.active:hover {
background: var(--surface-active-bg);
}
#btn-config-guide,
#btn-config-shortcuts {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
text-align: left;
}
.icon-only.flat {
border: none;
background: transparent;
box-shadow: none;
color: var(--secondary-text-color);
}
.folder-tree {
padding-bottom: 2rem;
overflow-y: auto;
flex-grow: 1;
}
/* Contenedor de la barra divisoria */
#sidebar-resizer {
width: 4px;
background-color: var(--border-color);
cursor: col-resize;
flex-shrink: 0;
transition: background-color var(--anim-base) ease, width var(--anim-base) ease;
z-index: 10;
position: relative; /* CRÍTICO para centrar el botón a media altura */
}
#sidebar-resizer:hover,
#sidebar-resizer.resizing {
background-color: var(--focus-color);
width: 6px;
}
body.sidebar-resizing {
cursor: col-resize;
user-select: none;
}
/* --- Personalización de la barra de desplazamiento para el Sidebar --- */
/* Scrollbars globales — Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #555 var(--surface-color);
}
/* Scrollbars globales — WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--surface-color);
}
::-webkit-scrollbar-thumb {
background: #555;
border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
background: var(--button-hover-bg);
}
/* Estilos del botón pequeño y centrado */
#btn-collapse-sidebar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 14px; /* Mucho más estrecho */
height: 28px; /* Altura pequeña tipo pestaña */
border-radius: var(--radius-sm);
background-color: var(--focus-color);
color: var(--on-accent);
border: 1px solid var(--bg-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0; /* Oculto por defecto */
pointer-events: none;
transition: opacity var(--anim-base) ease, background-color var(--anim-base) ease;
z-index: 20;
padding: 0;
}
#btn-collapse-sidebar .material-icons {
font-size: var(--icon-xs); /* Icono más pequeño */
margin: 0;
}
/* Mostrar el botón SOLO al hacer hover en la barra azul */
#sidebar-resizer:hover #btn-collapse-sidebar,
#sidebar-resizer.resizing #btn-collapse-sidebar {
opacity: 1;
pointer-events: auto;
}
#btn-collapse-sidebar:hover {
background-color: var(--primary-hover-color);
}
/* --- Estados cuando la barra izquierda está colapsada --- */
body.sidebar-collapsed .sidebar {
display: none; /* Fuerza la ocultación de la sección izquierda */
}
body.sidebar-collapsed #sidebar-resizer {
cursor: pointer; /* Cambia el cursor porque ya no redimensiona */
width: 8px; /* Un poco más ancha para facilitar el hover y restaurar */
}
/* LAYOUT: CONTENT */
.content {
flex: 1;
display: flex;
flex-direction: column;
height: 100dvh;
min-width: 0;
}
.content-header {
padding: 1.1rem;
background-color: var(--surface-color);
border-bottom: 1px solid var(--border-color);
flex-shrink: 0;
/* Nuevas propiedades para alinear título y estadísticas */
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.content-stats {
text-align: right;
font-size: var(--fs-2xs);
line-height: 1.15;
color: var(--secondary-text-color);
font-family: var(--code-font-family);
display: flex;
flex-direction: column;
gap: 1px;
white-space: nowrap;
flex-shrink: 0;
cursor: pointer;
transition: font-size var(--anim-base) ease, color var(--anim-base) ease;
}
.content-stats:hover {
font-size: var(--fs-sm);
color: var(--text-color);
}
/* Popover de resumen de carpeta (hover sobre .content-stats) */
.stats-popover {
position: fixed;
z-index: 1150;
min-width: 230px;
max-width: 310px;
box-sizing: border-box;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
box-shadow: var(--shadow-2);
padding: 0.6rem 0.8rem;
font-family: var(--code-font-family);
font-size: var(--fs-xs);
color: var(--text-color);
opacity: 0;
transform: translateY(-4px);
transition: opacity var(--anim-fast) ease, transform var(--anim-fast) ease;
pointer-events: none;
cursor: grab;
user-select: none;
}
.stats-popover.visible {
opacity: 1;
transform: none;
pointer-events: auto;
}
.stats-popover.dragging {
cursor: grabbing;
}
.stats-pop-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
line-height: 1.5;
}
.stats-pop-label {
color: var(--secondary-text-color);
white-space: nowrap;
flex-shrink: 0;
}
.stats-pop-value {
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stats-pop-sep {
border-top: 1px solid var(--border-color);
margin: 0.4rem 0;
}
.content-header h3 {
margin: 0;
padding: 0;
border: none;
font-family: var(--code-font-family);
cursor: default;
transition: color var(--anim-base) ease;
/* word-break: break-all; */
white-space: normal;
line-height: 1.2;
/* Ocupar el espacio disponible para poder clicar el área vacía y editar la ruta */
flex: 1 1 auto;
min-width: 0;
}
.content-header h3:hover { color: var(--text-color); }
/* Botón "editar ruta" del breadcrumb: oculto salvo al pasar el ratón por la barra */
.content-header h3 .breadcrumb-edit-btn {
background: none;
border: none;
padding: 0 0.2em;
margin-left: 0.15em;
cursor: pointer;
color: var(--secondary-text-color);
vertical-align: middle;
opacity: 0;
visibility: hidden;
transition: opacity var(--anim-base) ease, color var(--anim-base) ease;
}
.content-header h3:hover .breadcrumb-edit-btn {
opacity: 0.55;
visibility: visible;
}
.content-header h3 .breadcrumb-edit-btn:hover {
opacity: 1;
color: var(--focus-color);
}
.content-header h3 .breadcrumb-edit-btn .material-icons {
font-size: 1.05em;
}
/* Input de la barra de dirección en modo edición */
.content-header h3 .address-edit-input {
width: 100%;
box-sizing: border-box;
font-family: var(--code-font-family);
font-size: 1em;
padding: 0.25em 0.5em;
border: 1px solid var(--focus-color);
border-radius: var(--radius-sm);
background-color: var(--bg-color, var(--surface-color));
color: var(--text-color);
outline: none;
}
.content-header h3 .address-edit-input.address-edit-error {
border-color: var(--error-color, #e05260);
background-color: rgba(224, 82, 96, 0.08);
}
.content-header h3 a {
color: var(--secondary-text-color);
text-decoration: none;
}
.content-header h3 a:hover {
color: var(--focus-color);
text-decoration: underline;
}
.content-header h3 .breadcrumb-separator {
color: var(--secondary-text-color);
/* margin: 0 0.25em; */
}
.content-header h3 .breadcrumb-current {
color: var(--text-color);
font-weight: 700;
cursor: pointer;
transition: color var(--anim-base) ease;
}
.content-header h3 .breadcrumb-current:hover {
color: var(--focus-color);
}
/* --- Breadcrumb truncamiento a 2 líneas --- */
#target-header.breadcrumb-clamped {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
#target-header.breadcrumb-has-ellipsis::before {
content: '...';
color: var(--secondary-text-color);
margin-right: 0.3em;
}
.content-body {
flex-grow: 1;
overflow-y: auto;
}
/* LAYOUT: TOOLBARS */
.toolbar {
padding: 0.75rem;
border-bottom: 1px solid var(--border-color);
background-color: var(--surface-color);
display: flex;
gap: 0.2rem;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.toolbar-group-left, .toolbar-group-right {
display: flex;
gap: 0.2rem;
align-items: center;
flex-wrap: wrap;
}
.toolbar-group-right {
margin-left: auto;
}
/* Separador vertical entre grupos de botones de la toolbar */
.toolbar-separator {
width: 1px;
align-self: stretch;
margin: 0.2rem 0.3rem;
background-color: var(--border-color);
flex-shrink: 0;
}
.toolbar-group-selection {
display: flex;
gap: 0.2rem;
align-items: center;
padding: 0 1rem;
border-left: 1px solid var(--border-color);
margin-left: 1rem;
}
/* Pegar: el contador del portapapeles va sobre el icono (mismo badge que las
notificaciones). «Copiar o mover» agrupa en móvil Copiar, Cortar, Copiar a y
Mover a; en escritorio esos cuatro van sueltos. */
.paste-btn {
position: relative;
overflow: visible;
}
#btn-selection-transfer { display: none; }
/* Barra de acciones de la vista de baúl (panel central) */
.toolbar-group-vault {
display: flex;
gap: 0.2rem;
align-items: center;
padding: 0 1rem;
border-left: 1px solid var(--border-color);
margin-left: 1rem;
}
/* Herramientas de la vista de baúl, a la derecha del conmutador
#btn-vault-view-toggle: solo con un baúl en el panel. */
.vault-view-toolbar-actions {
display: flex;
gap: 0.2rem;
align-items: center;
}
/* En vista de baúl la barra de selección baja a su propia fila, debajo de la
barra de baúl: juntas en la misma línea no caben (12 botones + el selector
de baúles) y el selector quedaba desplazado al aparecer la selección. */
.toolbar.vault-view-active.selection-active {
row-gap: 0.5rem;
}
.toolbar.vault-view-active.selection-active .toolbar-group-selection {
order: 10;
flex-basis: 100%;
margin-left: 0;
padding: 0.5rem 0 0 0;
border-left: 0;
border-top: 1px solid var(--border-color);
}
/* Selector de baúles de la vista central (‹ nombre ›) */
.vault-view-selector {
display: flex;
align-items: center;
gap: 0.1rem;
margin-right: 0.35rem;
}
/* Ancho mínimo fijo (~15 caracteres) para que las flechas no bailen al
cambiar de baúl; los nombres más largos ensanchan hasta el tope. */
.vault-view-selector-name {
min-width: 16ch;
max-width: 24rem;
text-align: center;
font-size: var(--fs-sm);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0.2rem 0.35rem;
cursor: pointer;
border-radius: 3px;
}
.vault-view-selector-name:hover {
background-color: var(--overlay-hover);
}
.vault-view-selector-name::after {
content: ' ▾';
font-size: 0.7em;
opacity: 0.6;
}
.vault-view-selector button[disabled] {
opacity: 0.35;
cursor: default;
}
.toolbar-group-selection button.danger:hover {
color: var(--danger-hover-color);
}
#selection-counter {
font-family: var(--code-font-family);
font-size: var(--fs-sm);
color: var(--secondary-text-color);
}
/* FILTER & SEARCH */
#filter-container, #editor-search-container {
position: relative;
display: flex;
align-items: center;
}
#filter-input, #editor-search-input {
padding: 0 2.5em 0 0.8em;
width: 100px;
height: 30px;
font-size: var(--fs-xs);
transition: width var(--anim-base) ease, font-size var(--anim-fast) ease;
box-sizing: border-box;
}
#filter-input:focus, #filter-input.expanded,
#editor-search-input:focus, #editor-search-input.expanded {
width: 200px;
font-size: var(--fs-sm);
}
#filter-input::placeholder, #editor-search-input::placeholder { color: var(--secondary-text-color); }
#btn-clear-filter, #btn-editor-search-clear {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--secondary-text-color);
width: 30px;
height: 30px;
padding: 0.4em;
}
#btn-clear-filter:hover, #btn-editor-search-clear:hover {
color: var(--text-color);
background-color: var(--surface-color);
}
#btn-clear-filter .material-icons, #btn-editor-search-clear .material-icons { font-size: var(--icon-lg); margin: 0; }
/* #btn-toggle-advanced-search { margin-left: -0.5rem; } */
#advanced-search-panel, #url-uploader-panel, #editor-replace-panel, #image-save-as-panel, #image-resize-panel, #video-op-panel {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border-color);
background-color: var(--surface-color);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
align-items: center;
}
#advanced-search-panel,
#advanced-search-panel input,
#advanced-search-panel select,
#advanced-search-panel button,
#advanced-search-panel label {
font-size: var(--fs-xs);
}
.advanced-search-group {
display: flex;
align-items: center;
gap: 0.5rem;
}
#image-resize-panel input[type="number"] {
width: 80px;
}
.resize-options-group {
display: flex;
align-items: center;
gap: 0.75rem;
}
.advanced-search-group input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--focus-color);
}
.advanced-search-group label {
cursor: pointer;
user-select: none;
}
.advanced-search-group select {
padding: 0.2rem 0.4rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
background-color: var(--surface-color);
color: var(--text-color);
cursor: pointer;
}
.advanced-search-group select option {
background-color: var(--surface-color);
color: var(--text-color);
}
#btn-search-save-vault {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
white-space: nowrap;
}
#btn-search-save-vault .material-icons { font-size: var(--icon-sm); }
#filter-input.regex-error,
#filter-input.regex-error:focus {
border-color: #d9534f;
outline-color: #d9534f;
}
#search-truncated-notice {
grid-column: 1 / -1;
padding: 0.4rem 0.6rem;
font-size: var(--fs-xs);
color: var(--warning-color);
background-color: var(--warning-bg-color);
border: 1px solid var(--warning-border-color);
border-radius: var(--radius-sm);
}
/* UPLOADER */
#uploader-container {
/* padding-bottom: 1.5rem; */
/* border-bottom: 1px dashed var(--border-color); */
margin-bottom: 1.5rem;
}
#drop-zone {
border: 2px dashed var(--border-color);
border-radius: var(--radius-md);
padding: 4rem;
text-align: center;
font-size: var(--fs-md);
color: var(--secondary-text-color);
cursor: pointer;
transition: border-color var(--anim-base) ease, background-color var(--anim-base) ease;
}
#drop-zone.drag-over {
border-color: var(--focus-color);
background-color: var(--selection-bg-soft);
}
#success-panel {
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
margin-top: 1.5rem;
max-height: 50vh;
display: flex;
flex-direction: column;
}
.success-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
border-bottom: 1px solid var(--border-color);
}
.success-panel-header h3 {
margin: 0;
padding: 0;
border: none;
font-size: var(--fs-md);
}
#success-panel-close-btn {
background: none;
border: none;
color: var(--secondary-text-color);
cursor: pointer;
padding: 0;
}
#success-panel-close-btn:hover { color: var(--text-color); }
#success-panel-list {
padding: 0.5rem;
overflow-y: auto;
flex-grow: 1;
}
#progress-panel {
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
margin-top: 1.5rem;
max-height: 50vh;
display: flex;
flex-direction: column;
}
#progress-panel-list {
padding: 1rem;
overflow-y: auto;
flex-grow: 1;
}
.progress-item {
display: block;
}
.progress-item-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.4rem;
}
.progress-item-header strong {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.progress-item-size {
color: var(--secondary-text-color);
font-size: var(--fs-xs);
}
.btn-cancel-upload {
background: none;
border: none;
color: var(--secondary-text-color);
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
}
.btn-cancel-upload:hover { color: var(--text-color); }
.progress-item-status {
font-size: var(--fs-xs);
color: var(--secondary-text-color);
margin-bottom: 0.4rem;
}
.progress-bar-outer {
position: relative;
height: 14px;
background-color: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
overflow: hidden;
}
.progress-bar-inner {
height: 100%;
background-color: var(--focus-color, #6697fa);
transition: width var(--anim-fast) linear;
}
.progress-bar-label {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-2xs);
color: var(--text-color);
font-family: var(--code-font-family);
pointer-events: none;
}
/* ─── Global Progress Toast ─── */
.global-progress-toast {
position: fixed;
top: 1rem;
left: 50%;
transform: translateX(-50%);
width: 420px;
max-width: calc(100vw - 2rem);
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 0.75rem 1rem;
z-index: var(--z-progress);
box-shadow: var(--shadow-3);
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.gp-toast-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.gp-toast-text {
font-size: var(--fs-sm);
color: var(--secondary-text-color);
font-family: var(--code-font-family);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gp-toast-text-link {
cursor: pointer;
}
.gp-toast-text-link:hover,
.gp-toast-text-link:focus-visible {
color: var(--text-color);
text-decoration: underline;
}
.gp-toast-bar {
width: 100%;
}
.gp-toast-queue-hint {
font-size: var(--fs-xs);
color: var(--secondary-text-color);
cursor: pointer;
text-decoration: underline;
align-self: flex-start;
}
.gp-toast-queue-hint:hover {
color: var(--text-color);
}
.gp-toast-cancel-btn {
flex-shrink: 0;
margin-top: 0.1rem;
}
/* ─── Cola de descargas ─── */
.download-queue-panel {
position: fixed;
bottom: 1rem;
/* Esquina izquierda: la derecha es de la pila de toasts y del aviso de sesión. */
left: 1rem;
width: 360px;
max-width: calc(100vw - 2rem);
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-md, 6px);
z-index: var(--z-downloads);
box-shadow: var(--shadow-3);
display: flex;
flex-direction: column;
overflow: hidden;
animation: session-toast-in var(--anim-base) ease-out;
}
.dq-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.5rem 0.5rem 0.5rem 0.85rem;
border-bottom: 1px solid var(--border-color);
}
.dq-title {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--text-color);
font-family: var(--code-font-family);
}
.dq-header-actions {
display: flex;
gap: 0.15rem;
flex-shrink: 0;
}
.dq-list {
list-style: none;
margin: 0;
padding: 0.35rem;
max-height: 50vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.dq-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.5rem;
border-radius: var(--radius-sm);
background-color: var(--bg-color);
}
.dq-item-icon {
flex-shrink: 0;
font-size: var(--icon-md);
color: var(--secondary-text-color);
}
.dq-item.status-done .dq-item-icon { color: var(--success-color, #4caf50); }
.dq-item.status-error .dq-item-icon { color: var(--danger-color, #e53935); }
.dq-item.status-cancelled .dq-item-icon { color: var(--secondary-text-color); }
.dq-item-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.dq-item-name {
font-size: var(--fs-xs);
color: var(--text-color);
font-family: var(--code-font-family);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dq-item-status {
font-size: var(--fs-2xs);
color: var(--secondary-text-color);
}
.dq-item.status-error .dq-item-status { color: var(--danger-color, #e53935); }
.dq-item-bar {
height: 6px;
border: none;
}
.dq-item-actions {
display: flex;
gap: 0.1rem;
flex-shrink: 0;
}
.dq-item-actions .icon-only { padding: 0.2rem; }
.dq-item-actions .material-icons { font-size: var(--icon-md); }
/* ── Pila de toasts ──────────────────────────────────────────────────────
Superficie transitoria del sistema de avisos. El color de severidad vive
en dos sitios y en ninguno más: el icono y la barra de cuenta atrás.
Sin raíl lateral, sin fondo teñido: el toast no compite con la lista.
El aviso de sesión vive DENTRO de esta pila (primer hijo del DOM y, por
column-reverse, anclado abajo), así que ya no puede solaparse con nada. */
#toast-stack {
position: fixed;
right: 1rem;
bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
z-index: var(--z-toast);
width: min(38rem, calc(100vw - 2rem));
display: flex;
flex-direction: column-reverse;
gap: 0.5rem;
/* El hueco vacío de la pila no debe tragarse los clics de la app. */
pointer-events: none;
}
#toast-stack > * {
pointer-events: auto;
}
/* Con un modal abierto, la pila sube arriba: abajo taparía sus botones (un
toast fijo, como el de cambios en enlazados, los dejaba sin poder pulsar). */
body:has(.modal-overlay:not(.hidden)) #toast-stack {
top: calc(1rem + env(safe-area-inset-top, 0px));
bottom: auto;
flex-direction: column;
}
.toast {
position: relative;
display: flex;
align-items: flex-start;
gap: 0.6rem;
width: 100%;
/* El proyecto no aplica border-box global: sin esto el relleno y el borde
se suman al 100% y el toast se sale de la pila. */
box-sizing: border-box;
padding: 0.7rem 0.85rem;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2);
font-size: var(--fs-sm);
line-height: 1.45;
color: var(--text-color);
overflow: hidden; /* recorta la barra de vida contra las esquinas */
animation: session-toast-in var(--anim-base) var(--menu-anim-ease);
}
.toast-icon {
flex-shrink: 0;
font-size: var(--icon-lg);
color: var(--toast-sev);
}
.toast-text {
flex: 1;
min-width: 0;
/* Un mensaje que no cabe en tres líneas es un modal, no un toast. */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.toast-count {
flex-shrink: 0;
align-self: center;
font-size: var(--fs-2xs);
color: var(--secondary-text-color);
font-variant-numeric: tabular-nums;
}
.toast-action {
flex-shrink: 0;
align-self: center;
font-size: var(--fs-xs);
padding: 0.25em 0.7em;
}
.toast-dismiss {
flex-shrink: 0;
opacity: 0.45;
transition: opacity var(--anim-fast) ease-out;
}
.toast:hover .toast-dismiss,
.toast:focus-within .toast-dismiss {
opacity: 1;
}
/* Barra de cuenta atrás: el único acento cromático además del icono, y
además dice cuánto queda. Se congela mientras se lee. */
.toast-life {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background-color: var(--toast-sev);
transform-origin: left center;
animation: toast-life linear forwards;
}
.toast:hover .toast-life,
.toast:focus-within .toast-life {
animation-play-state: paused;
}
.toast-success { --toast-sev: var(--success-color); }
.toast-info { --toast-sev: var(--info-color); }
.toast-warning { --toast-sev: var(--warning-accent); }
.toast-error { --toast-sev: var(--error-text-color); }
.toast.toast-leaving {
animation: toast-out var(--anim-base) ease-in forwards;
}
@keyframes toast-life {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
@keyframes toast-out {
to { opacity: 0; transform: translateY(0.5rem); }
}
@media (prefers-reduced-motion: reduce) {
.toast,
.toast.toast-leaving { animation: none; }
.toast-life { animation-duration: 0s !important; }
}
/* ── Toast de sesión (aviso de caducidad / keep-alive) ──
Mismo lenguaje que los toasts normales: icono coloreado, sin raíl. Lo que
lo distingue es que no caduca solo y lleva acción. */
.session-toast {
position: relative;
width: 100%;
box-sizing: border-box;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 0.75rem 1rem;
box-shadow: var(--shadow-3);
display: flex;
align-items: center;
gap: 0.6rem;
font-family: var(--code-font-family);
animation: session-toast-in var(--anim-slow) ease-out;
}
.session-toast.hidden {
display: none;
}
/* Modo caducada: todo el toast es clicable y vira a rojo. */
.session-toast.session-toast-expired {
cursor: pointer;
}
.session-toast-icon {
flex-shrink: 0;
color: var(--warning-accent);
font-size: var(--icon-lg);
}
.session-toast.session-toast-expired .session-toast-icon {
color: var(--error-text-color);
}
.session-toast-text {
flex: 1;
min-width: 0;
font-size: var(--fs-sm);
color: var(--text-color);
}
.session-toast-action {
flex-shrink: 0;
background-color: var(--primary-color);
color: var(--on-accent);
border: none;
border-radius: var(--radius-sm);
padding: 0.35rem 0.7rem;
font-size: var(--fs-xs);
font-family: inherit;
cursor: pointer;
}
.session-toast-action:hover {
background-color: var(--accent-color);
}
.session-toast-dismiss {
flex-shrink: 0;
}
@keyframes session-toast-in {
from { opacity: 0; transform: translateY(0.5rem); }
to { opacity: 1; transform: translateY(0); }
}
/* indeterminate bar animation */
.progress-bar-inner.indeterminate {
width: 30%;
animation: gp-indeterminate 1.8s ease-in-out infinite;
}
@keyframes gp-indeterminate {
0% { margin-left: 0; }
50% { margin-left: 35%; }
100% { margin-left: 0; }
}
.file-upload-item {
background-color: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.5rem;
/* margin-bottom: 0.5rem; */
font-family: var(--code-font-family);
}
.file-upload-item p {
margin: 0 0 0.5em 0;
font-size: var(--fs-sm);
display: flex;
align-items: center;
gap: 0.5rem;
}
.file-upload-item .file-name-text { font-weight: bold; }
.file-upload-item .rename-input {
display: none;
flex-grow: 1;
background-color: var(--bg-color);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.4em 0.6em;
font-family: var(--code-font-family);
font-size: var(--fs-sm);
}
.file-upload-item .rename-input:focus {
outline: none;
border-color: var(--focus-color);
}
.file-upload-item pre {
font-size: var(--fs-xs);
padding: 0.5em;
word-break: break-all;
margin-bottom: 0.75em;
}
.file-upload-actions {
display: flex;
gap: 0.2rem;
}
.file-upload-actions button {
font-size: var(--fs-xs);
padding: 0.5em;
width: 32px;
height: 32px;
background-color: var(--surface-color);
border-color: var(--border-color);
}
.file-upload-actions button .material-icons { font-size: var(--icon-md); }
.file-upload-actions button:hover {
background-color: var(--bg-color);
border-color: var(--focus-color);
}
.file-upload-item.editing .file-name-text,
.file-upload-item.editing .btn-rename-upload {
display: none;
}
.file-upload-item.editing .rename-input,
.file-upload-item.editing .btn-save-upload {
display: inline-flex;
}
.file-upload-actions .btn-save-upload {
display: none;
background-color: var(--primary-color);
}
.file-upload-actions .btn-save-upload:hover {
background-color: var(--primary-hover-color);
}
/* FILE LIST VIEW */
#file-list-container {
font-family: var(--code-font-family);
display: grid;
grid-template-columns: minmax(0, 1fr) 100px 100px 80px;
/* Sin gap horizontal: el fondo del hover de la fila (por celda) queda contiguo
y se ve como una sola banda (ver .file-item-row:hover > div). */
gap: 0;
/* stretch: cada celda llena el alto de la fila para que la banda del hover
sea continua; la vista cuadrícula ya usa stretch y oculta el resto. */
align-items: stretch;
align-content: start;
min-height: 100%;
}
/* Vista de baúl (lista): cada fila lleva además los botones de acción del baúl
—copiar/mover/quitar, o los cinco de Enlazados—, que no caben en la columna
de acciones de 80px: con overflow:hidden y justify-content:flex-end quedaban
recortados por la izquierda, es decir, invisibles. Aquí esa columna se ajusta
al contenido. Solo en escritorio: en móvil la rejilla es de dos columnas y
esta regla, más específica, la pisaría. En cuadrícula no aplica (ahí no se
pintan esos botones). */
@media (min-width: 769px) {
#file-list-container.vault-view-list {
grid-template-columns: minmax(0, 1fr) 100px 100px auto;
}
/* Columna Estado (quinta): Nombre · Estado · Tamaño · Fecha · Acciones. */
#file-list-container.vault-view-list.state-col {
grid-template-columns: minmax(0, 1fr) 110px 100px 100px auto;
}
/* En escritorio la columna Estado sustituye a la insignia junto al nombre. */
#file-list-container.state-col .file-item-name .linked-badge { display: none; }
}
#file-list-container .placeholder {
grid-column: 1 / -1;
color: var(--secondary-text-color);
margin-top: 0.5em;
}
.file-list-header {
color: var(--secondary-text-color);
font-size: var(--fs-xs);
padding: 0.25em 0.5em;
cursor: pointer;
user-select: none;
grid-column: 1 / -1;
display: contents;
}
.file-list-header > div {
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
background-color: var(--bg-color);
z-index: 10;
}
.file-list-header > div:hover { color: var(--text-color); }
.file-list-header > div .sort-arrow {
display: inline-block;
width: 1em;
opacity: 0;
}
.file-list-header > div.sort-active { color: var(--focus-color); }
.file-list-header > div.sort-active .sort-arrow { opacity: 1; }
.file-item-row {
grid-column: 1 / -1;
display: contents;
}
/* Cortado y pendiente de pegar (modules/clipboard.js): se atenúa el contenido,
no la celda, para que el zebra y la selección se sigan viendo. */
.file-item-row.clipboard-cut > div > * { opacity: 0.45; }
/* Filas ocultas por «Filtrar seleccionados»; cubre también la vista de rejilla. */
#file-list-container .file-item-row.selection-filter-out,
#file-list-container.grid-view .file-item-row.selection-filter-out { display: none; }
.file-item-row > div {
border-bottom: 1px solid var(--row-divider);
transition: background-color var(--anim-fast) ease, color var(--anim-fast) ease, box-shadow var(--anim-fast) ease;
}
/* Filas alternas (zebra). El interruptor de Preferencias NO cambia la
especificidad: solo pone --row-stripe-color en transparente cuando está
apagado (body sin .row-stripes). Así, a igual especificidad, los estados
hover/selected/focused (definidos justo debajo) siempre prevalecen. */
body:not(.row-stripes) .file-item-row { --row-stripe-color: transparent; }
/* :where() no suma especificidad: hover/selected/focused siguen ganando por orden.
Con .js-stripes (vista de baúl agrupada) el zebra lo marca JS con .row-stripe,
contando solo filas visibles. */
:where(:not(.js-stripes)) > .file-item-row:nth-child(even) > div,
.file-item-row.row-stripe > div {
background-color: var(--row-stripe-color);
}
/* Zebra también en los ítems del baúl (mismo mecanismo de desactivación). */
body:not(.row-stripes) .baul-list .baul-item { --row-stripe-color: transparent; }
.baul-item:nth-child(even) {
background-color: var(--row-stripe-color);
}
/* Zebra del sidebar (árbol y favoritos): JS marca con .sidebar-stripe solo las
filas visibles (los grupos plegados/filtrados y las cabeceras de grupo no
cuentan). El :where() sobre el interruptor mantiene la especificidad baja
para que hover/selected/favorite-current sigan ganando. */
body:where(.row-stripes) :where(.folder-item-header, .favorite-item).sidebar-stripe {
background-color: var(--row-stripe-color);
}
.file-item-row:hover > div {
background-color: var(--row-hover-bg);
color: var(--text-strong);
}
.file-item-row.selected > div {
background-color: var(--selection-bg);
}
.file-item-row.focused > div {
background-color: var(--selection-bg-soft);
}
/* Barra de acento a la izquierda de la fila activa (vista lista). */
.file-item-row.selected > .file-item-name {
box-shadow: inset 2px 0 0 var(--accent-color);
}
.file-item-row.focused > .file-item-name {
box-shadow: inset 2px 0 0 var(--selection-accent);
}
.file-item-row.selected > .file-item-name,
.file-item-row.selected > .file-item-name .material-icons {
color: var(--focus-color);
}
/* Ctrl+hover sobre una carpeta de la lista: su contenido, de solo lectura,
bajo la fila (openFilePeek). Bloque y filas no tienen caja: sus celdas
entran en la rejilla de la lista como las de .file-item-row. */
.file-peek-block, .file-peek-row { display: contents; }
.file-peek-row > div {
border-bottom: 1px dashed var(--row-divider);
color: var(--secondary-text-color);
font-size: var(--fs-xs);
}
.file-peek-row > .file-item-name {
padding-left: calc(var(--list-padding-x) + var(--peek-depth, 1) * 1.5rem);
}
.file-peek-note > .file-item-name {
grid-column: 1 / -1;
font-style: italic;
}
.file-item-row.peek-open > div,
.file-peek-row.peek-open > div {
background-color: var(--row-hover-bg);
color: var(--text-strong);
}
.file-item-name, .file-item-size, .file-item-date, .file-item-actions {
padding: var(--list-padding-y) var(--list-padding-x);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-item-name {
min-width: 0;
display: flex;
align-items: center;
}
.file-item-icon {
font-size: var(--icon-md);
margin-right: 0.5em;
vertical-align: middle;
color: var(--secondary-text-color);
flex-shrink: 0;
}
/* Carpeta protegida con contraseña: icono de carpeta con un candado superpuesto. */
.folder-locked-wrap {
position: relative;
display: inline-flex;
}
.folder-locked-wrap .material-icons {
font-size: var(--icon-md);
line-height: 1;
}
.folder-locked-wrap .folder-lock-badge {
position: absolute;
right: -4px;
bottom: -4px;
font-size: var(--icon-2xs);
background: var(--surface-color);
border-radius: 50%;
}
.file-item-name a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
min-width: 0;
}
.file-item-name a.dir-link {
cursor: pointer;
color: inherit;
text-decoration: none;
white-space: normal;
}
.file-item-name a.dir-link:hover { text-decoration: underline; }
.file-item-name a.dir-link::before { content: '['; }
.file-item-name a.dir-link::after { content: ']'; }
.file-item-size {
font-size: var(--fs-xs);
color: var(--secondary-text-color);
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
}
/* Columna Estado (listas Enlazados / Gestión de subidas). */
.file-item-state {
font-size: var(--fs-xs);
color: var(--secondary-text-color);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-item-state.state-modified { color: var(--success-color, #4caf50); }
.file-item-state.state-ignored { opacity: 0.6; }
.file-item-state.state-broken { color: var(--danger-color, #e53935); opacity: 0.85; }
.file-item-date {
font-size: var(--fs-xs);
color: var(--secondary-text-color);
display: flex;
align-items: center;
}
.file-item-date .short-date { display: inline; }
.file-item-date .full-date { display: none; }
#file-header-actions, #file-header-time, #file-header-size, #file-header-state { text-align: center; }
#file-header-name {
text-align: left;
font-size: var(--fs-sm);
font-weight: bold;
margin-left: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.ext-sort-label {
font-size: 1em;
font-weight: normal;
cursor: pointer;
padding: 0 4px;
border-radius: 3px;
white-space: nowrap;
flex-shrink: 0;
}
.ext-sort-label.sort-active {
color: var(--focus-color);
}
.ext-sort-label .sort-arrow {
display: inline-block;
width: 1em;
opacity: 0;
}
.ext-sort-label.sort-active .sort-arrow {
opacity: 1;
}
#file-header-actions { padding-right: 4px; }
.file-item-actions {
display: flex;
gap: 0.2rem;
flex-shrink: 0;
justify-content: flex-end;
}
/* Sin fondo: el botón es transparente para no tapar las rayas (zebra) de la
fila. El feedback de hover queda en el borde, no en el relleno. */
.file-item-actions button {
font-size: var(--fs-xs);
padding: 0.4em;
width: 30px;
height: 30px;
background-color: transparent;
border-color: transparent;
}
.file-item-actions button .material-icons { font-size: var(--icon-md); }
.file-item-actions button:hover {
background-color: transparent;
border-color: var(--focus-color);
}
.file-item-actions button.btn-delete-file:hover {
color: var(--danger-hover-color);
border-color: var(--danger-hover-color);
}
/* FOLDER TREE (SIDEBAR) */
.folder-item {
font-family: var(--code-font-family);
border-radius: var(--radius-sm);
}
.folder-item-header {
padding: var(--list-padding-y) var(--list-padding-x);
cursor: pointer;
display: flex;
align-items: center;
}
.folder-item-header:hover { background-color: var(--bg-color); }
.folder-item-header.selected {
background-color: var(--primary-color);
color: var(--on-accent);
}
/* Foco de teclado (F6 + flechas) en el árbol. */
.folder-item-header:focus { outline: none; }
.folder-item-header:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: -2px;
}
.folder-item-toggle {
display: inline-block;
width: 20px;
text-align: center;
margin-right: 5px;
}
.folder-children {
padding-left: 25px;
display: none;
}
.folder-children.open { display: block; }
/* Filtro del árbol (#btn-filter-tree): solo actúa sobre lo ya cargado. */
.folder-tree.is-filtered .folder-item.tree-filter-hidden { display: none; }
.tree-filter-empty { padding: 0.5rem 0.75rem; }
.folder-item-header.drop-target {
outline: 2px dashed var(--focus-color);
outline-offset: -2px;
}
/* FAVORITES */
.favorites-list {
--fav-indent: 1.75rem; /* sangría por nivel de grupo */
padding: 0;
margin: 0;
overflow-y: auto;
flex-grow: 1;
font-family: var(--code-font-family);
padding-bottom: 2rem;
}
.favorites-list .placeholder {
color: var(--secondary-text-color);
padding: 0.25em 0.5em;
}
.favorite-item {
padding: var(--list-padding-y) var(--list-padding-x);
padding-left: calc(var(--list-padding-x) + var(--fav-depth, 0) * var(--fav-indent));
cursor: pointer;
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.favorite-item:hover { background-color: var(--bg-color); }
/* Último favorito abierto: barra de acento (mismo recurso que la fila activa
de la lista) y destino del foco al volver con F6. */
.favorite-item.favorite-current {
box-shadow: inset 2px 0 0 var(--accent-color);
background-color: var(--accent-bg-soft);
}
/* Se ha navegado fuera de su carpeta: queda solo la barra, atenuada. */
.favorite-item.favorite-current-stale {
box-shadow: inset 2px 0 0 var(--selection-accent);
background-color: transparent;
}
.btn-create-favorites {
display: flex;
align-items: center;
gap: 0.4em;
margin: 0.75rem 0.5rem;
padding: 0.4em 0.8em;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
color: var(--text-color);
cursor: pointer;
font-size: var(--fs-sm);
}
.btn-create-favorites:hover { background: var(--bg-color); }
.btn-create-favorites .material-icons { font-size: var(--icon-sm); }
.favorite-item .material-icons {
font-size: var(--icon-md);
margin-right: 0.5em;
color: var(--secondary-text-color);
flex-shrink: 0;
}
.favorite-item .favorite-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.favorite-item.drop-target {
outline: 2px dashed var(--focus-color);
outline-offset: -2px;
}
/* Grupos virtuales: la cabecera pliega; el contenido se oculta solo con CSS,
así plegar no obliga a repintar la lista. */
.favorite-group:focus { outline: none; }
.favorite-group-header {
display: flex;
align-items: center;
padding: var(--list-padding-y) var(--list-padding-x);
padding-left: calc(var(--list-padding-x) + var(--fav-depth, 0) * var(--fav-indent) - 0.35rem);
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.favorite-group-header:hover { background-color: var(--bg-color); }
.favorite-group-header .material-icons {
font-size: var(--icon-md);
color: var(--secondary-text-color);
flex-shrink: 0;
}
.favorite-group-header .fav-chevron {
font-size: var(--icon-md);
margin-right: 0.1em;
transition: transform var(--anim-fast) ease;
}
.favorite-group:not(.collapsed) > .favorite-group-header .fav-chevron { transform: rotate(90deg); }
.favorite-group-header .fav-group-icon { margin-right: 0.5em; }
.favorite-group-header .favorite-name {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.fav-group-count {
margin-left: auto;
padding-left: 0.5em;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
}
.favorite-group.collapsed > .favorite-group-items { display: none; }
.favorite-group-empty {
padding: var(--list-padding-y) var(--list-padding-x);
padding-left: calc(var(--list-padding-x) + var(--fav-depth, 0) * var(--fav-indent));
font-size: var(--fs-xs);
font-style: italic;
color: var(--secondary-text-color);
}
/* Foco de teclado (treeview): en un grupo se marca solo la cabecera. */
.favorite-item:focus { outline: none; }
.favorite-item:focus-visible,
.favorite-group:focus-visible > .favorite-group-header {
outline: 2px solid var(--focus-color);
outline-offset: -2px;
}
/* Favorito cuya ruta ya no existe (favorites_get → path_status). */
.favorite-item.favorite-missing .favorite-name {
text-decoration: line-through;
color: var(--secondary-text-color);
}
.favorite-item.favorite-missing .material-icons { opacity: 0.6; }
/* Baúl en favoritos: el chevron (a la derecha, para no descuadrar los iconos
de las hojas vecinas) despliega sus elementos, en solo lectura. */
.favorite-item .fav-vault-toggle {
margin: 0 0 0 auto;
padding-left: 0.25em;
transition: transform var(--anim-fast) ease;
}
.favorite-item .fav-vault-toggle:hover { color: var(--text-color); }
.favorite-item[aria-expanded="true"] .fav-vault-toggle { transform: rotate(90deg); }
.favorite-vault-entry {
display: flex;
align-items: center;
padding: var(--list-padding-y) var(--list-padding-x);
padding-left: calc(var(--list-padding-x) + var(--fav-depth, 0) * var(--fav-indent));
font-size: var(--fs-sm);
color: var(--secondary-text-color);
cursor: pointer;
white-space: nowrap;
}
.favorite-vault-entry:hover { background-color: var(--bg-color); color: var(--text-color); }
.favorite-vault-entry:focus { outline: none; }
.favorite-vault-entry:focus-visible { outline: 2px solid var(--focus-color); outline-offset: -2px; }
.favorite-vault-entry .material-icons {
font-size: var(--icon-sm);
margin-right: 0.5em;
flex-shrink: 0;
}
.favorite-vault-entry .favorite-name {
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.favorite-vault-entry.favorite-missing .favorite-name { text-decoration: line-through; }
.favorite-vault-entry.favorite-missing .material-icons { opacity: 0.6; }
.favorite-vault-more .favorite-name { font-style: italic; }
/* Título de la página pendiente de llegar (favorites_fetch_title). */
.favorite-item.favorite-fetching .favorite-name { opacity: 0.55; }
/* Arrastre: el nodo arrastrado y las marcas de dónde caerá. */
.favorite-dragging { opacity: 0.45; }
.fav-drop-before { box-shadow: inset 0 2px 0 var(--focus-color); }
.fav-drop-after { box-shadow: inset 0 -2px 0 var(--focus-color); }
.fav-drop-inside {
outline: 2px dashed var(--focus-color);
outline-offset: -2px;
}
.favorites-list.fav-drop-end { box-shadow: inset 0 -2px 0 var(--focus-color); }
/* Soltar rutas sobre un comando lo ejecuta con ellas: trazo continuo, no el
discontinuo de «dentro de la carpeta». */
.fav-drop-run {
outline: 2px solid var(--focus-color);
outline-offset: -2px;
}
.favorites-empty {
padding: 0.75rem 0.5rem;
color: var(--secondary-text-color);
font-family: var(--font-family);
}
.favorites-empty p { margin: 0 0 0.5rem; }
.favorites-empty-hint { font-size: var(--fs-xs); }
.favorites-empty-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.favorites-empty-actions .btn-create-favorites { margin: 0; }
/* Fila del filtro, bajo la barra del sidebar (#btn-filter-favorites). */
.favorites-filter-bar {
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.35rem 0.5rem;
border-bottom: 1px solid var(--border-color);
background-color: var(--surface-color);
flex-shrink: 0;
animation: panel-slide-down var(--menu-anim-dur) var(--menu-anim-ease);
}
.favorites-filter-bar > .material-icons {
font-size: var(--icon-md);
color: var(--secondary-text-color);
}
#favorites-filter-input,
#tree-filter-input {
flex: 1;
min-width: 0;
height: 28px;
padding: 0 0.6em;
background-color: var(--bg-color);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-family: var(--font-family);
font-size: var(--fs-sm);
}
#favorites-filter-input:focus,
#tree-filter-input:focus {
outline: none;
border-color: var(--accent-color);
}
.sidebar-nav-btns button.toggled { color: var(--accent-color); }
.modal-form-group textarea {
width: 100%;
background-color: var(--bg-color);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.6em 0.8em;
font-family: var(--code-font-family);
font-size: var(--fs-sm);
box-sizing: border-box;
resize: vertical;
}
.modal-form-group textarea:focus { outline: none; border-color: var(--accent-color); }
#favorite-modal-new-group { margin-top: 0.5rem; }
@media (prefers-reduced-motion: reduce) {
.favorite-group-header .fav-chevron,
.favorite-item .fav-vault-toggle { transition: none; }
.favorites-filter-bar { animation: none; }
}
/* Editor de usuarios del panel principal (modules/users-editor.js). */
.users-table td.users-col-name .material-icons {
font-size: var(--icon-sm);
color: var(--secondary-text-color);
margin-left: 0.35rem;
vertical-align: -2px;
}
.users-badge {
margin-left: 0.4rem;
padding: 0 0.4em;
font-size: var(--fs-2xs);
color: var(--secondary-text-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
.users-notes-preview {
margin-top: 0.15rem;
max-width: 28rem;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.users-table td.users-col-home { word-break: break-all; }
.users-table td.users-actions { white-space: nowrap; }
.users-form { display: flex; flex-direction: column; gap: 0.5rem; }
.users-form.hidden { display: none; }
.users-input { max-width: 22rem; }
.users-form .prefs-label { min-width: 10rem; }
.users-views {
flex: 0 1 auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.35rem 0.9rem;
font-size: var(--fs-sm);
}
.users-views label { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.users-notes-row { align-items: flex-start; }
.users-notes {
max-width: 22rem;
min-height: 5rem;
resize: vertical;
font-family: var(--font-family);
}
.users-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
/* Pestañas Cuentas / Grupos. */
.users-tabs {
display: flex;
gap: 0.25rem;
margin-bottom: 0.75rem;
border-bottom: 1px solid var(--border-color);
}
.users-tab {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.8rem;
margin-bottom: -1px;
font-size: var(--fs-sm);
color: var(--secondary-text-color);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
}
.users-tab .material-icons { font-size: var(--icon-md); }
.users-tab:hover { color: var(--text-color); }
.users-tab[aria-selected="true"] {
color: var(--text-color);
border-bottom-color: var(--accent-color);
}
.groups-table td.groups-col-members { word-break: break-word; }
.groups-quota { display: inline-flex; align-items: center; gap: 0.4rem; }
.groups-quota input { width: 8rem; }
.users-table td.users-col-quota { white-space: nowrap; }
.users-quota-hint { font-size: var(--fs-xs); color: var(--secondary-text-color); }
.users-table td.users-quota-full { color: var(--danger-color); }
/* Reglas de carpeta (ACL) de una cuenta o un grupo. */
.acl-editor {
flex: 1 1 auto;
max-width: 36rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.acl-rules { display: flex; flex-direction: column; gap: 0.35rem; }
.acl-rule { display: flex; align-items: center; gap: 0.35rem; }
.acl-rule .acl-path { flex: 1 1 auto; min-width: 0; font-family: var(--code-font-family); }
.acl-rule .acl-access { flex: 0 0 auto; width: auto; }
.acl-rule.is-conflict .acl-path { border-color: var(--warning-border-color); }
.acl-conflict { color: var(--warning-color); font-size: var(--icon-sm); }
.acl-empty { margin: 0; }
.acl-editor-actions { display: flex; justify-content: flex-end; }
.acl-inherited { font-size: var(--fs-sm); color: var(--secondary-text-color); }
.acl-inherited ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.acl-inherited li { margin: 0.15rem 0; }
.acl-inherited code {
padding: 0;
font-family: var(--code-font-family);
color: var(--text-color);
background: none;
border: 0;
}
@media (max-width: 640px) {
.users-table:not(.groups-table) th:nth-child(2), .users-table td.users-col-home,
.users-table:not(.groups-table) th:nth-child(4), .users-table td.users-col-restr,
.groups-table th:nth-child(4), .groups-table td:nth-child(4),
.groups-table th:nth-child(5), .groups-table td.groups-col-rules { display: none; }
.users-form .prefs-row { flex-wrap: wrap; }
.users-input, .users-notes { max-width: none; }
.users-views { justify-content: flex-start; }
.acl-editor { max-width: none; }
.acl-rule { flex-wrap: wrap; }
.acl-rule .acl-path { flex-basis: 100%; }
}
/* Editor de favoritos del panel principal (modules/favorites-editor.js). */
.fav-editor-table {
width: 100%;
border-collapse: collapse;
font-family: var(--code-font-family);
font-size: var(--fs-sm);
}
.fav-editor-table th {
text-align: left;
color: var(--secondary-text-color);
border-bottom: 1px solid var(--border-color);
padding: 0.75rem 0.5rem;
position: sticky;
top: 0;
background-color: var(--surface-color);
z-index: 1;
}
.fav-editor-table td {
padding: 0.5rem;
border-bottom: 1px solid var(--row-divider);
vertical-align: middle;
}
.fav-editor-table td.fev-col-name {
padding-left: calc(0.5rem + var(--fev-depth, 0) * 1.25rem);
}
.fav-editor-table tr.fev-group .fev-value { font-weight: 600; }
.fav-editor-table .fev-col-path { word-break: break-all; }
.fav-editor-table tr.fev-missing .fev-col-path .fev-value {
text-decoration: line-through;
color: var(--secondary-text-color);
}
/* Celda editable: al pulsar se cambia el valor por un input. */
.fav-editor-table .fev-cell { cursor: text; }
.fav-editor-table .fev-cell:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: -2px;
}
.fav-editor-table .fev-value[hidden] { display: none; }
.fav-editor-table .fev-cell:hover .fev-value { background-color: var(--button-hover-bg); }
.fav-editor-table .fev-input {
font: inherit;
color: inherit;
background-color: var(--bg-color);
border: 1px solid var(--accent-color);
border-radius: var(--radius-sm);
width: 100%;
box-sizing: border-box;
}
.fav-editor-table .fev-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: inherit;
padding: 0.25rem;
cursor: pointer;
}
.fav-editor-table .fev-icon-btn:hover { background-color: var(--button-hover-bg); }
/* Las marcas de drop van en las td: el box-shadow de una tr no se pinta. */
.fav-editor-table tr.fav-drop-before td { box-shadow: inset 0 2px 0 var(--focus-color); }
.fav-editor-table tr.fav-drop-after td { box-shadow: inset 0 -2px 0 var(--focus-color); }
.fav-editor-table tr.fav-drop-inside td {
outline: 2px dashed var(--focus-color);
outline-offset: -2px;
}
.fav-editor-table tbody.fav-drop-end { box-shadow: inset 0 -2px 0 var(--focus-color); }
.fav-editor-table tr.favorite-dragging { opacity: 0.45; }
.fav-editor-table .fev-actions { text-align: right; white-space: nowrap; }
/* Gestor de baúles del panel principal (modules/vault-manager.js). */
.vm-body { padding: 0 1rem 2rem; }
.vm-hint {
color: var(--secondary-text-color);
font-size: var(--fs-xs);
margin: 0.75rem 0;
}
.vm-filter-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.75rem;
}
.vm-filter-row .material-icons { color: var(--secondary-text-color); font-size: var(--icon-md); }
.vm-filter-row input { flex: 1; min-width: 0; }
#btn-vm-filter.active,
#btn-vm-system.active {
color: var(--primary-color);
background: var(--accent-bg-soft);
}
.vm-delete-checked {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--danger-color);
}
.vm-delete-checked.hidden { display: none; }
.vm-tree { font-size: var(--fs-sm); }
.vm-section-title {
color: var(--secondary-text-color);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 1rem 0.5rem 0.25rem;
border-bottom: 1px solid var(--border-color);
}
.vm-vault { border-bottom: 1px solid var(--row-divider); }
.vm-vault.vm-drop-target {
outline: 2px dashed var(--focus-color);
outline-offset: -2px;
background-color: var(--selection-bg-faint);
}
.vm-vault-head {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.5rem;
cursor: pointer;
position: relative;
min-height: 2.25rem;
}
.vm-vault-head:hover { background-color: var(--button-hover-bg); }
.vm-vault-head:focus { outline: none; }
.vm-vault-head:focus-visible,
.vm-item:focus-visible { outline: 2px solid var(--focus-color); outline-offset: -2px; }
.vm-vault-head.vm-dragging { opacity: 0.45; }
.vm-check, .vm-check-spacer { flex-shrink: 0; width: 1rem; margin: 0; }
.vm-chevron {
font-size: var(--icon-md);
color: var(--secondary-text-color);
transition: transform var(--anim-fast) ease;
flex-shrink: 0;
}
.vm-vault-head[aria-expanded="true"] .vm-chevron { transform: rotate(90deg); }
button.vm-color,
button.vm-color:hover {
padding: 0;
margin: 0;
border: none;
border-radius: 50%;
width: 0.8rem;
height: 0.8rem;
min-width: 0;
flex-shrink: 0;
background: var(--chip-c);
cursor: pointer;
}
button.vm-color.vault-color-none,
button.vm-color.vault-color-none:hover { background: transparent; border: 1px solid var(--secondary-text-color); }
button.vm-color:hover { transform: scale(1.2); }
.vm-color-spacer { width: 0.8rem; flex-shrink: 0; }
.vm-kind { font-size: var(--icon-md); color: var(--secondary-text-color); flex-shrink: 0; }
.vm-name {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.vm-name[hidden] { display: none; }
.vm-name-input {
font: inherit;
flex: 1;
min-width: 6rem;
border: 1px solid var(--accent-color);
border-radius: var(--radius-sm);
background-color: var(--bg-color);
color: inherit;
}
.vm-count {
color: var(--secondary-text-color);
font-size: var(--fs-xs);
white-space: nowrap;
flex-shrink: 0;
}
.vm-badges { display: inline-flex; gap: 0.125rem; flex-shrink: 0; }
.vm-badges .material-icons { font-size: var(--icon-sm); color: var(--secondary-text-color); }
.vm-actions {
margin-left: auto;
display: inline-flex;
flex-shrink: 0;
}
.vm-row-btn .material-icons { font-size: var(--icon-md); }
/* Botones de fila: a la vista al pasar o con el foco dentro; en táctil, siempre. */
@media (hover: hover) {
.vm-vault-head .vm-actions,
.vm-item .vm-row-btn { opacity: 0; }
.vm-vault-head:hover .vm-actions,
.vm-vault-head:focus-within .vm-actions,
.vm-item:hover .vm-row-btn,
.vm-item:focus-within .vm-row-btn { opacity: 1; }
}
/* Pista del destino durante un arrastre: «Mover a X» / «Copiar a X». */
.vm-vault-head[data-drop-hint]::after {
content: attr(data-drop-hint);
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
padding: 0.125rem 0.5rem;
border-radius: var(--radius-sm);
background-color: var(--primary-color);
color: var(--surface-color);
font-size: var(--fs-xs);
pointer-events: none;
white-space: nowrap;
}
.vm-items { padding-bottom: 0.25rem; }
.vm-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.5rem 0.25rem 3.25rem;
cursor: default;
min-height: 1.875rem;
}
.vm-item:hover { background-color: var(--button-hover-bg); }
.vm-item:focus { outline: none; }
.vm-item.selected { background-color: var(--selection-bg); }
.vm-item.vm-dragging, .vm-item.vm-cut { opacity: 0.45; }
.vm-item > .material-icons { font-size: var(--icon-sm); color: var(--secondary-text-color); flex-shrink: 0; }
.vm-item-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.vm-item-dir {
color: var(--secondary-text-color);
font-size: var(--fs-xs);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1;
}
.vm-item .vm-row-btn { margin-left: auto; }
.vm-item.vm-missing .vm-item-name { text-decoration: line-through; color: var(--secondary-text-color); }
.vm-item.vm-more { cursor: pointer; font-style: italic; color: var(--secondary-text-color); }
.vm-note {
padding: 0.375rem 0.5rem 0.375rem 3.25rem;
color: var(--secondary-text-color);
font-size: var(--fs-xs);
}
@media (max-width: 768px) {
.vm-item { padding-left: 2rem; }
.vm-note { padding-left: 2rem; }
.vm-item-dir { display: none; }
/* En estrecho, abrir y duplicar se quedan en el menú ⋮: el nombre manda. */
.vm-actions [data-action="open"],
.vm-actions [data-action="duplicate"] { display: none; }
.vm-name { flex: 1; }
}
/* BAÚL */
.vault-bar {
display: flex;
align-items: center;
gap: 0.15rem;
padding: 0.35rem 0.4rem;
border-bottom: 1px solid var(--border-color);
background-color: var(--surface-color);
flex-shrink: 0;
}
.vault-bar.hidden { display: none; }
.vault-bar-name {
flex-grow: 1;
text-align: center;
font-size: var(--fs-sm);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 0.25rem;
min-width: 0;
cursor: pointer;
border-radius: 3px;
}
.vault-bar-name:hover {
background-color: var(--overlay-hover);
}
.vault-bar-name::after {
content: ' ▾';
font-size: 0.7em;
opacity: 0.6;
}
.vault-bar button[disabled] {
opacity: 0.35;
cursor: default;
}
.baul-list {
padding: 0;
margin: 0;
overflow-y: auto;
flex-grow: 1;
font-family: var(--code-font-family);
padding-bottom: 2rem;
}
.baul-list .placeholder {
color: var(--secondary-text-color);
padding: 0.5em;
font-size: var(--fs-sm);
line-height: 1.5;
}
.baul-item {
display: flex;
align-items: center;
padding: var(--list-padding-y) 0.3em var(--list-padding-y) var(--list-padding-x);
cursor: pointer;
gap: 0.3em;
}
.baul-item:hover { background-color: var(--bg-color); }
.baul-item.selected { background-color: var(--selection-bg); }
/* Foco de teclado (F6 + flechas) en el baúl. */
.baul-item:focus { outline: none; }
.baul-item:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: -2px;
}
.baul-item.selected:hover { background-color: var(--selection-bg-soft); }
.baul-item-icon {
font-size: var(--icon-md);
flex-shrink: 0;
color: var(--secondary-text-color);
}
.baul-item-name {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--fs-sm);
}
.baul-item-date {
flex-shrink: 0;
margin: 0 6px;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
white-space: nowrap;
}
.baul-item-missing .baul-item-name {
text-decoration: line-through;
color: var(--secondary-text-color);
}
.baul-item-missing .baul-item-icon {
opacity: 0.4;
}
.baul-item-actions {
display: flex;
align-items: center;
flex-shrink: 0;
opacity: 0.25;
transition: opacity var(--anim-fast);
}
.baul-item:hover .baul-item-actions {
opacity: 1;
}
/* Sin hover que las revele, las acciones de fila se quedan siempre a la vista:
al 25% en táctil solo se leen como decoración. */
@media (hover: none) {
.baul-item-actions { opacity: 1; }
}
.baul-item-actions button {
padding: 2px;
min-width: unset;
width: auto;
height: auto;
}
.baul-item-actions .material-icons { font-size: var(--icon-sm); }
/* Botones plegados en el menú "Acciones del baúl" (foldRowActions). Siguen en
el DOM a propósito: .btn-row-more los refleja y el espejo del clic derecho
los sigue listando. !important porque conviven con reglas de estado de fila
(p. ej. .upload-item.editing) que también juegan con display.
Dos niveles: .row-action-overflow se pliega siempre y .row-action-overflow-sm
solo bajo el breakpoint móvil. Como el corte lo decide el CSS y no el
render, la fila no necesita repintarse al girar el dispositivo:
showRowOverflowMenu lista lo que esté oculto en ese momento. */
.row-action-overflow { display: none !important; }
.btn-row-more .material-icons { font-size: var(--icon-sm); }
.file-item-actions .btn-row-more .material-icons { font-size: var(--icon-md); }
@media (max-width: 768px) {
.row-action-overflow-sm { display: none !important; }
/* Mismo tamaño táctil que el botón de "Más Acciones" de la fila. */
.file-item-actions button.btn-row-more {
width: 28px !important;
height: 28px !important;
padding: 0 !important;
min-width: 28px;
display: inline-flex;
}
}
/* El botón que solo existe para el plegado de móvil no se pinta en escritorio:
allí su menú estaría vacío. */
@media (min-width: 769px) {
.btn-row-more-sm { display: none !important; }
}
/* Baúl Enlazados */
/* La insignia de una carpeta puede ser larga (arch. · excl. · .gitignore):
cede ella, recortada, antes que el nombre. */
.linked-badge {
font-size: var(--fs-2xs);
margin-left: 4px;
flex-shrink: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
color: var(--secondary-text-color);
white-space: nowrap;
}
.linked-item .baul-item-name,
.baul-item:has(> .linked-badge) .baul-item-name {
min-width: 5em;
}
.linked-modified .linked-badge {
color: var(--success-color, #4caf50);
}
.linked-modified .baul-item-name {
color: var(--success-color, #4caf50);
}
.linked-no-permission .linked-badge {
color: var(--secondary-text-color);
}
/* También en filas de enlaces decoradas dentro de baúles reales (sin clase .linked-item). */
.linked-needs-relink .baul-item-actions {
opacity: 0.5;
}
.linked-needs-relink:hover .baul-item-actions {
opacity: 1;
}
.linked-needs-relink .btn-baul-relink .material-icons {
color: var(--warning-color, #e8a020);
}
.linked-item-dir .baul-item-icon {
color: var(--accent-color, #5b9dd9);
}
/* Baúl Subidas: una sola fila, igual que el resto de baúles (icono, nombre,
fecha y botones). El layout lo pone .baul-item; aquí solo queda lo propio
del renombrado en línea y del estado "ya no está en el servidor". */
.upload-item .upload-rename-input {
display: none;
flex-grow: 1;
min-width: 0;
font-size: var(--fs-sm);
padding: 2px 4px;
border: 1px solid var(--focus-color, #6697fa);
border-radius: 3px;
background-color: var(--bg-color);
color: var(--text-color);
}
.upload-item.editing .file-name-text { display: none; }
.upload-item.editing .upload-rename-input { display: block; }
.upload-item .btn-upload-save,
.upload-item .btn-upload-cancel { display: none; }
.upload-item.editing .btn-upload-save,
.upload-item.editing .btn-upload-cancel { display: inline-flex; }
/* En modo renombrado solo quedan activos Guardar/Cancelar */
.upload-item.editing .btn-upload-rename,
.upload-item.editing .btn-upload-copy,
.upload-item.editing .btn-upload-open,
.upload-item.editing .btn-upload-rowapp,
.upload-item.editing .btn-upload-props,
.upload-item.editing .btn-upload-remove,
.upload-item.editing .btn-upload-delete,
/* Mientras se renombra en línea solo deben quedar guardar y cancelar: si el
menú siguiera ahí ofrecería justo lo que esta regla acaba de retirar
(showRowOverflowMenu lista lo que esté oculto en ese momento). */
.upload-item.editing .btn-row-more { display: none; }
/* Separacion visual: el grupo destructivo (Quitar/Eliminar) se despega de las acciones de archivo */
.upload-item .btn-upload-remove {
margin-left: 0.35em;
}
/* Fichero subido que ya no existe en el servidor: solo queda "Quitar de la lista" */
.upload-item.baul-item-missing .baul-item-actions button:not(.btn-upload-remove) {
display: none;
}
/* Filas de subida en curso dentro del baúl Subidas */
.upload-progress-row {
padding: var(--list-padding-y) var(--list-padding-x);
border-bottom: 1px solid var(--border-color);
}
.upload-progress-row:last-child { border-bottom: none; }
.upload-progress-row .progress-item-header strong {
font-size: var(--fs-sm);
}
/* Modal de sincronización de carpeta enlazada */
.dirsync-summary {
font-size: var(--fs-sm);
color: var(--secondary-text-color);
margin-bottom: 8px;
white-space: pre-line;
}
.dirsync-list {
max-height: 50vh;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
.dirsync-group-title {
font-size: var(--fs-xs);
font-weight: bold;
padding: 6px 8px;
background: var(--surface-color, rgba(127,127,127,0.08));
position: sticky;
top: 0;
display: flex;
align-items: center;
gap: 8px;
z-index: 1;
}
.dirsync-group-label {
flex: 1;
}
.dirsync-group-master {
cursor: pointer;
flex-shrink: 0;
}
.dirsync-group-count {
font-weight: normal;
color: var(--secondary-text-color);
flex-shrink: 0;
}
.dirsync-more {
padding: 6px 8px;
font-size: var(--fs-xs);
font-style: italic;
color: var(--secondary-text-color);
}
.dirsync-group-danger {
color: var(--danger-color, #d9534f);
}
.dirsync-row {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
cursor: pointer;
font-size: var(--fs-xs);
}
.dirsync-row:hover {
background: var(--overlay-hover);
}
.dirsync-row-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dirsync-row-meta {
font-size: var(--fs-2xs);
color: var(--secondary-text-color);
flex-shrink: 0;
}
.dirsync-row-danger .dirsync-row-name {
color: var(--danger-color, #d9534f);
}
/* Barra del modal: filtro, .gitignore y patrones. Parte línea en móvil. */
.dirsync-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
margin-bottom: 8px;
font-size: var(--fs-xs);
}
.dirsync-filter {
display: inline-flex;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
overflow: hidden;
}
.dirsync-filter button {
padding: 0.3em 0.8em;
background-color: var(--button-color);
color: var(--text-color);
border: none;
border-right: 1px solid var(--border-color);
border-radius: 0;
cursor: pointer;
font-size: var(--fs-xs);
}
.dirsync-filter button:last-child { border-right: none; }
.dirsync-filter button:hover { background-color: var(--button-hover-bg); }
.dirsync-filter button.active { background-color: var(--primary-color); }
.dirsync-gitignore {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--secondary-text-color);
cursor: pointer;
}
.dirsync-excludes-btn {
margin-left: auto;
font-size: var(--fs-xs);
white-space: nowrap;
}
.dirsync-excludes {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
padding: 8px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-size: var(--fs-xs);
}
.dirsync-pattern-list {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.dirsync-pattern {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 2px 1px 8px;
border: 1px solid var(--border-color);
border-radius: 12px;
max-width: 100%;
}
.dirsync-pattern code {
font-family: var(--code-font-family);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dirsync-pattern-tag,
.dirsync-pattern-empty,
.dirsync-pattern-hint {
color: var(--secondary-text-color);
font-size: var(--fs-2xs);
}
/* Sin la caja del code global: aquí son texto en línea. */
.dirsync-pattern code,
.dirsync-pattern-hint code {
background: none;
border: none;
padding: 0;
white-space: nowrap;
}
/* Botones de icono en línea: sin el cuadrado de 38px de button.icon-only. */
button.icon-only.dirsync-pattern-rm,
button.icon-only.dirsync-excl-btn {
width: 1.7em;
height: 1.7em;
padding: 0;
}
.dirsync-pattern-rm .material-icons { font-size: var(--icon-xs); }
.dirsync-pattern-add {
display: flex;
gap: 6px;
}
.dirsync-pattern-add input {
flex: 1;
min-width: 0;
font-family: var(--code-font-family);
font-size: var(--fs-xs);
}
/* Árbol del modal: sangrado por nivel (--depth), hueco fijo para el chevron
y la casilla, y la marca de exclusión al final de la fila. */
.dirsync-node {
display: flex;
align-items: center;
gap: 4px;
padding: 2px 4px 2px calc(4px + var(--depth, 0) * 1.25em);
font-size: var(--fs-xs);
}
.dirsync-node:hover {
background: var(--row-hover-bg);
}
/* El nombre manda: el estado cede sitio y se recorta él antes (móvil). */
.dirsync-node .dirsync-row-name {
min-width: 45%;
}
.dirsync-node .dirsync-row-meta {
flex-shrink: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: right;
}
.dirsync-node.dirsync-more {
padding-left: calc(2.8em + var(--depth, 0) * 1.25em);
}
.dirsync-node-dir .dirsync-row-name {
color: var(--accent-color);
cursor: pointer;
}
.dirsync-node-cb,
.dirsync-node-cb-spacer {
flex: none;
width: 1.1em;
margin: 0;
}
.dirsync-node-excluded .dirsync-row-name {
color: var(--secondary-text-color);
text-decoration: line-through;
cursor: default;
}
.dirsync-node-excluded .dirsync-row-meta {
font-style: italic;
}
.dirsync-excl-btn {
flex: none;
opacity: 0.35;
}
.dirsync-node:hover .dirsync-excl-btn,
.dirsync-excl-btn:focus-visible {
opacity: 0.8;
}
.dirsync-excl-btn[aria-pressed="true"] {
opacity: 1;
color: var(--error-text-color);
}
.dirsync-excl-btn .material-icons { font-size: var(--icon-sm); }
/* En táctil no hay hover: la marca, siempre a la vista. */
@media (hover: none) {
.dirsync-excl-btn { opacity: 0.7; }
}
.dirsync-srvexcl {
margin-top: 8px;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
}
.dirsync-srvexcl > summary {
cursor: pointer;
}
.dirsync-srvexcl-list {
max-height: 20vh;
overflow-y: auto;
margin-top: 4px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
/* Informe de comprobación de carpeta, en árbol. El color marca el lado que
cambió (local, servidor, los dos o ninguno) y va solo en el icono del
fichero, no en la fila. */
.dircheck-folder {
display: flex;
align-items: baseline;
gap: 8px;
padding: 8px 8px 4px;
font-size: var(--fs-sm);
font-weight: bold;
border-top: 1px solid var(--border-color);
}
.dircheck-folder:first-child {
border-top: none;
}
.dircheck-folder-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dircheck-folder-meta {
font-size: var(--fs-xs);
font-weight: normal;
color: var(--secondary-text-color);
flex-shrink: 0;
}
.dircheck-note {
padding: 4px 8px 6px;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
white-space: pre-line;
}
.dircheck-note-error {
color: var(--error-text-color);
}
.dircheck-group > summary {
cursor: pointer;
list-style: none;
}
.dircheck-group > summary::-webkit-details-marker {
display: none;
}
.dircheck-group-icon {
font-size: 1.1em;
}
.dircheck-side-excluded > summary,
.dircheck-side-excluded .dirsync-row-name { color: var(--secondary-text-color); }
/* Árbol del informe: el icono de cada fichero lleva el color de su lado. */
.dircheck-state-icon {
flex: none;
font-size: var(--icon-sm);
color: var(--secondary-text-color);
}
.dircheck-state-icon.dircheck-side-local { color: var(--info-color); }
.dircheck-state-icon.dircheck-side-server { color: var(--warning-accent); }
.dircheck-state-icon.dircheck-side-both { color: var(--error-text-color); }
.dircheck-state-icon.dircheck-side-none { color: var(--success-color); }
.dircheck-node .dirsync-row-name {
min-width: 6em;
}
.dircheck-act-spacer {
flex: none;
width: 8.5em; /* el ancho de .dircheck-act: las columnas no bailan */
}
@media (max-width: 600px) {
.dircheck-act-spacer { display: none; }
}
.dircheck-row {
cursor: default;
}
/* Los botones llevan el recuento en la etiqueta: sin partirla, y la botonera
pasa a otra línea antes que desbordar en móvil. */
.dircheck-actions {
flex-wrap: wrap;
}
.dircheck-actions button {
white-space: nowrap;
}
.dircheck-tally {
flex: 1;
align-self: center;
min-width: 0;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
}
.dircheck-deep {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-bottom: 8px;
font-size: var(--fs-xs);
}
.dircheck-deep label {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--secondary-text-color);
}
/* Acción por fichero (y por carpeta) cuando hay más de una posible. */
.dircheck-act {
flex-shrink: 0;
font-size: var(--fs-2xs);
padding: 1px 2px;
width: 8.5em; /* fijo: si no, cada desplegable mide lo que su opción elegida */
}
/* El detalle de un conflicto es largo: cede sitio y parte línea antes de
comerse el nombre del fichero. */
.dircheck-row .dirsync-row-name {
min-width: 6em;
}
.dircheck-row .dirsync-row-meta {
flex-shrink: 1;
min-width: 0;
text-align: right;
}
.baul-item.drag-insert-before {
border-top: 2px solid var(--focus-color);
}
.baul-item.drag-insert-after {
border-bottom: 2px solid var(--focus-color);
}
.baul-item.drop-target {
outline: 2px dashed var(--focus-color);
outline-offset: -2px;
}
/* Fila recién sincronizada (activateLinkedVault): un destello que se apaga. */
.baul-item.baul-item-flash {
animation: baul-item-flash 1.6s ease-out;
}
@keyframes baul-item-flash {
from { background-color: color-mix(in srgb, var(--focus-color) 35%, transparent); }
to { background-color: transparent; }
}
/* Vista virtual del baúl en el panel principal */
.vault-view-badge {
display: inline-flex;
align-items: center;
gap: 0.3em;
background-color: var(--bg-color);
color: var(--text-color);
padding: 0.15em 0.55em;
border-radius: var(--radius-sm);
font-weight: 600;
}
.vault-view-badge .material-icons {
font-size: 1.1em;
}
/* Cabecera de grupo (carpeta contenedora) en la vista de baúl agrupada.
--vg-depth es su nivel de anidado (buildVaultGroupTree). */
.vault-group-header {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 0.4em;
padding: 0.35em 0.6em;
padding-left: calc(0.6em + var(--vg-depth, 0) * 1.2em);
margin-top: 0.4em;
background-color: var(--bg-color);
color: var(--secondary-text-color);
font-size: var(--fs-sm);
border-radius: var(--radius-sm);
cursor: pointer;
user-select: none;
min-width: 0;
}
.file-list-header + .vault-group-header {
margin-top: 0;
}
.vault-group-header:hover {
color: var(--text-color);
background-color: var(--button-hover-bg);
}
.vault-group-header .material-icons {
font-size: var(--icon-md);
flex-shrink: 0;
}
.vault-group-path {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: rtl; /* truncar por la izquierda: el final de la ruta manda */
text-align: left;
min-width: 0;
}
.vault-group-count {
margin-left: auto;
padding: 0 0.4em;
border-radius: var(--radius-sm);
background-color: var(--surface-color);
font-family: var(--code-font-family);
font-size: var(--fs-xs);
flex-shrink: 0;
}
/* Subir los modificados de la carpeta: botón tras el contador, siempre
visible (acción rápida; el resto vive en el menú de la carpeta). */
.btn-vault-group-upload {
flex-shrink: 0;
display: flex;
align-items: center;
padding: 0 0.2em;
border: 0;
background: none;
color: inherit;
cursor: pointer;
}
.btn-vault-group-upload:hover {
color: var(--focus-color);
}
/* Menú de Acciones de la carpeta y colapsar/expandir: al final de la fila. */
.btn-vault-group-actions,
.btn-vault-group-toggle {
flex-shrink: 0;
display: flex;
align-items: center;
padding: 0.1em 0.2em;
border: 0;
border-radius: var(--radius-sm);
background: none;
color: inherit;
cursor: pointer;
}
.btn-vault-group-actions:hover,
.btn-vault-group-toggle:hover {
color: var(--text-color);
background-color: var(--surface-color);
}
/* Filas de un grupo plegado: siguen en el DOM (carga por bloques), ocultas.
Especificidad por encima de #file-list-container.grid-view .file-item-row. */
#file-list-container .file-item-row.vault-grouped-row.vault-group-collapsed {
display: none;
}
/* Cabecera de una subcarpeta cuya carpeta contenedora está plegada. */
#file-list-container .vault-group-header.vault-group-hidden {
display: none;
}
/* Items agrupados: indentados bajo su cabecera de carpeta según su nivel
(solo vista lista; en cuadrícula la regla con id
#file-list-container.grid-view .file-item-name gana por especificidad y las
tarjetas no se indentan). */
.vault-grouped-row .file-item-name {
padding-left: calc(1.5em + var(--vg-depth, 0) * 1.2em);
}
.file-item-name .file-item-parent-path {
margin-left: auto;
padding-left: 0.6em;
color: var(--secondary-text-color);
font-size: var(--fs-xs);
opacity: 0.75;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 1;
min-width: 0;
}
/* Prioridad de espacio: nombre completo prevalece sobre la ruta padre */
.vault-view-row .file-item-name a {
flex-shrink: 0;
}
.vault-view-row.vault-item-missing .file-item-name a {
text-decoration: line-through;
color: var(--secondary-text-color);
}
.vault-view-row.vault-item-missing .file-item-icon {
opacity: 0.4;
}
/* Enlazados en la vista central: fichero modificado localmente, mismo criterio
que el sidebar baúl (nombre y etiqueta en verde). Tras vault-item-missing
para que el verde prevalezca como allí. */
.vault-view-row.linked-modified .file-item-name a {
color: var(--success-color, #4caf50);
}
/* Cambio ignorado (Gestión de subidas): apagado hasta que vuelva a cambiar. */
.vault-view-row.linked-ignored .file-item-name a,
.linked-ignored .baul-item-name {
color: var(--secondary-text-color);
}
/* Gestión de subidas: barra de acciones sobre la lista. */
.upload-manager-bar {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4em 0.8em;
padding: 0.5em 0.6em;
margin-bottom: 0.4em;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
}
.upman-bar-title {
display: flex;
align-items: center;
gap: 0.3em;
font-weight: 600;
}
.upman-bar-title .material-icons {
font-size: var(--icon-md);
}
.upman-bar-summary {
color: var(--secondary-text-color);
}
.upman-bar-actions {
display: flex;
flex-wrap: wrap;
gap: 0.3em;
margin-left: auto;
}
.upman-bar-actions button {
font-size: var(--fs-xs);
}
/* Filtrar: mismo aspecto que el resto de la barra; abierto, se resalta. */
.upman-bar-filter[aria-expanded="true"] {
background-color: var(--selection-bg);
border-color: var(--focus-color);
}
/* Popover de filtros: reutiliza el look .context-menu; los toggles activos
se resaltan con el acento (aria-pressed). */
.upman-filter-menu {
min-width: 12rem;
}
.upman-filter-menu .upman-filter-toggle .material-icons {
font-size: var(--icon-md);
color: var(--secondary-text-color);
}
.upman-filter-menu .upman-filter-toggle[aria-pressed="true"] {
color: var(--accent-color);
font-weight: 600;
}
.upman-filter-menu .upman-filter-toggle[aria-pressed="true"] .material-icons {
color: var(--accent-color);
}
.upman-filter-empty {
font-style: italic;
}
/* Entrada rota de la Gestión de subidas: misma lectura que un enlace roto. */
.vault-view-row.baul-item-missing .file-item-name a {
text-decoration: line-through;
color: var(--secondary-text-color);
}
.vault-view-row.baul-item-missing .file-item-icon {
opacity: 0.4;
}
/* Comparación con el servidor bajo el nombre (mismo sitio que la ruta padre). */
.file-item-name .upload-diff {
margin-left: auto;
padding-left: 0.6em;
color: var(--secondary-text-color);
font-size: var(--fs-xs);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 1;
min-width: 0;
}
/* Acciones del modo en la cabecera de una carpeta. */
.vault-group-upman {
display: flex;
flex-shrink: 0;
}
.vault-group-upman button {
display: flex;
align-items: center;
padding: 0 0.2em;
border: 0;
background: none;
color: inherit;
cursor: pointer;
}
.vault-group-upman button:hover {
color: var(--focus-color);
}
.vault-group-upman button .material-icons {
font-size: var(--icon-md);
}
.baul-list.drop-target {
outline: 2px dashed var(--focus-color);
outline-offset: -3px;
background-color: var(--selection-bg-faint);
}
#btn-view-baul.drag-over {
background-color: var(--selection-bg);
outline: 2px dashed var(--focus-color);
outline-offset: -2px;
color: var(--focus-color);
}
/* Franja «Soltar en la Bandeja»: pie del sidebar visible solo mientras se
arrastran ficheros del equipo. Es el destino de bandeja que no obliga a
abrir antes el baúl correcto. */
.inbox-drop-strip {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4em;
flex-shrink: 0;
margin: 0.4em;
padding: 0.7em 0.5em;
border: 2px dashed var(--border-color);
border-radius: var(--radius-sm);
background-color: var(--bg-color);
color: var(--secondary-text-color);
font-size: var(--fs-xs);
user-select: none;
}
.inbox-drop-strip .material-icons { font-size: var(--icon-md); }
.inbox-drop-strip.drag-over {
border-color: var(--focus-color);
background-color: var(--selection-bg);
color: var(--focus-color);
}
.file-item-row.drop-target > div {
outline: 2px dashed var(--focus-color);
outline-offset: -2px;
background-color: var(--selection-bg-soft);
}
#file-list-container.drop-target-list {
outline: 2px dashed var(--focus-color);
outline-offset: -3px;
background-color: var(--selection-bg-faint);
}
/* EDITORS: GENERAL & CODEMIRROR */
#editor-view, #image-editor-view, #audio-editor-view, #video-editor-view, #mde-editor-view, #jsoneditor-view {
flex-grow: 1;
position: relative;
overflow: hidden;
}
#editor-view { background-color: var(--surface-color); }
#editor-toolbar, #image-editor-toolbar, #audio-editor-toolbar, #video-editor-toolbar, #mde-editor-toolbar, #jsoneditor-toolbar {
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
height: auto;
}
#editor-filename, #image-editor-filename, #audio-editor-filename, #video-editor-filename, #mde-editor-filename, #jsoneditor-filename {
font-family: var(--code-font-family);
font-size: var(--fs-sm);
color: var(--secondary-text-color);
word-break: break-all;
min-width: 0;
flex-shrink: 1;
width: 100%;
margin-bottom: 0.75rem;
}
#editor-actions, #image-editor-actions, #audio-editor-actions, #video-editor-actions {
display: flex;
gap: 0.2rem;
flex-shrink: 0;
align-items: center;
}
/* Botón Cerrar anclado al extremo derecho de las barras de los editores */
.toolbar-close {
margin-left: auto;
}
/* Estas barras dejan el Cerrar dentro de acciones: la llenan para pegarlo al borde */
#image-editor-actions, #audio-editor-actions, #video-editor-actions {
flex: 1;
}
/* EDITOR REPLACE PANEL */
#editor-replace-panel {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#editor-replace-panel input[type="text"] {
flex: 1;
min-width: 120px;
}
.editor-replace-buttons {
display: flex;
gap: 0.2rem;
}
.editor-replace-buttons button {
flex: 1 1 0;
font-size: var(--fs-xs);
white-space: nowrap;
}
/* EDITOR SEARCH */
#editor-search-group {
display: flex;
align-items: center;
gap: 0.2rem;
margin-left: auto;
flex-shrink: 0;
}
#btn-editor-mobile-search-toggle { display: none; }
.cm-searching {
background-color: rgba(255, 200, 0, 0.3);
outline: 1px solid rgba(255, 200, 0, 0.6);
}
#codemirror-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#codemirror-wrapper .CodeMirror {
height: 100%;
font-family: var(--code-font-family);
font-size: var(--fs-sm);
}
/* EDITOR: IMAGE */
#image-editor-view {
background-color: var(--bg-color);
padding: 1rem;
box-sizing: border-box;
}
#image-cropper-wrapper {
position: absolute;
top: 1rem;
left: 1rem;
right: 1rem;
bottom: 1rem;
}
#image-cropper-wrapper .cropper-container { background-color: var(--bg-color); }
#image-cropper-wrapper img {
max-width: 100%;
max-height: 100%;
}
.cropper-tool-group, .standard-tool-group, .wave-tool-group {
display: flex;
gap: 0.2rem;
flex-wrap: wrap;
}
.cropper-tool-group button, .wave-tool-group button {
padding: 0.5em;
font-size: var(--fs-sm);
width: 34px;
height: 34px;
}
/* EDITOR: AUDIO */
#audio-editor-view {
background-color: var(--bg-color);
padding: 1rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
#wavesurfer-container {
width: 100%;
height: 256px;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
#wavesurfer-timeline-container {
width: 100%;
height: 30px;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-top: none;
border-radius: 0 0 4px 4px;
box-sizing: border-box;
overflow: hidden;
}
#ffmpeg-log-container, #video-ffmpeg-log {
margin-top: 1rem;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
height: 200px;
overflow-y: auto;
padding: 0.5em;
font-family: var(--code-font-family);
font-size: var(--fs-xs);
color: var(--secondary-text-color);
}
#ffmpeg-log-container p, #video-ffmpeg-log p {
margin: 0 0 0.5em 0;
border-bottom: 1px solid var(--border-color);
}
/* EDITOR: VÍDEO (modules/video-editor.js) */
#video-editor-view {
background-color: var(--bg-color);
padding: 1rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow-y: auto;
}
/* Con el panel de campos abierto en móvil no queda alto para todo: el
reproductor conserva un mínimo y la vista hace scroll. */
#video-editor-stage {
flex: 1 1 auto;
min-height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
overflow: hidden;
}
#video-editor-player {
max-width: 100%;
max-height: 100%;
width: 100%;
min-height: 0;
flex: 1 1 auto;
background-color: #000;
}
#video-editor-note {
margin: 0 1rem 0.75rem;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
text-align: center;
}
#video-editor-status {
margin-top: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
}
#video-ffmpeg-log {
flex: 0 0 auto;
height: 160px;
}
#video-op-panel .video-op-head {
grid-column: 1 / -1;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
#video-op-panel .video-op-head .material-icons { font-size: var(--icon-lg); }
#video-op-panel .video-op-hint {
flex-basis: 100%;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
}
#video-op-panel .video-op-field input[type="text"],
#video-op-panel .video-op-field input[type="number"],
#video-op-panel .video-op-field select {
flex: 1 1 auto;
min-width: 0;
}
#video-op-panel .video-op-field input[type="number"] { max-width: 90px; }
#video-op-panel .video-op-time {
font-family: var(--code-font-family);
max-width: 120px;
}
#video-op-panel .video-op-suffix {
font-family: var(--code-font-family);
font-size: var(--fs-xs);
color: var(--secondary-text-color);
}
#video-op-panel .video-op-buttons {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
/* EDITOR: MARKDOWN (EASYMDE) */
#mde-editor-view { background-color: var(--surface-color); }
#mde-editor-view .EasyMDEContainer {
border: none;
height: 100%;
display: flex;
flex-direction: column;
}
#mde-editor-view .CodeMirror {
background-color: var(--surface-color);
color: var(--text-color);
}
#mde-editor-view .editor-toolbar {
background-color: var(--bg-color);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
opacity: 1;
}
#mde-editor-view .editor-toolbar button {
background: none;
border: 1px solid transparent;
color: var(--secondary-text-color);
}
#mde-editor-view .editor-toolbar button:hover,
#mde-editor-view .editor-toolbar button.active {
background-color: var(--surface-color);
border-color: var(--border-color);
color: var(--text-color);
}
#mde-editor-view .editor-toolbar button::after { display: none; }
#mde-editor-view .editor-toolbar button .material-icons { font-size: 18px; }
#mde-editor-view .editor-statusbar { display: none; }
#mde-editor-view .cm-s-easymde .CodeMirror-cursor { border-left-color: var(--text-color); }
#mde-editor-view .editor-preview,
#mde-editor-view .editor-preview-side {
background-color: var(--surface-color);
color: var(--text-color);
padding: 1rem;
box-sizing: border-box;
}
#mde-editor-view .editor-preview a { color: var(--focus-color); }
#mde-editor-view .editor-preview code,
#mde-editor-view .editor-preview pre {
background-color: var(--bg-color);
border: 1px solid var(--border-color);
}
/* Fullscreen de EasyMDE por encima del #sidebar-resizer (z-index:10),
que si no asoma sobre el editor a pantalla completa. */
.CodeMirror-fullscreen { z-index: 11 !important; }
.editor-toolbar.fullscreen,
.editor-preview-side { z-index: 12 !important; }
.prefs-button {
padding: 0.4em 0.9em;
background-color: var(--button-color);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-family: var(--font-family);
font-size: var(--fs-sm);
cursor: pointer;
}
.prefs-button:hover:not(:disabled) { border-color: var(--primary-color); }
.prefs-button:disabled { opacity: 0.45; cursor: not-allowed; }
.prefs-button.danger { border-color: var(--danger-color, #e53935); color: var(--danger-color, #e53935); }
/* ── 2FA ── */
.twofa-status { font-family: var(--code-font-family); color: var(--secondary-text-color); }
.twofa-status.twofa-on { color: var(--success-color, #4caf50); font-weight: 600; }
.twofa-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.twofa-qr {
display: flex;
align-items: center;
justify-content: center;
min-height: 180px;
margin: 0.5rem auto;
padding: 0.5rem;
background: #fff; /* el QR necesita fondo claro para que la cámara lo lea */
border-radius: var(--radius-sm);
width: max-content;
}
.twofa-qr img, .twofa-qr canvas { display: block; }
.twofa-recovery-list {
font-family: var(--code-font-family);
font-size: var(--fs-md);
line-height: 1.7;
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.75rem 1rem;
margin: 0.5rem 0;
text-align: center;
letter-spacing: 0.05em;
white-space: pre;
user-select: all;
}
.login-2fa-hint {
margin-top: 0.75rem;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
text-align: center;
}
.login-source-note {
margin: 0;
font-size: 0.75rem;
color: var(--secondary-text-color);
text-align: center;
}
.login-source-note a {
color: inherit;
}
a.config-entry {
box-sizing: border-box;
font-weight: 500;
line-height: normal;
text-decoration: none;
}
/* MODAL EXPANDIDO (AMPLIAR) */
@keyframes expand-modal-in {
from { opacity: 0; transform: scale(0.97); }
to { opacity: 1; transform: scale(1); }
}
@keyframes expand-modal-out {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.97); }
}
.expand-modal {
position: fixed;
inset: 0;
z-index: 3000;
background-color: var(--bg-color);
display: flex;
flex-direction: column;
}
.expand-modal.hidden {
display: none;
}
.expand-modal.is-opening {
animation: expand-modal-in var(--anim-base) ease forwards;
}
.expand-modal.is-closing {
animation: expand-modal-out var(--anim-fast) ease forwards;
}
.expand-modal-toolbar {
position: relative;
display: flex;
align-items: center;
gap: 0.2rem;
padding: 0.4rem 0.75rem;
border-bottom: 1px solid var(--border-color);
background-color: var(--surface-color);
flex-shrink: 0;
}
.expand-modal-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
max-width: 40%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: var(--fs-sm);
color: var(--secondary-text-color);
pointer-events: none;
}
#btn-modal-close {
margin-left: auto;
}
.expand-modal-toolbar button.active {
background-color: var(--focus-color);
color: var(--on-accent);
}
.expand-modal-content {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 1rem;
box-sizing: border-box;
}
/* Imágenes y vídeos: encajan sin deformar */
.expand-modal-content img,
.expand-modal-content video {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
/* Audio: centrado, ancho razonable */
.expand-modal-audio {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
width: 100%;
max-width: 500px;
}
.expand-modal-audio audio {
width: 100%;
}
/* Texto/código y propiedades: scroll interno */
.expand-modal-scrollable {
width: 100%;
max-width: 900px;
max-height: 100%;
overflow: auto;
align-self: stretch;
}
.expand-modal-scrollable pre {
margin: 0;
white-space: pre-wrap;
word-break: break-all;
}
/* MODALS & OVERLAYS */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
}
/* Entrada de modales: fundido del fondo + "pop" del contenido. Se dispara
cada vez que el overlay pasa de display:none (.hidden) a visible. */
@keyframes modal-overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modal-content-in {
from { opacity: 0; transform: translateY(8px) scale(0.97); }
to { opacity: 1; transform: none; }
}
.modal-overlay:not(.hidden) {
animation: modal-overlay-in var(--menu-anim-dur) ease;
}
.modal-overlay:not(.hidden) > .modal-content {
animation: modal-content-in var(--anim-base) var(--menu-anim-ease);
}
/* Los mensajes de modal se componen con saltos de linea (listas de ficheros en
conflicto, resumenes de lote). Sin esto el
los colapsa a un espacio. */
#conflict-modal-message,
#alert-modal-message,
#confirm-modal-message,
#baul-import-modal-message {
white-space: pre-line;
word-break: break-word;
}
/* Paneles desplegables de la toolbar: deslizan al abrirse. */
@keyframes panel-slide-down {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
#url-uploader-panel:not(.hidden),
#advanced-search-panel:not(.hidden),
#editor-replace-panel:not(.hidden),
#image-save-as-panel:not(.hidden),
#image-resize-panel:not(.hidden),
#video-op-panel:not(.hidden) {
animation: panel-slide-down var(--menu-anim-dur) var(--menu-anim-ease);
}
/* Cross-fade al cambiar entre vistas de la sidebar (árbol / favoritos /
baúl / preview / propiedades / config). Se dispara al pasar a visible. */
@keyframes sidebar-view-fade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
#folder-tree:not(.hidden),
#favorites-list:not(.hidden),
#baul-list:not(.hidden),
#sidebar-preview:not(.hidden),
#sidebar-properties:not(.hidden),
#sidebar-config:not(.hidden) {
animation: sidebar-view-fade var(--anim-base) var(--menu-anim-ease);
}
/* Skeletons / shimmer para estados de carga de listados. */
@keyframes skeleton-shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
.skeleton-list {
display: flex;
flex-direction: column;
gap: 0.35em;
padding: 0.5em var(--list-padding-x);
width: 100%;
box-sizing: border-box;
}
.skeleton-row {
height: 1.5em;
border-radius: var(--radius-sm);
background: linear-gradient(
90deg,
var(--surface-color) 25%,
var(--button-hover-bg) 50%,
var(--surface-color) 75%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s ease-in-out infinite;
opacity: 0.7;
}
.skeleton-row:nth-child(2n) { width: 92%; }
.skeleton-row:nth-child(3n) { width: 78%; }
/* Indicador activo deslizante de la toolbar de vistas del sidebar. */
.sidebar-toolbar { position: relative; }
.sidebar-toolbar > button { position: relative; z-index: 1; }
/* Sin encoger: lo que no cabe baja al menú «Otros» (_spillSidebarViewBtns),
que mide anchos reales. */
.sidebar-toolbar > * { flex-shrink: 0; }
.sidebar-toolbar-pill {
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
border-radius: var(--radius-sm);
background-color: var(--sidebar-pill-bg);
opacity: 0;
z-index: 0;
pointer-events: none;
transition: transform var(--anim-slow) var(--menu-anim-ease),
width var(--anim-slow) var(--menu-anim-ease),
height var(--anim-slow) var(--menu-anim-ease),
opacity var(--anim-base) ease;
}
/* Reordenado por arrastre de los botones de vista del sidebar. */
.sidebar-view-btn {
cursor: default;
touch-action: pan-y;
-webkit-touch-callout: none;
user-select: none;
}
body.is-sidebar-reordering { cursor: grabbing; }
body.is-sidebar-reordering .sidebar-view-btn { cursor: grabbing; }
.sidebar-view-btn--dragging {
position: fixed;
margin: 0;
pointer-events: none;
z-index: var(--z-sidebar-drag);
border-radius: var(--radius-sm);
background-color: var(--surface-color);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
opacity: 0.96;
transform: scale(1.06);
transition: none;
}
.sidebar-toolbar-drop-slot {
flex: 0 0 auto;
border-radius: var(--radius-sm);
background-color: var(--sidebar-pill-bg);
outline: 2px dashed var(--accent-color);
outline-offset: -2px;
animation: sidebar-slot-in var(--anim-fast) ease;
}
@keyframes sidebar-slot-in {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.sidebar-view-btn--dragging { transform: none; }
.sidebar-toolbar-drop-slot { animation: none; }
}
/* ── Grupo «Otros» de vistas del sidebar ─────────────────────────────────── */
/* ✕ de Configuración: extremo izquierdo de la barra del sidebar. El margen
automático lo mantiene a la izquierda aunque no haya grupos de nav visibles. */
#btn-close-config { margin-right: auto; }
.sidebar-others {
position: relative;
display: flex;
}
.sidebar-others.hidden { display: none; }
/* z-index como los botones hermanos de la toolbar: por encima del pill. */
.sidebar-others > button {
position: relative;
z-index: 1;
}
.sidebar-others-menu {
position: absolute;
top: calc(100% + 0.25rem);
right: 0;
z-index: 20;
min-width: 11rem;
display: flex;
flex-direction: column;
gap: 0.1rem;
padding: 0.25rem;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.sidebar-others-menu.hidden { display: none; }
/* Con un arrastre en curso el menú es zona de drop: aunque esté vacío conserva
una altura mínima en la que poder soltar un botón. */
body.is-sidebar-reordering .sidebar-others-menu { min-height: 2.75rem; }
.sidebar-others-menu .sidebar-toolbar-drop-slot { margin: 0; }
/* Dentro del menú, los botones de vista pasan de cuadrados a filas. */
.sidebar-others-menu .sidebar-view-btn {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.6rem;
width: 100%;
height: auto;
padding: 0.5rem 0.6rem;
border-radius: var(--radius-sm);
text-align: left;
white-space: nowrap;
}
.sidebar-others-menu .sidebar-view-btn .material-icons { font-size: 1.25rem; }
.sidebar-view-btn-label { display: none; }
.sidebar-others-menu .sidebar-view-btn-label {
display: inline;
font-size: var(--fs-sm);
}
/* ── Vista Papelera del sidebar ──────────────────────────────────────────── */
.sidebar-trash-list {
display: flex;
flex-direction: column;
padding: 0.25rem;
}
.sidebar-trash-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.4rem;
border-radius: var(--radius-sm);
}
.sidebar-trash-item:hover { background: var(--surface-active-bg); }
.sidebar-trash-name {
display: flex;
align-items: center;
gap: 0.4rem;
flex-grow: 1;
min-width: 0;
font-size: var(--fs-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-trash-name .material-icons { font-size: 1.1rem; flex-shrink: 0; }
.sidebar-trash-actions {
display: flex;
gap: 0.1rem;
flex-shrink: 0;
}
.sidebar-trash-empty-msg {
padding: 1rem;
text-align: center;
color: var(--secondary-text-color);
font-size: var(--fs-sm);
}
/* Anchos de modal, medidos por fuera (border-box: sin él, el 90% más el
relleno se salía de la pantalla en móvil):
- por defecto: diálogos de texto y formularios cortos (alerta, confirmar…);
- .modal-md: listas y árboles (Lista, destino, propiedades, conflicto);
- .modal-lg: informes con varias columnas por fila (Comprobar, Sincronizar). */
.modal-content {
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 1.5rem 2rem;
box-sizing: border-box;
width: calc(100% - 2rem);
max-width: 564px;
box-shadow: var(--shadow-3);
max-height: 90vh;
display: flex;
flex-direction: column;
}
.modal-content h3 {
margin-top: 0;
border-bottom: none;
padding-bottom: 0;
}
.modal-content p {
color: var(--secondary-text-color);
font-family: var(--code-font-family);
word-break: break-word;
white-space: pre-wrap;
}
/* Diálogos (runConfirmDialog): lista de afectados en su propia caja con
desplazamiento, y nota secundaria debajo. */
.modal-list {
margin-top: 0.75rem;
max-height: 12rem;
overflow-y: auto;
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.4rem 0.75rem;
font-family: var(--code-font-family);
font-size: var(--fs-xs);
}
.modal-list ul {
list-style: none;
margin: 0 0 0.4rem;
padding: 0;
}
.modal-list ul:last-child { margin-bottom: 0; }
.modal-list li { padding: 0.1rem 0; word-break: break-all; }
.modal-list-heading {
color: var(--secondary-text-color);
margin: 0.3rem 0 0.15rem;
}
.modal-content p.modal-note {
margin: 0.75rem 0 0;
font-size: var(--fs-xs);
}
/* Subir y descomprimir: «qué poner en la carpeta» como dos opciones con la
vista previa del árbol que deja cada una. */
/* Tres botones con texto largo: algo más ancho que el diálogo de texto. */
#archive-modal .modal-content { max-width: 640px; }
.archive-root-choice {
border: 0;
margin: 0.75rem 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.archive-root-choice legend {
padding: 0;
margin-bottom: 0.4rem;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
}
.archive-choice {
display: flex;
gap: 0.5rem;
align-items: flex-start;
min-width: 0;
padding: 0.6rem 0.7rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
cursor: pointer;
}
.archive-choice:has(input:checked) { border-color: var(--accent-color); background: var(--accent-bg-soft); }
.archive-choice input { margin: 0.15rem 0 0; flex: none; }
.archive-choice-body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.archive-choice-tree {
font-family: var(--code-font-family);
font-size: var(--fs-xs);
color: var(--secondary-text-color);
white-space: pre;
overflow-x: auto;
}
.archive-choice-tree:empty { display: none; }
@media (max-width: 520px) {
.archive-root-choice { grid-template-columns: 1fr; }
}
.modal-actions {
margin-top: 1.5rem;
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
/* Acción irreversible en un diálogo (showConfirm con danger): visible como tal
sin depender del hover, a diferencia de button.danger en las barras. */
.modal-actions button.danger {
color: var(--error-text-color);
border-color: var(--error-text-color);
}
.modal-actions button.danger:hover {
color: #fff;
background-color: var(--danger-color);
}
.modal-warn {
margin-top: 1rem;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
background: var(--bg-color);
border: 1px solid var(--border-color);
border-left: 3px solid var(--accent-color);
border-radius: var(--radius-sm);
padding: 0.6em 0.8em;
}
.crypt-share-warn {
margin-top: 1rem;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
background: var(--bg-color);
border: 1px solid var(--border-color);
border-left: 3px solid var(--accent-color);
border-radius: var(--radius-sm);
padding: 0.6em 0.8em;
}
#crypt-share-info code { background: var(--bg-color); padding: 0 0.3em; border-radius: 3px; }
/* Conflict modal: file detail blocks (existing vs incoming, stacked) */
.conflict-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.75rem;
}
.conflict-file-block {
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.5rem 0.75rem;
background-color: var(--surface-tint-faint);
}
.conflict-file-label {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--secondary-text-color);
margin-bottom: 0.25rem;
}
.conflict-file-name {
font-family: var(--code-font-family);
word-break: break-all;
font-weight: 600;
}
.conflict-file-meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 0.25rem;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
}
/* Conflict modal: checkbox «aplicar al resto del lote» */
.conflict-apply-all {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.75rem;
font-size: var(--fs-sm);
cursor: pointer;
user-select: none;
}
.modal-content.modal-md { max-width: 820px; }
.modal-content.modal-lg { max-width: 1120px; }
@media (max-width: 768px) {
.modal-content { padding: 1.25rem 1rem; }
/* Pie de modal apilado y a ancho completo: en una fila los botones se
salían de la pantalla (p. ej. el modal de Lista con 5 acciones). */
.modal-actions {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
}
/* Listing Modal */
#listing-modal-list {
overflow-y: auto;
flex: 1;
min-height: 0;
margin-top: 1rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
.listing-modal-item {
padding: 0.3em 0.7em;
font-family: var(--code-font-family);
font-size: var(--fs-xs);
border-bottom: 1px solid var(--border-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.listing-modal-item:last-child { border-bottom: none; }
.listing-modal-item.listing-dir { color: var(--accent-color); }
/* Árbol: cada fila lleva su propio sangrado (--depth) y un hueco fijo para el
chevron, de modo que ficheros y carpetas del mismo nivel quedan alineados. */
#listing-modal .listing-modal-item {
display: flex;
align-items: center;
gap: 0.25em;
padding-left: calc(0.4em + var(--depth, 0) * 1.25em);
}
.listing-toggle {
flex: none;
width: 1.4em;
height: 1.4em;
padding: 0;
border: none;
background: none;
color: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.listing-toggle .material-icons { font-size: 1.2em; }
.listing-toggle-spacer { flex: none; width: 1.4em; }
.listing-name {
overflow: hidden;
text-overflow: ellipsis;
}
.listing-note { color: var(--secondary-text-color); font-style: italic; }
/* Listing Modal Header */
.listing-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
}
.listing-modal-header span {
font-size: var(--fs-sm);
color: var(--secondary-text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Resumen (bloque base) bajo la cabecera del modal de listado */
.listing-modal-summary {
margin-top: 0.5rem;
font-family: var(--code-font-family);
font-size: var(--fs-xs);
color: var(--secondary-text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modal-form-group { margin-top: 1.5rem; }
.modal-form-group label {
display: block;
margin-bottom: 0.5rem;
color: var(--secondary-text-color);
}
.modal-form-group select,
.modal-form-group input[type="text"] {
width: 100%;
background-color: var(--bg-color);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.6em 0.8em;
font-family: var(--font-family);
font-size: var(--fs-sm);
box-sizing: border-box;
}
.modal-form-group input[type="text"]:focus {
outline: none;
border-color: var(--accent-color);
}
/* SELECTOR DE ICONOS (modal de favoritos)
Sustituye al antiguo campo de texto libre: con la fuente subconjuntada solo
existen los glifos del catálogo, así que el nombre se elige, no se escribe.
Ver modules/icon-picker.js. */
.icon-picker { position: relative; }
.icon-picker-trigger {
width: 100%;
display: flex;
align-items: center;
gap: 0.6em;
background-color: var(--bg-color);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.5em 0.8em;
font-family: var(--font-family);
font-size: var(--fs-sm);
cursor: pointer;
}
.icon-picker-trigger:hover { background-color: var(--button-hover-bg); }
.icon-picker-trigger[aria-expanded="true"] { border-color: var(--accent-color); }
.icon-picker-label { flex: 1; text-align: left; }
/* Sin icono elegido el hueco se reserva igual, para que el botón no dé saltos. */
.icon-picker-current { font-size: var(--icon-lg); min-width: var(--icon-lg); }
.icon-picker-current.vacio { opacity: 0.35; }
.icon-picker-current.vacio::before { content: "remove"; }
.icon-picker-caret { font-size: var(--icon-md); color: var(--secondary-text-color); }
.icon-picker-panel {
position: absolute;
z-index: 2100;
top: calc(100% + 4px);
left: 0;
right: 0;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
box-shadow: 0 6px 20px rgb(0 0 0 / 0.35);
padding: 0.5em;
}
.icon-picker-search {
width: 100%;
background-color: var(--bg-color);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.45em 0.7em;
font-family: var(--font-family);
font-size: var(--fs-sm);
margin-bottom: 0.5em;
box-sizing: border-box;
}
.icon-picker-search:focus { outline: none; border-color: var(--accent-color); }
.icon-picker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr));
gap: 2px;
max-height: 15rem;
overflow-y: auto;
}
/* Las cabeceras de grupo ocupan la fila entera dentro de la misma rejilla. */
.icon-picker-group {
grid-column: 1 / -1;
font-size: var(--fs-2xs);
color: var(--secondary-text-color);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.6em 0.2em 0.25em;
}
.icon-picker-group:first-child { padding-top: 0.2em; }
.icon-picker-opt {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
background: none;
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--text-color);
cursor: pointer;
padding: 0;
}
.icon-picker-opt:hover { background-color: var(--button-hover-bg); }
.icon-picker-opt.sel { border-color: var(--accent-color); background-color: var(--button-active-bg); }
.icon-picker-opt .material-icons { font-size: var(--icon-lg); }
.icon-picker-opt-default {
grid-column: 1 / -1;
aspect-ratio: auto;
justify-content: flex-start;
padding: 0.45em 0.6em;
font-family: var(--font-family);
font-size: var(--fs-xs);
color: var(--secondary-text-color);
}
/* Selector de iconos flotante del editor de favoritos: se ancla a la celda con
left/top en línea; el disparador se oculta y se abre por .click(). */
.fev-icon-picker { position: fixed; z-index: 2200; width: min(20rem, calc(100vw - 2rem)); }
.fev-icon-picker > .icon-picker-trigger { display: none; }
/* LINKS VIEW (PANEL) */
#links-view, #sysinfo-view, #prefs-view, #trash-view, #apps-view, #webdav-view, #guide-view, #shortcuts-view,
#users-editor-view, #favorites-editor-view {
flex-grow: 1;
min-height: 0;
overflow-y: auto;
padding: 1rem 1.5rem;
}
/* Las tablas con
sticky (ver .links-table th) se anclan por debajo del
padding-top del scroller, dejando asomar las filas por la banda superior; el
padding vertical pasa al contenido interior. */
#links-view, #trash-view, #webdav-view, #sysinfo-view, #users-editor-view, #favorites-editor-view { padding-top: 0; padding-bottom: 0; }
#links-view > .links-view-body,
#trash-view > .links-view-body,
#webdav-view > .links-view-body,
#users-editor-view > .links-view-body,
#favorites-editor-view > .links-view-body { padding-top: 1rem; padding-bottom: 1rem; }
#sysinfo-content { padding: 1rem 0; }
/* El gestor de baúles trae su propio padding en .vm-body. */
#vault-manager-view {
flex-grow: 1;
min-height: 0;
overflow-y: auto;
}
/* --- Entrada de Papelera en el panel de Configuración --- */
.config-trash-row {
display: flex;
align-items: center;
gap: 0.25rem;
}
.config-trash-row .config-trash-link {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 0.5rem;
text-align: left;
}
.config-trash-row .config-trash-link .material-icons {
font-size: var(--icon-md);
}
.config-trash-size {
margin-left: auto;
opacity: 0.7;
font-size: var(--fs-xs);
white-space: nowrap;
}
.config-trash-empty {
flex: 0 0 auto;
}
/* --- Vista de Papelera --- */
.trash-toolbar-info {
opacity: 0.7;
font-size: var(--fs-xs);
font-weight: normal;
}
.trash-empty-placeholder {
text-align: center;
opacity: 0.7;
padding: 2rem 1rem;
}
#trash-view .links-table td.trash-loc {
opacity: 0.7;
font-size: var(--fs-xs);
word-break: break-all;
}
.prefs-content {
max-width: 600px;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.prefs-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: calc(0.5rem + var(--list-padding-y)) 1rem;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
.prefs-label {
color: var(--text-color);
flex: 1;
font-size: var(--fs-sm);
}
.prefs-stepper {
display: flex;
align-items: center;
gap: 0.4rem;
}
#prefs-font-value {
min-width: 3.5em;
text-align: center;
font-family: var(--code-font-family);
color: var(--text-color);
}
.prefs-segmented {
display: inline-flex;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
overflow: hidden;
}
.prefs-segmented button {
padding: 0.4em 0.9em;
background-color: var(--button-color);
color: var(--text-color);
border: none;
border-right: 1px solid var(--border-color);
cursor: pointer;
font-family: var(--font-family);
font-size: var(--fs-sm);
}
.prefs-segmented button:last-child { border-right: none; }
.prefs-segmented button:hover { background-color: var(--button-hover-bg); }
.prefs-segmented button.active {
background-color: var(--primary-color);
color: var(--on-accent);
}
.prefs-section-title {
font-size: var(--fs-md);
color: var(--secondary-text-color);
margin: 0.5rem 0 0.25rem 0;
padding: 0 0.25rem;
border-bottom: none;
}
.prefs-number-input {
width: 5em;
padding: 0.35em 0.5em;
background-color: var(--button-color);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-family: var(--font-family);
font-size: var(--fs-sm);
text-align: center;
}
.prefs-number-input:focus {
outline: none;
border-color: var(--primary-color);
}
/* --- Preferencia: ruta raíz visual --- */
.prefs-text-input {
width: 100%;
box-sizing: border-box;
font-family: var(--code-font-family);
font-size: var(--fs-sm);
padding: 0.4em 0.6em;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
background-color: var(--bg-color, var(--surface-color));
color: var(--text-color);
outline: none;
}
.prefs-text-input:focus {
border-color: var(--focus-color);
}
.toggle-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--button-color);
border: 1px solid var(--border-color);
border-radius: 24px;
transition: background-color var(--anim-base);
}
.toggle-slider::before {
content: "";
position: absolute;
height: 16px;
width: 16px;
left: 3px;
bottom: 3px;
background-color: var(--text-color);
border-radius: 50%;
transition: transform var(--anim-base);
}
.toggle-switch input:checked + .toggle-slider {
background-color: var(--primary-color);
}
.toggle-switch input:checked + .toggle-slider::before {
transform: translateX(20px);
}
.toggle-switch input:focus-visible + .toggle-slider {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
.links-view-body {
max-width: 800px;
}
.webdav-view-body { padding-right: 0.5rem; }
.webdav-section {
margin-bottom: 1.75rem;
}
.webdav-section h4 {
margin: 0 0 0.5rem;
color: var(--text-color);
}
.webdav-hint {
color: var(--secondary-text-color);
font-size: var(--fs-xs);
line-height: 1.45;
margin: 0.35rem 0;
}
.webdav-url-row {
display: flex;
gap: 0.5rem;
align-items: center;
margin: 0.5rem 0;
}
.webdav-url-row input {
flex: 1;
font-family: var(--code-font-family);
font-size: var(--fs-xs);
padding: 0.5rem;
}
.webdav-help-icon {
font-size: var(--icon-sm);
vertical-align: -3px;
color: var(--secondary-text-color);
cursor: help;
opacity: 0.75;
}
.webdav-help-icon:hover { opacity: 1; }
.prefs-help-icon {
font-size: var(--icon-sm);
vertical-align: -3px;
color: var(--secondary-text-color);
cursor: help;
opacity: 0.75;
}
.prefs-help-icon:hover { opacity: 1; }
/* Grupos de la vista de Preferencias (navegables desde el sidebar). */
.prefs-group {
display: flex;
flex-direction: column;
/* La separación entre filas sigue a la densidad (--list-padding-y): más junta
en Compacta, más aire en Espaciada. */
gap: calc(var(--list-padding-y) * 1.5);
scroll-margin-top: 1rem;
}
.prefs-group-title {
font-size: var(--fs-lg);
color: var(--text-color);
margin: 1.25rem 0 0.25rem;
padding: 0 0.25rem;
}
.prefs-content > .prefs-group:first-child > .prefs-group-title { margin-top: 0; }
/* Contraste de las rayas aplicado a las propias filas de Preferencias (vista previa). */
body.row-stripes .prefs-group .prefs-row:nth-of-type(even) {
background-image: linear-gradient(var(--row-stripe-color), var(--row-stripe-color));
}
/* Slider de contraste (Preferencias). */
.prefs-slider {
display: flex;
align-items: center;
gap: 0.6rem;
}
.prefs-slider input[type="range"] {
width: 10rem;
accent-color: var(--primary-color);
cursor: pointer;
}
.prefs-slider span {
min-width: 3em;
text-align: right;
font-family: var(--code-font-family);
font-size: var(--fs-sm);
color: var(--secondary-text-color);
}
/* Slider de densidad de la lista (Preferencias). */
.prefs-slider-density {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.15rem;
width: 12rem;
max-width: 100%;
}
.prefs-slider-density input[type="range"] {
width: 100%;
accent-color: var(--primary-color);
cursor: pointer;
}
.prefs-density-ticks {
display: flex;
justify-content: space-between;
font-size: var(--fs-2xs);
color: var(--secondary-text-color, #a0a0a0);
}
/* Subnavegación del sidebar de Configuración (subsecciones de Preferencias). */
.config-subnav {
display: flex;
flex-direction: column;
gap: 0.125rem;
margin: 0 0 0.25rem 0.75rem;
padding-left: 0.5rem;
border-left: 1px solid var(--border-color);
}
.config-subnav.hidden { display: none; }
.config-subentry {
display: block;
width: 100%;
padding: 0.4rem 0.6rem;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--secondary-text-color);
font-size: var(--fs-xs);
text-align: left;
cursor: pointer;
transition: background var(--anim-fast), color var(--anim-fast);
}
.config-subentry:hover {
background: var(--surface-active-bg);
color: var(--text-color);
}
/* Modal de ayuda WebDAV */
.webdav-help-content { max-width: 704px; }
.webdav-help-body {
flex: 1;
overflow-y: auto;
margin-top: 0.5rem;
padding-right: 0.5rem;
}
.webdav-help-body p,
.webdav-help-body li {
color: var(--secondary-text-color);
font-family: inherit;
white-space: normal;
word-break: normal;
line-height: 1.5;
font-size: var(--fs-xs);
}
.webdav-help-body .webdav-help-lead { color: var(--text-color); }
.webdav-help-body h4 {
color: var(--text-color);
margin: 1.1rem 0 0.4rem;
}
.webdav-help-body ul {
margin: 0.3rem 0;
padding-left: 1.2rem;
}
.webdav-help-body li { margin-bottom: 0.3rem; }
.webdav-help-body code {
font-family: var(--code-font-family);
font-size: 0.85em;
background-color: var(--code-inline-bg);
padding: 0.1em 0.35em;
border-radius: 3px;
}
.webdav-help-body pre {
background-color: rgba(0, 0, 0, 0.25);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.75rem 1rem;
overflow-x: auto;
margin: 0.5rem 0;
}
.webdav-help-body pre code {
background: none;
padding: 0;
color: var(--text-color);
line-height: 1.4;
}
.links-table {
width: 100%;
border-collapse: collapse;
font-family: var(--code-font-family);
font-size: var(--fs-sm);
}
.links-table th {
text-align: left;
color: var(--secondary-text-color);
border-bottom: 1px solid var(--border-color);
padding: 0.75rem 0.5rem;
position: sticky;
top: 0;
background-color: var(--surface-color);
z-index: 1;
}
.links-table td {
padding: 0.5rem;
border-bottom: 1px solid var(--row-divider);
vertical-align: middle;
}
.links-table .text-right { text-align: right; }
.btn-link-action {
padding: 0.4em 0.6em;
font-size: var(--fs-xs);
margin-left: 0.25rem;
background-color: transparent;
border: 1px solid transparent;
color: var(--text-color);
border-radius: 3px;
cursor: pointer;
}
.btn-link-action:hover {
background-color: var(--button-hover-bg);
}
.btn-link-action.danger {
color: var(--secondary-text-color);
}
.btn-link-action.danger:hover {
background-color: var(--button-hover-bg);
color: var(--danger-hover-color);
}
/* DESTINATION PICKER MODAL */
#destination-tree-container {
min-height: 200px;
max-height: 50dvh;
overflow-y: auto;
border: 1px solid var(--border-color);
background-color: var(--bg-color);
padding: 0.5rem;
margin: 1.5rem 0;
border-radius: var(--radius-sm);
}
#destination-tree-container .folder-item-header:hover {
background-color: var(--surface-color);
}
#destination-tree-container .folder-item-header.selected {
background-color: var(--focus-color);
color: var(--on-accent);
}
#destination-modal-info {
font-family: var(--code-font-family);
color: var(--secondary-text-color);
word-break: break-word;
font-size: var(--fs-xs);
margin: 0.5rem 0 0 0;
}
/* SESSION MODAL */
.session-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
}
.session-modal-content {
background: var(--bg-color);
border: 2px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 1.5rem;
width: 100%;
max-width: 320px;
box-shadow: var(--shadow-3);
margin: 8px;
display: flex;
flex-direction: column;
gap: 1rem;
}
.session-modal-content h2 {
text-align: center;
color: var(--text-color);
margin: 0;
padding: 0;
border: none;
font-family: 'Press Start 2P', monospace;
}
.session-modal-content h2 .title-letter {
transition: color var(--anim-slow) ease, text-shadow var(--anim-slow) ease;
}
.session-modal-content h2 .title-letter.lit {
color: var(--accent-color);
}
.session-user-display {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.75rem;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
color: var(--text-color);
font-size: var(--fs-sm);
}
.session-user-display .material-icons {
font-size: var(--icon-md);
color: var(--secondary-text-color);
}
.session-btn-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.session-modal-content .login-btn-secondary {
width: 100%;
padding: 0.6rem 0.5rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
font-weight: 500;
cursor: pointer;
background: var(--button-color);
color: var(--text-color);
transition: background var(--anim-fast);
}
.session-modal-content .login-btn-secondary:hover {
background: var(--button-hover-bg);
}
/* LOGIN FORM */
.login-box {
display: flex;
flex-direction: column;
gap: 1rem;
}
.login-box h2 {
text-align: center;
color: var(--focus-color);
margin: 0;
padding: 0;
border: none;
font-family: 'Press Start 2P', monospace;
}
.login-form-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.login-form-group label {
font-size: var(--fs-xs);
color: var(--secondary-text-color);
}
.login-form-group input {
width: 100%;
box-sizing: border-box;
}
.login-form-group + .login-form-group {
margin-top: 0.5rem;
}
.login-error,
.login-success {
padding: 0.6rem 0.75rem;
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
border: 1px solid var(--border-color);
text-align: center;
}
.login-error {
background-color: rgba(163, 0, 0, 0.15);
border-color: var(--danger-color);
color: var(--error-text-color);
}
.login-success {
background-color: var(--accent-bg-soft);
border-color: var(--primary-color);
color: var(--info-color);
}
.login-actions {
display: flex;
justify-content: stretch;
margin-top: 0.25rem;
}
.login-lang {
position: relative;
display: flex;
justify-content: center;
margin-top: 0.75rem;
}
.login-lang-trigger {
padding: 0.4em;
border-radius: var(--radius-sm);
color: var(--secondary-text-color);
}
.login-lang-trigger:hover,
.login-lang-trigger[aria-expanded="true"] {
color: var(--text-color);
}
.login-lang-trigger .material-icons {
font-size: var(--icon-md);
}
.login-lang-menu {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
min-width: 8rem;
padding: 0.25rem;
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-3);
opacity: 0;
visibility: hidden;
transition: opacity var(--anim-fast) ease, visibility var(--anim-fast) ease;
z-index: 10;
}
.login-lang:hover .login-lang-menu,
.login-lang:focus-within .login-lang-menu {
opacity: 1;
visibility: visible;
}
.login-lang-menu a {
padding: 0.45rem 0.7rem;
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
text-align: left;
}
.login-lang-menu a:hover {
background: var(--button-hover-bg);
text-decoration: none;
}
.login-lang-menu a.active {
color: var(--primary-color);
font-weight: 500;
}
.login-btn {
width: 100%;
padding: 0.7rem 0.9rem;
background-color: var(--primary-color);
border: 1px solid rgba(0, 0, 0, 0.2);
color: var(--on-accent);
font-weight: 500;
font-size: var(--fs-sm);
}
.login-btn:hover {
background-color: var(--primary-hover-color);
box-shadow: 0 3px 8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* WEB AUTHN LOGIN */
.login-webauthn-sep {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--secondary-text-color);
font-size: var(--fs-xs);
margin: 0.75rem 0 0.5rem;
}
.login-webauthn-sep::before,
.login-webauthn-sep::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-color);
}
.login-btn-webauthn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.7rem 0.9rem;
background-color: #2d2d2d;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
color: var(--text-color);
font-weight: 500;
font-size: var(--fs-sm);
font-family: var(--font-family);
cursor: pointer;
transition: background var(--anim-fast), border-color var(--anim-fast);
}
.login-btn-webauthn:hover:not(:disabled) {
background-color: var(--button-hover-bg);
border-color: var(--primary-color);
}
.login-btn-webauthn:disabled {
opacity: 0.6;
cursor: wait;
}
.login-btn-webauthn .material-icons {
font-size: var(--icon-lg);
}
/* PROPERTIES MODAL */
#properties-content {
overflow-y: auto;
flex-grow: 1;
margin-bottom: 1rem;
min-height: 0;
padding-right: 0.5rem;
}
.properties-table {
width: 100%;
border-collapse: collapse;
font-family: var(--code-font-family);
font-size: var(--fs-sm);
margin-top: 1rem;
}
.properties-table td {
padding: 0.5rem;
border-bottom: 1px solid var(--border-color);
vertical-align: top;
}
.properties-table td:first-child {
font-weight: bold;
color: var(--secondary-text-color);
width: 140px;
}
.properties-table td:last-child {
color: var(--text-color);
word-break: break-all;
}
.prop-badge {
display: inline-block;
padding: 0.2em 0.5em;
border-radius: var(--radius-sm);
font-size: var(--fs-2xs);
background-color: var(--surface-color);
border: 1px solid var(--border-color);
}
.prop-badge.perms-badge {
cursor: pointer;
text-decoration: underline dotted;
text-underline-offset: 3px;
}
.prop-badge.perms-badge:hover {
border-color: var(--focus-color);
color: var(--focus-color);
}
.perms-input {
width: 5ch;
font-family: var(--code-font-family);
font-size: inherit;
padding: 0.2em 0.4em;
border: 2px solid var(--focus-color);
border-radius: var(--radius-sm);
background-color: color-mix(in srgb, var(--focus-color) 12%, transparent);
color: var(--focus-color);
outline: none;
text-align: center;
}
.perms-input.perms-invalid {
border-color: var(--error-color);
background-color: color-mix(in srgb, var(--error-color) 12%, transparent);
color: var(--error-color);
}
.perms-edit-wrap {
display: inline-flex;
align-items: center;
gap: 0.15em;
}
.perms-ok,
.perms-cancel {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.1em;
border: none;
border-radius: 3px;
background: transparent;
cursor: pointer;
line-height: 1;
color: var(--secondary-text-color);
}
.perms-ok .material-icons,
.perms-cancel .material-icons {
font-size: 1em;
}
.perms-ok:hover { color: var(--success-color); }
.perms-cancel:hover { color: var(--error-color); }
/* Badges de estado (Escritura/Solo Lectura y protección): monocromos, sin
color, sin borde, sin fondo ni icono — texto plano. */
.prop-badge.writable,
.prop-badge.readonly,
.prop-badge.prop-protect {
color: inherit;
background: none;
border: none;
padding: 0;
}
.properties-table button.small {
font-size: var(--fs-xs);
padding: 0.2em 0.6em;
height: auto;
margin-left: 0.5em;
vertical-align: middle;
}
.prop-checksum-hash {
display: inline-block;
font-family: var(--code-font-family);
font-size: var(--fs-xs);
word-break: break-all;
cursor: pointer;
padding: 0.1em 0.3em;
border-radius: 3px;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
}
.prop-checksum-hash:hover {
border-color: var(--focus-color);
color: var(--focus-color);
}
/* La ruta de la contraseña heredada es solo un nombre en negrita, no el chip
de la regla global de `code` (su caja tapaba la fila de arriba). */
.properties-table code:not(.prop-checksum-hash) {
font-weight: bold;
background: none;
border: none;
padding: 0;
white-space: normal;
overflow-wrap: anywhere;
}
.prop-copyable {
cursor: pointer;
word-break: break-all;
}
.prop-copyable:hover {
color: var(--focus-color);
text-decoration: underline;
text-decoration-style: dotted;
}
.prop-copyable.prop-copied {
color: var(--focus-color);
font-style: italic;
}
/* METADATA EDITOR */
.metadata-form {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}
.metadata-form .form-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.metadata-form label {
font-size: var(--fs-xs);
color: var(--secondary-text-color);
font-weight: bold;
}
.metadata-form input {
background-color: var(--bg-color);
border: 1px solid var(--border-color);
color: var(--text-color);
padding: 0.5rem;
border-radius: var(--radius-sm);
}
.metadata-form input:focus {
border-color: var(--focus-color);
outline: none;
}
.metadata-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 2rem;
color: var(--focus-color);
font-family: var(--code-font-family);
}
/* POPOVERS (CONTEXT MENU & NEW MENU) */
.new-menu-popover, .mobile-actions-popover, .context-menu {
display: none;
position: absolute;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
z-index: 1000;
box-shadow: var(--shadow-2);
padding: 0.3rem;
flex-direction: column;
opacity: 0;
transform: scale(0.96);
transform-origin: top center;
transition: opacity var(--menu-anim-dur) var(--menu-anim-ease),
transform var(--menu-anim-dur) var(--menu-anim-ease),
display var(--menu-anim-dur) allow-discrete;
}
.new-menu-popover.visible, .mobile-actions-popover.visible, .context-menu.visible {
display: flex;
opacity: 1;
transform: scale(1);
}
@starting-style {
.new-menu-popover.visible, .mobile-actions-popover.visible, .context-menu.visible {
opacity: 0;
transform: scale(0.96);
}
}
.context-menu {
position: fixed;
z-index: 2000;
padding: 4px 0;
min-width: 220px;
gap: 0;
/* Con un grupo desplegado puede no caber: scroll antes que salirse */
max-height: 100dvh;
overflow-y: auto;
}
.context-menu > *, .context-menu .menu-group-items > * { flex-shrink: 0; }
.new-menu-popover button, .mobile-actions-popover button, .context-menu button {
width: 100%;
justify-content: flex-start;
background-color: var(--surface-color);
border-color: var(--border-color);
padding: 0.3em 0.7em;
}
/* Ítems del popover alineados a la izquierda y en una sola línea: el
`text-align: center` heredado del botón base centraba los labels que
envolvían a dos líneas al estrecharse el popover en móvil. */
.new-menu-popover button,
.mobile-actions-popover button {
text-align: left;
white-space: nowrap;
}
.new-menu-popover button:hover, .mobile-actions-popover button:hover, .context-menu button:hover {
background-color: var(--bg-color);
border-color: var(--focus-color);
}
.context-menu button {
background: transparent;
border: none;
box-shadow: none;
color: var(--text-color);
padding: 5px 12px;
margin: 0;
border-radius: 0;
font-size: var(--fs-sm);
font-weight: normal;
text-transform: none;
justify-content: flex-start;
text-align: left;
}
.context-menu button:hover {
background-color: var(--selection-bg);
color: var(--text-color);
transform: none;
}
.new-menu-popover button .material-icons,
.mobile-actions-popover button .material-icons { margin-right: 0.75em; }
.context-menu button .material-icons {
font-size: var(--icon-md);
margin-right: 12px;
color: var(--secondary-text-color);
}
.context-menu button:hover .material-icons { color: var(--text-color); }
.context-menu button.popover-focused {
background-color: var(--selection-bg);
color: var(--text-color);
outline: none;
}
.context-menu button.popover-focused .material-icons { color: var(--text-color); }
.context-menu .menu-separator {
height: 1px;
background-color: var(--border-color);
margin: 4px 0;
}
/* Título del popover "Añadir a baúl": mismo padding que los botones, sin hover. */
/* Grupo plegable (menuGroupHtml): caret a la derecha y entradas sangradas */
.context-menu .menu-group-caret {
margin: 0 0 0 auto;
padding-left: 12px;
}
.context-menu .menu-group-items:not([hidden]) {
display: flex;
flex-direction: column;
}
.context-menu .menu-group-items button {
padding-left: 28px;
}
.context-menu .context-menu-title {
padding: 5px 12px;
font-size: var(--fs-sm);
color: var(--secondary-text-color);
user-select: none;
cursor: default;
}
/* Baúl por defecto en el picker "Añadir a baúl". */
.context-menu button.addvault-default {
color: var(--accent-color);
}
.context-menu button.addvault-default .material-icons {
color: var(--accent-color);
}
/* SELECTION MODE (MOBILE/BUTTON) */
#btn-toggle-selection.active,
#btn-vault-view-toggle.active,
.vault-view-toolbar-actions button.active {
background-color: var(--primary-color);
color: var(--on-accent);
}
#file-list-container.selection-mode-active .file-item-icon {
cursor: pointer;
border-radius: 3px;
transition: background-color var(--anim-base) ease;
}
#file-list-container.selection-mode-active .file-item-row:hover .file-item-icon {
background-color: var(--border-color);
}
#file-list-container.selection-mode-active .file-item-row:hover > div {
background-color: transparent;
}
#file-list-container.selection-mode-active .file-item-row.selected:hover > div {
background-color: var(--selection-bg);
}
/* --- MENÚ ORDENACIÓN + VISTA (botón combinado, visible en móvil y escritorio) --- */
/* Estilos del Popover de Ordenación */
.sort-menu-popover {
display: none;
position: fixed;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
z-index: 1100;
box-shadow: var(--shadow-2);
padding: 10px;
opacity: 0;
transform: scale(0.96);
transform-origin: top center;
transition: opacity var(--menu-anim-dur) var(--menu-anim-ease),
transform var(--menu-anim-dur) var(--menu-anim-ease),
display var(--menu-anim-dur) allow-discrete;
flex-direction: column;
gap: 10px;
width: 220px; /* Ancho suficiente para 3 botones */
}
.sort-menu-popover.visible {
display: flex;
opacity: 1;
transform: scale(1);
}
@starting-style {
.sort-menu-popover.visible {
opacity: 0;
transform: scale(0.96);
}
}
/* Filas de botones dentro del popover */
.sort-menu-row {
display: flex;
gap: 8px;
justify-content: space-between;
}
/* Botones individuales del menú de ordenación */
.sort-menu-btn {
flex: 1; /* Para que ocupen el mismo ancho */
padding: 8px 0;
background-color: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
color: var(--secondary-text-color);
display: flex;
justify-content: center;
align-items: center;
}
.sort-menu-btn .material-icons {
font-size: var(--icon-lg);
}
.sort-menu-btn:hover {
background-color: var(--button-hover-bg);
color: var(--text-color);
}
/* Estado ACTIVO (botón seleccionado) */
.sort-menu-btn.active {
background-color: var(--primary-color);
color: var(--on-accent);
border-color: var(--primary-color);
}
/* Etiquetas pequeñas para las filas (opcional, para claridad visual) */
.sort-menu-label {
font-size: var(--fs-xs);
color: var(--secondary-text-color);
margin-bottom: -5px;
font-family: var(--code-font-family);
}
/* --- ESTILOS PARA EL MENU DE VISTA (MOVIL) --- */
.view-menu-btn {
flex: 1;
padding: 8px 0;
background-color: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
color: var(--secondary-text-color);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.view-menu-btn .material-icons {
font-size: var(--icon-lg);
}
.view-menu-btn:hover {
background-color: var(--button-hover-bg);
color: var(--text-color);
}
.view-menu-btn.active {
background-color: var(--primary-color);
color: var(--on-accent);
border-color: var(--primary-color);
}
/* UTILITIES */
.hidden { display: none !important; }
#file-input { display: none; }
#toggle-to-content { right: 0; }
#toggle-to-sidebar { left: 0; }
body.role-read-only #btn-new-menu-toggle,
body.role-read-only #btn-selection-move,
body.role-read-only #btn-selection-copy,
body.role-read-only #btn-selection-create-copy,
body.role-read-only #btn-selection-rename,
body.role-read-only #btn-selection-delete,
body.role-read-only #btn-selection-edit,
body.role-read-only #btn-selection-encrypt,
body.role-read-only #btn-selection-decrypt,
body.role-read-only #btn-selection-clip-copy,
body.role-read-only #btn-selection-cut,
body.role-read-only #btn-selection-transfer,
body.role-read-only #btn-paste,
body.role-read-only .btn-clip-copy,
body.role-read-only .btn-clip-cut,
body.role-read-only .btn-clip-paste-into,
body.role-read-only .btn-edit-file,
body.role-read-only .btn-edit-mde,
body.role-read-only .btn-edit-image,
body.role-read-only .btn-edit-audio,
body.role-read-only .btn-copy-file,
body.role-read-only .btn-rename-file,
body.role-read-only .btn-delete-file,
body.role-read-only .btn-mobile-move,
body.role-read-only .btn-mobile-copy,
body.role-read-only #url-uploader-panel,
body.role-read-only #uploader-container {
display: none;
}
/* MEDIA QUERIES */
@media (min-width: 900px) {
/* Una fila: modo · subcarpetas · ZIP · archivos · [contenido] · Buscar · Guardar como baúl.
La columna del input existe aunque esté oculto, así Buscar queda al final. */
#advanced-search-panel {
grid-template-columns: repeat(4, auto) minmax(0, 1fr) auto auto;
}
#url-uploader-panel {
grid-template-columns: 2fr 1fr auto;
}
#search-content-input { grid-column: 5 / 6; }
#btn-advanced-search { grid-column: 6 / 7; }
#btn-search-save-vault { grid-column: 7 / 8; }
}
@media (min-width: 769px) {
body.sidebar-hidden .sidebar { display: none; }
/* Cabeceras superiores a la misma altura: el separador inferior del
breadcrumb queda alineado con el del título COMMANDEЯ. Sin esto el
breadcrumb queda unos px más bajo que la cabecera del sidebar. */
.sidebar-header,
.content-header {
box-sizing: border-box;
min-height: var(--top-header-height);
}
.new-menu-popover.visible {
flex-direction: column;
gap: 0.2rem;
}
.new-menu-popover button { width: auto; }
.btn-mobile-actions, #btn-mobile-search-toggle { display: none; }
/* Hide mobile-specific buttons in file list context actions (desktop uses popover too now) */
.file-item-actions .btn-mobile-actions,
.file-item-actions .btn-copy-file,
.file-item-actions .btn-rename-file,
.file-item-actions .btn-delete-file {
display: none;
}
}
@media (max-width: 768px) {
body { display: block; overflow: hidden; }
#toggle-to-content { display: flex; }
#toggle-to-sidebar { display: none; }
.sidebar, .content {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100dvh;
transition: transform var(--anim-slow) ease-in-out;
will-change: transform;
}
.sidebar {
z-index: 101;
transform: translateX(0);
}
.content {
z-index: 100;
transform: translateX(100%);
}
body.content-visible .sidebar { transform: translateX(-100%); }
body.content-visible .content { transform: translateX(0); }
body.content-visible #toggle-to-content { display: none; }
body.content-visible #toggle-to-sidebar { display: flex; }
/* Breadcrumb + stats en la misma fila en móvil */
.content-header {
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.75rem;
padding: 0.65rem 1rem;
}
.content-header h3 {
flex: 1 1 0;
min-width: 0;
white-space: normal;
}
.content-stats {
flex-direction: column;
font-size: var(--fs-2xs);
align-self: center;
flex-shrink: 0;
}
#image-editor-actions, #audio-editor-actions, #video-editor-actions {
flex-wrap: wrap;
gap: 0.1rem;
flex-shrink: 1;
}
.cropper-tool-group, .wave-tool-group {
border-right: none;
padding-right: 0;
}
#file-list-container {
grid-template-columns: minmax(0, 1fr) auto;
gap: 0;
}
/* Hide Desktop Columns (por id: la columna Estado desplaza las posiciones) */
.file-item-size,
.file-item-date,
.file-item-state,
#file-header-size,
#file-header-time,
#file-header-state {
display: none;
}
/* Hide Desktop Direct Actions */
.file-item-actions .btn-edit-file,
.file-item-actions .btn-edit-mde,
.file-item-actions .btn-edit-image,
.file-item-actions .btn-edit-audio,
.file-item-actions .btn-edit-json-table,
.file-item-actions .btn-edit-csv-table,
.file-item-actions .btn-desktop-actions,
.file-item-actions .btn-copy-file,
.file-item-actions .btn-rename-file,
.file-item-actions .btn-delete-file {
display: none;
}
.file-item-actions .btn-mobile-actions { display: inline-flex; }
.file-item-actions {
gap: 0.25rem;
align-items: center;
min-height: 28px;
}
.file-item-actions button.btn-mobile-actions {
width: 28px !important;
height: 28px !important;
padding: 0 !important;
min-width: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.file-item-actions button.btn-mobile-actions .material-icons { font-size: var(--icon-md); }
/* Mobile Search */
#filter-input {
width: 60px;
}
#btn-mobile-search-toggle { display: inline-flex; }
#filter-container, #btn-toggle-advanced-search { display: none; }
body.mobile-search-active #btn-mobile-search-toggle { order: 2; }
body.mobile-search-active #filter-container,
body.mobile-search-active #btn-toggle-advanced-search { display: flex; }
body.mobile-search-active #btn-toggle-advanced-search { order: 1; }
body.mobile-search-active .toolbar-group-right {
width: 100%;
justify-content: flex-start;
}
body.mobile-search-active #filter-container { flex-grow: 1; }
body.mobile-search-active #filter-input {
width: 100%;
min-width: 0;
}
/* Mobile Editor Search */
#editor-search-input { width: 60px; }
#btn-editor-mobile-search-toggle { display: inline-flex; }
#editor-search-container,
#btn-editor-search-prev,
#btn-editor-search-next,
#btn-editor-advanced-search { display: none; }
body.editor-search-active #btn-editor-mobile-search-toggle { display: none; }
body.editor-search-active #editor-search-container,
body.editor-search-active #btn-editor-search-prev,
body.editor-search-active #btn-editor-search-next,
body.editor-search-active #btn-editor-advanced-search { display: flex; }
body.editor-search-active #editor-search-group { width: 100%; margin-left: 0; }
body.editor-search-active #editor-search-container { flex-grow: 1; }
body.editor-search-active #editor-search-input { width: 100%; }
/* Mobile Toolbar Compact */
.toolbar {
padding: 0.35rem 0.5rem;
gap: 0.1rem;
}
.toolbar-group-left,
.toolbar-group-right {
gap: 0.1rem;
}
.sidebar-toolbar {
padding: 0.35rem 0.5rem;
gap: 0.1rem;
}
.sidebar-nav-btns {
gap: 0.1rem;
}
/* Mobile Selection Toolbar */
.toolbar-group-selection {
display: flex;
gap: 0.1rem;
align-items: center;
padding: 0;
border-left: 0;
margin-left: 0;
}
.toolbar-group-vault {
padding: 0;
border-left: 0;
margin-left: 0;
}
/* En móvil, menos separación entre botones que en escritorio (0.2rem)
en el resto de grupos de la toolbar. */
.toolbar-group-vault,
.vault-view-toolbar-actions,
#editor-actions {
gap: 0.1rem;
}
.toolbar.selection-active .toolbar-group-left {
width: 100%;
margin-bottom: 0.5rem;
}
.toolbar.selection-active .toolbar-group-selection { flex-grow: 1; }
#btn-selection-transfer { display: inline-flex; }
/* Con selección la fila de navegación ya va llena: Pegar pasa al menú
«Copiar o mover» (modules/clipboard.js, showTransferMenu). */
.toolbar.selection-active #btn-paste { display: none; }
#btn-selection-clip-copy,
#btn-selection-cut,
#btn-selection-copy,
#btn-selection-move { display: none; }
.toolbar.selection-active .toolbar-group-right { margin-left: 0; }
/* Mobile Uploader Optimization */
#drop-zone {
padding: 1rem;
border-width: 2px;
font-size: var(--fs-sm);
}
#drop-zone p { display: none; }
#drop-zone::after {
content: "Clic para seleccionar";
display: block;
color: var(--text-color);
font-weight: bold;
}
.new-menu-popover.visible {
flex-direction: column;
gap: 0.2rem;
}
.new-menu-popover button { width: 100%; }
}
/* =========================================
SIDEBAR VISOR (PREVIEW + PROPERTIES)
========================================= */
.sidebar-viewer-panel {
flex-grow: 1;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
min-height: 0;
}
/* Botón activo en la toolbar del sidebar: el fondo lo aporta el pill
deslizante (.sidebar-toolbar-pill); el botón solo cambia el color. */
.sidebar-toolbar button.active,
.sidebar-toolbar button.active:hover {
background-color: transparent;
color: var(--text-strong);
}
/* Estado vacío / loading */
.sidebar-viewer-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
color: var(--secondary-text-color);
gap: 0.5rem;
padding: 1.5rem;
text-align: center;
}
.sidebar-viewer-empty .material-icons {
font-size: 3rem;
opacity: 0.35;
}
.sidebar-viewer-empty p {
margin: 0;
font-size: var(--fs-sm);
word-break: break-all;
}
.sidebar-viewer-empty small {
font-size: var(--fs-xs);
opacity: 0.7;
}
.sidebar-viewer-loading {
padding: 1rem;
color: var(--secondary-text-color);
text-align: center;
font-size: var(--fs-sm);
}
/* Imagen */
.sidebar-preview-image {
padding: 0.5rem;
display: flex;
align-items: flex-start;
justify-content: center;
}
.sidebar-preview-image img {
max-width: 100%;
height: auto;
object-fit: contain;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
}
/* Texto / Código */
.sidebar-preview-text {
flex-grow: 1;
overflow: auto;
}
.sidebar-preview-text pre {
margin: 0;
padding: 0.75rem;
font-size: var(--fs-xs);
font-family: var(--code-font-family);
white-space: pre-wrap;
word-break: break-all;
color: var(--text-color);
line-height: 1.5;
}
/* Markdown renderizado en vista previa */
.sidebar-md-toggle {
align-self: flex-end;
margin: 0.25rem 0.25rem 0;
padding: 0.15rem 0.5rem;
font-size: var(--fs-2xs);
background: var(--bg-color);
color: var(--secondary-text-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
cursor: pointer;
}
.sidebar-md-toggle:hover { color: var(--text-color); }
.sidebar-preview-markdown {
flex-grow: 1;
overflow: auto;
padding: 0.75rem;
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--text-color);
word-wrap: break-word;
}
.sidebar-preview-markdown h1,
.sidebar-preview-markdown h2,
.sidebar-preview-markdown h3 {
margin: 0.8em 0 0.4em;
line-height: 1.25;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.2em;
}
.sidebar-preview-markdown h4,
.sidebar-preview-markdown h5,
.sidebar-preview-markdown h6 { margin: 0.8em 0 0.4em; line-height: 1.25; }
.sidebar-preview-markdown p { margin: 0.5em 0; }
.sidebar-preview-markdown a { color: var(--focus-color); }
.sidebar-preview-markdown ul,
.sidebar-preview-markdown ol { padding-left: 1.4em; margin: 0.5em 0; }
.sidebar-preview-markdown code {
font-family: var(--code-font-family);
font-size: 0.85em;
background: var(--bg-color);
padding: 0.1em 0.35em;
border-radius: 3px;
}
.sidebar-preview-markdown pre {
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.6em;
overflow: auto;
}
.sidebar-preview-markdown pre code { background: none; padding: 0; }
.sidebar-preview-markdown blockquote {
margin: 0.5em 0;
padding-left: 0.8em;
border-left: 3px solid var(--border-color);
color: var(--secondary-text-color);
}
.sidebar-preview-markdown table {
border-collapse: collapse;
margin: 0.5em 0;
font-size: 0.9em;
}
.sidebar-preview-markdown th,
.sidebar-preview-markdown td {
border: 1px solid var(--border-color);
padding: 0.3em 0.55em;
}
.sidebar-preview-markdown img { max-width: 100%; height: auto; }
.sidebar-preview-markdown hr { border: none; border-top: 1px solid var(--border-color); margin: 1em 0; }
/* --- Markdown renderizado genérico (vista de Ayuda y modal de Atajos) --- */
.markdown-body {
color: var(--text-color);
line-height: 1.6;
word-wrap: break-word;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
margin: 1em 0 0.5em;
line-height: 1.25;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.25em;
}
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 { margin: 1em 0 0.4em; line-height: 1.25; }
.markdown-body p { margin: 0.6em 0; }
.markdown-body a { color: var(--focus-color); }
.markdown-body ul,
.markdown-body ol { padding-left: 1.5em; margin: 0.6em 0; }
.markdown-body li { margin-bottom: 0.25em; }
.markdown-body code {
font-family: var(--code-font-family);
font-size: 0.85em;
background: var(--bg-color);
padding: 0.1em 0.4em;
border-radius: 3px;
}
.markdown-body pre {
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.7em;
overflow: auto;
}
.markdown-body pre code { background: none; padding: 0; }
.markdown-body blockquote {
margin: 0.6em 0;
padding-left: 0.9em;
border-left: 3px solid var(--border-color);
color: var(--secondary-text-color);
}
.markdown-body table {
border-collapse: collapse;
margin: 0.6em 0;
width: 100%;
}
.markdown-body th,
.markdown-body td {
border: 1px solid var(--border-color);
padding: 0.35em 0.6em;
text-align: left;
vertical-align: top;
}
.markdown-body th { background: var(--bg-color); }
.markdown-body img { max-width: 100%; height: auto; }
.markdown-body hr { border: none; border-top: 1px solid var(--border-color); margin: 1.2em 0; }
/* Vistas de Ayuda (guía completa) y Atajos en el panel principal */
.guide-content { max-width: 820px; margin: 0 auto; font-size: var(--fs-sm); }
/* Vista previa de tipografías */
.sidebar-preview-font {
flex-grow: 1;
overflow: auto;
padding: 1rem 0.85rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
color: var(--text-color);
}
.sidebar-preview-font .font-pangram { line-height: 1.35; word-break: break-word; }
.sidebar-preview-font .font-big { font-size: 2.4rem; line-height: 1.1; }
.sidebar-preview-font .font-pangram:not(.font-big):not(.font-small) { font-size: 1.05rem; }
.sidebar-preview-font .font-small { font-size: 0.85rem; color: var(--secondary-text-color); }
/* Audio */
.sidebar-preview-audio {
padding: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.sidebar-preview-filename {
margin: 0;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
word-break: break-all;
}
#sidebar-wavesurfer,
#modal-wavesurfer {
background-color: var(--bg-color);
border-radius: var(--radius-sm);
overflow: hidden;
min-height: 60px;
border: 1px solid var(--border-color);
}
.expand-modal-content .sidebar-preview-audio {
width: min(90vw, 800px);
}
.sidebar-audio-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
#sidebar-audio-time {
font-size: var(--fs-xs);
color: var(--secondary-text-color);
font-family: var(--code-font-family);
}
/* Vídeo */
.sidebar-preview-video {
padding: 0.5rem;
}
.sidebar-preview-video-actions {
display: flex;
justify-content: flex-end;
margin-top: 0.4rem;
}
.sidebar-preview-video-actions button {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: var(--fs-xs);
}
.sidebar-preview-video-actions .material-icons { font-size: var(--icon-md); }
.sidebar-preview-video video {
width: 100%;
max-height: 220px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
}
/* Carpeta: resumen del primer nivel, miniaturas, análisis y README */
.folder-preview {
display: flex;
flex-direction: column;
gap: 0.9rem;
padding: 0.75rem;
font-size: var(--fs-sm);
}
.folder-preview-head {
display: flex;
align-items: center;
gap: 0.6rem;
min-width: 0;
}
.folder-preview-head .material-icons {
font-size: 2.4rem;
color: var(--secondary-text-color);
flex-shrink: 0;
}
.folder-preview-title { min-width: 0; }
.folder-preview-name {
margin: 0;
font-family: var(--code-font-family);
word-break: break-all;
}
.folder-preview-title small {
font-size: var(--fs-xs);
color: var(--secondary-text-color);
}
.folder-preview-caption {
margin: 0 0 0.3rem;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.folder-preview-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
line-height: 1.5;
}
.folder-preview-label {
color: var(--secondary-text-color);
white-space: nowrap;
flex-shrink: 0;
}
.folder-preview-value {
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.folder-preview-value:has(.folder-preview-ellip) {
display: flex;
justify-content: flex-end;
gap: 0.35em;
}
.folder-preview-ellip {
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.folder-preview-detail { flex-shrink: 0; }
.folder-preview-caption.folder-preview-filename {
text-transform: none;
letter-spacing: 0;
font-family: var(--code-font-family);
}
.folder-preview-sep {
border-top: 1px solid var(--border-color);
margin: 0.4rem 0;
}
.folder-preview-note {
margin: 0.3rem 0 0;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
}
.folder-preview-level .sidebar-viewer-loading { padding: 0.25rem 0; text-align: left; }
.folder-preview-thumbs:empty,
.folder-preview-readme:empty { display: none; }
.folder-preview-thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.35rem;
}
.folder-preview-thumbs img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
background: var(--bg-color);
}
.folder-preview-analyze {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.4rem;
}
.folder-preview-analyze .material-icons { font-size: 1.1rem; }
.folder-preview-readme .sidebar-preview-markdown,
.folder-preview-readme .sidebar-preview-text {
border-top: 1px solid var(--border-color);
padding: 0.5rem 0 0;
}
/* PDF — se abre en nueva pestaña */
.sidebar-open-link {
display: inline-block;
margin-top: 0.5rem;
padding: 0.35rem 0.9rem;
background: var(--button-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
color: var(--text-color);
font-size: var(--fs-sm);
cursor: pointer;
text-decoration: none;
}
.sidebar-open-link:hover {
background: var(--button-hover-bg);
text-decoration: none;
}
/* Sección Metadatos en sidebar */
.sidebar-meta-area {
padding: 0 0.5rem;
}
.sidebar-meta-area .metadata-form {
margin-top: 0.5rem;
}
.sidebar-meta-actions {
display: flex;
gap: 0.5rem;
padding: 0.5rem;
}
/* Botones Cancelar/Guardar dentro del sidebar: igual tamaño, sin acento */
.sidebar-meta-actions button {
flex: 1;
background-color: var(--button-color);
color: var(--text-color);
justify-content: center;
}
.sidebar-meta-actions button:hover {
background-color: var(--button-hover-bg);
}
/* Ocultar el icono del botón Guardar para igualar altura con Cancelar */
.sidebar-meta-actions button .material-icons {
display: none;
}
/* Propiedades */
.sidebar-properties-content {
padding: 0.5rem;
overflow-y: auto;
flex-grow: 1;
}
.sidebar-properties-content .properties-table {
margin-top: 0;
}
.sidebar-properties-content .properties-table {
font-size: var(--fs-xs);
}
.sidebar-properties-content .properties-table td:first-child {
width: 90px;
}
.sidebar-properties-content .properties-table td:last-child {
/* hereda el font-size de la tabla */
}
/* ============================================================
JSON Editor (vanilla-jsoneditor) — tabla / árbol / texto
============================================================ */
#jsoneditor-view {
background-color: var(--bg-color);
display: flex;
}
#jsoneditor-wrapper {
flex: 1 1 auto;
min-height: 0;
width: 100%;
height: 100%;
display: flex;
/* La librería incluye la clase jse-theme-dark que activa su tema oscuro */
}
#jsoneditor-wrapper .jse-main {
flex: 1 1 auto;
min-height: 0;
}
.editor-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
height: 100%;
width: 100%;
color: var(--secondary-text-color);
font-size: var(--fs-sm);
}
.editor-loading .spinner {
width: 2.5rem;
height: 2.5rem;
border: 3px solid var(--border-color);
border-top-color: var(--focus-color);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.file-list-sentinel {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 0.75rem 0.5rem;
color: var(--secondary-text-color);
font-size: var(--fs-xs);
border-top: 1px solid var(--border-color);
margin-top: 0.25rem;
}
.file-list-sentinel .sentinel-text { opacity: 0.8; }
.file-list-sentinel .btn-load-more {
background: var(--surface-color);
color: var(--focus-color);
border: 1px solid var(--focus-color);
padding: 0.3rem 0.75rem;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: var(--fs-xs);
transition: background-color var(--anim-fast);
}
.file-list-sentinel .btn-load-more:hover {
background: var(--focus-color);
color: var(--on-accent);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* ─── Overlay compartido de plugins (iframe a pantalla completa, misma ventana) ─── */
.plugin-overlay {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
flex-direction: column;
background-color: var(--bg-color);
}
.plugin-overlay.hidden {
display: none;
}
/* Bloquea el scroll del fondo mientras el overlay está visible. */
body.plugin-overlay-open {
overflow: hidden;
}
.plugin-overlay-bar {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 0 0 auto;
padding: 0.4rem 0.6rem;
background-color: var(--surface-color, #242424);
border-bottom: 1px solid var(--border-color, #3a3a3a);
/* Respeta el notch / barra de estado en PWA móvil. */
padding-top: max(0.4rem, env(safe-area-inset-top));
}
.plugin-overlay-close {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.4rem 0.7rem;
border: 1px solid var(--border-color, #3a3a3a);
border-radius: var(--radius-md);
background-color: transparent;
color: var(--text-color, #e0e0e0);
font: inherit;
cursor: pointer;
}
.plugin-overlay-close:hover {
background-color: var(--overlay-hover);
}
.plugin-overlay-close .material-icons {
font-size: var(--icon-md);
}
.plugin-overlay-title {
font-weight: 600;
letter-spacing: 0.04em;
color: var(--secondary-text-color);
}
.plugin-overlay-frame {
flex: 1 1 auto;
width: 100%;
border: 0;
display: block;
}
/* =========================================================================
Renombrado en lote
========================================================================= */
#rename-view {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow: hidden;
}
#rename-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
}
#rename-toolbar .rename-toolbar-left {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
#rename-toolbar #rename-toolbar-title {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#rename-toolbar .rename-toolbar-actions {
display: flex;
align-items: center;
gap: 4px;
}
#rename-toolbar .rename-toolbar-gap {
width: 14px;
flex: 0 0 auto;
}
#rename-toolbar #btn-rename-apply {
display: inline-flex;
align-items: center;
gap: 4px;
}
#rename-toolbar #rename-preset-select {
max-width: 140px;
background-color: var(--bg-color);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 2px 4px;
}
.rename-controls {
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px;
border-bottom: 1px solid var(--border-color);
background-color: var(--surface-color);
}
.rename-group {
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 10px 12px 12px;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.rename-group > legend {
padding: 0 6px;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--secondary-text-color);
cursor: pointer;
user-select: none;
}
.rename-group > legend::before {
content: '▾';
display: inline-block;
margin-right: 6px;
font-size: var(--fs-2xs);
transition: transform var(--anim-fast) ease;
}
.rename-group.collapsed > legend::before {
transform: rotate(-90deg);
}
/* Al colapsar, ocultamos el contenido y la caja: queda solo la leyenda (una fila) */
.rename-group.collapsed {
border: none;
padding: 0;
gap: 0;
}
.rename-group.collapsed > legend {
padding-left: 0;
margin-bottom: 0;
}
.rename-group.collapsed > *:not(legend) {
display: none;
}
.rename-ctrl-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.rename-ctrl-row > label {
flex: 0 0 auto;
color: var(--secondary-text-color);
font-size: var(--fs-sm);
}
.rename-ctrl-row > label[for="rename-mask"],
.rename-ctrl-row > label[for="rename-find"] {
min-width: 72px;
}
.rename-ctrl-sep {
color: var(--secondary-text-color);
font-size: var(--fs-sm);
white-space: nowrap;
}
/* Botón COUNT (toggle de la subsección del contador), estilo de chip desplegable */
.rename-count-toggle {
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text-color);
}
.rename-count-toggle.active {
background-color: var(--primary-color);
color: var(--on-accent);
border-color: var(--primary-color);
}
/* Subsección: contador (%n%) — oculta salvo que la active %n% o el botón COUNT */
#rename-counter-box { display: none; }
#rename-counter-box.rn-shown { display: flex; }
.rename-subsection {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
padding: 8px 10px;
background-color: var(--bg-color);
border: 1px dashed var(--border-color);
border-radius: var(--radius-md);
}
.rename-subsection-title {
font-size: var(--fs-xs);
font-weight: 600;
color: var(--secondary-text-color);
}
.rename-counter-field {
display: inline-flex;
align-items: center;
gap: 6px;
}
.rename-counter-field > label {
font-size: var(--fs-xs);
color: var(--secondary-text-color);
}
/* Grupo de opciones: campos con etiqueta encima */
.rename-options-row {
align-items: flex-end;
}
.rename-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.rename-field > label {
font-size: var(--fs-xs);
color: var(--secondary-text-color);
}
.rename-options-row .rename-inline-check {
padding-bottom: 6px;
}
.rename-text-input,
.rename-controls select {
background-color: var(--bg-color);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 5px 8px;
font-size: var(--fs-sm);
}
.rename-text-input {
flex: 1 1 160px;
min-width: 0;
}
.rename-ext-input {
flex: 0 0 90px;
}
.rename-num-input {
width: 44px;
background-color: var(--bg-color);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 3px 4px;
font-size: var(--fs-sm);
}
.rename-inline-check {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--secondary-text-color);
font-size: var(--fs-sm);
white-space: nowrap;
}
.rename-chips-row {
gap: 5px;
}
.rename-chip {
display: inline-block;
padding: 2px 7px;
background-color: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 10px;
font-size: var(--fs-xs);
font-family: monospace;
color: var(--accent-color);
cursor: pointer;
user-select: none;
}
.rename-chip:hover {
background-color: var(--primary-color);
color: var(--on-accent);
border-color: var(--primary-color);
}
/* Chips desplegables DATE / SIZE */
.rename-dropdown {
position: relative;
font-family: inherit;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text-color);
}
.rename-dropdown.open {
background-color: var(--primary-color);
color: var(--on-accent);
border-color: var(--primary-color);
}
.rename-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 20;
flex-wrap: wrap;
gap: 5px;
max-width: 320px;
padding: 8px;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
box-shadow: var(--shadow-2);
opacity: 0;
transform: translateY(-4px);
transform-origin: top left;
transition: opacity var(--menu-anim-dur) var(--menu-anim-ease),
transform var(--menu-anim-dur) var(--menu-anim-ease),
display var(--menu-anim-dur) allow-discrete;
}
.rename-dropdown.open .rename-dropdown-menu {
display: flex;
opacity: 1;
transform: translateY(0);
}
@starting-style {
.rename-dropdown.open .rename-dropdown-menu {
opacity: 0;
transform: translateY(-4px);
}
}
/* Fila Aplicar a + Limpieza */
.rename-cleanup-row > label {
flex: 0 0 auto;
}
/* Menú de Limpieza: opciones en columna */
.rename-dropdown[data-dd="clean"] .rename-dropdown-menu {
flex-direction: column;
min-width: 180px;
max-width: none;
}
.rename-clean-opt {
padding: 4px 8px;
font-size: var(--fs-sm);
color: var(--text-color);
border-radius: var(--radius-sm);
cursor: pointer;
}
.rename-clean-opt:hover {
background-color: var(--primary-color);
color: var(--on-accent);
}
.rename-clean-opt.active {
color: var(--accent-color);
}
.rename-clean-opt.active::before {
content: '✓ ';
}
/* Lista de atajos de limpieza seleccionados (chips eliminables) */
.rename-cleanup-list {
display: inline-flex;
flex-wrap: wrap;
gap: 5px;
}
.rename-clean-chip {
display: inline-block;
padding: 2px 8px;
font-size: var(--fs-xs);
background-color: var(--primary-color);
color: var(--on-accent);
border: 1px solid var(--primary-color);
border-radius: 12px;
cursor: pointer;
}
.rename-clean-chip:hover {
background-color: var(--primary-hover-color);
}
.rename-preview {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}
.rename-preview-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.rename-preview-table thead th {
position: sticky;
top: 0;
background-color: var(--surface-color);
color: var(--secondary-text-color);
text-align: left;
font-weight: 600;
padding: 6px 10px;
border-bottom: 1px solid var(--border-color);
z-index: 1;
}
.rename-preview-table td {
padding: 5px 10px;
border-bottom: 1px solid var(--border-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 0;
}
.rename-preview-table .rn-col-idx { width: 42px; color: var(--secondary-text-color); text-align: center; }
/* Columna # como handle de arrastre (aparece al hacer hover sobre la fila) */
.rename-preview-table .rn-col-idx .rn-grip { display: none; cursor: grab; }
.rn-row.rn-reorderable:hover .rn-col-idx .rn-num { display: none; }
.rn-row.rn-reorderable:hover .rn-col-idx .rn-grip { display: inline; color: var(--text-color); }
.rn-row.rn-reorderable:hover .rn-col-idx { cursor: grab; }
.rn-row.rn-dragging { opacity: 0.4; }
.rn-row.rn-drop-before td { box-shadow: inset 0 2px 0 0 var(--accent-color); }
.rn-row.rn-drop-after td { box-shadow: inset 0 -2px 0 0 var(--accent-color); }
.rename-preview-table .rn-col-arrow { width: 22px; text-align: center; color: var(--secondary-text-color); }
.rename-preview-table .rn-col-status { width: 96px; white-space: nowrap; }
.rename-preview-table .rn-col-old,
.rename-preview-table .rn-col-new { width: 40%; }
.rename-preview-table .rn-col-check { width: 32px; text-align: center; }
.rn-row.rn-unselected td:not(.rn-col-check) { opacity: 0.45; text-decoration: line-through; }
.rn-is-dir { font-weight: 600; }
.rn-row.rn-ok .rn-col-new { color: var(--accent-color); }
.rn-row.rn-ok .rn-col-status { color: #4caf50; }
.rn-row.rn-nochange { opacity: 0.55; }
.rn-row.rn-nochange .rn-col-status { color: var(--secondary-text-color); }
.rn-row.rn-skipped { opacity: 0.45; }
.rn-row.rn-collision .rn-col-new,
.rn-row.rn-collision .rn-col-status { color: #ff9800; }
.rn-row.rn-invalid .rn-col-new,
.rn-row.rn-invalid .rn-col-status { color: #f44336; }
/* Estados de la previsualización de extracción (entrada nueva / ya existe) */
.rn-row.rn-new .rn-col-status { color: #4caf50; }
.rn-row.rn-exists .rn-col-status { color: #ff9800; }
/* Restauración del backup de un baúl: filas que no se escriben */
.rn-row.rn-blocked,
.rn-row.rn-is_dir { opacity: 0.55; }
.rn-row.rn-blocked .rn-col-status,
.rn-row.rn-is_dir .rn-col-status { color: #f44336; }
/* La tabla de conflictos puede ser larga: se acota y hace scroll. */
.extract-conflict-table-wrap { max-height: 45vh; overflow-y: auto; }
/* ─── Paleta de comandos (Ctrl+K) ─────────────────────────────────────────── */
.cmdpalette-overlay {
position: fixed;
inset: 0;
z-index: 4000;
background: rgba(0, 0, 0, 0.55);
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 12vh;
}
.cmdpalette-overlay.hidden { display: none; }
.cmdpalette {
width: min(640px, 92vw);
max-height: 70vh;
display: flex;
flex-direction: column;
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 10px;
box-shadow: var(--shadow-3);
overflow: hidden;
}
.cmdpalette-search {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.85rem;
border-bottom: 1px solid var(--border-color);
}
.cmdpalette-search .material-icons { color: var(--secondary-text-color); }
.cmdpalette-search input {
flex: 1;
border: none;
background: transparent;
color: var(--text-color);
font-size: var(--fs-md);
outline: none;
}
.cmdpalette-list {
list-style: none;
margin: 0;
padding: 0.3rem;
overflow-y: auto;
flex: 1;
}
.cmdpalette-list li {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.65rem;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--text-color);
}
.cmdpalette-list li.cmdpalette-active { background: var(--focus-color); color: var(--on-accent); }
.cmdpalette-list li.cmdpalette-active .cmdpalette-icon,
.cmdpalette-list li.cmdpalette-active .cmdpalette-itemhint { color: var(--on-accent); }
.cmdpalette-icon { font-size: var(--icon-md); color: var(--secondary-text-color); flex: 0 0 auto; }
.cmdpalette-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdpalette-itemhint {
flex: 0 0 auto;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
max-width: 45%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Atajo del comando, a la derecha de la fila. */
.cmdpalette-kbd {
flex: 0 0 auto;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.05rem 0.35rem;
line-height: 1.4;
}
.cmdpalette-list li.cmdpalette-active .cmdpalette-kbd { color: var(--on-accent); border-color: currentColor; }
/* Comando sobre elementos sin selección ni foco: atenuado pero ejecutable. */
.cmdpalette-list li.cmdpalette-dim { opacity: 0.5; }
.cmdpalette-list li.cmdpalette-dim.cmdpalette-active { opacity: 1; }
.cmdpalette-list li.cmdpalette-group { padding: 0.4rem 0.65rem 0.1rem; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--secondary-text-color); cursor: default; }
/* Estrella fijar/desfijar en favoritos: discreta salvo en la fila activa, al
pasar el ratón o si el comando ya está fijado. */
.cmdpalette-pin {
flex: 0 0 auto;
display: inline-flex;
padding: 0.1rem;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--secondary-text-color);
cursor: pointer;
opacity: 0;
}
.cmdpalette-pin .material-icons { font-size: var(--icon-sm); }
.cmdpalette-list li:hover .cmdpalette-pin,
.cmdpalette-list li.cmdpalette-active .cmdpalette-pin,
.cmdpalette-pin.is-pinned,
.cmdpalette-pin:focus-visible { opacity: 1; }
.cmdpalette-list li.cmdpalette-active .cmdpalette-pin { color: var(--on-accent); }
@media (hover: none) { .cmdpalette-pin { opacity: 1; } }
.cmdpalette-empty { padding: 1rem; text-align: center; color: var(--secondary-text-color); }
.cmdpalette-hint {
display: flex;
gap: 1rem;
justify-content: center;
padding: 0.45rem;
border-top: 1px solid var(--border-color);
font-size: var(--fs-xs);
color: var(--secondary-text-color);
}
/* === Vista cuadrícula (galería interna) ===================================
El contenedor pasa de rejilla de 4 columnas (lista) a una rejilla de tarjetas.
Las filas, que en lista usan display:contents, se vuelven tarjetas flex. */
#file-list-container.grid-view {
grid-template-columns: repeat(auto-fill, minmax(var(--grid-card-size, 150px), 1fr));
gap: 0.75rem;
align-items: stretch;
align-content: start;
padding: 0.5rem;
}
#file-list-container.grid-view .file-list-header { display: none; }
#file-list-container.grid-view .file-item-row {
display: flex;
flex-direction: column;
grid-column: auto;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--surface-color);
cursor: pointer;
}
#file-list-container.grid-view .file-item-row > div { border-bottom: none; }
/* La vista de cuadrícula no lleva zebra. */
#file-list-container.grid-view .file-item-row { --row-stripe-color: transparent; }
#file-list-container.grid-view .file-item-row:hover {
border-color: var(--secondary-text-color);
}
#file-list-container.grid-view .file-item-row:hover > div { background: transparent; }
#file-list-container.grid-view .file-item-row.selected > div,
#file-list-container.grid-view .file-item-row.focused > div { background: transparent; }
#file-list-container.grid-view .file-item-row.selected { border-color: var(--focus-color); }
#file-list-container.grid-view .file-item-row.focused { outline: 2px solid var(--focus-color); outline-offset: -2px; }
/* La barra de acento lateral es solo para la vista lista. */
#file-list-container.grid-view .file-item-row.selected > .file-item-name,
#file-list-container.grid-view .file-item-row.focused > .file-item-name { box-shadow: none; }
/* F6 / zona activa: con el foco en el sidebar la fila activa de la lista se
atenúa, para que se vea qué zona reciben las flechas (la selección no cambia). */
body.sidebar-has-focus .file-item-row.focused:not(.selected) > div { background-color: transparent; }
body.sidebar-has-focus #file-list-container.grid-view .file-item-row.focused { outline-color: var(--selection-accent); }
/* En cuadrícula solo se muestran miniatura + nombre. */
#file-list-container.grid-view .file-item-size,
#file-list-container.grid-view .file-item-date,
#file-list-container.grid-view .file-item-actions { display: none; }
.file-item-thumb {
width: 100%;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-color);
overflow: hidden;
}
.file-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-item-thumb .material-icons {
/* Escala con la tarjeta: 48px de 150px en adelante, menor en tarjetas pequeñas. */
font-size: clamp(20px, calc(var(--grid-card-size, 150px) * 0.32), 48px);
color: var(--secondary-text-color);
}
#file-list-container.grid-view .file-item-name {
display: block;
padding: 0.4rem 0.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#file-list-container.grid-view .file-item-name .file-item-icon,
#file-list-container.grid-view .file-item-name .folder-locked-wrap { display: none; }
#file-list-container.grid-view .file-item-name a { white-space: nowrap; }
/* Slider de tamaño de tarjeta: solo visible en vista cuadrícula y en escritorio. */
#grid-size-control {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0 0.4rem;
border-left: 1px solid var(--border-color);
margin-left: 0.4rem;
}
#grid-size-control .material-icons {
font-size: var(--icon-md);
color: var(--secondary-text-color);
}
#grid-size-slider {
width: 7rem;
accent-color: var(--focus-color);
cursor: pointer;
}
@media (max-width: 768px) {
#grid-size-control { display: none; }
}
/* === Cola de reproducción de audio (pista anterior/siguiente + posición) === */
.audio-queue-controls {
display: flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.5rem;
}
.audio-queue-controls .audio-queue-pos {
font-size: var(--fs-xs);
color: var(--secondary-text-color);
margin-left: auto;
}
.audio-queue-controls button[disabled] { opacity: 0.35; cursor: default; }
/* ===== Vista de Actividad reciente (feed del log) ===== */
#activity-view {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
/* Vista de Actividad: dos modos en el mismo panel (log y notificaciones). */
#activity-view[data-mode="notifications"] > #activity-filters,
#activity-view[data-mode="notifications"] > #activity-feed,
#activity-view[data-mode="notifications"] > #activity-loadmore-wrap { display: none; }
#activity-view[data-mode="activity"] > #notif-filters,
#activity-view[data-mode="activity"] > #notif-list { display: none; }
.activity-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.6rem 0.8rem;
border-bottom: 1px solid var(--row-divider, var(--border-color));
}
.activity-filter-input {
flex: 1 1 8rem;
min-width: 7rem;
padding: 0.35rem 0.5rem;
font: inherit;
font-size: var(--fs-sm);
color: var(--text-color);
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
.activity-feed {
flex: 1 1 auto;
overflow-y: auto;
padding: 0.25rem 0;
}
.activity-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.85rem;
border-bottom: 1px solid var(--row-divider, var(--border-color));
font-size: var(--fs-sm);
}
.activity-item:hover { background: var(--row-hover-bg, rgba(127,127,127,0.08)); }
.activity-icon {
font-size: var(--icon-md);
color: var(--secondary-text-color);
flex: 0 0 auto;
}
.activity-item-fail .activity-icon { color: var(--danger-color, #d9534f); }
.activity-body {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.activity-user { font-weight: 600; color: var(--text-strong, var(--text-color)); }
.activity-target { color: var(--secondary-text-color); }
.activity-fail-badge {
font-size: var(--fs-2xs);
padding: 0.05rem 0.35rem;
border-radius: var(--radius-sm);
background: var(--danger-color, #d9534f);
color: var(--on-accent);
}
.activity-time {
flex: 0 0 auto;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
white-space: nowrap;
}
.activity-loadmore-wrap { padding: 0.6rem; text-align: center; }
/* --- Detalle expandible de un grupo de actividad --- */
.activity-item-expanded {
background: var(--row-hover-bg, rgba(127,127,127,0.08));
}
.activity-detail {
padding: 0.35rem 0.85rem 0.5rem 2.6rem;
border-bottom: 1px solid var(--row-divider, var(--border-color));
font-size: var(--fs-xs);
background: var(--bg-color);
}
.activity-detail-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4rem 0.8rem;
padding: 0.2rem 0;
}
.activity-detail-row + .activity-detail-row {
border-top: 1px dotted var(--border-color);
}
.activity-detail-ts {
color: var(--secondary-text-color);
white-space: nowrap;
flex: 0 0 auto;
}
.activity-detail-target {
color: var(--text-color);
word-break: break-all;
flex: 1 1 auto;
}
/* IP del último uso bajo la fecha, en la tabla de tokens WebDAV. */
.token-last-ip {
font-size: var(--fs-2xs);
color: var(--secondary-text-color);
word-break: break-all;
}
.activity-detail-extra {
width: 100%;
font-size: var(--fs-xs);
color: var(--secondary-text-color);
word-break: break-all;
}
/* ── Pestaña y registro de notificaciones (vista del sidebar) ── */
/* El badge se monta sobre el icono de la pestaña, dentro del área del pill:
asomando por fuera lo recortaría la toolbar. */
.notif-tab-btn {
position: relative;
overflow: visible;
}
.notif-badge {
position: absolute;
top: 1px;
right: 1px;
min-width: 15px;
height: 15px;
padding: 0 3px;
font-size: 0.6rem;
font-weight: 700;
line-height: 15px;
text-align: center;
border-radius: 8px;
pointer-events: none;
/* Neutro por defecto: lo que cuenta el badge es, sobre todo, lo que pasó
con la pestaña en segundo plano. El rojo se reserva a los errores. */
color: var(--bg-color);
background: var(--secondary-text-color);
box-shadow: 0 0 0 2px var(--surface-color);
}
.notif-badge.notif-badge-warning {
color: var(--on-accent);
background: var(--warning-color);
}
.notif-badge.notif-badge-error {
color: var(--on-accent);
background: var(--danger-color);
}
.notif-badge.hidden { display: none; }
/* Una vista más del sidebar: mismas reglas de caja que el árbol o el baúl. */
.notif-list {
flex-grow: 1;
overflow-y: auto;
min-height: 0;
padding: 0.25rem 0 2rem;
}
.notif-empty {
padding: 2rem 1rem;
text-align: center;
color: var(--secondary-text-color);
font-size: var(--fs-sm);
}
/* Barra del filtro rápido («Ocultar los errores» del menú contextual). */
.notif-filter-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.3rem 0.5rem 0.3rem 0.85rem;
border-bottom: 1px solid var(--border-color);
font-size: var(--fs-2xs);
color: var(--secondary-text-color);
}
.notif-filter-bar .material-icons { font-size: var(--icon-sm); }
/* Separador de día: cabecera de grupo del sidebar (misma superficie y radio
que las del Baúl y Favoritos) que se queda pegada mientras se recorre su
tramo. Con fondo opaco: las filas pasan por debajo. */
.notif-day {
position: sticky;
top: 0;
z-index: 1;
margin: 0.4em var(--list-padding-x) 0.15em;
padding: 0.35em 0.6em;
border-radius: var(--radius-sm);
background-color: var(--bg-color);
color: var(--secondary-text-color);
font-size: var(--fs-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
user-select: none;
}
.notif-list > .notif-day:first-child { margin-top: 0.15em; }
/* Una línea por aviso: hora | icono | mensaje. Sin separadores: las bandas
alternas del sidebar hacen de rejilla (las marca _render(), que solo cuenta
las filas visibles, igual que la vista agrupada del baúl). */
.notif-item {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: baseline;
gap: 0 0.5rem;
padding: 0.3rem 0.85rem;
cursor: default;
}
body:not(.row-stripes) .notif-list .notif-item { --row-stripe-color: transparent; }
.notif-item.notif-stripe { background-color: var(--row-stripe-color); }
.notif-item:hover { background-color: var(--row-hover-bg); }
/* Detalle del aviso: las rutas origen → destino van en una línea propia a todo
el ancho de la fila (no en una columna estrecha que las parte). Una ruta por
línea; si no cabe, se recorta con puntos suspensivos (el título da la ruta). */
.notif-item-detail {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
margin-top: 0.15rem;
font-size: var(--fs-2xs);
color: var(--secondary-text-color);
}
.notif-item-detail-line {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notif-item-clock {
font-size: var(--fs-2xs);
color: var(--secondary-text-color);
font-variant-numeric: tabular-nums;
}
.notif-item-icon {
font-size: var(--icon-xs);
color: var(--secondary-text-color);
}
.notif-item-icon.notif-success { color: var(--success-color); }
/* --danger-color es rgb(163,0,0): sobre el panel oscuro no se lee. */
.notif-item-icon.notif-error { color: var(--error-text-color); }
.notif-item-icon.notif-warning { color: var(--warning-accent); }
.notif-item-icon.notif-info { color: var(--info-color); }
.notif-item-message {
font-size: var(--fs-xs);
color: var(--text-color);
line-height: 1.45;
min-width: 0;
overflow-wrap: anywhere;
}
.notif-item-count {
color: var(--secondary-text-color);
font-variant-numeric: tabular-nums;
}
/* ─── Tooltips personalizados (modules/tooltips.js) ───
Sustituyen al tooltip nativo del atributo title. Mismo lenguaje visual
que popovers/menús: superficie, borde, radio y sombra del tema. */
.cmdr-tooltip {
position: fixed;
z-index: 10050;
max-width: min(320px, calc(100vw - 1rem));
padding: 0.35rem 0.55rem;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-2);
color: var(--text-color);
font-size: var(--fs-xs);
font-weight: 400;
line-height: 1.4;
text-align: left;
white-space: pre-line;
word-break: break-word;
pointer-events: none;
visibility: hidden;
opacity: 0;
transform: scale(0.96);
transform-origin: bottom center;
transition: opacity var(--menu-anim-dur) var(--menu-anim-ease),
transform var(--menu-anim-dur) var(--menu-anim-ease),
visibility 0s linear var(--menu-anim-dur);
}
.cmdr-tooltip.visible {
visibility: visible;
opacity: 1;
transform: scale(1);
transition: opacity var(--menu-anim-dur) var(--menu-anim-ease),
transform var(--menu-anim-dur) var(--menu-anim-ease),
visibility 0s;
}
/* ===================== BAÚLES COMO ETIQUETA =====================
Paleta cerrada de colores de baúl (BAULS_COLORS en commander_lib.php,
VAULT_COLORS en modules/vault-tags.js). Un token por color: el :root es el
tema oscuro (tonos claros sobre fondo oscuro); el tema claro los oscurece
en los dos contextos de siempre (manual y Auto). Chips, puntos y muestras
derivan de --chip-c con color-mix. */
:root {
--vault-red: #f28b82;
--vault-orange: #f6ad6a;
--vault-yellow: #f2d56b;
--vault-green: #81c995;
--vault-teal: #6fd3c7;
--vault-blue: #7fb2f5;
--vault-indigo: #9fa8f0;
--vault-purple: #c69af0;
--vault-pink: #f09ac8;
--vault-gray: #a8adb5;
}
:root[data-theme='light'] {
--vault-red: #c5221f;
--vault-orange: #c55a11;
--vault-yellow: #9a7400;
--vault-green: #1e8e3e;
--vault-teal: #00796b;
--vault-blue: #1a5fd0;
--vault-indigo: #3f4fc0;
--vault-purple: #7b3fc4;
--vault-pink: #c2185b;
--vault-gray: #5f6670;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme='dark']) {
--vault-red: #c5221f;
--vault-orange: #c55a11;
--vault-yellow: #9a7400;
--vault-green: #1e8e3e;
--vault-teal: #00796b;
--vault-blue: #1a5fd0;
--vault-indigo: #3f4fc0;
--vault-purple: #7b3fc4;
--vault-pink: #c2185b;
--vault-gray: #5f6670;
}
}
.vault-color-none { --chip-c: var(--secondary-text-color); }
.vault-color-red { --chip-c: var(--vault-red); }
.vault-color-orange { --chip-c: var(--vault-orange); }
.vault-color-yellow { --chip-c: var(--vault-yellow); }
.vault-color-green { --chip-c: var(--vault-green); }
.vault-color-teal { --chip-c: var(--vault-teal); }
.vault-color-blue { --chip-c: var(--vault-blue); }
.vault-color-indigo { --chip-c: var(--vault-indigo); }
.vault-color-purple { --chip-c: var(--vault-purple); }
.vault-color-pink { --chip-c: var(--vault-pink); }
.vault-color-gray { --chip-c: var(--vault-gray); }
/* Chips de una fila de la lista: pegados al nombre, sin quitarle sitio a la
ruta padre ni a los avisos de enlace. */
.file-item-vaults {
display: inline-flex;
gap: 4px;
margin-left: 0.5em;
flex-shrink: 1;
min-width: 0;
overflow: hidden;
}
.vault-chip {
display: inline-flex;
align-items: center;
max-width: 10em;
padding: 0 7px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--chip-c) 55%, transparent);
background: color-mix(in srgb, var(--chip-c) 18%, transparent);
color: var(--text-color);
font-size: var(--fs-2xs);
line-height: 1.6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
flex-shrink: 0;
}
.file-item-vaults .vault-chip:hover {
background: color-mix(in srgb, var(--chip-c) 32%, transparent);
}
.vault-chip-more {
--chip-c: var(--secondary-text-color);
color: var(--secondary-text-color);
}
/* En cuadrícula la tarjeta no tiene sitio para chips. */
#file-list-container.grid-view .file-item-vaults { display: none; }
/* Punto de color: selector de baúles, filtro y diálogo «Baúles…». */
.vault-dot {
display: inline-block;
width: 0.7em;
height: 0.7em;
border-radius: 50%;
margin-right: 0.5em;
flex-shrink: 0;
background: var(--chip-c);
}
.vault-dot.vault-color-none {
background: transparent;
border: 1px solid var(--secondary-text-color);
}
/* Filtro de la carpeta por baúl. */
#btn-vault-filter.active {
color: var(--primary-color);
background: var(--accent-bg-soft);
}
#vault-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 4px var(--list-padding-x, 8px);
border-bottom: 1px solid var(--border-color);
font-size: var(--fs-xs);
}
#vault-filter-bar.hidden { display: none; }
.vault-filter-label {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--secondary-text-color);
}
.vault-filter-label .material-icons { font-size: var(--icon-sm); }
.vault-filter-chip {
cursor: default;
padding-right: 2px;
max-width: 14em;
}
#vault-filter-bar button.vault-filter-remove.icon-only {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
margin-left: 2px;
min-width: 0;
min-height: 0;
background: none;
border: none;
color: inherit;
cursor: pointer;
}
#vault-filter-bar button.vault-filter-remove .material-icons { font-size: var(--icon-2xs); margin: 0; }
.vault-filter-count { color: var(--secondary-text-color); }
.vault-filter-clear {
margin-left: auto;
font-size: var(--fs-xs);
padding: 2px 8px;
}
.context-menu .context-menu-hint {
padding: 6px 12px;
max-width: 22em;
white-space: normal;
color: var(--secondary-text-color);
font-size: var(--fs-xs);
}
.context-menu .btn-vault-filter-toggle,
.context-menu .btn-vault-switch,
.context-menu .btn-vaultview-switch {
display: flex;
align-items: center;
}
/* Muestras de color en los ajustes del baúl. */
.vault-color-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 6px 12px;
max-width: 14em;
}
.context-menu button.vault-color-swatch,
.context-menu button.vault-color-swatch:hover,
.context-menu button.vault-color-swatch.popover-focused {
width: 20px;
height: 20px;
min-width: 0;
min-height: 0;
padding: 0;
border-radius: 50%;
border: 2px solid transparent;
background-color: var(--chip-c);
cursor: pointer;
}
.context-menu button.vault-color-swatch:hover { transform: scale(1.15); }
.context-menu button.vault-color-swatch.vault-color-none,
.context-menu button.vault-color-swatch.vault-color-none:hover {
background-color: transparent;
border: 2px dashed var(--secondary-text-color);
}
.context-menu button.vault-color-swatch.selected {
outline: 2px solid var(--text-color);
outline-offset: 2px;
}
/* Diálogo «Baúles…». */
.vaults-classify-content { width: min(28rem, 100%); }
#vaults-classify-search { width: 100%; margin-bottom: 8px; }
.vaults-classify-list {
max-height: 45vh;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 4px 0;
}
.vaults-classify-row {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
cursor: pointer;
}
.vaults-classify-row:hover { background: var(--row-hover-bg); }
.vaults-classify-row input { margin: 0; flex-shrink: 0; }
.vaults-classify-row .vault-dot { margin-right: 0; }
.vaults-classify-row.changed .vaults-classify-name { font-weight: 700; }
.vaults-classify-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vaults-classify-empty {
padding: 10px;
color: var(--secondary-text-color);
font-size: var(--fs-xs);
}
.vaults-classify-new-row {
display: flex;
gap: 6px;
margin-top: 10px;
}
.vaults-classify-new-row input { flex: 1; min-width: 0; }
.vaults-classify-new-row button {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
/* Diálogo «Baúl dinámico» (modules/vault-dynamic.js). */
.vault-dynamic-content {
width: min(32rem, 100%);
max-height: 90vh;
overflow-y: auto;
}
.vault-dynamic-content .modal-form-group { margin-top: 1rem; }
.vault-dynamic-note {
margin: 0.5rem 0 0;
padding: 0.4rem 0.6rem;
font-size: var(--fs-xs);
color: var(--warning-color);
background-color: var(--warning-bg-color);
border: 1px solid var(--warning-border-color);
border-radius: var(--radius-sm);
}
.vault-dynamic-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.vault-dynamic-row input[type="text"] { flex: 1 1 12rem; min-width: 0; width: auto; }
.vault-dynamic-row select { width: auto; flex: 0 0 auto; }
.vault-dynamic-row input[type="number"],
.vault-dynamic-row input[type="date"] {
flex: 1 1 7rem;
min-width: 0;
background-color: var(--bg-color);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.5em 0.6em;
font-family: var(--font-family);
font-size: var(--fs-sm);
}
.vault-dynamic-row input:focus { outline: none; border-color: var(--accent-color); }
.vault-dynamic-row button {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.vault-dynamic-folder {
flex: 1 1 12rem;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: rtl; /* recorta por la izquierda: lo que distingue es el final */
text-align: left;
padding: 0.5em 0.6em;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
background-color: var(--bg-color);
}
.modal-form-group label.vault-dynamic-check {
display: flex;
align-items: center;
gap: 6px;
margin: 0.5rem 0 0;
color: var(--text-color);
cursor: pointer;
}
.vault-dynamic-vaults {
max-height: 10rem;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 4px 0;
}
.modal-form-group label.vault-dynamic-vault {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 4px 10px;
color: var(--text-color);
cursor: pointer;
}
.vault-dynamic-vault:hover { background: var(--row-hover-bg); }
.vault-dynamic-vault .vault-dot { margin-right: 0; }
.vault-dynamic-empty,
.vault-dynamic-hint {
padding: 4px 10px;
color: var(--secondary-text-color);
font-size: var(--fs-xs);
}
/* «Añadir elementos a este baúl…» (botón Nuevo en la vista de baúl). */
.vault-add-items-content { width: min(32rem, 100%); }
.vault-add-items-bar {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
}
.vault-add-items-path {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: rtl; /* recorta por la izquierda: lo que distingue es el final */
text-align: left;
color: var(--secondary-text-color);
font-size: var(--fs-xs);
}
.vault-add-items-list {
height: min(50vh, 22rem);
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 4px 0;
}
.vault-add-items-row {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
cursor: pointer;
}
.vault-add-items-row:hover { background: var(--row-hover-bg); }
.vault-add-items-row input { margin: 0; flex-shrink: 0; }
.vault-add-items-row .material-icons { font-size: var(--icon-md); color: var(--secondary-text-color); }
.vault-add-items-name,
.vault-add-items-open {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vault-add-items-open {
background: none;
border: none;
padding: 0;
color: var(--accent-color);
font: inherit;
cursor: pointer;
text-align: left;
}
.vault-add-items-open:hover { text-decoration: underline; }
.vault-add-items-empty {
padding: 10px;
color: var(--secondary-text-color);
font-size: var(--fs-xs);
}
.vault-add-items-count {
margin-right: auto;
align-self: center;
color: var(--secondary-text-color);
font-size: var(--fs-xs);
}
/* Aviso de un baúl dinámico: resultado recortado o criterio roto. Encima de
la lista del sidebar y junto al rótulo de la vista del baúl. */
.vault-dyn-notice {
display: flex;
align-items: center;
gap: 6px;
margin: 4px 6px 6px;
padding: 0.35rem 0.6rem;
font-size: var(--fs-xs);
font-weight: normal;
color: var(--warning-color);
background-color: var(--warning-bg-color);
border: 1px solid var(--warning-border-color);
border-radius: var(--radius-sm);
}
.vault-dyn-notice .material-icons { font-size: var(--icon-sm); flex-shrink: 0; }
.vault-dyn-notice span:not(.material-icons) { min-width: 0; }
.vault-dyn-notice.is-error { color: var(--error-color); border-color: var(--error-color); }
.vault-dyn-notice button {
margin-left: auto;
flex-shrink: 0;
font-size: var(--fs-xs);
padding: 0.15rem 0.5rem;
}
.content-header .vault-dyn-notice {
display: inline-flex;
margin: 0 0 0 0.6em;
max-width: 60%;
vertical-align: middle;
}
.content-header .vault-dyn-notice span:not(.material-icons) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Utilidades y piezas que antes iban en atributos style= ────────────────
La CSP de la app no admite estilos en línea (style-src sin 'unsafe-inline');
los valores dinámicos (anchura de barras, tipografía de la vista previa) se
asignan por CSSOM desde el JS. */
.text-secondary { color: var(--secondary-text-color); }
.text-sm { font-size: 0.85em; }
.short-date.text-secondary { font-size: var(--fs-xs); }
.uppercase { text-transform: uppercase; }
.invisible { visibility: hidden; }
.w-full { width: 100%; }
.font-inherit { font-family: inherit; }
.gap-sm { gap: 0.5rem; }
.input-w-9 { max-width: 9rem; }
.input-w-5 { max-width: 5rem; }
.webdav-section h4.form-subheading, .form-subheading { margin-top: 1.2rem; }
.material-icons.icon-inline { vertical-align: -5px; }
.material-icons.icon-zip-inline { font-size: 0.95em; vertical-align: -2px; }
.menu-count { opacity: 0.5; font-size: var(--fs-xs); }
.material-icons.preview-pdf-icon { font-size: 3.5rem; opacity: 0.7; color: #f44336; }
.jsoneditor-loading { padding: 1rem; color: var(--secondary-text-color); }
.app-list-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); }
.material-icons.app-list-icon { font-size: 1.4rem; color: var(--accent-color); }
.app-list-main { flex: 1; min-width: 0; }
.app-list-url { font-size: 0.82em; color: var(--secondary-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-list-meta { font-size: 0.78em; color: var(--secondary-text-color); }
.material-icons.app-list-folder { font-size: 1rem; vertical-align: -3px; color: var(--secondary-text-color); }
.links-table .sysinfo-section { padding-top: 1.2em; }
.links-table .sysinfo-disk { padding-bottom: 10px; }
.sysinfo-bar { background: var(--border-color); border-radius: 3px; height: 7px; overflow: hidden; margin-bottom: 4px; }
.sysinfo-bar-fill { width: 0; height: 100%; background: var(--accent-color); border-radius: 3px; }
.sysinfo-bar-fill.is-mid { background: var(--warning-color, #f39c12); }
.sysinfo-bar-fill.is-high { background: var(--danger-color, #e74c3c); }
.material-icons.trash-item-icon { vertical-align: middle; font-size: 1.1em; }
.trash-item-sub { opacity: 0.6; }
.text-xs { font-size: var(--fs-xs); }
.guide-notice { max-width: 820px; margin: 0 auto 0.75rem; }
|