/* ---------- RESET Y VARIABLES ---------- */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --win-gray: #c0c0c0;
      --win-dark: #808080;
      --win-darker: #404040;
      --win-light: #ffffff;
      --win-black: #000000;
      --win-select: #000080;
      --win-bg-panel: #e0e0e0;
      --win-bg-status: #cfcfcf;
      --font-win: 'MS Sans Serif', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: url('https://eps-sistema.com/img/fondow95.jpg') no-repeat center center fixed;
      background-size: cover;
      font-family: var(--font-win);
      font-size: 13px;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      /* user-select eliminado: el texto es seleccionable */
    }

    /* ---------- VENTANA PRINCIPAL ---------- */
    .window {
      width: calc(100vw - 16px);
      height: calc(100vh - 16px);
      max-width: calc(100vw - 6px);
      max-height: calc(100vh - 6px);
      background: var(--win-gray);
      border-top: 2px solid var(--win-light);
      border-left: 2px solid var(--win-light);
      border-right: 2px solid var(--win-darker);
      border-bottom: 2px solid var(--win-darker);
      box-shadow: 4px 4px 0 var(--win-black);
      display: flex;
      flex-direction: column;
    }

    /* ---------- TITLE BAR ---------- */
    .title-bar {
      background: var(--win-select);
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 6px;
      color: var(--win-light);
      font-weight: 700;
      font-size: 13px;
    }
    .title-left {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .win-logo {
      width: 14px;
      height: 14px;
      background: var(--win-light);
      border: 1px solid var(--win-black);
      display: inline-block;
    }
    .win-controls {
      display: flex;
      gap: 4px;
    }
    .win-btn {
      width: 18px;
      height: 16px;
      background: var(--win-gray);
      border-top: 2px solid var(--win-light);
      border-left: 2px solid var(--win-light);
      border-right: 2px solid var(--win-darker);
      border-bottom: 2px solid var(--win-darker);
      font-size: 10px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: default;
      color: var(--win-black);
    }
    .win-btn:active {
      border-top: 2px solid var(--win-darker);
      border-left: 2px solid var(--win-darker);
      border-right: 2px solid var(--win-light);
      border-bottom: 2px solid var(--win-light);
    }

    /* ---------- MENU BAR ---------- */
    .menu-bar {
      height: 24px;
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 0 8px;
      background: var(--win-gray);
      border-bottom: 1px solid var(--win-dark);
      font-size: 13px;
    }
    .menu-item {
      padding: 2px 6px;
      cursor: default;
    }
    .menu-item:hover {
      background: var(--win-select);
      color: var(--win-light);
    }

    /* ---------- TOOLBAR ---------- */
    .toolbar {
  height: 40px;
  padding: 4px 8px;
  background: var(--win-gray);
  border: none;
  box-shadow: inset 0 -1px 0 var(--win-light),
              inset 0 -2px 0 var(--win-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}
    .tool-btn {
  color: var(--win-black);
  text-decoration: none;
  cursor: default;

  height: 26px;
  padding: 0 10px;
  background: var(--win-gray);
  border: 1px solid var(--win-dark);
  box-shadow: inset 1px 1px 0 var(--win-light),
              inset -1px -1px 0 var(--win-darker);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
    .tool-btn:hover{background:var(--win-select);color:var(--win-light);}
.tool-btn:hover .tool-icon{background:var(--win-light);}

    /* ---------- ADDRESS BAR (HOME) ---------- */
    .address-tool {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
      flex: 0 0 auto;
      min-width: 0;
    }
    .address-label {
      height: 22px;
      padding: 0 8px;
      display: flex;
      align-items: center;
      background: var(--win-gray);
      border: 1px solid var(--win-dark);
      box-shadow: inset 1px 1px 0 var(--win-light),
                  inset -1px -1px 0 var(--win-darker);
      white-space: nowrap;
    }
    .address-field {
      width: 320px;
      min-width: 240px;
      height: 22px;
      background: var(--win-light);
      border-top: 2px solid var(--win-darker);
      border-left: 2px solid var(--win-darker);
      border-right: 2px solid var(--win-light);
      border-bottom: 2px solid var(--win-light);
      padding: 2px 6px;
      font-family: var(--font-win);
      font-size: 13px;
      outline: none;
      box-sizing: border-box;
      user-select: text;
      cursor: text;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
      align-items: center;
    }
    .address-field:focus {
      outline: 1px dotted var(--win-black);
      outline-offset: -3px;
    }
.tool-btn:active {
      border-top: 2px solid var(--win-darker);
      border-left: 2px solid var(--win-darker);
      border-right: 2px solid var(--win-light);
      border-bottom: 2px solid var(--win-light);
    }
    .tool-icon {
      width: 16px;
      height: 16px;
      background: var(--win-light);
      border: 1px solid var(--win-black);
      display: inline-block;
    }
/* ---------- MAIN AREA (PANEL IZQUIERDO + CONTENIDO) ---------- */
    .main-area {
      display: flex;
      flex: 1;
      min-height: 0;
    }

    /* ---------- PANEL IZQUIERDO (ÁRBOL) ---------- */
    .tree-panel {
      width: 250px;
      background: var(--win-bg-panel);
      border-right: 2px solid var(--win-dark);
      padding: 2px 2px;  /* padding reducido */
      overflow: hidden;

      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .tree-search-box {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
    }
    .tree-search-box input {
      flex: 1;
      height: 22px;
      background: var(--win-light);
      border-top: 2px solid var(--win-darker);
      border-left: 2px solid var(--win-darker);
      border-right: 2px solid var(--win-light);
      border-bottom: 2px solid var(--win-light);
      padding: 2px 6px;
      font-family: var(--font-win);
      font-size: 13px;
      outline: none;
    }
    .tree-view {
      background: var(--win-light);
      border-top: 2px solid var(--win-darker);
      border-left: 2px solid var(--win-darker);
      border-right: 2px solid var(--win-light);
      border-bottom: 2px solid var(--win-light);
      padding: 2px 0 2px 1px;

      flex: 1 1 auto;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .tree-item {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 2px 4px;
      border: 1px solid transparent;
      cursor: default;
      white-space: nowrap;
    }
    .tree-item:hover {
      background: #efefef;
    }
    .tree-item.selected {
      background: var(--win-select);
      color: var(--win-light);
      border: 1px dotted var(--win-light);
    }
    .tree-item.selected .tree-icon {
      color: var(--win-light);
    }
    .indent-1 { padding-left: 16px; }
    .indent-2 { padding-left: 30px; }
    .indent-3 { padding-left: 44px; }

    /* iconos de árbol mediante pseudo-elementos (sin emojis) */
    .tree-icon {
      display: inline-block;
      width: 14px;
      text-align: center;
      font-family: 'Segoe UI', monospace;
      font-size: 13px;
    }
    .tree-item[data-type="root"] .tree-icon::before { content: "▾"; }  /* carpeta abierta */
    .tree-item[data-type="folder"] .tree-icon::before { content: "▸"; } /* cerrada */
    .tree-item[data-type="leaf"] .tree-icon::before { content: " "; }

    
    /* ---------- PROMPT DEL DÍA (bloque inferior izquierdo) ---------- */
    .prompt-dia-box{
      margin-top: 8px;
      border-top: 2px solid var(--win-darker);
      border-left: 2px solid var(--win-darker);
      border-right: 2px solid var(--win-light);
      border-bottom: 2px solid var(--win-light);
      background: var(--win-gray);
      padding: 0;
      flex: 0 0 auto;
    }
    .prompt-dia-box img{
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
    }

    /* ---------- PANEL DERECHO (CONTENIDO) ---------- */
    .content-panel {
      flex: 1;
      background: var(--win-gray);
      padding: 2px 3px 60px;  /* padding horizontal reducido */
      overflow: auto;
      display: flex;
      flex-direction: column;
    }
    .breadcrumb {
      font-weight: 700;
      margin-bottom: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* bloque bienvenida */
    .welcome-block {
      background: #d3d3d3;
      padding: 10px;
      border: 2px inset #aaa;
      margin-bottom: 20px;
    }
    .welcome-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .welcome-text {
      margin-bottom: 12px;
    }
    .btn-3d {
      display: inline-block;
      padding: 8px 20px;
      background: var(--win-gray);
      border-top: 2px solid var(--win-light);
      border-left: 2px solid var(--win-light);
      border-right: 2px solid var(--win-darker);
      border-bottom: 2px solid var(--win-darker);
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      color: var(--win-black);
      transition: background-color 0.1s ease, color 0.1s ease;
    }
    .btn-3d:hover {
      background: var(--win-select);
      color: var(--win-light);
    }
    .btn-3d:active {
      border-top: 2px solid var(--win-darker);
      border-left: 2px solid var(--win-darker);
      border-right: 2px solid var(--win-light);
      border-bottom: 2px solid var(--win-light);
    }

    /* últimos artículos */
    .articles-section {
      margin-bottom: 12px;
    }
    .section-title {
      font-weight: 700;
      margin-bottom: 10px;
    }
    .article-item {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-bottom: 16px;
    }
    .article-icon {
      width: 40px;
      height: 40px;
      background: var(--win-light);
      border: 2px solid #444;
      box-shadow: inset -2px -2px 0 #aaa, inset 2px 2px 0 #f4f4f4;
      flex-shrink: 0;
    }
    .article-content {
      flex: 1;
    }
    .article-title {
      font-weight: 700;
    }
    .article-desc {
      color: #222;
    }
    .article-link {
      color: #00c;
      text-decoration: underline;
      cursor: default;
    }

    .divider-light {
      height: 1px;
      background: var(--win-dark);
      margin: 12px 0;
    }

    /* cuadrícula de carpetas destacadas */
    .featured-title {
      font-weight: 700;
      margin-bottom: 8px;
    }
    .grid-view {
      display: grid;
      grid-template-columns: repeat(auto-fill, 130px);
      gap: 16px 12px;
      justify-content: flex-start;
    }
    .grid-item {
      width: 120px;
      padding: 10px 4px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      border: 1px solid transparent;
      cursor: default;
    }
    .grid-item.selected {
      border: 1px dotted var(--win-black);
      background: rgba(0,0,0,0.03);
    }
    .folder-icon {
      width: 56px;
      height: 56px;
      background: #f7d27b;
      border: 2px solid #6b4f2a;
      box-shadow: inset -2px -2px 0 #b78a4b, inset 2px 2px 0 #ffd78c;
      margin-bottom: 6px;
    }
    .grid-label {
      max-width: 108px;
      padding: 2px 4px;
      line-height: 1.3;
    }

    /* ---------- STATUS BAR ---------- */
    .status-bar {
      height: 28px;
      background: var(--win-gray);
      border-top: 2px solid var(--win-light);
      display: flex;
      align-items: center;
      padding: 0 8px;
      gap: 10px;
      font-size: 13px;
    }
    .status-cell {
      height: 20px;
      background: var(--win-bg-status);
      border-top: 2px solid var(--win-dark);
      border-left: 2px solid var(--win-dark);
      border-right: 2px solid var(--win-light);
      border-bottom: 2px solid var(--win-light);
      padding: 0 10px;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }
    .footer-links {
      display: flex;
      gap: 12px;
      flex: 1;
      justify-content: center;
      overflow-x: auto;
      padding: 0 8px;
    }
    .footer-links a {
      color: var(--win-black);
      text-decoration: none;
      background: var(--win-bg-status);
      border-top: 2px solid var(--win-dark);
      border-left: 2px solid var(--win-dark);
      border-right: 2px solid var(--win-light);
      border-bottom: 2px solid var(--win-light);
      padding: 0 8px;
      line-height: 20px;
      white-space: nowrap;
      cursor: default;
    }
    .footer-links a:active {
      border-top: 2px solid var(--win-light);
      border-left: 2px solid var(--win-light);
      border-right: 2px solid var(--win-dark);
      border-bottom: 2px solid var(--win-dark);
    }
    .clock {
      margin-left: auto;
      background: var(--win-bg-status);
      border-top: 2px solid var(--win-dark);
      border-left: 2px solid var(--win-dark);
      border-right: 2px solid var(--win-light);
      border-bottom: 2px solid var(--win-light);
      padding: 0 10px;
      line-height: 20px;
    }

    /* ---------- RESPONSIVE ---------- */
    @media (max-width: 700px){
  .toolbar{ height:auto; flex-wrap:wrap; align-items:flex-start; gap:8px; }
  .address-tool{ width:100%; }
  .address-field{ width:100%; min-width:0; }
  .main-area{ flex-direction:column; }
  .tree-panel{ width:100%; border-right:0; border-bottom:2px solid var(--win-dark); }
  .content-panel{ padding-bottom:70px; }
  .status-bar{ height:auto; flex-wrap:wrap; gap:6px; }
  .footer-links{ justify-content:flex-start; width:100%; }
  .clock{ margin-left:0; }
  .eps-access-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; padding-bottom:28px; }
  .window{ width:100vw; height:100vh; }
}
/* EPS responsive overrides */
@media (min-width: 701px) and (max-width: 1399px){
  body { padding: 1cm 2cm !important; }
  .window { width: calc(100vw - 4cm) !important; max-height: calc(100vh - 2cm) !important; height: calc(100vh - 2cm) !important; }
}
@media (min-width: 1400px){
  body { padding: 1cm 2cm !important; }
  .window { width: min(1400px, calc(100vw - 4cm)) !important; height: calc(100vh - 2cm) !important; max-height: calc(100vh - 2cm) !important; margin: 0 auto; }
}
@media (max-width: 700px){
  body { padding: 8px !important; overflow: auto; }
  .window { width: calc(100vw - 16px) !important; height: calc(100vh - 16px) !important; max-width: none !important; max-height: none !important; }
}
/* ---------- BLOQUE 3: ACCESOS (6 ICONOS) ---------- */
    .eps-access-grid{
      display: grid;
      width: 100%;
      gap: 18px 16px;
      align-items: start;
      justify-items: center;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      padding: 6px 0 18px;
      overflow: visible;
    }
    @media (max-width: 980px){
      .eps-access-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 520px){
      .eps-access-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 360px){
      .eps-access-grid{ grid-template-columns: 1fr; }
    }

    .eps-access{
      width: 100%;
      text-decoration: none;
      color: var(--win-black);
      background: var(--win-gray);
      padding: 10px 8px 8px;
      border-top: 2px solid var(--win-light);
      border-left: 2px solid var(--win-light);
      border-right: 2px solid var(--win-darker);
      border-bottom: 2px solid var(--win-darker);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      min-width: 0;
    }
    .eps-access:hover{ background: #c7c7c7; }
    .eps-access:active{
      border-top: 2px solid var(--win-darker);
      border-left: 2px solid var(--win-darker);
      border-right: 2px solid var(--win-light);
      border-bottom: 2px solid var(--win-light);
    }
    .eps-access:focus{
      outline: 1px dotted var(--win-black);
      outline-offset: -3px;
    }

    .eps-access-ico{
      width: clamp(64px, 10vw, 120px);
      height: clamp(64px, 10vw, 120px);
      background: var(--win-bg-panel);
      border-top: 1px solid var(--win-light);
      border-left: 1px solid var(--win-light);
      border-right: 1px solid var(--win-darker);
      border-bottom: 1px solid var(--win-darker);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
    }
    .eps-access-ico img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .eps-access-label{
      width: 100%;
      text-align: center;
      padding: 2px 4px;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

/* --- Footer links hover (match library) --- */
.footer-links a{
  cursor: pointer; /* clickable */
}
.footer-links a:hover{
  background: var(--win-select) !important;
  color: var(--win-light) !important;
}

/* --- Hover Win95 (igual que library) --- */
.tool-btn{ cursor:pointer; }
.tool-btn:hover{ background:var(--win-select); color:var(--win-light); }
.tool-btn:hover .tool-icon{ background:var(--win-light); }

.footer-links a{ cursor:pointer; }
.footer-links a:hover{ background:var(--win-select); color:var(--win-light); }