/* OrbeStudiosHQ: reskin de ox_inventory estilo "Origen" (paneles de cristal oscuro, slots redondeados, acento del color principal).
   Solo sobrescribe estilos de index.css; borrar este archivo y su <link> en index.html lo deja como el original. */
:root {
  /* Color principal en RGB. Es el color por defecto; cada jugador puede cambiarlo con el selector
     del inventario (orbestudios-theme.js), que sobrescribe estas cuatro variables. */
  --orbe-rgb: 139, 26, 43;
  --orbe-hi-rgb: 179, 38, 60;
  --orbe-dark-rgb: 74, 11, 20;
  --orbe-light-rgb: 255, 210, 215;
  --orbe-accent: rgb(var(--orbe-rgb));
  --orbe-accent-hi: rgb(var(--orbe-hi-rgb));
  --orbe-glow: rgba(var(--orbe-rgb), 0.45);
  --orbe-panel: rgba(12, 10, 12, 0.72);
  --orbe-slot: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
  --orbe-line: rgba(255, 255, 255, 0.08);
  --orbe-text: #ece6e2;
  --orbe-dim: #9d9591;
  --orbe-font: "Montserrat", "Roboto", sans-serif;
}

p, .app-wrapper, .tooltip-wrapper, .inventory-slot-label-text,
.inventory-control .inventory-control-input, .inventory-control .inventory-control-button {
  font-family: var(--orbe-font) !important;
}

/* Fondo oscurecido con viñeta cuando el inventario está abierto */
.inventory-wrapper {
  gap: 28px;
  background: radial-gradient(ellipse at center, rgba(var(--orbe-dark-rgb), 0.25) 0%, rgba(0, 0, 0, 0.82) 100%);
}

/* Paneles de inventario */
.inventory-grid-wrapper {
  gap: 10px;
  padding: 16px 16px 18px;
  background: var(--orbe-panel);
  border: 1px solid var(--orbe-line);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.inventory-grid-header-wrapper {
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--orbe-line);
  position: relative;
}
.inventory-grid-header-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: var(--orbe-accent-hi);
  box-shadow: 0 0 8px var(--orbe-glow);
}
.inventory-grid-header-wrapper p {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orbe-text);
}
.inventory-grid-header-wrapper p + p {
  font-weight: 500;
  color: var(--orbe-dim);
  letter-spacing: 0.02em;
}

.inventory-grid-container {
  gap: 6px;
}

/* Slots */
.inventory-slot, .item-notification-item-box, .hotbar-item-slot {
  background-color: rgba(255, 255, 255, 0.025);
  background-image: var(--orbe-slot);
  border: 1px solid var(--orbe-line);
  border-radius: 9px;
  color: var(--orbe-text);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.inventory-slot:hover {
  border-color: rgba(var(--orbe-hi-rgb), 0.7);
  background-color: rgba(var(--orbe-rgb), 0.14);
  box-shadow: 0 0 0 1px rgba(var(--orbe-hi-rgb), 0.25), 0 0 14px var(--orbe-glow);
}

.inventory-slot-label-box {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
  border-top: none;
  border-radius: 0 0 9px 9px;
}
.inventory-slot-label-text {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--orbe-text);
}

.inventory-slot-number {
  color: #fff;
  background: var(--orbe-accent);
  border-radius: 0 0 7px 0;
  font-weight: 700;
  font-size: 11px;
  height: auto;
  padding: 2px 6px;
}

.item-slot-info-wrapper p, .item-slot-wrapper p {
  font-size: 11px;
  font-weight: 600;
  color: var(--orbe-dim);
}

.durability-bar {
  height: 3px;
  margin: 0 6px 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.55);
}
.weight-bar {
  height: 5px;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
}

/* Columna central: cantidad + botones */
.inventory-control .inventory-control-input,
.inventory-control .inventory-control-button {
  background: var(--orbe-panel);
  border: 1px solid var(--orbe-line);
  border-radius: 10px;
  color: var(--orbe-text);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.inventory-control .inventory-control-input:focus-within {
  background: rgba(20, 10, 12, 0.9);
  border-color: var(--orbe-accent-hi);
}
.inventory-control .inventory-control-button:hover {
  background: linear-gradient(135deg, var(--orbe-accent-hi), var(--orbe-accent));
  border-color: transparent;
  box-shadow: 0 0 14px var(--orbe-glow);
}

/* Hotbar */
.hotbar-container {
  gap: 6px;
  bottom: 2.5vh;
}

/* Tooltip y menú contextual */
.tooltip-wrapper, .context-menu-list, .useful-controls-dialog {
  background: rgba(14, 11, 13, 0.94);
  border: 1px solid var(--orbe-line);
  border-radius: 10px;
  color: var(--orbe-text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}
.tooltip-header-wrapper {
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--orbe-line);
}
.tooltip-header-wrapper p {
  font-weight: 700;
}
.tooltip-wrapper p {
  color: var(--orbe-dim);
}
.context-menu-item {
  color: var(--orbe-text);
  border-radius: 7px;
}
.context-menu-item:hover, .useful-controls-dialog-close:hover {
  background: rgba(var(--orbe-rgb), 0.35);
}
.divider {
  background: var(--orbe-line);
}

.useful-controls-button {
  background: var(--orbe-panel) !important;
  border: 1px solid var(--orbe-line) !important;
  border-radius: 12px !important;
}
.useful-controls-button:hover {
  background: var(--orbe-accent) !important;
}

.item-notification-action-box {
  background: var(--orbe-accent);
  color: #fff;
  border-radius: 7px 7px 0 0;
}

/* ---------- Disposición: columna estrecha (22%) a la derecha de la pantalla, pegada abajo ----------
   Arriba el inventario del jugador, en medio cantidad/botones, abajo el suelo/maletero/tienda. */
.inventory-wrapper {
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 10px;
  box-sizing: border-box;
  width: 22vw;
  margin-left: auto;
  padding: 2vh 1.5vw 2vh 0;
  background: none;
}

.inventory-wrapper > .inventory-grid-wrapper:first-child { order: 1; }
.inventory-wrapper > .inventory-control { order: 2; }
.inventory-wrapper > .inventory-grid-wrapper:last-child { order: 3; }

.inventory-grid-wrapper {
  padding: 10px 12px 12px;
  gap: 8px;
}

.inventory-grid-container {
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: calc((22vw - 1.5vw - 24px - 24px) / 5);
  gap: 6px;
  height: auto;
  max-height: 33vh;
}

/* La parte de abajo (suelo) más baja que el inventario */
.inventory-wrapper > .inventory-grid-wrapper:last-child .inventory-grid-container {
  max-height: 22vh;
}

.inventory-slot {
  background-size: 70%;
}

/* Cantidad y botones en una fila */
.inventory-control .inventory-control-wrapper {
  flex-direction: row;
  gap: 8px;
}
.inventory-control,
.inventory-control .inventory-control-wrapper {
  width: 100%;
}
.inventory-control .inventory-control-input {
  width: 30%;
  padding: 10px 8px;
}
.inventory-control .inventory-control-button {
  flex: 1;
  padding: 10px 6px;
  font-size: 12px;
}

/* ---------- Botones (cantidad, usar, dar, cerrar) en columna a la izquierda del panel ---------- */
.inventory-wrapper {
  display: grid;
  grid-template-columns: auto calc(22vw - 1.5vw);
  grid-template-rows: auto auto;
  align-content: end;
  justify-content: end;
  column-gap: 10px;
  row-gap: 10px;
  width: auto;
}
.inventory-wrapper > .inventory-grid-wrapper:first-child { grid-column: 2; grid-row: 1; }
.inventory-wrapper > .inventory-control { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: auto; }
.inventory-wrapper > .inventory-grid-wrapper:last-child { grid-column: 2; grid-row: 2; }

.inventory-control .inventory-control-wrapper {
  flex-direction: column;
  width: auto;
}
.inventory-control .inventory-control-input,
.inventory-control .inventory-control-button {
  width: 4.5vw;
  min-width: 76px;
  box-sizing: border-box;
  flex: none;
  padding: 14px 6px;
  font-size: 11px;
}

/* ---------- Logo en la columna de botones, entre "Usar" y "Dar" ----------
   El logo va incrustado aquí abajo (data:...). Para cambiarlo por un archivo: pon tu logo.png en web/build/logo/
   y sustituye todo el url("data:...") por url("../logo/logo.png"). Pásamelo y lo hago yo. */
.inventory-control-wrapper > .inventory-control-input { order: 1; }
.inventory-control-wrapper > .inventory-control-button:nth-of-type(1) { order: 2; }
.inventory-control-wrapper::after {
  content: "";
  order: 3;
  width: 4.5vw;
  min-width: 76px;
  aspect-ratio: 1;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48ZyBmb250LWZhbWlseT0iTW9udHNlcnJhdCwgQXJpYWwgQmxhY2ssIHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSI4MDAiIHRleHQtYW5jaG9yPSJtaWRkbGUiPjx0ZXh0IHg9IjEwMCIgeT0iOTIiIGZvbnQtc2l6ZT0iNDAiIGxldHRlci1zcGFjaW5nPSI0IiBmaWxsPSIjZWNlNmUyIiBzdHJva2U9IiMxYzA0MDciIHN0cm9rZS13aWR0aD0iMS41Ij5PUkJFPC90ZXh0Pjx0ZXh0IHg9IjEwMCIgeT0iMTI4IiBmb250LXNpemU9IjIyIiBsZXR0ZXItc3BhY2luZz0iMyIgZmlsbD0iI2VjZTZlMiIgc3Ryb2tlPSIjMWMwNDA3IiBzdHJva2Utd2lkdGg9IjEiPlNUVURJT1M8L3RleHQ+PHRleHQgeD0iMTAwIiB5PSIxNjAiIGZvbnQtc2l6ZT0iMjYiIGxldHRlci1zcGFjaW5nPSI2IiBmaWxsPSIjOGIxYTJiIiBzdHJva2U9IiMxYzA0MDciIHN0cm9rZS13aWR0aD0iMS41Ij5IUTwvdGV4dD48L2c+PC9zdmc+") center / contain no-repeat;
  pointer-events: none;
}
.inventory-control-wrapper > .inventory-control-button:nth-of-type(2) { order: 4; }
.inventory-control-wrapper > .inventory-control-button:nth-of-type(n+3) { order: 5; }

/* ---------- Cabecera y barra de peso ----------
   El relleno lo pinta ox_inventory con un color en línea (verde/naranja/rojo); aquí lo sustituimos por el
   degradado del color principal con brillo. Solo se animan width/opacity para que sea barato de pintar. */
.inventory-grid-header-wrapper {
  padding-bottom: 6px;
  border-bottom: none;
}
.inventory-grid-header-wrapper::after { display: none; }
.inventory-grid-header-wrapper p:first-child {
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inventory-grid-header-wrapper p + p {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--orbe-dim);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--orbe-line);
}

.weight-bar {
  position: relative;
  height: 6px;
  margin-bottom: 4px;
  border: none;
  border-radius: 999px;
  background:
    /* marcas al 25 / 50 / 75 % */
    linear-gradient(90deg, transparent calc(25% - 1px), rgba(0, 0, 0, 0.45) calc(25% - 1px), rgba(0, 0, 0, 0.45) 25%, transparent 25%,
                           transparent calc(50% - 1px), rgba(0, 0, 0, 0.45) calc(50% - 1px), rgba(0, 0, 0, 0.45) 50%, transparent 50%,
                           transparent calc(75% - 1px), rgba(0, 0, 0, 0.45) calc(75% - 1px), rgba(0, 0, 0, 0.45) 75%, transparent 75%),
    rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.weight-bar > div {
  position: relative;
  border-radius: inherit;
  background-color: transparent !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, rgb(var(--orbe-dark-rgb)) 0%, var(--orbe-accent) 60%, var(--orbe-accent-hi) 100%);
  box-shadow: 0 0 8px var(--orbe-glow);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* Punto brillante en el extremo del relleno */
.weight-bar > div::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  border-radius: 999px;
  background: rgba(var(--orbe-light-rgb), 0.85);
  filter: blur(2px);
}

/* Durabilidad: conserva el color que indica el estado, pero más fina y pulida */
.durability-bar {
  height: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}
.durability-bar > div {
  border-radius: inherit;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 70%);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .weight-bar > div, .durability-bar > div, .inventory-slot { transition: none !important; }
}

/* ---------- Casillas con fondo transparente (solo el borde fino) ---------- */
.inventory-slot, .item-notification-item-box, .hotbar-item-slot {
  background-color: transparent;
  background-image: none;
}
.inventory-slot:hover {
  background-color: rgba(var(--orbe-rgb), 0.12);
}

/* ---------- Avisos de objeto (recibido / tirado / usado / dado) ----------
   Tarjetas oscuras con la acción arriba en una pastilla del color principal y el nombre abajo. */
.item-notification-container {
  gap: 8px;
  bottom: 14vh;
  padding: 6px 0;
}

.item-notification-item-box {
  flex: none;
  width: 8.6vh;
  height: 10.4vh;
  background-color: rgba(12, 10, 12, 0.82) !important;
  background-size: 52% !important;
  background-position: 50% 52% !important;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: orbe-notify-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.item-notification-item-box .item-slot-wrapper {
  justify-content: space-between;
  padding: 5px;
  box-sizing: border-box;
}

.item-notification-action-box {
  align-self: center;
  width: auto;
  max-width: 100%;
  padding: 1px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orbe-accent-hi), var(--orbe-accent));
  box-shadow: none;
  color: #fff;
  overflow: hidden;
}
.item-notification-action-box p {
  padding: 1px 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.item-notification-item-box .inventory-slot-label-box {
  background: none;
  border-radius: 0;
}
.item-notification-item-box .inventory-slot-label-text {
  display: block;
  padding: 0 2px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--orbe-text);
  text-align: center;
}

@keyframes orbe-notify-in {
  from { opacity: 0; transform: translateY(14px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .item-notification-item-box { animation: none; }
}

/* Sin sombras ni fondos alrededor de los avisos */
.item-notification-container { background: none !important; box-shadow: none !important; }

/* Texto de la acción (equipar, desequipar, usar, añadido…) siempre en blanco */
.item-notification-item-box .item-notification-action-box p {
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

/* ---------- Inventarios llenos: casillas compactas y scroll claro ---------- */
:root {
  --orbe-row: calc((22vw - 1.5vw - 24px - 24px) / 5);   /* alto de una fila de casillas */
}

/* Alto exacto en filas completas (sin filas cortadas a la mitad) */
.inventory-wrapper > .inventory-grid-wrapper:first-child .inventory-grid-container {
  max-height: calc(var(--orbe-row) * 4 + 6px * 3);
}
.inventory-wrapper > .inventory-grid-wrapper:last-child .inventory-grid-container {
  max-height: calc(var(--orbe-row) * 3 + 6px * 2);
}
.inventory-grid-container {
  padding-right: 4px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* Barra de scroll fina del color principal para que se note que hay más objetos */
.inventory-grid-container::-webkit-scrollbar {
  display: block;
  width: 3px;
}
.inventory-grid-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}
.inventory-grid-container::-webkit-scrollbar-thumb {
  background: rgba(var(--orbe-rgb), 0.8);
  border-radius: 999px;
}

/* Dentro de la casilla: sin peso (sale en el tooltip), solo la cantidad, para que no se pise con el número */
.inventory-slot .item-slot-info-wrapper p:first-child { display: none; }
.inventory-slot .item-slot-header-wrapper,
.inventory-slot .item-hotslot-header-wrapper {
  min-width: 0;
}
.inventory-slot .item-slot-info-wrapper {
  padding: 2px 4px;
  min-width: 0;
}
.inventory-slot .item-slot-info-wrapper p {
  font-size: 10px;
  font-weight: 700;
  color: var(--orbe-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
}
.inventory-slot .inventory-slot-label-text {
  font-size: 9px;
  padding: 1px 3px;
}
.inventory-slot .item-slot-price-wrapper p,
.inventory-slot .item-slot-currency-wrapper p {
  font-size: 11px;
}

/* Cabecera: el peso nunca se corta ni empuja el nombre fuera */
.inventory-grid-header-wrapper { gap: 8px; }
.inventory-grid-header-wrapper p:first-child { min-width: 0; flex: 1; white-space: nowrap; }
.inventory-grid-header-wrapper p + p { flex: none; white-space: nowrap; }

/* El tooltip de ox_inventory no muestra el peso, así que vuelve a la casilla:
   cantidad arriba y el peso debajo, pequeño y apagado, alineados a la derecha. */
.inventory-slot .item-slot-info-wrapper {
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 0;
  line-height: 1.15;
}
.inventory-slot .item-slot-info-wrapper p:first-child {
  display: block;
  font-size: 8.5px;
  font-weight: 600;
  color: var(--orbe-dim);
}

/* ---------- Subir el inventario para no tapar el botón de ayuda (abajo a la derecha) ---------- */
.inventory-wrapper {
  padding-bottom: calc(25px + 52px + 16px);
}