/*
 * Pie del sidebar (Generar Ticket, Instalar App, usuario, Mi perfil, Cerrar sesión).
 *
 * Cada acceso lleva su propio acento de color en el ícono y el texto, en
 * negrita, y al pasar el mouse se tiñe la fila y el ícono se rellena. Clases
 * propias (sbp-): el Tailwind compilado no incluye estos colores.
 * Cada ítem define sólo --sbp (color del ícono) y --sbp-tx (color del texto,
 * más oscuro para que se lea bien sobre fondo claro).
 */

.sbp-item {
  --sbp: 100 116 139;
  --sbp-tx: 51 65 85;
  --sbp-ico: 51 65 85;
  position: relative;
  color: rgb(var(--sbp-tx));
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.sbp-item:hover {
  background-color: rgb(var(--sbp) / .10);
}
.sbp-item:active {
  transform: scale(.985);
}
.sbp-item:focus-visible {
  outline: 2px solid rgb(var(--sbp) / .65);
  outline-offset: 1px;
}

/* Una sola nota de color: el azul de marca. Cerrar sesión va en gris y recién
   al pasar el mouse (o el foco) se pone rojo, para avisar que es salir. */
.sbp-ticket,
.sbp-instalar,
.sbp-perfil,
.sbp-clinica  { --sbp: var(--bg-titan-600, 3 83 233); --sbp-tx: 15 23 42; --sbp-ico: var(--tx-titan-800, 30 64 175); }
.sbp-salir    { --sbp: 71 85 105; --sbp-tx: 15 23 42; --sbp-ico: 51 65 85; }
.sbp-salir:hover,
.sbp-salir:focus-visible { --sbp: 225 29 72; --sbp-tx: 136 19 55; --sbp-ico: 159 18 57; }

/* Ícono: pastilla tintada que se rellena con el color pleno al hover. El
   ícono usa un tono más oscuro (--sbp-ico) que la pastilla para que se lea. */
.sbp-chip {
  background-color: rgb(var(--sbp) / .20);
  color: rgb(var(--sbp-ico));
  box-shadow: inset 0 0 0 1px rgb(var(--sbp) / .40);
  transition: background-color .18s ease, color .18s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease;
}
.sbp-item:hover .sbp-chip,
.sbp-item:focus-visible .sbp-chip {
  background-color: rgb(var(--sbp));
  color: #fff;
  box-shadow: 0 2px 8px rgb(var(--sbp) / .35);
  transform: scale(1.08) rotate(-4deg);
}

.sbp-label {
  font-weight: 700;
  letter-spacing: .005em;
}

/* Tarjeta de usuario: avatar con el color de marca y nombre en negrita. */
.sbp-usuario {
  background: linear-gradient(135deg, #fff 0%, rgb(var(--bg-titan-50, 237 245 255)) 100%);
  border-color: rgb(var(--bg-titan-300, 147 197 253));
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.sbp-avatar {
  background: linear-gradient(135deg, rgb(var(--bg-titan-500, 37 99 235)), rgb(var(--bg-titan-700, 29 78 216)));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(15, 23, 42, .18);
}
.sbp-usuario-nombre {
  font-weight: 800;
  color: rgb(var(--tx-titan-900, 15 23 42));
}
.sbp-usuario-rol {
  font-weight: 600;
  color: rgb(var(--tx-titan-800, 30 41 59));
}

/* Modo oscuro: acentos más claros para mantener contraste. */
html[data-theme="dark"] .sbp-ticket,
html[data-theme="dark"] .sbp-instalar,
html[data-theme="dark"] .sbp-perfil,
html[data-theme="dark"] .sbp-clinica  { --sbp: 96 165 250; --sbp-tx: 241 245 249; --sbp-ico: 147 197 253; }
html[data-theme="dark"] .sbp-salir    { --sbp: 148 163 184; --sbp-tx: 241 245 249; --sbp-ico: 203 213 225; }
html[data-theme="dark"] .sbp-salir:hover,
html[data-theme="dark"] .sbp-salir:focus-visible { --sbp: 251 113 133; --sbp-tx: 253 164 175; --sbp-ico: 253 164 175; }
html[data-theme="dark"] .sbp-item:hover .sbp-chip,
html[data-theme="dark"] .sbp-item:focus-visible .sbp-chip {
  color: #0f172a;
}
html[data-theme="dark"] .sbp-usuario {
  background: linear-gradient(135deg, rgb(30 41 59) 0%, rgb(15 23 42) 100%);
  border-color: rgb(51 65 85);
}
html[data-theme="dark"] .sbp-avatar {
  box-shadow: 0 0 0 2px rgb(30 41 59), 0 2px 6px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] .sbp-usuario-nombre { color: #f1f5f9; }
html[data-theme="dark"] .sbp-usuario-rol    { color: #cbd5e1; }

@media (prefers-reduced-motion: reduce) {
  .sbp-item,
  .sbp-chip {
    transition: none;
  }
  .sbp-item:active,
  .sbp-item:hover .sbp-chip,
  .sbp-item:focus-visible .sbp-chip {
    transform: none;
  }
}