/* ==========================================================================
   topbar-admin.css
   Reskin visual del topAdmin.php existente — NO modifica el HTML ni el PHP.
   Aditivo: eliminar este archivo revierte al aspecto anterior de AdminLTE.
   Depende de: tokens-brand.css, tokens-admin.css (cargados antes en header.php).
   ========================================================================== */


/* ── 1. Ocultar versión móvil legacy (flat list de ~30 links sin agrupar) ──
   El drawer responsivo se implementará en el proyecto de limpieza (Fase 3).   */
#versionMovil {
  display: none !important;
}


/* ── 2. Contenedor del header ── */
.main-header-admin {
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 1px 6px rgba(0,0,0,.14);
}

/* AdminLTE añade margin-left al .content-wrapper para el sidebar.
   El sticky solo funciona si el header no queda dentro del wrapper.
   Sin tocar PHP, forzamos que el header salga del flujo del sidebar. */
.main-header-admin + .wrapper,
.main-header-admin ~ .wrapper { margin-top: 0; }


/* ── 3. Navbar desktop ── */
#versionOrdenador .navbar-static-top {
  background: var(--brand-500) !important;
  min-height: var(--shell-topbar-h);
  height: var(--shell-topbar-h);
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

/* Hacemos el menú full-width en vez de float:right de AdminLTE */
#versionOrdenador .navbar-custom-menu {
  float: none !important;
  display: flex !important;
  align-items: center;
  height: var(--shell-topbar-h);
  padding: 0 var(--sp-3);
}

#versionOrdenador .navbar-custom-menu > .nav.navbar-nav {
  display: flex !important;
  align-items: center;
  float: none !important;
  width: 100%;
  height: var(--shell-topbar-h);
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
  padding: 0;
}

/* Logout a la derecha del todo en escritorio (el JS lo mueve al principio del <ul>
   para el drawer móvil, así que aquí lo recolocamos visualmente al final con order). */
#versionOrdenador .nav.navbar-nav > li.ta-logout { order: 999; margin-left: auto; }

/* Rueda de opciones ("cosas mías": Mi menú y lo que se le añada). Va pegada a la
   izquierda de Cerrar sesión, así que es ella la que se lleva el margen automático
   que empuja las dos a la derecha; el JS del renderer le quita entonces el margen al
   logout con .ta-logout--junto, para que no quede un hueco entre los dos. */
#versionOrdenador .nav.navbar-nav > li.ta-opciones { order: 998; margin-left: auto; }

/* El circulo con la inicial de quien esta dentro, en vez del engranaje. Dice con que
   sesion estas y que lo de dentro es de tu cuenta (tu menu, tu contrasena). */
#versionOrdenador .ta-avatar,
#versionMovil .ta-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
#versionOrdenador .ta-opciones:hover .ta-avatar,
#versionOrdenador .ta-opciones.open .ta-avatar { background: rgba(255, 255, 255, 0.2); }
#versionOrdenador .nav.navbar-nav > li.ta-logout--junto { margin-left: 0; }
/* La palabra "Opciones" solo en el drawer: un engranaje suelto ahí no dice nada */
#versionOrdenador .ta-solo-movil { display: none; }


/* ── 4. Links ── */
#versionOrdenador .nav.navbar-nav > li > a,
#versionOrdenador .nav.navbar-nav > li > a.whitelink {
  color: rgba(255,255,255,.82) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  font-family: var(--font-system) !important;
  padding: 5px 10px !important;
  line-height: 1.4 !important;
  height: auto !important;
  border-radius: 5px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  background: transparent !important;
  border-bottom: 2px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}

#versionOrdenador .nav.navbar-nav > li > a:hover,
#versionOrdenador .nav.navbar-nav > li > a.whitelink:hover,
#versionOrdenador .nav.navbar-nav > li.open > a {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}

/* Sección activa — clase añadida por JS según URL */
#versionOrdenador .nav.navbar-nav > li.topbar-active > a,
#versionOrdenador .nav.navbar-nav > li.topbar-active > a.whitelink {
  color: #fff !important;
  font-weight: 700 !important;
  border-bottom: 2.5px solid rgba(255,255,255,.85) !important;
  padding-bottom: 2.5px !important;
  background: transparent !important;
}

/* Primer item "ADMIN" — tiene más peso visual */
#versionOrdenador .nav.navbar-nav > li:first-child > a {
  font-weight: 700 !important;
  color: #fff !important;
}


/* ── 5. Dropdowns ── */
#versionOrdenador .dropdown-menu {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
  min-width: 210px;
  padding: 4px 0 !important;
  margin-top: 2px !important;
}

#versionOrdenador .dropdown-menu > li > a {
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 7px 14px !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  border-radius: 0 !important;
  background: transparent !important;
}

#versionOrdenador .dropdown-menu > li > a:hover {
  background: var(--brand-050) !important;
  color: var(--brand-900) !important;
}

#versionOrdenador .dropdown-menu > li.divider {
  background-color: var(--border) !important;
  margin: 4px 0 !important;
  height: 1px;
}


/* ── 5b. Sub-desplegables (un desplegable dentro de un desplegable) ──
   Bootstrap 3 quitó `.dropdown-submenu`, así que se pinta aquí entera.

   EN ESCRITORIO: flyout que se abre al lado al pasar por encima. Sin JS a propósito
   — el hover no cierra el desplegable padre, que lo controla la clase `.open` que le
   pone Bootstrap. Lo único que sí necesita JS es voltearlo a la izquierda cuando no
   cabe a la derecha de la pantalla (`.ta-submenu-izq`, lo pone el renderer).

   EN MÓVIL se ve plano: ver el bloque del final del archivo. */
#versionOrdenador .dropdown-submenu {
  position: relative;
}

#versionOrdenador .dropdown-submenu > a.ta-subgrupo {
  display: block;
  padding: 6px 26px 6px 14px;
  color: var(--ink) !important;
  font-size: 14px;
  cursor: default;
  position: relative;
  white-space: nowrap;
}

/* La flechita que dice "esto tiene más dentro" */
#versionOrdenador .dropdown-submenu > a.ta-subgrupo::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 11px;
  margin-top: -4px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid var(--ink-soft, #8a949c);
}

#versionOrdenador .dropdown-submenu > a.ta-subgrupo:hover {
  background: var(--brand-050) !important;
}

#versionOrdenador .dropdown-submenu > .dropdown-menu {
  display: none;
  top: -6px;
  left: 100%;
  margin-left: 1px;
}

#versionOrdenador .dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

/* Cuando no cabe a la derecha, se abre hacia el otro lado */
#versionOrdenador .dropdown-submenu.ta-submenu-izq > .dropdown-menu {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 1px;
}


/* ── 6. Botón Victor (acción especial dentro del nav) ── */
#versionOrdenador .nav.navbar-nav > li > a.btn-victor,
#versionOrdenador .nav.navbar-nav > li > a.btn.btn-victor,
#versionOrdenador .nav.navbar-nav > li > a.btn-admin--victor {
  background: var(--btn-victor) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 5px !important;
  padding: 4px 12px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  line-height: 1.4 !important;
}

#versionOrdenador .nav.navbar-nav > li > a.btn-victor:hover,
#versionOrdenador .nav.navbar-nav > li > a.btn-admin--victor:hover {
  background: var(--btn-victor-hover) !important;
  color: #fff !important;
}


/* ── 7. Toggle scope Todos / Micappital ── */
#versionOrdenador .nav.navbar-nav > li > a.btn-admin--scope {
  background: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.9) !important;
  border: 1.5px solid rgba(255,255,255,.45) !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-bottom: 1.5px solid rgba(255,255,255,.45) !important;
  gap: 5px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

#versionOrdenador .nav.navbar-nav > li > a.btn-admin--scope:hover {
  background: rgba(255,255,255,.28) !important;
  color: #fff !important;
}

/* Estado activo: "Solo Micappital" */
#versionOrdenador .nav.navbar-nav > li > a.btn-admin--scope.btn-admin--scope-on {
  background: #fff !important;
  color: var(--brand-700) !important;
  border-color: transparent !important;
}

#versionOrdenador .nav.navbar-nav > li > a.btn-admin--scope.btn-admin--scope-on:hover {
  background: rgba(255,255,255,.88) !important;
}


/* ── 8. Badges de notificación ── */
#versionOrdenador .label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 17px !important;
  width: 17px !important;
  min-width: unset !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  box-sizing: content-box !important;
  vertical-align: middle;
  margin-left: -2px !important;
}

#versionOrdenador .label-danger  { background: #c82010 !important; color: #fff !important; }
#versionOrdenador .label-warning { background: #F59E0B !important; color: #fff !important; }

/* Badge con color inline (ej. tickets Javo — style="background:#9F38A2") — se mantiene */


/* ── 8. Empujar el contenido por debajo del topbar sticky ── */
.content-wrapper,
.wrapper > .content-wrapper {
  padding-top: 0 !important;
}

/* AdminLTE pone padding: 15px 15px 0 en .content-header, sin padding inferior.
   Lo completamos para tener espacio de scroll tras la paginación. */
.content-header {
  padding-bottom: 15px !important;
}


/* ==========================================================================
   9. MÓVIL — drawer lateral (≤768px)
   Reutilizamos #versionOrdenador (menú agrupado) como panel deslizante con
   hamburguesa. Los grupos (dropdowns) se muestran expandidos en acordeón.
   El #versionMovil legacy sigue oculto (regla 1). La barra móvil y el overlay
   se inyectan en topAdmin.php y están ocultos en escritorio.
   ========================================================================== */
.ta-mobile-bar,
.ta-overlay { display: none; }

@media (max-width: 768px) {

  /* Reactivar el nav de escritorio (micappital.css lo oculta bajo 414px) */
  #versionOrdenador { display: block !important; }

  /* Barra superior móvil: logo + hamburguesa */
  .ta-mobile-bar {
    display: flex; align-items: center; gap: 12px;
    height: var(--shell-topbar-h); background: var(--brand-500);
    padding: 0 14px; position: sticky; top: 0; z-index: 1031;
  }
  .ta-mobile-logo { flex: 1; color: #fff; font-weight: 800; font-size: 16px; font-family: var(--font-brand, var(--font-system)); text-decoration: none; }
  a.ta-mobile-logo:hover, a.ta-mobile-logo:focus { color: #fff; opacity: .9; }
  /* Accesos rápidos a la izquierda de la hamburguesa (buscador + admin seguros) */
  .ta-quickaccess { color: #fff; font-size: 18px; line-height: 1; padding: 6px 8px; text-decoration: none; cursor: pointer; }
  .ta-quickaccess:hover, .ta-quickaccess:focus { color: #fff; opacity: .85; }
  .ta-burger { background: transparent; border: none; color: #fff; font-size: 20px; line-height: 1; padding: 6px 8px; cursor: pointer; }

  /* La barra teal de escritorio se colapsa; solo actúa de contenedor.
     position:static + z-index:auto anulan el contexto de apilamiento que crea
     Bootstrap (.navbar-static-top{z-index:1000}); si no, el drawer (1040) queda
     atrapado por debajo del overlay (1035). */
  #versionOrdenador .navbar-static-top {
    min-height: 0 !important; height: auto !important;
    background: transparent !important; box-shadow: none !important;
    position: static !important; z-index: auto !important;
  }

  /* El menú se convierte en panel lateral deslizante (cerrado por defecto) */
  #versionOrdenador .navbar-custom-menu {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 82%; max-width: 320px;
    background: #fff; z-index: 1040;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
    display: block !important; height: auto !important; padding: 8px 0 !important;
    box-shadow: 2px 0 16px rgba(0,0,0,.18);
  }
  #versionOrdenador.ta-open .navbar-custom-menu { transform: translateX(0); }

  #versionOrdenador .navbar-custom-menu > .nav.navbar-nav {
    display: block !important; float: none !important;
    width: 100% !important; height: auto !important;
    flex-wrap: wrap; gap: 0; padding: 0; margin: 0;
  }

  /* Items a fila completa, texto oscuro sobre panel blanco */
  #versionOrdenador .nav.navbar-nav > li { display: block; width: 100%; float: none; }
  #versionOrdenador .nav.navbar-nav > li > a,
  #versionOrdenador .nav.navbar-nav > li > a.whitelink {
    color: var(--ink) !important; font-weight: 500 !important;
    display: flex !important; width: 100%;
    padding: 11px 16px !important; border-radius: 0 !important;
    border-bottom: none !important;
  }
  #versionOrdenador .nav.navbar-nav > li:first-child > a { color: var(--ink) !important; }
  #versionOrdenador .nav.navbar-nav > li > a:hover,
  #versionOrdenador .nav.navbar-nav > li > a.whitelink:hover,
  #versionOrdenador .nav.navbar-nav > li.open > a {
    background: var(--brand-050) !important; color: var(--brand-900) !important;
  }
  #versionOrdenador .nav.navbar-nav > li.topbar-active > a,
  #versionOrdenador .nav.navbar-nav > li.topbar-active > a.whitelink {
    background: var(--brand-050) !important; color: var(--brand-900) !important;
    font-weight: 700 !important;
    border-bottom: none !important;
    border-left: 3px solid var(--brand-500);
    padding-left: 13px !important;
  }

  /* Accesos rápidos (Admin, Admin Seguros, Buscador, Mails) en una fila con
     inline-block (así es como funcionaba). Los <li> se marcan por JS con .ta-quick.
     El logout (.ta-logout) se mueve por JS a esta fila y flota a la derecha. */
  #versionOrdenador .nav.navbar-nav > li.ta-quick {
    display: inline-block; width: auto; float: none; vertical-align: top;
  }
  #versionOrdenador .nav.navbar-nav > li.ta-quick > a {
    display: inline-flex !important; width: auto !important;
    align-items: center;
  }
  /* Logout flotado a la derecha, misma altura de fila que los accesos */
  #versionOrdenador .nav.navbar-nav > li.ta-logout { float: right; margin: 0; }
  #versionOrdenador .nav.navbar-nav > li.ta-logout > a { align-items: center; }
  /* Aquí la rueda de opciones es una fila normal más, con su palabra al lado */
  #versionOrdenador .nav.navbar-nav > li.ta-opciones { margin-left: 0; }
  #versionOrdenador .ta-solo-movil { display: inline; }
  /* El resto de opciones, a línea completa por debajo (limpian el float del logout) */
  #versionOrdenador .nav.navbar-nav > li:not(.ta-quick) { clear: both; }

  /* Dropdowns como acordeón: colapsados por defecto, en línea (no flotantes) */
  #versionOrdenador .dropdown-menu {
    position: static !important; float: none !important; display: none !important;
    min-width: 0 !important; margin: 0 !important; padding: 0 !important;
    border: none !important; border-radius: 0 !important; box-shadow: none !important;
    background: var(--surface) !important;
  }
  #versionOrdenador .dropdown.ta-expanded > .dropdown-menu { display: block !important; }

  #versionOrdenador .dropdown > a.dropdown-toggle {
    font-size: 13px !important; font-weight: 700 !important; color: var(--muted) !important;
    text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
  }
  /* Flecha a la derecha que rota al desplegar */
  #versionOrdenador .dropdown > a.dropdown-toggle::after {
    content: "\f078"; font-family: FontAwesome; font-size: 11px;
    margin-left: auto; color: var(--muted);
    transition: transform .2s ease;
  }
  #versionOrdenador .dropdown.ta-expanded > a.dropdown-toggle::after { transform: rotate(180deg); }

  #versionOrdenador .dropdown-menu > li > a {
    color: var(--ink) !important;
    padding: 9px 16px 9px 32px !important; font-size: 14px !important;
  }
  #versionOrdenador .dropdown-menu > li > a:hover { background: var(--brand-050) !important; color: var(--brand-900) !important; }
  #versionOrdenador .dropdown-menu > li.divider { display: none !important; }
  #versionOrdenador .caret { display: none !important; }

  /* Sub-desplegables: aquí se ven PLANOS. El flyout del escritorio no vale en una
     columna estrecha (un acordeón dentro de otro acordeón no se entiende), así que el
     mismo HTML se pinta como una sección con nombre: el título hace de cabecera y sus
     entradas quedan debajo, indentadas y entre separadores. */
  #versionOrdenador .dropdown-submenu > .dropdown-menu {
    display: block !important;
    position: static !important;
    float: none; width: auto;
    margin: 0 !important; padding: 0 !important;
    border: none !important; box-shadow: none !important;
    background: transparent !important;
    min-width: 0;
  }
  #versionOrdenador .dropdown-submenu > a.ta-subgrupo {
    padding: 10px 16px 4px 32px !important;
    font-size: 11.5px !important;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 700;
    color: var(--ink-soft, #8a949c) !important;
    border-top: 1px solid var(--border);
    margin-top: 4px;
  }
  #versionOrdenador .dropdown-submenu > a.ta-subgrupo::after { display: none; }
  /* Sus entradas, un poco más adentro que las del desplegable padre */
  #versionOrdenador .dropdown-submenu > .dropdown-menu > li > a {
    padding-left: 44px !important;
  }
  /* El último bloque cierra con su línea, para que no se pegue a lo de abajo */
  #versionOrdenador .dropdown-submenu:last-child > .dropdown-menu {
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 4px !important;
  }

  /* Botón Victor dentro del drawer */
  #versionOrdenador .nav.navbar-nav > li > a.btn-admin--victor,
  #versionOrdenador .nav.navbar-nav > li > a.btn-victor {
    margin: 8px 16px !important; width: auto; justify-content: center;
  }

  /* Overlay para cerrar tocando fuera */
  .ta-overlay {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,.4); z-index: 1035;
    opacity: 0; visibility: hidden; transition: opacity .25s ease;
  }
  #versionOrdenador.ta-open .ta-overlay { opacity: 1; visibility: visible; }

  /* El header es sticky (en flujo): no hace falta el padding-top de 116px
     que micappital.css metía para la barra fija antigua */
  #contenidoMovilAdmin { padding-top: 0 !important; }
}