/*=============================================
Interfaz Dashboard
=============================================*/

#wrapper {
  display: flex;
  flex-direction: row;
}

#sidebar-wrapper {
  /* Pinned to the viewport with its own scrollbar: the sidebar no longer
     stretches to the page height, so it stays put while the content scrolls.
     align-self prevents the flex row from stretching it back. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  width: 280px;
  z-index:1;
  transition: all 0.3s;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  box-shadow: 2px 0 8px rgba(0,0,0,0.04);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

#sidebar-wrapper::-webkit-scrollbar {
  width: 6px;
}

#sidebar-wrapper::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 3px;
}

#sidebar-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

#sidebar-wrapper .sidebar-heading {
  font-size: 1.25rem;
  text-align: center;
  min-width: 255px;
  padding: 1.5rem 1rem;
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

#sidebar-wrapper .list-group-item {
  padding: 0;
  border: none;
  margin-bottom: 0;
  position: relative;
}

#sidebar-wrapper .list-group-item i {
  margin-right: 12px;
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

#sidebar-wrapper .menu-text {
  display: inline;
  font-size: 0.9rem;
  font-weight: 500;
  color: #374151;
}

/* The label sits in its own <span>, so the colour above used to beat whatever
   the link had — the active item took the theme's background and icon colour
   but kept this grey text, which on a dark "Fondo de ítem activo" is grey on
   grey. Highlighted and hovered items follow their link instead. */
#sidebar-wrapper a.bg-transparent.active .menu-text,
#sidebar-wrapper a.bg-transparent:hover .menu-text,
#sidebar-wrapper .submenu-link.active .menu-text,
#sidebar-wrapper .submenu-link:hover .menu-text,
#sidebar-wrapper .menu-item.active .menu-toggle .menu-text {
  color: inherit;
}

#page-content-wrapper {
  flex-grow: 1;
  width:50%;
}

/* Menu Link Styles */
#sidebar-wrapper a.bg-transparent {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  padding-right: 50px;
  color: #374151;
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: 0;
  position: relative;
}

#sidebar-wrapper a.bg-transparent:hover {
  background-color: #f3f4f6;
  color: #111827;
}

#sidebar-wrapper a.bg-transparent.active {
  background-color: #eff6ff;
  color: #1e40af;
  font-weight: 600;
  border-left: 3px solid #3b82f6;
  padding-left: 17px;
}

#sidebar-wrapper a.bg-transparent.active i {
  color: #3b82f6;
}

#sidebar-wrapper a.bg-transparent i {
  margin-right: 12px;
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  transition: color 0.2s ease;
}

/* Menu Toggle Styles */
.menu-toggle {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  padding-right: 50px;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0;
  position: relative;
}

.menu-toggle:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.menu-toggle i:first-of-type {
  margin-right: 12px;
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

.menu-arrow {
  font-size: 0.75rem;
  transition: transform 0.3s ease;
  color: #6b7280;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  pointer-events: none;
  position: absolute;
  right: 42px;
  top: 50%;
  transform: translateY(-50%);
}

.menu-item.expanded .menu-arrow {
  transform: translateY(-50%) rotate(180deg);
}

.menu-item.active .menu-arrow {
  color: var(--tp-active-border, #3b82f6);
}

.menu-item.active .menu-toggle {
  background-color: var(--tp-active-bg, #eff6ff);
  color: var(--tp-active-color, #1e40af);
  font-weight: 600;
}

.menu-item.active .menu-toggle i:first-of-type {
  color: var(--tp-active-border, #3b82f6);
}

.menu-item.expanded.active .menu-arrow {
  transform: translateY(-50%) rotate(180deg);
  color: var(--tp-active-border, #3b82f6);
}

/* Submenu Styles */
.submenu {
  background-color: #f8f9fa;
  border-left: 3px solid var(--tp-active-border, #3b82f6);
  margin: 2px 0 2px 0;
  padding: 6px 0;
  border-radius: 0;
  list-style: none;
  overflow: visible;
  display: none; /* Ensure submenus start collapsed by default */
}

.menu-item.expanded .submenu {
  display: block; /* Only show when explicitly expanded */
}

.submenu-item {
  border: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.submenu-link {
  display: flex;
  align-items: center;
  padding: 10px 15px 10px 40px;
  padding-right: 50px;
  color: #6b7280;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  position: relative;
  min-height: 40px;
}

/* Submenu highlight colours come from the Apariencia theme (--tp-* is emitted
   by views/template.php). They were hardcoded blue, so a panel themed in any
   other colour kept a blue submenu that looked like it belonged elsewhere.
   The literals stay as fallbacks: this stylesheet still has to work on its own
   before the theme block is inlined. */
.submenu-link:hover {
  background-color: #ffffff;
  color: var(--tp-active-color, #1e40af);
  padding-left: 43px;
}

.submenu-link::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #d1d5db;
  transition: all 0.2s ease;
}

.submenu-link:hover::before {
  background-color: var(--tp-active-border, #3b82f6);
  width: 8px;
  height: 8px;
  left: 18px;
}

.submenu-link.active::before {
  background-color: var(--tp-active-border, #3b82f6);
  width: 8px;
  height: 8px;
  left: 18px;
}

.submenu-link i {
  margin-right: 10px;
  font-size: 0.95rem;
  width: 18px;
  text-align: center;
  color: #6b7280;
}

.submenu-link:hover i {
  color: var(--tp-active-border, #3b82f6);
}

.submenu-link.active {
  background-color: var(--tp-active-bg, #eff6ff);
  color: var(--tp-active-color, #1e40af);
  font-weight: 600;
}

.submenu-link.active i {
  color: var(--tp-active-border, #3b82f6);
}

/* Menu items show pointer cursor by default (for clicking) */
#sortable > li.list-group-item,
.submenu-item {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Links inside menu items show pointer cursor by default */
#sortable > li.list-group-item a,
.submenu-item a,
.menu-toggle {
  cursor: pointer !important;
}

/* Grab cursor when mouse is down (click held) - must override link cursor */
#sortable > li.list-group-item.mousedown-active,
.submenu-item.mousedown-active,
body.mousedown-active #sortable > li.list-group-item,
body.mousedown-active .submenu-item,
body.mousedown-active #sortable > li.list-group-item a,
body.mousedown-active .submenu-item a,
body.mousedown-active .menu-toggle {
  cursor: grab !important;
}

/* Grabbing cursor when actually dragging */
#sortable > li.list-group-item:active,
.submenu-item:active,
body.dragging-menu-item #sortable > li.list-group-item,
body.dragging-menu-item .submenu-item,
body.dragging-menu-item #sortable > li.list-group-item a,
body.dragging-menu-item .submenu-item a,
body.dragging-menu-item .menu-toggle {
  cursor: grabbing !important;
}

/* Buttons and action menus always show pointer cursor */
#sortable > li.list-group-item button,
#sortable > li.list-group-item .page-actions-wrapper,
#sortable > li.list-group-item .page-menu-toggle,
.submenu-item button,
.submenu-item .page-actions-wrapper,
.submenu-item .page-menu-toggle {
  cursor: pointer !important;
}

/* Sortable placeholder styling */
.sort-highlight {
  background-color: #e0e7ff !important;
  border: 2px dashed #6366f1 !important;
  opacity: 0.5;
}

/* Page Actions Menu (Three Dots) */
.page-actions-wrapper {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 32px;
  display: flex;
  justify-content: center;
}

/* Ensure menu items have proper z-index stacking */
.menu-item > .page-actions-wrapper {
  z-index: 10;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.submenu-item .page-actions-wrapper {
  z-index: 10;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.page-menu-toggle {
  opacity: 0;
  transition: opacity 0.2s ease;
  background: transparent !important;
  border: none !important;
  color: #6b7280 !important;
  padding: 0.25rem 0.5rem !important;
}

.list-group-item:hover .page-menu-toggle,
.submenu-item:hover .page-menu-toggle {
  opacity: 1;
}

.page-menu-toggle:hover {
  background-color: #f3f4f6 !important;
  color: #374151 !important;
}

.page-menu-toggle i {
  font-size: 1rem;
}

.page-actions-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 140px;
  z-index: 99999 !important;
  overflow: hidden;
  animation: slideDownMenu 0.2s ease;
  backdrop-filter: none;
  isolation: isolate;
  transform: translateZ(0);
  will-change: transform;
}

.page-actions-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  z-index: -1;
  border-radius: 6px;
}

/* Higher z-index for submenu items to appear above parent menu */
.submenu-item .page-actions-menu {
  z-index: 99999 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
  isolation: isolate;
  transform: translateZ(0);
  will-change: transform;
}

.menu-item > .page-actions-menu {
  z-index: 99999 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
  isolation: isolate;
  transform: translateZ(0);
  will-change: transform;
}

/* Ensure menu toggle has relative positioning for absolute children */
.menu-toggle {
  position: relative;
}

@keyframes slideDownMenu {
  from {
    opacity: 1;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-action-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.625rem 1rem;
  border: none;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #374151;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.875rem;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}

.page-action-item:hover {
  background-color: #f3f4f6 !important;
  color: #111827;
}

.page-action-item i {
  font-size: 0.9rem;
  width: 18px;
  text-align: center;
}

.page-action-item.deletePage:hover {
  background-color: #fee2e2;
  color: #dc2626;
}

.page-action-item.deletePage:hover i {
  color: #dc2626;
}

/* Add Page Button */
#sidebar-wrapper .btn-default {
  background: #3b82f6;
  color: white;
  border: none;
  font-weight: 500;
  padding: 0.625rem 1rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
  margin: 0.5rem;
  width: 88%
}

#sidebar-wrapper .btn-default:hover {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
  color: white;
}

/* Float the sidebar for mobile */
@media (max-width: 768px) {
  #sidebar-wrapper {
    position: fixed;
    z-index: 1000;
    height: 100%;
    /* Fully off-canvas: the sidebar is 280px wide (+shadow), so -250px
       left a visible strip overlapping the content on phones. */
    left: -290px;
    transition: all 0.3s ease;
  }

  #sidebar-wrapper.show {
    left: 0;
  }

  #menu-toggle {
    display: block;
    margin-left: 20px;
  }
}

.backDashboard{
    background-color: #f0f0f5 !important;
}
.borderDashboard{
    border: 1px solid #dce1e5 !important;
}



/* Build marker at the foot of the menu.
   Deliberately not .menu-text: that class is display:inline, so alignment and
   padding on the container were silently ignored and the version rendered as
   loose text against the left edge. */
#sidebar-wrapper .sidebar-version {
  display: block;
  /* Centered so it reads as one piece with the authorship block below it. */
  text-align: center;
  padding: 0 1.1rem 0.65rem;
  line-height: 1;
}
#sidebar-wrapper.collapsed .sidebar-version {
  display: none;
}

/* Authorship at the foot of the menu.
   The brand orange (#f98d00) fails contrast on the white sidebar, so the name
   wears its darkened reading tone and the full-strength gradient lives only in
   the decorative rule above it. */
#sidebar-wrapper .sidebar-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 1.1rem 1.25rem;
  text-align: center;
}
#sidebar-wrapper .sidebar-credit-rule {
  width: 44px;
  height: 2px;
  border-radius: 2px;
  margin-bottom: 5px;
  background: linear-gradient(135deg, #f98d00 0%, #ff6b00 50%, #7c3aed 100%);
}
#sidebar-wrapper .sidebar-credit-by {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9aa1ac;
}
#sidebar-wrapper .sidebar-credit-brand {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #a35c00;
}
#sidebar-wrapper .sidebar-credit-legal {
  font-size: 10px;
  color: #9aa1ac;
}
#sidebar-wrapper.collapsed .sidebar-credit {
  display: none;
}


/*=============================================
COLLAPSED — an icon rail, not a squeezed menu
===============================================
It goes at the END of the sheet on purpose. Sitting near the top, as it did,
this block could only ever change what the rules below it did not set: it
managed to hide the labels and never managed to touch the padding that was
pushing every icon off centre.

At 80px every expanded rule kept applying and not one of them fits. Measured on
the real panel, in a rail whose centre is 40px:

  · the brand's <img> is capped at 170px and nothing told it to shrink, so the
    wordmark was clipped mid-letter — it reached x=176 of an 80px rail,
  · level-1 icons sat centred at 29: the link keeps its 20px left and 50px
    right padding, and the 50px is there only to make room for the ⋮ menu,
  · submenu icons sat centred at 52, because the sub-link keeps a 40px indent
    and its bullet — a second column of marks, 23px from the first.

A rail has ONE line. What follows puts every mark on it and hides what cannot
be used at this width. All of it is scoped to `.collapsed`, so the expanded
menu is untouched.
=============================================*/
#sidebar-wrapper.collapsed {
  width: 80px;
}

/* The label leaves the screen, NOT the accessibility tree: `display:none` took
   the name away from a screen reader too, and an icon on its own says nothing.
   The tooltip that shows it on hover is set from this same text in
   dashboard.js, so the name has one source. */
#sidebar-wrapper.collapsed .menu-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A wordmark cannot survive 80px. The symbol chosen in Apariencia identifies
   the panel here — that is what it is for. */
#sidebar-wrapper.collapsed .sidebar-heading {
  padding: 1.15rem 0;
}

#sidebar-wrapper.collapsed .sidebar-heading img {
  display: none;
}

#sidebar-wrapper.collapsed .sidebar-heading i {
  margin: 0;
  font-size: 1.6rem;
}

/* One vertical line for every row, level 1 and submenu alike. */
#sidebar-wrapper.collapsed .list-group-item {
  margin-right: 0;
}

#sidebar-wrapper.collapsed a.bg-transparent,
#sidebar-wrapper.collapsed .menu-toggle,
#sidebar-wrapper.collapsed .submenu-link {
  justify-content: center;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 0;
  padding-right: 0;
  min-height: 48px;
}

#sidebar-wrapper.collapsed a.bg-transparent i,
#sidebar-wrapper.collapsed .menu-toggle i:first-of-type,
#sidebar-wrapper.collapsed .submenu-link i {
  margin: 0;
  width: auto;
}

/* The active row keeps the theme's left bar; the same 3px on the right so its
   icon stays on the line instead of leaning off it. */
#sidebar-wrapper.collapsed a.bg-transparent.active {
  padding-left: 0;
  padding-right: 3px;
}

/* A submenu at this width is a group of icons, not an indented list: no
   bullet, no indent, no rule down the side. Its tint alone says they belong
   together. */
#sidebar-wrapper.collapsed .submenu {
  border-left: 0;
  margin: 0;
  padding: 4px 0;
}

#sidebar-wrapper.collapsed .submenu-link::before {
  display: none;
}

#sidebar-wrapper.collapsed .submenu-link:hover {
  padding-left: 0;
}

/* Neither can be used in a rail — and the ⋮ is what forced the 50px of right
   padding that pushed every icon off centre in the first place. */
#sidebar-wrapper.collapsed .page-actions-wrapper,
#sidebar-wrapper.collapsed .menu-arrow {
  display: none;
}