/* ==========================================================================
   TOKENS Y VARIABLES GLOBALES
   ========================================================================== */
:root {
  --font: 'Geneva', 'Segoe UI', Tahoma, sans-serif;

  /* Paleta Base */
  --bg:          #e4e6e8;
  --dot:         #c8cdd2;
  --surface:     #f8f9fa;
  --surface-alt: #ebeef0;
  --border:      #9aa2ac;

  /* Acentos */
  --accent:      #7a8ba1;
  --accent2:     #a192b3;
  --accent-text: #ffffff;

  /* Estados */
  --danger:        #d97b7b;
  --danger-border: #c96a6a;
  --text-main:     #444444;
  --text-muted:    #888888;
  --hover-bg:      rgba(122, 139, 161, 0.12);

  /* Geometría */
  --stripe:           repeating-linear-gradient(to right, #e0e3e6 0, #e0e3e6 1px, #f8f9fa 1px, #f8f9fa 3px);
  --win-border:       1px solid var(--border);
  --win-shadow:       3px 3px 0 rgba(154, 162, 172, 0.4);
  --win-shadow-blur:  2px 2px 0 rgba(154, 162, 172, 0.2);

  /* Dimensiones */
  --title-h:    24px;
  --radius:     2px;
  --icon-size:  42px;
  --taskbar-h:  32px;
}

/* ==========================================================================
   RESET & BODY
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  width: 100vw; height: 100vh; overflow: hidden;
  font-family: var(--font); font-size: 12px; color: var(--text-main);
  background: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 4px 4px;
  display: flex; flex-direction: column;
  user-select: none; -webkit-user-select: none;
}

/* ==========================================================================
   MENUBAR GLOBAL
   ========================================================================== */
#menubar {
  height: 28px; flex-shrink: 0; z-index: 9000;
  background: #f0f2f4; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px; gap: 8px;
  font-size: 12px; font-weight: bold;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

/* ==========================================================================
   ESCRITORIO, SHORTCUTS Y VENTANAS
   ========================================================================== */
#desktop { flex: 1; position: relative; overflow: hidden; pointer-events: none; }

#shortcuts {
  position: absolute; top: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 15px; z-index: 10;
  overflow-y:auto;bottom:0;overflow-y:auto;
}
.shortcut {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 80px; padding: 8px 4px; border-radius: 4px; cursor: pointer;
  border: 1px solid transparent; transition: all .15s; pointer-events: all;
}
.shortcut:hover { background-color: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.shortcut-icon  { font-size: 36px; line-height: 1; margin-bottom: 5px; filter: drop-shadow(0 2px 1px rgba(0,0,0,.2)); }
.shortcut-label { font-size: 11px; text-align: center; font-weight: bold; color: var(--text-main); text-shadow: 0 1px 0 rgba(255,255,255,.5); }

/* --- Ventanas --- */
.win {
  pointer-events: all; position: absolute;
  background: var(--surface); border: var(--win-border);
  box-shadow: var(--win-shadow-blur);
  display: flex; flex-direction: column;
  min-width: 240px; min-height: 140px; max-width: 100%;
  overflow: hidden; border-radius: var(--radius);
  transition: box-shadow .15s;
}
.win.focused { box-shadow: var(--win-shadow); border-color: #778088; }
.win.maximized { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.win.maximized .win-resize { display: none; }
.win.minimized { height: auto !important; padding-bottom: 0; }
.win.minimized .win-body, .win.minimized .win-menu, .win.minimized .win-resize { display: none; }

.win-title {
  height: var(--title-h); flex-shrink: 0; position: relative; cursor: grab;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border); background: var(--surface-alt);
  overflow: hidden;
}
.win-title::before { content: ''; position: absolute; inset: 0; background: var(--stripe); opacity: .4; }
.win.focused .win-title::before { opacity: .8; }
.win:not(.focused) .win-title { opacity: .7; }

.win-title-text {
  position: relative; z-index: 1; background: var(--surface);
  padding: 0 12px; font-weight: bold; font-size: 11px;
  pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
}

.win-btns { position: absolute; left: 6px; display: flex; gap: 4px; z-index: 2; }
.win-btn {
  width: 13px; height: 13px; border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: bold; border-radius: 2px; color: #666;
  box-shadow: 0 1px 0 #fff inset;
}
.win-btn.close:hover { background: var(--danger); color: #fff; border-color: var(--danger-border); }
.win-btn.min:hover   { background: #d4b872; color: #fff; border-color: #c4a55d; }
.win-btn.max:hover   { background: #82b382; color: #fff; border-color: #6b9e6b; }

.win-menu {
  display: flex; align-items: center; gap: 4px; padding: 4px 6px;
  background: var(--surface-alt); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.win-menu-btn {
  background: transparent; border: 1px solid transparent; padding: 3px 8px; font-family: var(--font);
  font-size: 11px; cursor: pointer; border-radius: var(--radius); color: var(--text-main);
}
.win-menu-btn:hover { background: var(--hover-bg); border-color: var(--border); }

/* Breadcrumb integrado en el menú de la ventana */
.breadcrumb {
  display: flex; align-items: center; flex: 1; min-width: 0; overflow: hidden;
  margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--border); gap: 2px;
}
.bc-seg {
  cursor: pointer; padding: 3px 6px; white-space: nowrap; font-size: 11px;
  border-radius: var(--radius); transition: background .1s, color .1s; color: var(--text-main);
}
.bc-seg:hover { background: var(--accent); color: var(--accent-text); }

.win-body { flex: 1; overflow: auto; display: flex; flex-direction: column; background: var(--surface); }

.win-resize {
  position: absolute; right: 0; bottom: 0;
  width: 16px; height: 16px; cursor: nwse-resize; color: #333;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 2px; z-index: 5;
}
.win-resize svg { pointer-events: none; opacity: .3; transition: opacity .15s; }
.win:hover .win-resize svg { opacity: .6; }

/* ==========================================================================
   LAYOUTS Y DATA LISTS (Reemplaza estilos duplicados de Explorer)
   ========================================================================== */
.app-layout, .form-layout, .list-layout { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; }

.data-list { flex: 1; padding: 16px; overflow-y: auto; align-content: start; }
.data-list.view-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: min-content; gap: 12px;
}
.data-list.view-list { display: flex; flex-direction: column; gap: 0; padding: 8px; }

.data-item { cursor: pointer; transition: background-color .1s; border-radius: var(--radius); user-select: none; position: relative; }
.data-item:hover { background-color: var(--hover-bg); }

/* Estilo Grid */
.view-grid .data-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 8px; border: 1px solid transparent; }
.view-grid .data-item:hover { border-color: rgba(122,139,161,.3); }
.view-grid .item-icon { font-size: 38px; line-height: 1; margin-bottom: 6px; pointer-events: none; }
.view-grid .item-label { font-size: 11px; word-wrap: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; pointer-events: none; }

/* Estilo Lista */
.view-list .data-item { display: flex; flex-direction: row; align-items: center; text-align: left; padding: 8px 12px; border-bottom: 1px solid #d1d5da; }
.view-list .data-item:last-child { border-bottom: none; }
.view-list .item-icon { font-size: 20px; margin-right: 12px; pointer-events: none; }
.view-list .item-label { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; pointer-events: none; }

/* ==========================================================================
   BOTONES Y CONTROLES
   ========================================================================== */
.btn {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 4px 14px; cursor: pointer;
  font-size: 11px; font-family: var(--font); color: var(--text-main);
  box-shadow: 0 1px 0 #fff inset, 1px 1px 0 rgba(0,0,0,.05);
  transition: all .1s; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.btn:active { box-shadow: 0 1px 0 rgba(0,0,0,.05) inset; transform: translate(1px,1px); }
.btn:hover  { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary { background: var(--accent); color: #fff; border-color: #6a798d; }
.btn.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger-border); }
.btn.btn-sm { padding: 2px 8px; font-size: 11px; }
.btn.btn-icon { padding: 2px 6px; font-size: 13px; border-color: transparent; background: transparent; box-shadow: none; color: var(--text-muted); }
.btn.btn-icon:hover { background: var(--hover-bg); color: var(--text-main); border-color: var(--border); }

/* ==========================================================================
   TABLAS (Pages Pro)
   ========================================================================== */
.list-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.filter-ctrl { border: 1px solid var(--border); border-radius: var(--radius); font-size: 11px; padding: 3px 7px; height: 22px; outline: none; }
.filter-ctrl:focus { border-color: var(--accent); }

.list-table-wrap { flex: 1; overflow: auto; }
.list-table { display: flex; flex-direction: column; width: 100%; font-size: 12px; min-width: 0; }
.list-tr { display: grid; grid-template-columns: var(--cols, repeat(auto-fit, minmax(80px, 1fr))); width: 100%; min-width: 0; }

.list-thead { position: sticky; top: 0; z-index: 2; background: var(--surface-alt); border-bottom: 2px solid var(--border); }
.list-th { padding: 6px 10px; font-weight: bold; font-size: 11px; color: var(--text-muted); border-right: 1px solid var(--border); display: flex; align-items: center; gap: 4px; overflow: hidden; }
.list-th.sortable { cursor: pointer; }
.list-th.sortable:hover { background: var(--hover-bg); color: var(--text-main); }
.th-sort-icon { font-size: 10px; }

.list-tbody .list-tr { border-bottom: 1px solid #e2e5e8; cursor: pointer; transition: background .08s; }
.list-tbody .list-tr:hover { background: var(--hover-bg); }
.list-td { padding: 0 10px; height: 32px; display: flex; align-items: center; border-right: 1px solid #ebeef0; overflow: hidden; }
.td-inner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }

.list-td.td-actions { justify-content: center; padding: 0 4px; opacity: 0; transition: opacity .1s; }
.list-tbody .list-tr:hover .list-td.td-actions { opacity: 1; }

.list-pager { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--surface-alt); border-top: 1px solid var(--border); flex-shrink: 0; }

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
.form-body { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-weight: bold; font-size: 11px; }
.form-control { border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; padding: 6px 8px; outline: none; transition: border .15s; }
.form-control:focus { border-color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.1) inset, 0 0 0 2px rgba(122,139,161,.2); }
.toolbar.right { justify-content: flex-end; padding: 8px; border-top: 1px solid var(--border); background: var(--surface-alt); display: flex; gap: 8px; }

/* ==========================================================================
   UTILIDADES Y CONTEXT MENU
   ========================================================================== */
.context-menu {
  position: fixed; z-index: 10000; display: none; flex-direction: column;
  background: var(--surface); border: var(--win-border); box-shadow: var(--win-shadow);
  border-radius: var(--radius); padding: 4px 0; min-width: 160px;
}
.context-menu.visible { display: flex; }
.context-menu button { background: transparent; border: none; padding: 6px 16px; text-align: left; font-size: 12px; cursor: pointer; }
.context-menu button:hover { background: var(--accent); color: var(--accent-text); }

::-webkit-scrollbar          { width: 12px; height: 12px; }
::-webkit-scrollbar-track   { background: var(--bg); border-left: 1px solid var(--border); }
::-webkit-scrollbar-thumb   { background: #cfd4d8; border: 1px solid var(--border); }
::-webkit-scrollbar-thumb:hover { background: #b8bec4; }
#dragOverlay { display: none; position: fixed; inset: 0; z-index: 99998; }
body.dragging #dragOverlay { display: block; cursor: grabbing; }
body.resizing #dragOverlay { display: block; cursor: nwse-resize; }


/* ==========================================================================
   ALERT APP
   ========================================================================== */
.win-body > .alert {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Damos un padding asimétrico: más espacio arriba, estándar a los lados y abajo */
  padding: 24px 16px 16px; 
}

.alert-text {
  /* flex: 1 permite que el texto empuje al botón hacia abajo y se centre verticalmente */
  flex: 1; 
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: 13px;
  color: var(--text-main);
  text-align: center;
  line-height: 1.4;
  padding: 0 12px;
}

.win-body > .alert > .btn {
  /* Anclamos y centramos el botón en la base */
  align-self: center; 
  min-width: 100px;
  justify-content: center;
  padding: 6px 16px;
  margin-top: 16px;
}


/* --- TreeView Estilos --- */
.tree-view {
    --tree-indent: 16px;
    --tree-hover-bg: rgba(128, 128, 128, 0.1);
    --tree-sel-bg: rgba(59, 130, 246, 0.15); /* Azul muy tenue */
    --tree-sel-color: #3b82f6;
    
    overflow: auto;
    height: 100%;
    min-width: max(150px,25%);
    user-select: none;
    font-size: 0.9em;
}

.tree-group {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Identación para los grupos anidados */
.tree-node .tree-group {
    display: none; /* Oculto por defecto */
    padding-left: var(--tree-indent);
    border-left: 1px solid rgba(128, 128, 128, 0.2);
    margin-left: 10px;
}

/* Mostrar hijos cuando el nodo padre está expandido */
.tree-node.expanded > .tree-group {
    display: block;
}

.tree-row {
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.tree-row:hover {
    background-color: var(--tree-hover-bg);
}

.tree-row.selected {
    background-color: var(--tree-sel-bg);
    color: var(--tree-sel-color);
    font-weight: 500;
}

.tree-toggle {
    display: inline-block;
    width: 20px;
    text-align: center;
    font-size: 0.75em;
    opacity: 0; /* Invisible por defecto si no hay hijos */
    transition: transform 0.15s ease;
}

.tree-toggle.has-kids {
    opacity: 0.6;
}

.tree-toggle.has-kids:hover {
    opacity: 1;
}

/* Rotar flecha al expandir */
.tree-node.expanded > .tree-row > .tree-toggle.has-kids {
    transform: rotate(90deg);
}

.tree-icon {
    margin: 0 6px;
}

.tree-label {
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Mensajes de estado */
.tree-status {
    padding: 4px 24px;
    font-size: 0.85em;
    opacity: 0.6;
}
.tree-status.error { color: #ef4444; opacity: 1; }